CCM NG: Basic part of PageModelsEditor finished

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

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

@@ -9,6 +9,9 @@ import {
 } from "./datatypes";
 
 export {
+    AbstractComponentModelEditor,
+    ComponentModelEditorProps,
+    ComponentInfo,
     PageModelEditor,
     PageModelEditorState,
     // PageModelEditorProps,
@@ -696,16 +699,8 @@ class ContainerListComponent
             });
     }
 
-    // private deleteContainer(event: React.MouseEvent<HTMLButtonElement>): void {
     private deleteContainer(containerKey: string): void {
 
-        // event.preventDefault();
-
-        // const deleteButton: HTMLButtonElement
-        //     = event.target as HTMLButtonElement;
-        // const containerKey: string = deleteButton
-        //     .getAttribute("data-containerKey") as string;
-
         const init: RequestInit = {
 
             body: JSON.stringify({}),
@@ -807,13 +802,11 @@ class ContainerModelComponent
             <div className="components-list">
                 <ul>
                     {this.state.components.map((component: ComponentModel) =>
-                        <li>
+                        this.getComponentModelEditor(component),
-                            {component.key}
-                        </li>
                     )}
                 </ul>
             </div>
-        </li>
+        </li>;
     }
 
     private fetchComponents(): void {
@@ -845,8 +838,8 @@ class ContainerModelComponent
                         .catch((error) => {
                             const errorMessages: string[] = this
                                 .state.errorMessages;
-                            errorMessages.push(`Failed to retrieve PageModels ` +
+                            errorMessages.push(`Failed to retrieve PageModels `
-                                `from ${componentsUrl}: ${error.message}`);
+                                + `from ${componentsUrl}: ${error.message}`);
 
                             this.setState({
                                 ...this.state,
@@ -880,6 +873,18 @@ class ContainerModelComponent
             });
     }
 
+    private getComponentModelEditor(
+        component: ComponentModel): React.ReactNode {
+
+        if (PageModelEditor.getAvailableComponents()[component.type] === null) {
+            return PageModelEditor
+                .getAvailableComponents()[component.type](component);
+
+        } else {
+            return <DefaultComponentModelEditor component={component} />;
+        }
+    }
+
     private deleteContainer(
         event: React.MouseEvent<HTMLButtonElement>,
         containerKey: string): void {
@@ -890,6 +895,55 @@ class ContainerModelComponent
     }
 }
 
+interface ComponentModelEditorProps {
+
+    component: ComponentModel;
+}
+
+abstract class AbstractComponentModelEditor
+    extends React.Component<ComponentModelEditorProps, {}> {
+
+    constructor(props: ComponentModelEditorProps) {
+
+        super(props);
+    }
+
+    public abstract renderPropertyList(): React.ReactFragment;
+
+    public abstract renderEditorDialog(): React.ReactFragment;
+
+    public render(): React.ReactNode {
+
+        return <li>
+            <dl>
+                <dt>Key</dt>
+                <dd>{this.props.component.key}</dd>
+                <dt>Type</dt>
+                <dd>{this.props.component.type}</dd>
+                {this.renderPropertyList}
+            </dl>
+        </li>;
+    }
+}
+
+class DefaultComponentModelEditor extends AbstractComponentModelEditor {
+
+    public renderPropertyList(): React.ReactFragment {
+
+        return <React.Fragment />;
+    }
+
+    public renderEditorDialog(): React.ReactFragment {
+
+        return <React.Fragment />;
+    }
+
+    public render(): React.ReactNode {
+        return super.render();
+    }
+
+}
+
 // interface PageModelEditorProps {
 //
 // }
@@ -917,7 +971,27 @@ interface ComponentInfo {
 class PageModelEditor
     extends React.Component<{}, PageModelEditorState> {
 
-    private static components: ComponentInfo[];
+    public static getAvailableComponents(): {
+        [type: string]: (component: ComponentModel) => React.ReactFragment} {
+
+        return {
+            ...PageModelEditor.componentModelEditors,
+        };
+    }
+
+    public static registerComponentModelEditor(
+        type: string,
+        generator: ((component: ComponentModel) => React.ReactFragment)): void {
+
+        PageModelEditor.componentModelEditors = {
+            ...PageModelEditor.componentModelEditors,
+            type: generator,
+        };
+    }
+
+    private static componentModelEditors: {
+        [type: string]: (component: ComponentModel) => React.ReactFragment;
+    };
 
     private static getDispatcherPrefix(): string {
 
@@ -955,25 +1029,6 @@ class PageModelEditor
         }
     }
 
-    private static registerComponent(component: ComponentInfo): void {
-
-        PageModelEditor.components = [
-            ...PageModelEditor.components,
-            component,
-        ];
-
-        PageModelEditor.components.sort((component1, component2) => {
-
-            if (component1.label < component2.label) {
-                return -1;
-            } else if (component1.label > component2.label) {
-                return 1;
-            } else {
-                return 0;
-            }
-        });
-    }
-
     constructor(props: any) {
 
         super(props);

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

@@ -3,7 +3,7 @@ export {
     ContainerModel,
     PageModel,
     PageModelVersion,
-    PublicationStatus
+    PublicationStatus,
 };
 
 interface ComponentModel {
@@ -14,6 +14,7 @@ interface ComponentModel {
     key: string;
     modelUuid: string;
     styleAttribute: string;
+    type: string;
     uuid: string;
 }