CCM NG: Current status PageModelEditor

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

ccm-bundle-devel-wildfly-web/package-lock.json

@@ -1711,6 +1711,7 @@
                     "requires": {
                         "react": "16.4.0",
                         "react-dom": "16.4.0",
+                        "react-modal": "3.4.5",
                         "react-redux": "5.0.7",
                         "redux": "4.0.0"
                     },
@@ -1866,6 +1867,10 @@
                             "version": "2.0.2",
                             "bundled": true
                         },
+                        "exenv": {
+                            "version": "1.2.2",
+                            "bundled": true
+                        },
                         "fbjs": {
                             "version": "0.8.16",
                             "bundled": true,
@@ -2045,6 +2050,20 @@
                                 "prop-types": "15.6.1"
                             }
                         },
+                        "react-lifecycles-compat": {
+                            "version": "3.0.4",
+                            "bundled": true
+                        },
+                        "react-modal": {
+                            "version": "3.4.5",
+                            "bundled": true,
+                            "requires": {
+                                "exenv": "1.2.2",
+                                "prop-types": "15.6.1",
+                                "react-lifecycles-compat": "3.0.4",
+                                "warning": "3.0.0"
+                            }
+                        },
                         "react-redux": {
                             "version": "5.0.7",
                             "bundled": true,
@@ -2140,6 +2159,13 @@
                             "version": "0.7.18",
                             "bundled": true
                         },
+                        "warning": {
+                            "version": "3.0.0",
+                            "bundled": true,
+                            "requires": {
+                                "loose-envify": "1.3.1"
+                            }
+                        },
                         "whatwg-fetch": {
                             "version": "2.0.4",
                             "bundled": true

ccm-cms-js/package-lock.json

@@ -108,6 +108,7 @@
             "requires": {
                 "react": "16.4.0",
                 "react-dom": "16.4.0",
+                "react-modal": "3.4.5",
                 "react-redux": "5.0.7",
                 "redux": "4.0.0"
             },
@@ -263,6 +264,10 @@
                     "version": "2.0.2",
                     "bundled": true
                 },
+                "exenv": {
+                    "version": "1.2.2",
+                    "bundled": true
+                },
                 "fbjs": {
                     "version": "0.8.16",
                     "bundled": true,
@@ -442,6 +447,20 @@
                         "prop-types": "15.6.1"
                     }
                 },
+                "react-lifecycles-compat": {
+                    "version": "3.0.4",
+                    "bundled": true
+                },
+                "react-modal": {
+                    "version": "3.4.5",
+                    "bundled": true,
+                    "requires": {
+                        "exenv": "1.2.2",
+                        "prop-types": "15.6.1",
+                        "react-lifecycles-compat": "3.0.4",
+                        "warning": "3.0.0"
+                    }
+                },
                 "react-redux": {
                     "version": "5.0.7",
                     "bundled": true,
@@ -537,6 +556,13 @@
                     "version": "0.7.18",
                     "bundled": true
                 },
+                "warning": {
+                    "version": "3.0.0",
+                    "bundled": true,
+                    "requires": {
+                        "loose-envify": "1.3.1"
+                    }
+                },
                 "whatwg-fetch": {
                     "version": "2.0.4",
                     "bundled": true

ccm-pagemodelseditor/package-lock.json

@@ -29,6 +29,15 @@
                 "@types/react": "16.3.14"
             }
         },
+        "@types/react-modal": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.1.2.tgz",
+            "integrity": "sha512-EmzMU61fnQiTe1rajQRgo0ceaTo/TD5qsBCjMgPhp9PWia0HOD2VyDMnNErcVfWq8VBmkBJZoGhFmtQm2COY5g==",
+            "dev": true,
+            "requires": {
+                "@types/react": "16.3.14"
+            }
+        },
         "ansi-regex": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
@@ -204,6 +213,11 @@
             "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=",
             "dev": true
         },
+        "exenv": {
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+            "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
+        },
         "fbjs": {
             "version": "0.8.16",
             "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.16.tgz",
@@ -421,6 +435,22 @@
                 "prop-types": "15.6.1"
             }
         },
