CCM NG: Progress on the PageModelsEditor

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

Former-commit-id: e77ce5ecc3

ccm-core/src/main/java/org/libreccm/pagemodel/rs/Components.java

@@ -327,8 +327,14 @@ public class Components {
                 throw new WebApplicationException(ex);
             }
             
-            objectBuilder.add(propertyDescriptor.getName(),
+            final String valueStr;
-                              value.toString());
+            if (value == null) {
+                valueStr = "";
+            } else {
+                valueStr = value.toString();
+            }
+
+            objectBuilder.add(propertyDescriptor.getName(), valueStr);
 
         }
 

ccm-core/src/main/java/org/libreccm/pagemodel/rs/PageModels.java

@@ -19,9 +19,11 @@
 package org.libreccm.pagemodel.rs;
 
 import com.arsdigita.kernel.KernelConfig;
+
 import org.libreccm.configuration.ConfigurationManager;
 import org.libreccm.core.CoreConstants;
 import org.libreccm.l10n.GlobalizationHelper;
+import org.libreccm.pagemodel.ComponentModel;
 import org.libreccm.pagemodel.ContainerModel;
 import org.libreccm.pagemodel.PageModel;
 import org.libreccm.pagemodel.PageModelManager;
@@ -47,6 +49,7 @@ import javax.ws.rs.PUT;
 import javax.ws.rs.Path;
 import javax.ws.rs.PathParam;
 import javax.ws.rs.Produces;
+
 import java.util.Date;
 import java.util.List;
 import java.util.Objects;

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

@@ -568,7 +568,8 @@ class ContainerListComponent
                             container={container}
                             deleteContainer={this.deleteContainer}
                             dispatcherPrefix={this.props.dispatcherPrefix}
-                            errorMsg="" />)
+                            errorMsg=""
+                            pageModelName={this.props.pageModelName} />)
                         // <li>
                         //     <span>{container.key}</span>
                         //     <button
@@ -761,19 +762,39 @@ interface ContainerModelComponentProps {
     deleteContainer: (key: string) => void;
     dispatcherPrefix: string;
     errorMsg: string;
+    pageModelName: string;
+}
+
+interface ContainerModelComponentState {
+
+    components: ComponentModel[];
+    errorMessages: string[];
 }
 
 class ContainerModelComponent
-    extends React.Component<ContainerModelComponentProps, {}> {
+    extends React.Component<ContainerModelComponentProps,
+                            ContainerModelComponentState> {
 
     constructor(props: ContainerModelComponentProps) {
 
         super(props);
+
+        this.state = {
+
+            components: [],
+            errorMessages: [],
+        };
+    }
+
+    public componentDidMount() {
+
+        this.fetchComponents();
     }
 
     public render(): React.ReactNode {
 
         return <li>
+            <div className="container-header">
                 <span>{this.props.container.key}</span>
                 <button
                     onClick={(event) => this.deleteContainer(
@@ -782,7 +803,81 @@ class ContainerModelComponent
                     <span className="fa fa-minus-circle"></span>
                     Delete
                 </button>
+            </div>
+            <div className="components-list">
+                <ul>
+                    {this.state.components.map((component: ComponentModel) =>
+                        <li>
+                            {component.key}
                         </li>
+                    )}
+                </ul>
+            </div>
+        </li>
+    }
+
+    private fetchComponents(): void {
+
+        const componentsUrl = `${this.props.dispatcherPrefix}`
+            + `/page-models/${this.props.ccmApplication}`
+            + `/${this.props.pageModelName}`
+            + `/containers/${this.props.container.key}`
+            + `/components`;
+
+        const init: RequestInit = {
+            credentials: "same-origin",
+            method: "GET",
+        };
+
+        fetch(componentsUrl, init)
+            .then((response) => {
+                if (response.ok) {
+
+                    response
+                        .json()
+                        .then((components) => {
+
+                            this.setState({
+                                ...this.state,
+                                components,
+                            });
+                        })
+                        .catch((error) => {
+                            const errorMessages: string[] = this
+                                .state.errorMessages;
+                            errorMessages.push(`Failed to retrieve PageModels ` +
+                                `from ${componentsUrl}: ${error.message}`);
+
+                            this.setState({
+                                ...this.state,
+                                errorMessages,
+                            });
+                        });
+                } else {
+                    const errorMessages: string[] = this
+                        .state.errorMessages;
+                    errorMessages.push(`Failed to retrieve PageModels from `
+                        + `\"${componentsUrl}\": HTTP Status Code: `
+                        + `${response.status}; `
+                        + `message: ${response.statusText}`);
+
+                    this.setState({
+                        ...this.state,
+                        errorMessages,
+                    });
+                }
+            })
+            .catch((error) => {
+                const errorMessages: string[] = this
+                    .state.errorMessages;
+                errorMessages.push(`Failed to retrieve PageModels ` +
+                    `from ${componentsUrl}: ${error.message}`);
+
+                this.setState({
+                    ...this.state,
+                    errorMessages,
+                });
+            });
     }
 
     private deleteContainer(
@@ -819,7 +914,6 @@ interface ComponentInfo {
     label: string;
 }
 
-
 class PageModelEditor
     extends React.Component<{}, PageModelEditorState> {