CCM NG: Some work for the PageModelEditor

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

ccm-cms-js/src/main/typescript/ccm-cms/ccm-cms-pagemodelseditor.tsx

@@ -1,9 +1,146 @@
 import * as React from "react";
 import { render } from "react-dom";
 
-import { PageModelEditor } from "ccm-pagemodelseditor";
+import { AbstractComponentModelEditor,
+         ComponentModel,
+         ComponentModelEditorProps,
+         ComponentModelEditorState,
+         PageModelEditor,
+
+} from "ccm-pagemodelseditor";
+
+PageModelEditor.registerComponentModelEditor(
+    "org.librecms.pagemodel.CategoryTreeComponent",
+    (categoryTree) => {
+        return <CategoryTreeComponentEditor
+            component={categoryTree as CategoryTreeComponent} />
+    }
+);
+PageModelEditor.registerComponentModelEditor(
+    "org.librecms.pagemodel.ItemListComponent",
+    (itemList) => {
+        return <ItemListComponentEditor
+            component={itemList as ItemListComponent} />
+    }
+);
 
 render(
     <PageModelEditor />,
     document.getElementById("cms-content"),
 );
+
+interface CategoryTreeComponent extends ComponentModel {
+
+    showFullTree: boolean;
+}
+
+interface CategoryTreeComponentEditorProps
+    extends ComponentModelEditorProps<CategoryTreeComponent> {
+
+}
+
+interface CategoryTreeComponentEditorState
+    extends ComponentModelEditorState {
+
+    showFullTree: boolean;
+}
+
+
+class CategoryTreeComponentEditor
+    extends AbstractComponentModelEditor<CategoryTreeComponent,
+                                         CategoryTreeComponentEditorProps,
+                                         CategoryTreeComponentEditorState> {
+
+    public constructor(props: CategoryTreeComponentEditorProps) {
+
+        super(props);
+
+        this.setState({
+            ...this.state as any,
+            dialogExpanded: "dialogClosed",
+            showFullTree: false,
+        });
+    }
+
+    public renderPropertyList(): React.ReactFragment {
+
+        return <React.Fragment>
+            <dt>Show full tree</dt>
+            <dd>{this.props.component.showFullTree}</dd>
+        </React.Fragment>;
+    }
+
+    public renderEditorDialog(): React.ReactFragment {
+
+        return <React.Fragment />;
+    }
+}
+
+interface ItemListComponent extends ComponentModel {
+
+    descending: boolean;
+    limitToType: string;
+    pageSize: number;
+    listOrder: string[],
+}
+
+interface ItemListComponentEditorProps
+    extends ComponentModelEditorProps<ItemListComponent> {
+
+}
+
+interface ItemListComponentEditorState
+    extends ComponentModelEditorState {
+
+    descending: boolean;
+    limitToType: string;
+    pageSize: number;
+    listOrder: string[];
+}
+
+class ItemListComponentEditor
+    extends AbstractComponentModelEditor<ItemListComponent,
+                                         ItemListComponentEditorProps,
+                                         ItemListComponentEditorState> {
+
+    public constructor(props: ItemListComponentEditorProps) {
+
+        super(props as any);
+
+        this.setState({
+            ...this.state,
+            dialogExpanded: "dialogClosed",
+            descending: false,
+            limitToType: "",
+            pageSize: 30,
+            listOrder: [ "objectId", ],
+        });
+    }
+
+    public renderPropertyList(): React.ReactFragment {
+
+        return <React.Fragment>
+            <dt>descending</dt>
+            <dd>{this.props.component.descending}</dd>
+            <dt>limitToType</dt>
+            <dd>{this.props.component.limitToType}</dd>
+            <dt>pageSize</dt>
+            <dd>{this.props.component.pageSize}</dd>
+            <dt>listOrder</dt>
+            <dd>
+                <ul>
+                {this.props.component.listOrder.map((order) => {
+                    <li>
+                        {order}
+                    </li>
+                })}
+                </ul>
+            </dd>
+        </React.Fragment>
+    }
+
+    public renderEditorDialog(): React.ReactFragment {
+
+        return <React.Fragment />;
+    }
+}

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

