#1500: Tabs type on filter forms (#1503)

GeoNode · Aug 7, 2023 · 14287a3 · 14287a3
1 parent f983a6b
commit 14287a3
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 14 deletions.
diff --git a/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsInfo.jsx b/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsInfo.jsx
@@ -9,9 +9,9 @@ import React, { useState } from 'react';
 import castArray from 'lodash/castArray';
 import isEmpty from 'lodash/isEmpty';
 import moment from 'moment';
-import { Tabs, Tab } from "react-bootstrap";
 
 import Button from '@js/components/Button';
+import Tabs from '@js/components/Tabs';
 import DetailsAttributeTable from '@js/components/DetailsPanel/DetailsAttributeTable';
 import DetailsLinkedResources from '@js/components/DetailsPanel/DetailsLinkedResources';
 import Message from '@mapstore/framework/components/I18N/Message';
@@ -171,19 +171,18 @@ function DetailsInfo({
     const selectedTabId = filteredTabs?.[0]?.id;
     return (
         <Tabs
-            defaultActiveKey={selectedTabId}
-            bsStyle="pills"
             className="gn-details-info tabs-underline"
-        >
-            {filteredTabs.map(({Component, ...tab}, idx) => (
-                <Tab key={idx} eventKey={tab?.id} title={<DetailInfoFieldLabel field={tab} />}>
-                    <Component
-                        fields={tab?.items}
-                        formatHref={formatHref}
-                        resourceTypesInfo={resourceTypesInfo} />
-                </Tab>
-            ))}
-        </Tabs>
+            selectedTabId={selectedTabId}
+            tabs={filteredTabs.map(({Component, ...tab} = {}) => ({
+                title: <DetailInfoFieldLabel field={tab} />,
+                eventKey: tab?.id,
+                component: <Component
+                    fields={tab?.items}
+                    formatHref={formatHref}
+                    resourceTypesInfo={resourceTypesInfo} />
+
+            }))}
+        />
     );
 }
 

diff --git a/geonode_mapstore_client/client/js/components/FiltersForm/FilterItems.jsx b/geonode_mapstore_client/client/js/components/FiltersForm/FilterItems.jsx
@@ -14,6 +14,7 @@ import { FormGroup, Checkbox, FormControl as FormControlRB } from 'react-bootstr
 import ReactSelect from 'react-select';
 
 import Accordion from "@js/components/Accordion";
+import Tabs from "@js/components/Tabs";
 import SelectInfiniteScroll from '@js/components/SelectInfiniteScroll';
 import localizedProps from '@mapstore/framework/components/misc/enhancers/localizedProps';
 import withDebounceOnCallback from '@mapstore/framework/components/misc/enhancers/withDebounceOnCallback';
@@ -84,7 +85,8 @@ function FilterItem({
     extentProps,
     timeDebounce,
     field,
-    filters
+    filters,
+    setFilters
 }, { messages }) {
 
 
@@ -318,10 +320,31 @@ function FilterItem({
                     items={accordionItems}
                     values={values}
                     onChange={onChange}
+                    filters={filters}
+                    setFilters={setFilters}
                 />)
             }
         />);
     }
+    if (field.type === 'tabs') {
+        const key = `${id}-${field.id}`;
+        return (
+            <Tabs
+                identifier={key}
+                tabs={(field?.items || [])?.map((item) => ({
+                    title: item.labelId ? getMessageById(messages, field.labelId) : item.label,
+                    component: <FilterItems
+                        {...item}
+                        items={item.items}
+                        values={values}
+                        filters={filters}
+                        setFilters={setFilters}
+                        onChange={onChange}
+                    />
+                }))}
+            />
+        );
+    }
     return null;
 }
 

diff --git a/geonode_mapstore_client/client/js/components/Tabs/Tabs.jsx b/geonode_mapstore_client/client/js/components/Tabs/Tabs.jsx
@@ -0,0 +1,69 @@
+/*
+ * Copyright 2023, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import PropTypes from "prop-types";
+import isNil from 'lodash/isNil';
+import { Tabs as RTabs, Tab } from 'react-bootstrap';
+import useLocalStorage from '@js/hooks/useLocalStorage';
+
+const Tabs = ({
+    tabs = [],
+    identifier,
+    selectedTabId,
+    onSelect,
+    className
+}) => {
+    const [eventKeys, setEventKeys] = useLocalStorage('tabSelected', {});
+    const persistSelection = isNil(selectedTabId);
+    const selectedKey = !persistSelection ? selectedTabId : (eventKeys[identifier] ?? 0);
+
+    const onSelectTab = (key) => {
+        const updatedEventKeys = {
+            ...eventKeys,
+            [identifier]: key
+        };
+        setEventKeys(updatedEventKeys);
+    };
+    return (
+        <RTabs
+            bsStyle="pills"
+            className={className}
+            key={identifier}
+            defaultActiveKey={selectedKey}
+            onSelect={onSelect ? onSelect : onSelectTab}
+        >
+            {tabs.map((tab, index)=> {
+                const eventKey = !isNil(tab.eventKey) ? tab.eventKey : index;
+                const component = (!onSelect || selectedKey === eventKey) ? tab.component : null;
+                return (
+                    <Tab key={`tab-${index}`} eventKey={eventKey} title={tab.title}>
+                        {component}
+                    </Tab>);
+            })}
+        </RTabs>
+    );
+};
+
+Tabs.propTypes = {
+    className: PropTypes.string,
+    tabs: PropTypes.arrayOf(PropTypes.shape({
+        title: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+        component: PropTypes.node,
+        eventKey: PropTypes.string
+    })),
+    identifier: PropTypes.string,
+    selectedTabId: PropTypes.string,
+    onSelect: PropTypes.func
+};
+
+Tabs.defaultProps = {
+    tabs: [],
+    className: "gn-tabs tabs-underline"
+};
+
+export default Tabs;
diff --git a/geonode_mapstore_client/client/js/components/Tabs/index.js b/geonode_mapstore_client/client/js/components/Tabs/index.js
@@ -0,0 +1,8 @@
+/*
+ * Copyright 2023, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { default } from '@js/components/Tabs/Tabs';
diff --git a/geonode_mapstore_client/client/themes/geonode/less/_filter-form.less b/geonode_mapstore_client/client/themes/geonode/less/_filter-form.less
@@ -58,6 +58,11 @@
 
         }
     }
+    .gn-tabs {
+        > .nav {
+            .background-color-var(@theme-vars[main-bg]);
+        }
+    }
 }
 
 // **************
@@ -282,3 +287,24 @@
         }
     }
 }
+
+.gn-tabs {
+    padding: 0.5rem;
+    > .nav {
+        position: sticky;
+        top: 2.5rem;
+        z-index: 1;
+        li {
+            a {
+                padding: 0.125rem;
+            }
+            a:focus {
+                outline-color: transparent;
+                outline-offset: 0px;
+            }
+        }
+    }
+    .tab-content {
+        margin-top: 0.5rem;
+    }
+}