+        "react-lifecycles-compat": {
+            "version": "3.0.4",
+            "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+            "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+        },
+        "react-modal": {
+            "version": "3.4.5",
+            "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.4.5.tgz",
+            "integrity": "sha512-fYaGmsvt4z5voC2Bl/9ngIWES4BSRYgGnTljMwuzTuYZ1BBpaZbnXia8xlvj7mF0kg3aPV+5APjZRiMfRG6vyA==",
+            "requires": {
+                "exenv": "1.2.2",
+                "prop-types": "15.6.1",
+                "react-lifecycles-compat": "3.0.4",
+                "warning": "3.0.0"
+            }
+        },
         "react-redux": {
             "version": "5.0.7",
             "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-5.0.7.tgz",
@@ -540,6 +570,14 @@
             "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.18.tgz",
             "integrity": "sha512-LtzwHlVHwFGTptfNSgezHp7WUlwiqb0gA9AALRbKaERfxwJoiX0A73QbTToxteIAuIaFshhgIZfqK8s7clqgnA=="
         },
+        "warning": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+            "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+            "requires": {
+                "loose-envify": "1.3.1"
+            }
+        },
         "whatwg-fetch": {
             "version": "2.0.4",
             "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz",

ccm-pagemodelseditor/package.json

@@ -17,12 +17,14 @@
     "dependencies": {
         "react": "^16.3.2",
         "react-dom": "^16.3.2",
+        "react-modal": "^3.4.5",
         "react-redux": "^5.0.7",
         "redux": "^4.0.0"
     },
     "devDependencies": {
         "@types/react": "^16.3.14",
         "@types/react-dom": "^16.0.5",
+        "@types/react-modal": "^3.1.2",
         "tslint": "^5.10.0",
         "typescript": "^2.8.3"
     }

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

@@ -1,9 +1,10 @@
 import * as React from "react";
+import * as ReactModal from "react-modal";
 import {
     ContainerModel,
     PageModel,
     PageModelVersion,
-    PublicationStatus
+    PublicationStatus,
 } from "./datatypes";
 
 export {
@@ -55,7 +56,7 @@ interface PageModelsListProps {
 
     ccmApplication: string;
     dispatcherPrefix: string;
-    pageModels: PageModel[],
+    pageModels: PageModel[];
     selectPageModel: (selectedPageModel: PageModel) => void;
 }
 
@@ -101,8 +102,8 @@ class PageModelsList
     //                     .catch((error) => {
     //                         this.setState({
     //                             ...this.state,
-    //                             errorMsg: `Failed to retrieve PageModels from `
+    //                             errorMsg: `Failed to retrieve PageModels `
-    //                                 + `${url}: ${error.message}`,
+    //                                 + ` from ${url}: ${error.message}`,
     //                         });
     //                     });
     //             } else {
@@ -128,22 +129,22 @@ class PageModelsList
 
         return <div className="pagemodeleditor pageModelsList">
             {this.props.pageModels.length > 0 &&
-            <ul>
+                <ul>
-                {this.props.pageModels
+                    {this.props.pageModels
-                    .map((pageModel: PageModel, index: number) =>
+                        .map((pageModel: PageModel, index: number) =>
-                        <PageModelListItem
+                            <PageModelListItem
-                            index={index}
+                                index={index}
-                            pageModel={pageModel}
+                                pageModel={pageModel}
-                            selectPageModel={this.props.selectPageModel}/>,
+                                selectPageModel={this.props.selectPageModel} />,
                     )}
-            </ul>
+                </ul>
             }
         </div>;
     }
 }
 
 interface PageModelListItemProps {
-    index: number,
+    index: number;
     pageModel: PageModel;
     selectPageModel: (selectedPageModel: PageModel) => void;
 }
@@ -158,14 +159,14 @@ class PageModelListItem
     public render(): React.ReactNode {
         return <li>
             <a data-pagemodel-id="{this.props.pageModel.pageModelId}"
-               href="#"
+                href="#"
-               onClick={
+                onClick={
-                   (event) => {
+                    (event) => {
-                       event.preventDefault();
+                        event.preventDefault();
-                       // console.log("A PageModel has been selected");
+                        // console.log("A PageModel has been selected");
-                       this.props.selectPageModel(this.props.pageModel);
+                        this.props.selectPageModel(this.props.pageModel);
-                   }
+                    }
-               }>
+                }>
                 {this.props.pageModel.title}
             </a>
         </li>;
@@ -190,7 +191,7 @@ interface PageModelComponentState {
         name: string;
         title: string;
         description: string;
-    }
+    };
 }
 
 class PageModelComponent
@@ -203,14 +204,15 @@ class PageModelComponent
             editMode: this.props.pageModel.pageModelId === 0,
             errorMsg: null,
             form: {
+                description: this.props.pageModel.description,
                 name: this.props.pageModel.name,
                 title: this.props.pageModel.title,
-                description: this.props.pageModel.description
+            },
-            }
         };
 
         this.handleChange = this.handleChange.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
