#1498 - Add image/icon property to filter option (#1499)

* #1498 - Add image/icon property to filter option * Remove residual usage of key * Revert "Remove residual usage of key" This reverts commit 3e44c93.
GeoNode · Aug 8, 2023 · 77b4057 · 77b4057
1 parent b9aafe8
commit 77b4057
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 18 deletions.
diff --git a/geonode_mapstore_client/client/js/api/geonode/v2/index.js b/geonode_mapstore_client/client/js/api/geonode/v2/index.js
@@ -29,6 +29,7 @@ import { getUserInfo } from '@js/api/geonode/user';
 import { ResourceTypes, availableResourceTypes, setAvailableResourceTypes } from '@js/utils/ResourceUtils';
 import { getConfigProp } from '@mapstore/framework/utils/ConfigUtils';
 import { mergeConfigsPatch } from '@mapstore/patcher';
+import { parseIcon } from '@js/utils/SearchUtils';
 
 /**
  * Actions for GeoNode save workflow
@@ -788,16 +789,20 @@ export const getFacetItemsByFacetName = ({ name: facetName, style, filterKey, fi
                 count: 0,
                 filterKey: item.filterKey ?? filterKey,
                 filterValue: isNil(item.filterValue) ? String(item.key) : String(item.filterValue),
-                style
+                style,
+                icon: parseIcon(item),
+                image: item.image
             }))
-            : _items.map(({label, is_localized: isLocalized, key, count} = {})=> {
+            : _items.map(({label, is_localized: isLocalized, key, count, fa_class: icon, image} = {})=> {
                 return {
                     type: "filter",
                     ...(!isNil(isLocalized) && !isLocalized ? { labelId: label } : { label }), // TODO remove when api send isLocalized for all facets response
                     count,
                     filterKey,
                     filterValue: String(key),
-                    style
+                    style,
+                    icon: parseIcon(icon),
+                    image
                 };
             });
 

diff --git a/geonode_mapstore_client/client/js/components/FiltersForm/FilterItems.jsx b/geonode_mapstore_client/client/js/components/FiltersForm/FilterItems.jsx
@@ -21,6 +21,7 @@ import withDebounceOnCallback from '@mapstore/framework/components/misc/enhancer
 import { getMessageById } from '@mapstore/framework/utils/LocaleUtils';
 import FilterByExtent from './FilterByExtent';
 import DateRangeFilter from './DateRangeFilter';
+import FaIcon from '../FaIcon';
 
 const FormControl = localizedProps('placeholder')(FormControlRB);
 function InputControl({ onChange, value, debounceTime, ...props }) {
@@ -30,10 +31,24 @@ const InputControlWithDebounce = withDebounceOnCallback('onChange', 'value')(Inp
 
 const SelectSync = localizedProps('placeholder')(ReactSelect);
 
+function Label({item} = {}, { messages }) {
+    return (
+        <div className="gn-label">
+            <span className="prefix">
+                {item.icon ? <FaIcon name={item.icon}/> : item.image ? <img src={item.image}/> : null}
+                {item.labelId ? getMessageById(messages, item.labelId) : <span>{item.label}</span>}
+            </span>
+            {!isNil(item.count) && <span className="facet-count">{`(${item.count})`}</span>}
+        </div>
+    );
+}
+Label.contextTypes = {
+    messages: PropTypes.object
+};
+
 function Facet({
     item,
     active,
-    label,
     onChange
 }) {
     const filterValue = item.filterValue || item.id;
@@ -47,8 +62,7 @@ function Facet({
                 onKeyDown={(event) => event.key === 'Enter' ? onChange() : null}
                 style={{ display: 'block', width: 0, height: 0, overflow: 'hidden', opacity: 0, padding: 0, margin: 0 }}
             />
-            {label}
-            {!isNil(item.count) && <span className="facet-count">{`(${item.count})`}</span>}
+            <Label item={item}/>
         </div>
     );
 }
@@ -238,7 +252,7 @@ function FilterItem({
         const renderFacet = ({item, active, onChangeFacet, renderChild}) => {
             return (
                 <div className="gn-facet-wrapper">
-                    <Facet label={item.labelId ? getMessageById(messages, item.labelId) : <span>{item.label}</span>} item={item} active={active} onChange={onChangeFacet}/>
+                    <Facet item={item} active={active} onChange={onChangeFacet}/>
                     {item.items && renderChild && <div className="facet-children">{renderChild()}</div>}
                 </div>
             );
@@ -264,8 +278,7 @@ function FilterItem({
                                 value={getFilterValue(item)}
                                 onChange={onChangeFilter}
                             >
-                                {item.labelId ? getMessageById(messages, item.labelId) : item.label}
-                                {!isNil(item.count) && <span className="facet-count">{`(${item.count})`}</span>}
+                                <Label item={item}/>
                             </Checkbox>
                         }
                     </div>
@@ -299,8 +312,7 @@ function FilterItem({
                         checked={!!active}
                         value={getFilterValue(field)}
                         onChange={onChangeFilterParent}>
-                        {field.labelId ? getMessageById(messages, field.labelId) : field.label}
-                        {!isNil(field.count) && <span className="facet-count">{`(${field.count})`}</span>}
+                        <Label item={field}/>
                         {filterChild()}
                     </Checkbox>
                 </FormGroup>
@@ -332,7 +344,7 @@ function FilterItem({
             <Tabs
                 identifier={key}
                 tabs={(field?.items || [])?.map((item) => ({
-                    title: item.labelId ? getMessageById(messages, field.labelId) : item.label,
+                    title: item.labelId ? getMessageById(messages, item.labelId) : item.label,
                     component: <FilterItems
                         {...item}
                         items={item.items}

diff --git a/geonode_mapstore_client/client/js/utils/SearchUtils.js b/geonode_mapstore_client/client/js/utils/SearchUtils.js
@@ -122,11 +122,29 @@ export const updateFilterFormItemsWithFacet = ({formItems, facetItems}) => {
     }, []);
 };
 
+/**
+ * Parse icon name from item.
+ * Skip font awesome prefix from prop `fa-${icon}` and pick only icon name
+ * @param {Object} item filter items
+ * @returns {string} icon name
+ */
+//
+export const parseIcon = (item) => {
+    let value;
+    if (typeof item === 'object') {
+        value = item.icon ?? item?.fa_class;
+    } else {
+        value = item;
+    }
+    return value?.replace("fa-", "");
+};
+
 export default {
     hashLocationToHref,
     getUserName,
     clearQueryParams,
     getQueryFilters,
     filterFormItemsContainFacet,
-    updateFilterFormItemsWithFacet
+    updateFilterFormItemsWithFacet,
+    parseIcon
 };
