X-Git-Url: https://osm.etsi.org/gitweb/?a=blobdiff_plain;ds=inline;f=skyquake%2Fplugins%2Fadmin%2Fsrc%2Fcomponents%2FLeafGroup.jsx;fp=skyquake%2Fplugins%2Fadmin%2Fsrc%2Fcomponents%2FLeafGroup.jsx;h=13a54cfaf9030a8a244604c6193f1beec2e80c0a;hb=03156e335275de1dafbc2a816e98006afdf249bf;hp=0000000000000000000000000000000000000000;hpb=f2dc2462571800e62cba969964de621dca09299c;p=osm%2FUI.git

diff --git a/skyquake/plugins/admin/src/components/LeafGroup.jsx b/skyquake/plugins/admin/src/components/LeafGroup.jsx
new file mode 100644
index 000000000..13a54cfaf
--- /dev/null
+++ b/skyquake/plugins/admin/src/components/LeafGroup.jsx
@@ -0,0 +1,45 @@
+import React from 'react'
+import ColumnCard from './ColumnCard'
+import yang from '../yang/leaf-utils.js'
+
+export default class extends React.Component {
+
+    render() {
+        try {
+            const { model, path, isReadonly, properties, editElement } = this.props;
+            const element = model.getElement(path);
+            console.debug(`LeafGroup: ${element.name}`);
+            const container = element.value;
+            const leaves = properties.reduce((leaves, property, index) => {
+                const itemPath = path.slice();
+                itemPath.push(property.name);
+                const props = { model, 'path': itemPath };
+                let value = (container && container[property.name]);
+                let valueIsSet = yang.isValueSet(property, value);
+                if (!valueIsSet) {
+                    value = yang.getDefaultValue(property);
+                    valueIsSet = yang.isValueSet(property, value);
+                }
+                if (valueIsSet) {
+                    value = yang.getDisplayValue(property, value);
+                }
+                valueIsSet && leaves.push(
+                    <div key={property.name} className='leaf-group-leaf' style={{ maxWidth: '400px' }} >
+                        <div style={{ fontSize: 'small', color: 'gray' }} >{`${property.name}`}</div>
+                        <div style={{paddingLeft: '4px'}} >{value}</div>
+                    </div>
+                );
+                return leaves;
+            }, [])
+            return (
+                <ColumnCard path={path}>
+                    <div className='leaf-group'>
+                        {leaves}
+                    </div>
+                </ColumnCard>
+            )
+        } catch (e) {
+            console.error("component render", e);
+        }
+    }
+}