update from RIFT as of 696b75d2fe9fb046261b08c616f1bcf6c0b54a9b third try

[osm/UI.git] / skyquake / plugins / admin / src / components / ContainerColumn.jsx

diff --git a/skyquake/plugins/admin/src/components/ContainerColumn.jsx b/skyquake/plugins/admin/src/components/ContainerColumn.jsx
new file mode 100644 (file)
index 0000000..99abb78
--- /dev/null
+++ b/skyquake/plugins/admin/src/components/ContainerColumn.jsx
@@ -0,0 +1,63 @@
+import React from 'react'
+import LeafGroup from './LeafGroup'
+import ListStack from './ListStack'
+import ExplorerColumn from './ExplorerColumn'
+import yang from '../yang/leaf-utils'
+
+export default class extends React.Component {
+    constructor(props){
+        super(props);
+        this.state = {actions: [], properties: null};
+    }
+
+    render() {
+        try {
+            const { model, path, isLast, selected, isReadonly, openElement, editElement, columnCloser } = this.props;
+            const element = model.getElement(path)
+            const name = element.name;
+            console.debug(`ContainerColumn: ${name}`);
+            const data = element.value;
+            const leaves = [];
+            const choices = [];
+            const containers = [];
+            const lists = [];
+            const loading = [];
+            const dataDivided = {
+                leaf: leaves,
+                leaf_list: leaves,
+                container: containers,
+                list: lists,
+                choice: choices,
+                loading: loading
+            };
+            const properties = this.state.properties || element.schema.properties;
+            properties.forEach((property, index) => {
+                const list = dataDivided[property.type]
+                list && list.push(property)
+                !list && console.debug(`ContainerColumn - unhandled property : ${path}/${property.name} - ${property.type}`)
+            });
+            choices.forEach(choice => choice.properties.forEach(c => c.properties.forEach(p => leaves.push(p))));
+            const items = [];
+            leaves.length && items.push(<LeafGroup key='leaves' model={model} path={path} isReadonly={!isLast} properties={leaves} editElement={editElement} />);
+            containers.length && items.push(<ListStack key='containers' model={model} path={path} properties={containers} selected={selected} openElement={openElement} />);
+            lists.length && items.push(<ListStack key='list' model={model} path={path} properties={lists} selected={selected} openElement={openElement} />);
+            loading.length && items.push(<ListStack key='loading' model={model} path={path} properties={loading} openElement={openElement} />);
+            const actions = this.state.actions.slice();
+            !isLast || isReadonly || !leaves.length || leaves.every(p => yang.isKey(p)) || actions.push('update');
+            function invokeAction(action) {
+                editElement(path, action);
+            }
+            return (
+                <ExplorerColumn title={name || path} isLast={isLast} actions={actions} handler={invokeAction} columnCloser={columnCloser} >
+                    <div className='container-column' >
+                        <div>
+                            {items}
+                        </div>
+                    </div>
+                </ExplorerColumn>
+            )
+        } catch (e) {
+            console.error("component render", e);
+        }
+    }
+}