CCM NG: More work on the PageModelEditor

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

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

@@ -146,6 +146,32 @@ class ItemListComponentEditor
 
     public renderEditorDialog(): React.ReactFragment {
 
-        return <React.Fragment />;
+        return <React.Fragment>
+            <label htmlFor="descending">
+                Descending?
+            </label>
+            <input checked={this.props.component.descending}
+                   id="descending"
+                   type="checkbox" />
+            <label htmlFor="limitToType">Limit to type</label>
+            <input id="limitToType"
+                   maxLength={1024}
+                   size={64}
+                   type="text"
+                   value={this.props.component.limitToType}/>
+            <label htmlFor="pageSize">Page size</label>
+            <input id="pageSize"
+                   min="1"
+                   type="number"
+                   value={this.props.component.pageSize}/>
+            <label htmlFor="listOrder">List Order</label>
+            <textarea cols={40} id="listOrder" rows={5}>
+                {Array.isArray(this.props.component.listOrder) ? (
+                    this.props.component.listOrder.join(", ")
+                ) : (
+                    ""
+                )}
+            </textarea>
+        </React.Fragment>;
     }
 }

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

@@ -914,6 +914,8 @@ interface ComponentModelEditorProps<C extends ComponentModel> {
 interface ComponentModelEditorState {
 
     dialogExpanded: string;
+    dialogOpened: boolean | undefined;
+    componentKey: string;
 }
 
 abstract class AbstractComponentModelEditor<
@@ -927,12 +929,35 @@ abstract class AbstractComponentModelEditor<
 
         super(props as any);
 
-        this.setState({
+        this.state = {
             ...this.state as any,
             dialogExpanded: "dialogClosed",
+            dialogOpened: false,
+        };
+
+        this.handleChange = this.handleChange.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
+    }
+
+    public handleChange(event: React.ChangeEvent<HTMLElement>): void {
+
+        if (event.currentTarget.id === this.props.component.key + "_componentKey") {
+
+            const target: HTMLInputElement
+                = event.currentTarget as HTMLInputElement;
+
+            this.setState({
+                ...this.state as any,
+                componentKey: target.value,
             });
         }
 
+    }
+
+    public handleSubmit(event: React.FormEvent<HTMLFormElement>): void {
+
+    }
+
     public abstract renderPropertyList(): React.ReactFragment;
 
     public abstract renderEditorDialog(): React.ReactFragment;
@@ -947,27 +972,65 @@ abstract class AbstractComponentModelEditor<
                 <dd>{this.props.component.type}</dd>
                 {this.renderPropertyList()}
             </dl>
-            <button onClick={this.toggleEditorDialog}>
+            <button onClick={(event) => this.closeOnButton(event)}>
                 Edit
             </button>
-            <dialog className="{this.state.dialogExpanded}">
+            <dialog aria-labelledby={this.props.component.key
+                        + "_editDialogHeading"}
+                    className={this.state.dialogExpanded}
+                    onKeyDown={(event) => this.closeOnEsc}
+                    open={this.state.dialogOpened}>
+                <button className="closeButton"
+                        onClick={(event) => this.toggleEditorDialog}>
+                    <span className="accessibility hidden">Close</span>
+                    <span className="fa fa-times-circle"></span>
+                </button>
+                <h1 id={this.props.component.key + "_editDialogHeading"}>
+                    Edit component {this.props.component.key}
+                </h1>
+                <form onSubmit={this.handleSubmit}>
+                    <label htmlFor={this.props.component.key + "_componentKey"}>
+                        Key
+                    </label>
+                    <input id={this.props.component.key + "_componentKey"}
+                           onChange={this.handleChange}
+                           required={true}
+                           type="text"
+                           value={this.state.componentKey} />
                     {this.renderEditorDialog()}
+                </form>
+                <div className="backdrop"></div>
             </dialog>
         </li>;
     }
 
-    private toggleEditorDialog(
+    private closeOnButton(event: React.MouseEvent<HTMLButtonElement>): void {
-        event: React.MouseEvent<HTMLButtonElement>): void {
+
+        event.preventDefault();
+
+        this.toggleEditorDialog();
+    }
+
+    private closeOnEsc(event: React.KeyboardEvent<HTMLElement>): void {
+
+        if (event.keyCode === 27) {
+            this.toggleEditorDialog();
+        }
+    }
+
+    private toggleEditorDialog(): void {
 
         if (this.state.dialogExpanded === "dialogExpanded") {
             this.setState({
                 ...this.state as any,
                 dialogExpanded: "dialogClosed",
+                dialogOpened: false,
             });
         } else {
             this.setState({
                 ...this.state as any,
                 dialogExpanded: "dialogExpanded",
+                dialogOpened: true,
             });
         }
     }

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

@@ -2065,23 +2065,81 @@ div.errorPanel {
     left: 5em;
 } */
 
-li.componentModelEditor dialog.closed {
+li.componentModelEditor dialog.dialogClosed {
     display: none;
 }
 
-li.componentModelEditor dialog.closed {
+li.componentModelEditor dialog.dialogExpanded {
 
     border: 2px solid #ccc;
-    border-radius: 3em;
+    border-radius: 3rem;
 
     display: block;
 
+    padding: 2em;
+
     position: fixed;
     top: 10vh;
     right: 10vw;
-    bottom: 10vh;
+    bottom: 20vh;
-    left: 10vw;
+    left: 20vw;
 
-    width: 80vw;
+    width: 60vw;
     height: 80vh;
+    z-index: 1000;
+}
+
+li.componentModelEditor dialog.dialogExpanded button.closeButton {
+
+    background-color: none;
+
+    border: none;
+
+    color: #fff;
+
+    font-size: 2em;
+
+    position: absolute;
+    top: 1.5em;
+    right: 1.5em;
+    z-index: 1200;
+}
+
+li.componentModelEditor dialog.dialogExpanded h1 {
+
+    background-color: #0776a0;
+
+    border-top-left-radius: 3rem;
+    border-top-right-radius: 3rem;
+
+    box-sizing: border-box;
+
+    color: #fff;
+
+    font-size: 2em;
+    font-weight: bold;
+
+    padding: 1em 3em;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 3em;
+
+    z-index: 1100;
+}
+
+li.componentModelEditor dialog.dialogExpanded input,
+li.componentModelEditor dialog.dialogExpanded label,
+li.componentModelEditor dialog.dialogExpanded textarea {
+
+    display: block;
+}
+
+li.componentModelEditor dialog.dialogExpanded input,
+li.componentModelEditor dialog.dialogExpanded textarea {
+
+    margin-bottom: 1em;
 }