Show tables of a collection in a tabset

GeoNodeUserGroup-DE · Jul 11, 2024 · 04d23ec · 04d23ec
1 parent 26d3946
commit 04d23ec
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 53 deletions.
diff --git a/geonode_mapstore_client/client/js/plugins/TabularCollectionViewer.jsx b/geonode_mapstore_client/client/js/plugins/TabularCollectionViewer.jsx
@@ -2,44 +2,21 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
+import { Tabs, Tab } from 'react-bootstrap';
 
 import { createPlugin } from '@mapstore/framework/utils/PluginsUtils';
-import { describeFeatureType, getFeatureSimple } from '@mapstore/framework/api/WFS';
 
-import Table from '@js/components/Table';
 import resourceReducer from '@js/reducers/gnresource';
 import { layersSelector } from '@mapstore/framework/selectors/layers';
-import TabularPreview, { TableComponent } from './TabularPreview';
+import { TableComponent } from './TabularPreview';
 
 function propertyToKey(property, index) {
     return `${property}`;
 };
 
-function headerFromFeatures(data) {
-    const feature = data.features[0] || []
-    const properties = feature.properties;
-    return Object.keys(properties).map((p, index) => ({ value: p, key: propertyToKey(p, index) }));
-};
-
-function rowsFromFeatures(data) {
-    const features = data.features || []
-    // [{col1: "value"}]
-    return features.map((feature, index) => {
-        const row = {}
-        const properties = feature.properties
-        Object.keys(properties)
-              .forEach(name => Object.assign(row, { [propertyToKey(name, index)]: properties[name] }))
-        return row;
-    });
-};
-
-
-
-
 function TabbedTablesComponent({ owsUrl, tableLayers }) {
-    const [header, setHeader] = useState();
-    const [rows, setRows] = useState();
-    const [error, setError] = useState();
+    const [tabs, setTabs] = useState([])
+    const [key, setKey] = useState(0);
 
     if (tableLayers && tableLayers.length == 1) {
         const typeName = tableLayers[0].name;
@@ -48,34 +25,25 @@ function TabbedTablesComponent({ owsUrl, tableLayers }) {
         )
     }
 
-    // useEffect(() => {
-    //     const getFeatures = async () => {
-    //         try {
-    //             const data = await getFeatureSimple(owsUrl, { typeName });
-    //             setHeader(headerFromFeatures(data));
-    //             setRows(rowsFromFeatures(data));
-    //         } catch(error) {
-    //             setError(error)
-    //         }
-    //     }
-    //     if (owsUrl) {
-    //         getFeatures()
-    //     }
-    // }, [owsUrl, typeName])
+    useEffect(() => {
+        setTabs(tableLayers.map((layer, i) => {
+            return (
+                <Tab key={i} eventKey={i} title={layer.name}>
+                    <TableComponent owsUrl={owsUrl} typeName={layer.name} />
+                </Tab>
+            )
+        }));
+    }, [owsUrl, tableLayers]);
 
-    if (error) {
-        console.error(error);
-    }
-    if (!rows) {
-        return <div>No data available!</div>
-    }
     return (
-        <div id="tabular-preview">
-            <div className="tableFixHead" style={{ overflow:"auto" }}>
-                {/* <Table head={header} body={rows} /> */}
-                Hello Tabbed Tables!
-            </div>
-        </div>
+        <Tabs
+            justified
+            id="tabular-data-collection-tabs"
+            defaultActiveKey={key}
+            onSelect={ k => setKey(k) }
+            >
+            {tabs}
+        </Tabs>
     );
 
 };

diff --git a/geonode_mapstore_client/client/themes/geonode/less/geonode.less b/geonode_mapstore_client/client/themes/geonode/less/geonode.less
@@ -43,6 +43,14 @@
 #gn-base-components-theme(@gn-theme-vars);
 #gn-components-theme(@gn-theme-vars);
 
+#tabular-data-collection-tabs {
+    ul[role=tablist] {
+        li.active > a {
+            background-color: darkgray;
+        }
+    }
+}
+
 #tabular-preview {
 
     div {