CCM NG: Some things for the PageModelEditor

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

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

@@ -119,7 +119,7 @@ class PageModelsList
 
     public render(): React.ReactNode {
 
-        return <div className="pageModelsList">
+        return <div className="pagemodeleditor pageModelsList">
             {this.state.errorMsg !== null &&
                 <div className="errorPanel">
                     {this.state.errorMsg}
@@ -170,16 +170,56 @@ interface PageModelComponentProps {
     pageModel: PageModel;
 }
 
-class PageModelComponent extends React.Component<PageModelComponentProps, {}> {
+interface PageModelComponentState {
+
+    editMode: boolean;
+}
+
+class PageModelComponent
+    extends React.Component<PageModelComponentProps, PageModelComponentState> {
 
     constructor(props: PageModelComponentProps) {
         super(props);
+
+        this.state = {
+            editMode: false
+        };
     }
 
     public render(): React.ReactNode {
 
+        if (this.state.editMode) {
             return <div className="bebop-body">
-            <dl className="properties-list">
+                <form className="pagemodeleditor pagemodel propertiesForm">
+                    <label htmlFor="pageModelName">
+                        Name
+                    </label>
+                    <input
+                        id="pageModelName"
+                        size={32}
+                        type="text"
+                        value={this.props.pageModel.name} />
+
+                    <label htmlFor="pageModelTitle">
+                        Name
+                    </label>
+                    <input
+                        id="pageModelTitle"
+                        size={32}
+                        type="text"
+                        value={this.props.pageModel.title}/>
+
+                    <label htmlFor="pageModelDescription">
+                        Name
+                    </label>
+                    <textarea id="pageModeDescription" cols={80} rows={20}>
+                        {this.props.pageModel.description}
+                    </textarea>
+                </form>
+            </div>
+        } else {
+            return <div className="bebop-body">
+                <dl className="pagemodeleditor pagemodel propertiesList">
                     <dt>Name</dt>
                     <dd>{this.props.pageModel.name}</dd>
                     <dt>Title</dt>
@@ -191,9 +231,16 @@ class PageModelComponent extends React.Component<PageModelComponentProps, {}> {
                     <dt>Description</dt>
                     <dd>{this.props.pageModel.description}</dd>
                 </dl>
-            <button>Edit</button>
+                <button onClick={(event) => {
-        </div>;
 
+                    event.preventDefault();
+
+                    this.setState({
+                        editMode: true
+                    });
+                }}>Edit</button>
+            </div>;
+        }
         // return <dl>
         //     <dt>Name</dt>
         //     <dd>{this.props.pageModel.name}</dd>
@@ -251,7 +298,7 @@ class PageModelEditor
                                     </h3>
                                     <div className="bebop-segment-body">
                                         <button
-                                            className="pagemodels addbutton">
+                                            className="pagemodeleditor addbutton">
                                             <span>+</span> Create new PageModel
                                         </button>
                                         <PageModelsList
@@ -269,7 +316,7 @@ class PageModelEditor
                                                     };
                                                 });
                                             }} />
-                                        <button className="pagemodels addbutton">
+                                        <button className="pagemodeleditor addbutton">
                                             <span>+</span> Create new PageModel
                                     </button>
                                     </div>
@@ -301,9 +348,6 @@ class PageModelEditor
                                 // </React.Fragment>
                             }
                         </pageModelEditorContext.Consumer>
-                        <pre>
-                            {this.getCcmApplication()}
-                        </pre>
                     </div>
                 </div>
             </pageModelEditorContext.Provider>

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

@@ -1978,7 +1978,7 @@ span#quickLinksCascade {
     white-space: pre;
 }
 
-button.pagemodels.addbutton {
+button.pagemodeleditor.addbutton {
 
     border: none;
     border-radius: 0.25em;
@@ -1990,7 +1990,7 @@ button.pagemodels.addbutton {
     padding: 0.2em 0.33em;
 }
 
-button.pagemodels.addbutton > span {
+button.pagemodeleditor.addbutton > span {
 
     border-right: 1px solid #eee;
 
@@ -2000,7 +2000,7 @@ button.pagemodels.addbutton > span {
 
 }
 
-div.pageModelsList {
+div.pagemodeleditor.pageModelsList {
 
     margin-top: 0.66em;
     margin-bottom: 0.66em;
@@ -2008,5 +2008,30 @@ div.pageModelsList {
     padding-top: 0.66em;
     border-bottom: 1px solid #0776A0;
     padding-bottom: 0.66em;
-    
+}
+
+dl.pagemodeleditor.pagemodel.propertiesList {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    max-width: 30em;
+}
+
+dl.pagemodeleditor.pagemodel.propertiesList dt{
+    font-weight: bold;
+}
+
+dl.pagemodeleditor.pagemodel.propertiesList dd {
+}
+
+dl.pagemodeleditor.pagemodel.propertiesForm {
+
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+
+    max-width: 30em;
+}
+
+dl.pagemodeleditor.pagemodel.propertiesForm label {
+
+    font-weight: bold;
 }