Attributes detail tab (#373)

GeoNode · Jul 28, 2021 · 7fbca27 · 7fbca27
1 parent e3ee8b2
commit 7fbca27
Show file tree

Hide file tree

Showing 10 changed files with 121 additions and 14 deletions.
diff --git a/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx b/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx
@@ -13,6 +13,7 @@ import FaIcon from '@js/components/FaIcon';
 import Button from '@js/components/Button';
 import Tabs from '@js/components/Tabs';
 import DefinitionList from '@js/components/DefinitionList';
+import Table from '@js/components/Table';
 import Spinner from '@js/components/Spinner';
 import Message from '@mapstore/framework/components/I18N/Message';
 import tooltip from '@mapstore/framework/components/misc/enhancers/tooltip';
@@ -126,7 +127,6 @@ function DetailsPanel({
     onFavorite,
     enableFavorite
 }) {
-
     const [editModeTitle, setEditModeTitle] = useState(false);
     const [editModeAbstract, setEditModeAbstract] = useState(false);
 
@@ -176,6 +176,7 @@ function DetailsPanel({
     const detailUrl = resource?.pk && formatDetailUrl(resource);
     const documentDownloadUrl = (resource?.href && resource?.href.includes('download')) ? resource?.href : undefined;
 
+    const attributeSet = resource?.attribute_set;
     const infoField = [
         {
             "label": "Title",
@@ -273,11 +274,30 @@ function DetailsPanel({
 
     const itemsTab = [
         {
-            title: "Info",
+            title: <Message msgId={"gnviewer.info"} />,
             data: <DefinitionListMoreItem itemslist={infoField} extraItemsList={extraItemsList} />
         }
+
     ];
 
+    const tableHead = [{
+        key: "attribute",
+        value: <Message msgId={"gnviewer.attributeName"} />
+    },
+    {
+        key: "attribute_label",
+        value: <Message msgId={"gnviewer.label"} />
+    },
+    {
+        key: "description",
+        value: <Message msgId={"gnviewer.description"} />
+    }];
+
+    (attributeSet) ? itemsTab.push({
+        title: <Message msgId={"gnviewer.attributes"} />,
+        data: <Table head={tableHead} body={attributeSet} />
+    }) : undefined;
+
     return (
         <div
             ref={detailsContainerNode}

diff --git a/geonode_mapstore_client/client/js/components/Table/Table.jsx b/geonode_mapstore_client/client/js/components/Table/Table.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+const Table = ({head, body}) => {
+
+    const hdlabels = head?.map( hdlabel => {
+        return (
+            hdlabel.value && <>
+                <th>{hdlabel.value}</th>
+            </>
+
+        );
+    });
+
+    const bdData = body?.map((row) =>{
+        return (
+            <tr>
+                {head.map(function(column) {
+                    return <td>{row[column.key]}</td>;
+                })}
+            </tr>);
+    });
+
+
+    return (
+        <table className="table">
+            <thead>
+                <tr>
+                    {hdlabels}
+                </tr>
+            </thead>
+            <tbody>
+                {bdData}
+            </tbody>
+        </table>
+    );
+};
+
+
+Table.propTypes = {
+    head: PropTypes.array,
+    body: PropTypes.array
+};
+
+Table.defaultProps = {
+    head: [],
+    body: []
+};
+
+
+export default Table;
diff --git a/geonode_mapstore_client/client/js/components/Table/index.js b/geonode_mapstore_client/client/js/components/Table/index.js
@@ -0,0 +1,2 @@
+import Table from './Table';
+export default Table;
diff --git a/geonode_mapstore_client/client/js/components/Tabs/Tabs.jsx b/geonode_mapstore_client/client/js/components/Tabs/Tabs.jsx
@@ -2,19 +2,18 @@ import React from 'react';
 import {Tabs as TabsRB, Tab} from "react-bootstrap";
 import PropTypes from 'prop-types';
 
-const Tabs = ({itemsTab, transition}) => {
+const Tabs = ({itemsTab, transition, defaultActiveKey}) => {
 
     const alltabs = itemsTab.map( (tabInfo, index) => {
         return (
-            <Tab  key={index} eventKey={tabInfo?.title} title={tabInfo?.title}>
+            <Tab  key={index} eventKey={index} title={tabInfo?.title}>
                 {tabInfo?.data}
             </Tab>
         );
     });
-
     return (
         <TabsRB
-            defaultActiveKey={itemsTab?.shift()?.title}
+            defaultActiveKey={defaultActiveKey}
             transition={transition}
             className={"tabs-info"}
             id={"tabs-info"}
@@ -29,12 +28,14 @@ const Tabs = ({itemsTab, transition}) => {
 
 Tabs.propTypes = {
     itemsTab: PropTypes.array,
-    transition: PropTypes.bool
+    transition: PropTypes.bool,
+    defaultActiveKey: PropTypes.number
 };
 
 Tabs.defaultProps = {
     itemsTab: [],
-    transition: true
+    transition: true,
+    defaultActiveKey: 0
 };
 
 export default Tabs;
diff --git a/geonode_mapstore_client/client/static/mapstore/translations/data.de-DE.json b/geonode_mapstore_client/client/static/mapstore/translations/data.de-DE.json
@@ -132,10 +132,15 @@
             "save": "Speichern",
             "share": "Teilen",
             "download": "Herunterladen",
-            "moreinfo": "Mehr Info"
+            "moreinfo": "Mehr Info",
+            "info": "Info",
+            "attributeName": "Attributname",
+            "label": "Etikett",
+            "description": "Beschreibung",
+            "attributes": "Attribute"
 
 
         }
 
     }
-}
+}
diff --git a/geonode_mapstore_client/client/static/mapstore/translations/data.en-US.json b/geonode_mapstore_client/client/static/mapstore/translations/data.en-US.json
@@ -135,7 +135,13 @@
             "save": "Save",
             "share": "Share",
             "download": "Download",
-            "moreinfo": "More info"
+            "moreinfo": "More info",
+            "info": "Info",
+            "attributeName": "Attribute name",
+            "label": "Label",
+            "description": "Description",
+            "attributes": "Attributes"
+
         }
     }
 }
diff --git a/geonode_mapstore_client/client/static/mapstore/translations/data.es-ES.json b/geonode_mapstore_client/client/static/mapstore/translations/data.es-ES.json
@@ -132,7 +132,12 @@
             "save": "Ahorrar",
             "share": "Cuota",
             "download": "Descargar",
-            "moreinfo": "Más información"
+            "moreinfo": "Más información",
+            "info": "Info",
+            "attributeName": "Nombre del Atributo",
+            "label": "Etiqueta",
+            "description": "Descripción",
+            "attributes": "Atributos"
 
         }
 

diff --git a/geonode_mapstore_client/client/static/mapstore/translations/data.fr-FR.json b/geonode_mapstore_client/client/static/mapstore/translations/data.fr-FR.json
@@ -132,7 +132,12 @@
             "save": "Sauver",
             "share": "Partager",
             "download": "Télécharger",
-            "moreinfo": "Plus d'informations"
+            "moreinfo": "Plus d'informations",
+            "info": "Info",
+            "attributeName": "Nom d'attribut",
+            "label": "Étiqueter",
+            "description": "La description",
+            "attributes": "Les attributs"
         }
     }
 }
diff --git a/geonode_mapstore_client/client/static/mapstore/translations/data.it-IT.json b/geonode_mapstore_client/client/static/mapstore/translations/data.it-IT.json
@@ -134,7 +134,12 @@
             "save": "Salva",
             "share": "Condividi",
             "download": "Scarica",
-            "moreinfo": "Maggiori informazioni"
+            "moreinfo": "Maggiori informazioni",
+            "info": "Info",
+            "attributeName": "Nome attributo",
+            "label": "Etichetta",
+            "description": "Descrizione",
+            "attributes": "Attributi"
         }
     }
 }
diff --git a/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less b/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less
@@ -137,6 +137,12 @@
             padding: 2em;
         }
     }
+    .tab-content {
+        .table {
+            margin-bottom: 2.5em;
+            min-width: 700px;
+          }
+      }
 }
 .gn-details-panel-content, .gn-details-panel-info {
     padding: 1rem;