+        this.publishPageModel = this.publishPageModel.bind(this);
     }
 
     public render(): React.ReactNode {
@@ -218,9 +220,9 @@ class PageModelComponent
         if (this.state.editMode) {
             return <div className="bebop-body">
                 {this.state.errorMsg !== null &&
-                <div className="errorPanel">
+                    <div className="errorPanel">
-                    {this.state.errorMsg}
+                        {this.state.errorMsg}
-                </div>
+                    </div>
                 }
                 <form
                     className="pagemodeleditor pagemodel propertiesForm"
@@ -235,7 +237,7 @@ class PageModelComponent
                         onChange={this.handleChange}
                         size={32}
                         type="text"
-                        value={this.state.form.name}/>
+                        value={this.state.form.name} />
 
                     <label htmlFor="pageModelTitle">
                         Title
@@ -245,7 +247,7 @@ class PageModelComponent
                         onChange={this.handleChange}
                         size={32}
                         type="text"
-                        value={this.state.form.title}/>
+                        value={this.state.form.title} />
 
                     <label htmlFor="pageModelDescription">
                         Description
@@ -255,17 +257,17 @@ class PageModelComponent
                         id="pageModelDescription"
                         onChange={this.handleChange}
                         rows={20}
-                        value={this.state.form.description}/>
+                        value={this.state.form.description} />
                     <div>
                         <button type="submit">Save</button>
                         <button
                             id="pageModelDiscard"
-                            onClick={event => this.discardChanges(event)}>
+                            onClick={(event) => this.discardChanges(event)}>
                             Discard changes
                         </button>
                     </div>
                 </form>
-            </div>
+            </div>;
         } else {
             return <div className="bebop-body">
                 <dl className="pagemodeleditor pagemodel propertiesList">
@@ -295,16 +297,20 @@ class PageModelComponent
                     });
                 }}>Edit
                 </button>
-                {this.props.pageModel.publicationStatus === PublicationStatus.NOT_PUBLISHED.toString()
+                {this.props.pageModel.publicationStatus
-                && <button
+                    === PublicationStatus.NOT_PUBLISHED.toString()
-                    onClick={(event) => this.publishPageModel(event)}>Publish</button>
+                    && <button
+                        onClick={this.publishPageModel}>Publish</button>
                 }
-                {this.props.pageModel.publicationStatus === PublicationStatus.NEEDS_UPDATE.toString()
+                {this.props.pageModel.publicationStatus
-                && <button
+                    === PublicationStatus.NEEDS_UPDATE.toString()
-                    onClick={(event) => this.publishPageModel(event)}>Republish</button>
+                    && <button
+                        onClick={this.publishPageModel}>Republish</button>
                 }
                 <ContainerListComponent
-                    containers={this.props.pageModel.containers}/>
+                    ccmApplication={this.props.ccmApplication}
+                    containers={this.props.pageModel.containers}
+                    dispatcherPrefix={this.props.dispatcherPrefix} />
             </div>;
         }
     }
@@ -317,10 +323,10 @@ class PageModelComponent
             ...this.state,
             editMode: false,
             form: {
+                description: this.props.pageModel.description,
                 name: this.props.pageModel.name,
                 title: this.props.pageModel.title,
-                description: this.props.pageModel.description,
+            },
-            }
         });
     }
 
@@ -359,10 +365,10 @@ class PageModelComponent
                 this.setState({
                     editMode: this.state.editMode,
                     form: {
+                        description: this.state.form.description,
                         name: targetInput.value,
                         title: this.state.form.title,
-                        description: this.state.form.description,
+                    },
-                    }
                 });
                 break;
             }
@@ -372,10 +378,10 @@ class PageModelComponent
                 this.setState({
                     editMode: this.state.editMode,
                     form: {
+                        description: this.state.form.description,
                         name: this.state.form.name,
                         title: targetInput.value,
-                        description: this.state.form.description,
+                    },
-                    }
                 });
                 break;
             }
