CCM NG: Creating new containers from the PageModels Editor (does work completly yet)

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

ccm-core/src/main/java/org/libreccm/pagemodel/PageModelManager.java

@@ -429,8 +429,7 @@ public class PageModelManager {
      * @return The live version of the {@link ComponentModel}.
      */
     @SuppressWarnings("unchecked")
-    private ComponentModel publishComponentModel(final ComponentModel
-                                                         draftModel) {
+    private ComponentModel publishComponentModel(final ComponentModel draftModel) {
 
         Objects.requireNonNull(draftModel,
                                "Can't publish ComponentModel null.");
@@ -583,8 +582,8 @@ public class PageModelManager {
         pageModel.addContainer(container);
         container.setPageModel(pageModel);
 
-        pageModelRepo.save(pageModel);
         containerModelRepo.save(container);
+        pageModelRepo.save(pageModel);
     }
 
     @Transactional(Transactional.TxType.REQUIRED)

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

@@ -310,7 +310,8 @@ class PageModelComponent
                 <ContainerListComponent
                     ccmApplication={this.props.ccmApplication}
                     containers={this.props.pageModel.containers}
-                    dispatcherPrefix={this.props.dispatcherPrefix} />
+                    dispatcherPrefix={this.props.dispatcherPrefix}
+                    pageModelName={this.props.pageModel.name} />
             </div>;
         }
     }
@@ -506,11 +507,14 @@ interface ContainerListProps {
     ccmApplication: string;
     containers: ContainerModel[];
     dispatcherPrefix: string;
+    pageModelName: string;
 }
 
 interface ContainerListState {
 
+    errorMsg: string;
     newContainerName: string;
+    containers: ContainerModel[];
 }
 
 class ContainerListComponent
@@ -521,10 +525,13 @@ class ContainerListComponent
         super(props);
 
         this.state = {
+            errorMsg: "",
+            containers: props.containers,
             newContainerName: "",
         }
 
         this.addContainer = this.addContainer.bind(this);
+        this.updateNewContainerName = this.updateNewContainerName.bind(this);
     }
 
     public render(): React.ReactNode {
@@ -542,9 +549,14 @@ class ContainerListComponent
                     Add container
                 </button>
             </form>
+            {this.state.errorMsg !== ""
+            && <div className="errorPanel">
+                <span className="fa fa-exclamation-triangle"></span>
+                {this.state.errorMsg}
+            </div>}
             <ul className="containerList">
-                {this.props.containers
-                    && this.props.containers.map((container) =>
+                {this.state.containers
+                    && this.state.containers.map((container) =>
                         <li>
                             <span>{container.key}</span>
                             <button>
@@ -582,6 +594,15 @@ class ContainerListComponent
 
         event.preventDefault();
 
+        if (this.state.newContainerName === null
+            || this.state.newContainerName === "") {
+
+            this.setState({
+                ...this.state,
+                errorMsg: "A container needs a name!",
+            });
+        }
+
         const headers: Headers = new Headers();
         headers.append("Content-Type", "application/json");
 
@@ -595,7 +616,47 @@ class ContainerListComponent
 
         const url: string = `${this.props.dispatcherPrefix}`
             + `/page-models/${this.props.ccmApplication}/`
+            + `${this.props.pageModelName}`
+            + `/containers/`
             + `${this.state.newContainerName}`;
+
+        fetch(url, init)
+            .then((response: Response) => {
+                if (response.ok) {
+
+                    response
+                        .json()
+                        .then((newContainer) => {
+                            this.setState({
+                                ...this.state,
+                                containers: [
+                                    ...this.state.containers,
+                                    newContainer],
+                                newContainerName: "",
+                            });
+                        })
+                        .catch((error) => {
+                            this.setState({
+                                ...this.state,
+                                errorMsg: `Failed to parse response: `
+                                    + `${error.message}`,
+                            });
+                        });
+                } else {
+                    this.setState({
+                        ...this.state,
+                        errorMsg: `Failed to create new container: `
+                            + `${response.status} ${response.statusText}`,
+                    });
+                }
+            })
+            .catch((error) => {
+                this.setState({
+                    ...this.state,
+                    errorMsg: `Failed to create new container: `
+                        + `${error.message}`,
+                });
+            });
     }
 }
 

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

@@ -2040,6 +2040,18 @@ form.pagemodeleditor.propertiesForm {
     flex-direction: column;
 }
 
+div.errorPanel {
+
+    border: 2px solid #f00;
+    border-radius: 1em;
+
+    color: #f00;
+
+    margin: 1em 0;
+
+    padding: 0.5em;
+}
+
 /* dialog.pageModelEditor {
 
     background-color: #fff;