@@ -10,7 +10,9 @@ import {
 
 export {
     AbstractComponentModelEditor,
+    ComponentModel,
     ComponentModelEditorProps,
+    ComponentModelEditorState,
     ComponentInfo,
     PageModelEditor,
     PageModelEditorState,
@@ -876,10 +878,10 @@ class ContainerModelComponent
     private getComponentModelEditor(
         component: ComponentModel): React.ReactNode {
 
-        if (PageModelEditor.getAvailableComponents()[component.type] === null) {
+        if (PageModelEditor.getAvailableComponents()[component.type]) {
+            console.log(`Found editor generator: ${PageModelEditor.getAvailableComponents()[component.type]}`);
             return PageModelEditor
                 .getAvailableComponents()[component.type](component);
-
         } else {
             return <DefaultComponentModelEditor component={component} />;
         }
@@ -895,17 +897,31 @@ class ContainerModelComponent
     }
 }
 
-interface ComponentModelEditorProps {
+interface ComponentModelEditorProps<C extends ComponentModel> {
 
-    component: ComponentModel;
+    component: C;
 }
 
-abstract class AbstractComponentModelEditor
+interface ComponentModelEditorState {
-    extends React.Component<ComponentModelEditorProps, {}> {
 
-    constructor(props: ComponentModelEditorProps) {
+    dialogExpanded: string;
+}
 
-        super(props);
+abstract class AbstractComponentModelEditor<
+    C extends ComponentModel,
+    P extends ComponentModelEditorProps<C>,
+    S extends ComponentModelEditorState>
+
+    extends React.Component<P, S> {
+
+    constructor(props: ComponentModelEditorProps<C>) {
+
+        super(props as any);
+
+        this.setState({
+            ...this.state as any,
+            dialogExpanded: "dialogClosed",
+        });
     }
 
     public abstract renderPropertyList(): React.ReactFragment;
@@ -914,7 +930,7 @@ abstract class AbstractComponentModelEditor
 
     public render(): React.ReactNode {
 
-        return <li>
+        return <li className="componentModelEditor">
             <dl>
                 <dt>Key</dt>
                 <dd>{this.props.component.key}</dd>
@@ -922,11 +938,46 @@ abstract class AbstractComponentModelEditor
                 <dd>{this.props.component.type}</dd>
                 {this.renderPropertyList}
             </dl>
+            <button onClick={this.toggleEditorDialog}>
+                Edit
+            </button>
+            <dialog className="{this.state.dialogExpanded}">
+                {this.renderEditorDialog}
+            </dialog>
         </li>;
     }
+
+    private toggleEditorDialog(
+        event: React.MouseEvent<HTMLButtonElement>): void {
+
+        if (this.state.dialogExpanded === "dialogExpanded") {
+            this.setState({
+                ...this.state as any,
+                dialogExpanded: "dialogClosed",
+            });
+        } else {
+            this.setState({
+                ...this.state as any,
+                dialogExpanded: "dialogExpanded",
+            });
+        }
+    }
 }
 
-class DefaultComponentModelEditor extends AbstractComponentModelEditor {
+class DefaultComponentModelEditor
+    extends AbstractComponentModelEditor<
+        ComponentModel,
+        ComponentModelEditorProps<ComponentModel>,
+        ComponentModelEditorState> {
+
+    constructor(props: ComponentModelEditorProps<ComponentModel>) {
+
+        super(props);
+
+        this.setState({
+            dialogExpanded: "dialogClosed",
+        });
+    }
 
     public renderPropertyList(): React.ReactFragment {
 
@@ -974,6 +1025,9 @@ class PageModelEditor
     public static getAvailableComponents(): {
         [type: string]: (component: ComponentModel) => React.ReactFragment} {
 
+        console.log("Available editors:");
+        console.log(PageModelEditor.componentModelEditors.toString());
+
         return {
             ...PageModelEditor.componentModelEditors,
         };

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

@@ -2064,3 +2064,24 @@ div.errorPanel {
     bottom: 5em;
     left: 5em;
 } */
+
+li.componentModelEditor dialog.closed {
+    display: none;
+}
+
+li.componentModelEditor dialog.closed {
+
+    border: 2px solid #ccc;
+    border-radius: 3em;
+
+    display: block;
+
+    position: fixed;
+    top: 10vh;
+    right: 10vw;
+    bottom: 10vh;
+    left: 10vw;
+
+    width: 80vw;
+    height: 80vh;
+}