@@ -385,10 +391,10 @@ class PageModelComponent
                 this.setState({
                     editMode: this.state.editMode,
                     form: {
+                        description: targetArea.value,
                         name: this.state.form.name,
                         title: this.state.form.title,
-                        description: targetArea.value,
+                    },
-                    }
                 });
                 break;
             }
@@ -408,8 +414,8 @@ class PageModelComponent
 
         const init: RequestInit = {
             body: JSON.stringify({
-                title: this.state.form.title,
                 description: this.state.form.description,
+                title: this.state.form.title,
             }),
             credentials: "same-origin",
             headers,
@@ -433,14 +439,15 @@ class PageModelComponent
                     this.setState({
                         ...this.state,
                         errorMsg: `Failed to update/create PageModel: `
-                        + ` ${response.status} ${response.statusText}`,
+                            + ` ${response.status} ${response.statusText}`,
                     });
                 }
             })
             .catch((error) => {
                 this.setState({
                     ...this.state,
-                    errorMsg: `Failed to update/create PageModel: ${error.message}`,
+                    errorMsg: `Failed to update/create PageModel: `
+                        + `${error.message}`,
                 });
             });
     }
@@ -450,13 +457,13 @@ class PageModelComponent
         event.preventDefault();
 
         const headers: Headers = new Headers();
-        //headers.append("Content-Type", "application/json");
+        // headers.append("Content-Type", "application/json");
         headers.append("Content-Type", "application/x-www-form-urlencoded");
 
-        //const formData: FormData = new FormData();
+        // const formData: FormData = new FormData();
-        //formData.set("action", "publish");
+        // formData.set("action", "publish");
-        //const data: URLSearchParams = new URLSearchParams();
+        // const data: URLSearchParams = new URLSearchParams();
-        //data.append("action", "publish");
+        // data.append("action", "publish");
 
         const init: RequestInit = {
 
@@ -479,7 +486,7 @@ class PageModelComponent
                     this.setState({
                         ...this.state,
                         errorMsg: `Failed to publish PageModel: `
-                        + ` ${response.status} ${response.statusText}`,
+                            + ` ${response.status} ${response.statusText}`,
                     });
                 }
             })
@@ -487,7 +494,7 @@ class PageModelComponent
                 this.setState({
                     ...this.state,
                     errorMsg: `Failed to publish PageModel: ${error.message}`,
-                })
+                });
             });
 
     }
@@ -496,25 +503,99 @@ class PageModelComponent
 
 interface ContainerListProps {
 
-    containers: ContainerModel[],
+    ccmApplication: string;
+    containers: ContainerModel[];
+    dispatcherPrefix: string;
 }
 
-class ContainerListComponent extends React.Component<ContainerListProps, {}> {
+interface ContainerListState {
+
+    newContainerName: string;
+}
+
+class ContainerListComponent
+    extends React.Component<ContainerListProps, ContainerListState> {
+
+    constructor(props: ContainerListProps) {
+
+        super(props);
+
+        this.state = {
+            newContainerName: "",
+        }
+
+        this.addContainer = this.addContainer.bind(this);
+    }
 
     public render(): React.ReactNode {
         return <div className="containerList">
-            <button>Add container</button>
+            <form onSubmit={this.addContainer}>
+                <label htmlFor="newContainerName">
+                    Name of new container
+                </label>
+                <input id="newContainerName"
+                onChange={this.updateNewContainerName}
+                size={32}
+                type="text" />
+                <button type="submit">
+                    <span className="fa fa-plus-circle"></span>
+                    Add container
+                </button>
+            </form>
             <ul className="containerList">
                 {this.props.containers
-                && this.props.containers.map((container) =>
+                    && this.props.containers.map((container) =>
-                    <li>
+                        <li>
-                        <span>{container.key}</span>
+                            <span>{container.key}</span>
-                        <button>Down</button>
+                            <button>
-                        <button>Up</button>
+                                <span className="fa fa-arrow-alt-circle-down">
-                        <button>Delete</button>
+                                </span>
-                    </li>)}
+                                Down
+                        </button>
+                            <button>
+                                <span className="fa fa-arrow-alt-circle-up">
+                                </span>
+                                Up
+                        </button>
+                            <button>
+                                <span className="fa fa-minus-circle"></span>
+                                Delete
+                        </button>
+                        </li>)}
             </ul>
-        </div>
+        </div>;
+    }
+
+    private updateNewContainerName(
+        event: React.ChangeEvent<HTMLElement>): void {
+
+        const target: HTMLInputElement = event.target as HTMLInputElement;
+
+        this.setState({
+            ...this.state,
+            newContainerName: target.value,
+        });
+    }
+
+    private addContainer(
+        event: React.FormEvent<HTMLFormElement>): void {
+
+        event.preventDefault();
+
+        const headers: Headers = new Headers();
+        headers.append("Content-Type", "application/json");
+
+        const init: RequestInit = {
+
+            body: JSON.stringify({}),
+            credentials: "same-origin",
+            headers,
+            method: "PUT",
+        }
+
+        const url: string = `${this.props.dispatcherPrefix}`
+            + `/page-models/${this.props.ccmApplication}/`
+            + `${this.state.newContainerName}`;
     }
 }
 
