CCM NG: PageModelsEditor First parts for UI for managing the containers in a PageModel

git-svn-id: https://svn.libreccm.org/ccm/ccm_ng@5536 8810af33-2d31-482b-a856-94f89814c4df

ccm-core/src/main/java/org/libreccm/pagemodel/ContainerModel.java

@@ -72,7 +72,7 @@ public class ContainerModel implements Serializable {
      */
     @Id
     @Column(name = "CONTAINER_ID")
-    @XmlElement(name = "ocntainer-model-id")
+    @XmlElement(name = "container-model-id")
     private long containerId;
 
     /**

ccm-core/src/main/java/org/libreccm/pagemodel/rs/PageModels.java

@@ -22,6 +22,7 @@ import com.arsdigita.kernel.KernelConfig;
 import org.libreccm.configuration.ConfigurationManager;
 import org.libreccm.core.CoreConstants;
 import org.libreccm.l10n.GlobalizationHelper;
+import org.libreccm.pagemodel.ContainerModel;
 import org.libreccm.pagemodel.PageModel;
 import org.libreccm.pagemodel.PageModelManager;
 import org.libreccm.pagemodel.PageModelRepository;
@@ -47,8 +48,10 @@ import javax.ws.rs.Path;
 import javax.ws.rs.PathParam;
 import javax.ws.rs.Produces;
 import java.util.Date;
+import java.util.List;
 import java.util.Objects;
 import java.util.Optional;
+import java.util.stream.Collectors;
 
 /**
  * Provides RESTful endpoints for retrieving, creating, updating and deleting
@@ -293,6 +296,7 @@ public class PageModels {
 
         return Json
             .createObjectBuilder()
+            .add("containers", mapContainersToJson(pageModel))
             .add("description",
                  globalizationHelper
                      .getValueFromLocalizedString(pageModel.getDescription()))
@@ -312,6 +316,29 @@ public class PageModels {
             .build();
     }
 
+    private JsonArray mapContainersToJson(final PageModel pageModel) {
+
+        final JsonArrayBuilder containers = Json.createArrayBuilder();
+
+        pageModel
+            .getContainers()
+            .stream()
+            .map(this::mapContainerToJson)
+            .forEach(container -> containers.add(container));
+
+        return containers.build();
+    }
+
+    private JsonObject mapContainerToJson(final ContainerModel container) {
+
+        return Json
+            .createObjectBuilder()
+            .add("containerUuid", container.getContainerUuid())
+            .add("key", container.getKey())
+            .add("uuid", container.getUuid())
+            .build();
+    }
+
     /**
      * Check if the {@link PublicationStatus} of the provided PageModel.
      *

ccm-pagemodelseditor/src/main/typescript/ccm-pagemodelseditor/PageModelsEditor.tsx

@@ -1,5 +1,10 @@
 import * as React from "react";
-import {PageModel, PageModelVersion, PublicationStatus} from "./datatypes";
+import {
+    ContainerModel,
+    PageModel,
+    PageModelVersion,
+    PublicationStatus
+} from "./datatypes";
 
 export {
     PageModelEditor,
@@ -291,11 +296,15 @@ class PageModelComponent
                 }}>Edit
                 </button>
                 {this.props.pageModel.publicationStatus === PublicationStatus.NOT_PUBLISHED.toString()
-                && <button onClick={(event) => this.publishPageModel(event)}>Publish</button>
+                && <button
+                    onClick={(event) => this.publishPageModel(event)}>Publish</button>
                 }
                 {this.props.pageModel.publicationStatus === PublicationStatus.NEEDS_UPDATE.toString()
-                && <button onClick={(event) => this.publishPageModel(event)}>Republish</button>
+                && <button
+                    onClick={(event) => this.publishPageModel(event)}>Republish</button>
                 }
+                <ContainerListComponent
+                    containers={this.props.pageModel.containers}/>
             </div>;
         }
     }
@@ -315,7 +324,7 @@ class PageModelComponent
         });
     }
 
-    private getLastModifiedDate():string {
+    private getLastModifiedDate(): string {
 
         if (this.props.pageModel.lastPublished === 0) {
             return "";
@@ -405,11 +414,11 @@ class PageModelComponent
             credentials: "same-origin",
             headers,
             method: "PUT",
-        }
+        };
 
         const url: string = `${this.props.dispatcherPrefix}`
             + `/page-models/${this.props.ccmApplication}/`
-            + `${this.props.pageModel.name}`
+            + `${this.props.pageModel.name}`;
 
         fetch(url, init)
             .then((response: Response) => {
@@ -455,11 +464,11 @@ class PageModelComponent
             credentials: "same-origin",
             headers,
             method: "POST",
-        }
+        };
 
         const url: string = `${this.props.dispatcherPrefix}`
             + `/page-models/${this.props.ccmApplication}/`
-            + `${this.props.pageModel.name}`
+            + `${this.props.pageModel.name}`;
 
         fetch(url, init)
             .then((response: Response) => {
@@ -485,6 +494,30 @@ class PageModelComponent
 
 }
 
+interface ContainerListProps {
+
+    containers: ContainerModel[],
+}
+
+class ContainerListComponent extends React.Component<ContainerListProps, {}> {
+
+    public render(): React.ReactNode {
+        return <div className="containerList">
+            <button>Add container</button>
+            <ul className="containerList">
+                {this.props.containers
+                && this.props.containers.map((container) =>
+                    <li>
+                        <span>{container.key}</span>
+                        <button>Down</button>
+                        <button>Up</button>
+                        <button>Delete</button>
+                    </li>)}
+            </ul>
+        </div>
+    }
+}
+
 // interface PageModelEditorProps {
 //
 // }
@@ -549,8 +582,8 @@ class PageModelEditor
                                         <span>+</span> Create new PageModel
                                     </button>
                                     <PageModelsList
-                                        ccmApplication={this.getCcmApplication()}
-                                        dispatcherPrefix={this.getDispatcherPrefix()}
+                                        ccmApplication={PageModelEditor.getCcmApplication()}
+                                        dispatcherPrefix={PageModelEditor.getDispatcherPrefix()}
                                         pageModels={this.state.pageModels}
                                         selectPageModel={(selectedPageModel: PageModel) => {
                                             this.setState((state: PageModelEditorState) => {
@@ -588,8 +621,8 @@ class PageModelEditor
                     }
                     {this.state.selectedPageModel !== null &&
                     <PageModelComponent
-                        ccmApplication={this.getCcmApplication()}
-                        dispatcherPrefix={this.getDispatcherPrefix()}
+                        ccmApplication={PageModelEditor.getCcmApplication()}
+                        dispatcherPrefix={PageModelEditor.getDispatcherPrefix()}
                         pageModel={this.state.selectedPageModel}
                         reload={() => {
                             this.reload();
@@ -607,6 +640,7 @@ class PageModelEditor
         this.setState({
             ...this.state,
             selectedPageModel: {
+                containers: [],
                 description: "",
                 lastModified: 0,
                 lastPublished: 0,
@@ -627,10 +661,10 @@ class PageModelEditor
         const init: RequestInit = {
             credentials: "same-origin",
             method: "GET",
-        }
+        };
 
-        const url: string = `${this.getDispatcherPrefix()}`
-            + `/page-models/${this.getCcmApplication()}`;
+        const url: string = `${PageModelEditor.getDispatcherPrefix()}`
+            + `/page-models/${PageModelEditor.getCcmApplication()}`;
 
         fetch(url, init)
             .then((response) => {
@@ -682,7 +716,7 @@ class PageModelEditor
     }
 
 
-    private getDispatcherPrefix(): string {
+    private static getDispatcherPrefix(): string {
 
         const dataElem: HTMLElement | null = document
             .querySelector("#page-models-editor.react-data");
@@ -700,7 +734,7 @@ class PageModelEditor
         }
     }
 
-    private getCcmApplication(): string {
+    private static getCcmApplication(): string {
 
         const dataElem: HTMLElement | null = document
             .querySelector("#page-models-editor.react-data");

ccm-pagemodelseditor/src/main/typescript/ccm-pagemodelseditor/datatypes.ts

@@ -1,7 +1,15 @@
-export { PageModel, PageModelVersion, PublicationStatus };
+export { ContainerModel, PageModel, PageModelVersion, PublicationStatus };
+
+interface ContainerModel {
+
+    containerUuid: string;
+    key: string;
+    uuid: string;
+}
 
 interface PageModel {
 
+    containers: ContainerModel[],
     description: string;
     modelUuid: string;
     name: string;