diff --git a/geonode_mapstore_client/client/js/utils/__tests__/SearchUtils-test.js b/geonode_mapstore_client/client/js/utils/__tests__/SearchUtils-test.js
@@ -10,6 +10,7 @@
 import expect from 'expect';
 import {
     filterFormItemsContainFacet,
+    parseIcon,
     updateFilterFormItemsWithFacet
 } from '../SearchUtils';
 
@@ -58,4 +59,15 @@ describe('Test Resource Utils', () => {
             expect(items[0].items.length).toBe(2);
         });
     });
+    describe('parseIcon', ()=> {
+        it('test with input as string', () => {
+            expect(parseIcon("fa-test")).toBe("test");
+        });
+        it('test with input as object with icon prop', () => {
+            expect(parseIcon({icon: "fa-test"})).toBe("test");
+        });
+        it('test with input as object with fa_class prop', () => {
+            expect(parseIcon({fa_class: "fa-test"})).toBe("test");
+        });
+    });
 });
diff --git a/geonode_mapstore_client/client/themes/geonode/less/_filter-form.less b/geonode_mapstore_client/client/themes/geonode/less/_filter-form.less
@@ -263,11 +263,7 @@
                 padding-top: 0.6rem;
                 .checkbox {
                     label {
-                        display: flex;
-                        justify-content: space-between;
-                        .facet-count {
-                         margin-right: 0.625rem;   
-                        }
+                        width: 100%;
                     }
                 }
             }
@@ -288,6 +284,29 @@
     }
 }
 
+.gn-label {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    .prefix {
+        display: flex;
+        align-items: center;
+        i, img {
+            margin-right: 0.375rem;
+        }
+        i {
+            font-size: 1rem;
+        }
+        img {
+            object-fit: contain;
+            width: 1.5rem;
+        }
+    }
+    .facet-count {
+        margin-right: 0.625rem;
+    }
+}
+
 .gn-tabs {
     padding: 0.5rem;
     > .nav {