@@ -530,7 +611,7 @@ interface PageModelEditorState {
 
 interface PageModelEditorState {
 
-    errorMessages: string[],
+    errorMessages: string[];
     pageModels: PageModel[];
     selectedPageModel: PageModel | null;
 }
@@ -538,194 +619,6 @@ interface PageModelEditorState {
 class PageModelEditor
     extends React.Component<{}, PageModelEditorState> {
 
-    constructor(props: any) {
-
-        super(props);
-
-        // this.state = {
-        //     // selectedPageModel: newPageModel,
-        //     context: {
-        //         pageModelSelected: false,
-        //         selectedPageModel: newPageModel,
-        //     },
-        // };
-        this.state = {
-            errorMessages: [],
-            pageModels: [],
-            selectedPageModel: null,
-        }
-    }
-
-    public componentDidMount() {
-
-        this.fetchPageModels();
-    }
-
-    public render(): React.ReactNode {
-
-        return <React.Fragment>
-            <div id="left">
-                <div className="column-head"></div>
-                <div className="column-content">
-                    <div className="bebop-left">
-                        <div className="bebop-segmented-panel">
-                            <div className="bebop-segment">
-                                <h3 className="bebop-segment-header">
-                                    Available PageModels
-                                </h3>
-                                <div className="bebop-segment-body">
-                                    <button
-                                        className="pagemodeleditor addbutton"
-                                        onClick={
-                                            (event) => this.createNewPageModel(
-                                                event)
-                                        }>
-                                        <span className="fa fa-plus-circle">
-                                        </span>
-                                        Create new PageModel
-                                    </button>
-                                    <PageModelsList
-                                        ccmApplication={PageModelEditor
-                                            .getCcmApplication()}
-                                        dispatcherPrefix={PageModelEditor
-                                            .getDispatcherPrefix()}
-                                        pageModels={this.state.pageModels}
-                                        selectPageModel={
-                                            (selectedPageModel: PageModel) => {
-                                                this.setState(
-                                                    (state: PageModelEditorState) => {
-                                                        return {
-                                                            ...state,
-                                                            selectedPageModel,
-                                                        };
-                                                    });
-                                            }}/>
-                                    <button
-                                        className="pagemodeleditor addbutton"
-                                        onClick={
-                                            (event) =>
-                                                this.createNewPageModel(event)
-                                        }>
-                                        <span className="fa fa-plus-circle">
-                                        </span>
-                                        Create new PageModel
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div id="right">
-                <div className="column-head">
-                </div>
-                <div className="column-content">
-                    {this.state.errorMessages.length > 0 &&
-                    <div className="errorPanel">
-                        {this.state.errorMessages.map((msg) => {
-                            <p>
-                                {msg}
-                            </p>
-                        })}
-                    </div>
-                    }
-                    {this.state.selectedPageModel !== null &&
-                    <PageModelComponent
-                        ccmApplication={PageModelEditor.getCcmApplication()}
-                        dispatcherPrefix={PageModelEditor.getDispatcherPrefix()}
-                        pageModel={this.state.selectedPageModel}
-                        reload={() => {
-                            this.reload();
-                        }}/>
-                    }
-                </div>
-            </div>
-        </React.Fragment>;
-    }
-
-    private createNewPageModel(event: React.MouseEvent<HTMLButtonElement>): void {
-
-        event.preventDefault();
-
-        this.setState({
-            ...this.state,
-            selectedPageModel: {
-                containers: [],
-                description: "",
-                lastModified: 0,
-                lastPublished: 0,
-                modelUuid: "",
-                name: "",
-                pageModelId: 0,
-                publicationStatus: PublicationStatus.NOT_PUBLISHED.toString(),
-                title: "",
-                type: "",
-                uuid: "",
-                version: PageModelVersion.DRAFT,
-            }
-        });
-    }
-
-    private fetchPageModels(): void {
-
-        const init: RequestInit = {
-            credentials: "same-origin",
-            method: "GET",
-        };
-
-        const url: string = `${PageModelEditor.getDispatcherPrefix()}`
-            + `/page-models/${PageModelEditor.getCcmApplication()}`;
-
-        fetch(url, init)
-            .then((response) => {
-                if (response.ok) {
-                    response
-                        .json()
-                        .then((pageModels: PageModel[]) => {
-                            this.setState({
-                                ...this.state,
-                                pageModels
-                            })
-                        })
-                        .catch((error) => {
-                            const errorMessages: string[] = this
-                                .state.errorMessages;
-                            errorMessages.push(`Failed to retrieve PageModels ` +
-                                `from ${url}: ${error.message}`);
-
-                            this.setState({
-                                ...this.state,
-                                errorMessages,
-                            });
-                        });
-                } else {
-                    const errorMessages: string[] = this
-                        .state.errorMessages;
-                    errorMessages.push(`Failed to retrieve PageModels from `
-                        + `\"${url}\": HTTP Status Code: `
-                        + `${response.status}; `
-                        + `message: ${response.statusText}`);
-
-                    this.setState({
-                        ...this.state,
-                        errorMessages,
-                    });
-                }
-            })
-            .catch((error) => {
-                const errorMessages: string[] = this
-                    .state.errorMessages;
-                errorMessages.push(`Failed to retrieve PageModels ` +
-                    `from ${url}: ${error.message}`);
-
-                this.setState({
-                    ...this.state,
-                    errorMessages,
-                });
-            });
-    }
-
-
     private static getDispatcherPrefix(): string {
 
         const dataElem: HTMLElement | null = document
@@ -762,6 +655,184 @@ class PageModelEditor
         }
     }
 
+    constructor(props: any) {
+
+        super(props);
+
+        // this.state = {
+        //     // selectedPageModel: newPageModel,
+        //     context: {
+        //         pageModelSelected: false,
+        //         selectedPageModel: newPageModel,
+        //     },
+        // };
+        this.state = {
+            errorMessages: [],
+            pageModels: [],
+            selectedPageModel: null,
+        };
+
+        this.createNewPageModel = this.createNewPageModel.bind(this);
+        this.selectPageModel = this.selectPageModel.bind(this);
+    }
+
+    public componentDidMount() {
+
+        this.fetchPageModels();
+    }
+
+    public render(): React.ReactNode {
+
+        return <React.Fragment>
+            <div id="left">
+                <div className="column-head"></div>
+                <div className="column-content">
+                    <div className="bebop-left">
+                        <div className="bebop-segmented-panel">
+                            <div className="bebop-segment">
+                                <h3 className="bebop-segment-header">
+                                    Available PageModels
+                                </h3>
+                                <div className="bebop-segment-body">
+                                    <button
+                                        className="pagemodeleditor addbutton"
+                                        onClick={this.createNewPageModel}>
+                                        <span className="fa fa-plus-circle">
+                                        </span>
+                                        Create new PageModel
+                                    </button>
+                                    <PageModelsList
+                                        ccmApplication={PageModelEditor
+                                            .getCcmApplication()}
+                                        dispatcherPrefix={PageModelEditor
+                                            .getDispatcherPrefix()}
+                                        pageModels={this.state.pageModels}
+                                        selectPageModel
+                                        ={this.selectPageModel} />
+                                    <button
+                                        className="pagemodeleditor addbutton"
+                                        onClick={this.createNewPageModel}>
+                                        <span className="fa fa-plus-circle">
+                                        </span>
+                                        Create new PageModel
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div id="right">
+                <div className="column-head">
+                </div>
+                <div className="column-content">
+                    {this.state.errorMessages.length > 0 &&
+                        <div className="errorPanel">
+                            {this.state.errorMessages.map((msg) => {
+                                return <p>
+                                    {msg}
+                                </p>;
+                            })}
+                        </div>
+                    }
+                    {this.state.selectedPageModel !== null &&
+                        <PageModelComponent
+                            ccmApplication={PageModelEditor.getCcmApplication()}
+                            dispatcherPrefix
+                            ={PageModelEditor.getDispatcherPrefix()}
+                            pageModel={this.state.selectedPageModel}
+                            reload={() => {
+                                this.reload();
+                            }} />
+                    }
+                </div>
+            </div>
+        </React.Fragment>;
+    }
+
+    private createNewPageModel(
+        event: React.MouseEvent<HTMLButtonElement>): void {
+
+        event.preventDefault();
+
+        this.setState({
+            ...this.state,
+            selectedPageModel: {
+                containers: [],
+                description: "",
+                lastModified: 0,
+                lastPublished: 0,
+                modelUuid: "",
+                name: "",
+                pageModelId: 0,
+                publicationStatus: PublicationStatus.NOT_PUBLISHED.toString(),
+                title: "",
+                type: "",
+                uuid: "",
+                version: PageModelVersion.DRAFT,
+            },
+        });
+    }
+
+    private fetchPageModels(): void {
+
+        const init: RequestInit = {
+            credentials: "same-origin",
+            method: "GET",
+        };
+
+        const url: string = `${PageModelEditor.getDispatcherPrefix()}`
+            + `/page-models/${PageModelEditor.getCcmApplication()}`;
+
+        fetch(url, init)
+            .then((response) => {
+                if (response.ok) {
+                    response
+                        .json()
+                        .then((pageModels: PageModel[]) => {
+                            this.setState({
+                                ...this.state,
+                                pageModels,
+                            });
+                        })
+                        .catch((error) => {
+                            const errorMessages: string[] = this
+                                .state.errorMessages;
+                            errorMessages.push(`Failed to retrieve PageModels `
+                                + `from ${url}: ${error.message}`);
+
+                            this.setState({
+                                ...this.state,
+                                errorMessages,
+                            });
+                        });
+                } else {
+                    const errorMessages: string[] = this
+                        .state.errorMessages;
+                    errorMessages.push(`Failed to retrieve PageModels from `
+                        + `\"${url}\": HTTP Status Code: `
+                        + `${response.status}; `
+                        + `message: ${response.statusText}`);
+
+                    this.setState({
+                        ...this.state,
+                        errorMessages,
+                    });
+                }
+            })
+            .catch((error) => {
+                const errorMessages: string[] = this
+                    .state.errorMessages;
+                errorMessages.push(`Failed to retrieve PageModels ` +
+                    `from ${url}: ${error.message}`);
+
+                this.setState({
+                    ...this.state,
+                    errorMessages,
+                });
+            });
+    }
+
     private reload(): void {
 
         this.fetchPageModels();
@@ -771,6 +842,17 @@ class PageModelEditor
         // });
     }
 
+    private selectPageModel(selectedPageModel: PageModel): void {
+
+        this.setState(
+            (state: PageModelEditorState) => {
+                return {
+                    ...state,
+                    selectedPageModel,
+                };
+            });
+    }
+
     // private setSelectedPageModel(selectedPageModel: PageModel): void {
     //
     //     this.setState((state: any) => {

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

@@ -9,7 +9,7 @@ interface ContainerModel {
 
 interface PageModel {
 
-    containers: ContainerModel[],
+    containers: ContainerModel[];
     description: string;
     modelUuid: string;
     name: string;
@@ -34,4 +34,4 @@ enum PublicationStatus {
     NOT_PUBLISHED = "NOT_PUBLISHED",
     PUBLISHED = "PUBLISHED",
     NEEDS_UPDATE = "NEEDS_UPDATE",
-}
+}

ccm-pagemodelseditor/tslint.json

@@ -12,7 +12,7 @@
             "options": [100]
         },
         "max-line-length": {
-            "options": [120]
+            "options": [80]
         }
     },
     "rulesDirectory": []

ccm-theme-foundry/src/main/resources/themes/foundry/foundry/styles/admin.css

@@ -2039,3 +2039,16 @@ form.pagemodeleditor.propertiesForm {
     display: flex;
     flex-direction: column;
 }
+
+/* dialog.pageModelEditor {
+
+    background-color: #fff;
+
+    border-radius: 5%;
+
+    position: fixed;
+    top: 5em;
+    right: 5em;
+    bottom: 5em;
+    left: 5em;
+} */