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

diff --git a/skyquake/plugins/admin/src/components/ListColumn.jsx b/skyquake/plugins/admin/src/components/ListColumn.jsx
new file mode 100644
index 000000000..d2b1d8e1b
--- /dev/null
+++ b/skyquake/plugins/admin/src/components/ListColumn.jsx
@@ -0,0 +1,45 @@
+import React from 'react'
+import ListStack from './ListStack'
+import ListEntryCard from './ListEntryCard'
+import ExplorerColumn from './ExplorerColumn'
+import changeCase from 'change-case'
+
+export default class extends React.Component {
+
+    render() {
+        try {
+            const { model, path, isLast, selected, openElement, editElement, columnCloser } = this.props;
+            const element = model.getElement(path);
+            const name = element.name;
+            const shortName = changeCase.titleCase(name).split(' ').pop();
+            const buttonName = `Add ${shortName}`;
+            console.debug(`ListColumn: ${name}`);
+            const list = element.value ? Array.isArray(element.value) ? element.value : [element.value] : null;
+            const cards = list && list.map((item, index) => {
+                const itemInfo = element.getItemInfo(item);
+                const isSelected = selected ? selected.every((p,i) => p === itemInfo.path[i]) : false;
+                const itemPath = path.slice();
+                itemPath.push(itemInfo.path);
+                const props = { model, 'path': itemPath, 'openElement': openElement.bind(this, itemPath) };
+                return (
+                    <ListEntryCard key={itemInfo.path}
+                        model={model}
+                        path={itemPath}
+                        name={itemInfo.name}
+                        isSelected={isSelected}
+                        openElement={openElement.bind(this, itemPath)}
+                        deleteElement={(path) => editElement(path, 'delete')} />
+                )
+            })
+            return (
+                <ExplorerColumn title={name || path} isLast={isLast} actions={['create']} handler={() => editElement(path, 'create')} columnCloser={columnCloser} >
+                    <div className='list-column' >
+                        {cards}
+                    </div>
+                </ExplorerColumn>
+            )
+        } catch (e) {
+            console.error("component render", e);
+        }
+    }
+}