feat: when facet isMulti=false use clearFilters() to clear the filters

eea · Apr 17, 2024 · b3a797a · b3a797a
1 parent 2b92a5d
commit b3a797a
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 12 deletions.
diff --git a/searchlib/components/Facets/ActiveFilters.jsx b/searchlib/components/Facets/ActiveFilters.jsx
@@ -3,11 +3,16 @@
 import React from 'react';
 import { Button, Card } from 'semantic-ui-react';
 import { Icon, Term } from '@eeacms/search/components';
-import { useSearchContext } from '@eeacms/search/lib/hocs';
+import { useAppConfig, useSearchContext } from '@eeacms/search/lib/hocs';
 
 const ActiveFilters = (props) => {
   const { onRemove, field } = props;
+  const { appConfig } = useAppConfig();
+  const { clearFilters } = useSearchContext();
 
+  const filterConfig = appConfig.facets.find(
+    (f) => (f.id || f.field) === field,
+  );
   const searchContext = useSearchContext();
   const { filters = [] } = searchContext;
 
@@ -36,11 +41,19 @@ const ActiveFilters = (props) => {
                           //   (v) => v !== option,
                           // );
                           // // setActiveFilter(filteredValues);
-                          onRemove(option);
+                          if (!filterConfig.isMulti) {
+                            clearFilters();
+                          } else {
+                            onRemove(option);
+                          }
                         }}
                         onKeyDown={(e) => {
                           if (e.key === 'Enter') {
-                            onRemove(option);
+                            if (!filterConfig.isMulti) {
+                              clearFilters();
+                            } else {
+                              onRemove(option);
+                            }
                           }
                         }}
                       >
@@ -60,7 +73,9 @@ const ActiveFilters = (props) => {
         className="clear-btn"
         content="Clear all"
         onClick={() => {
-          if (Array.isArray(activeFilter)) {
+          if (!filterConfig.isMulti) {
+            clearFilters();
+          } else if (Array.isArray(activeFilter)) {
             (activeFilter || []).forEach((v) => {
               onRemove(v);
             });
@@ -70,7 +85,9 @@ const ActiveFilters = (props) => {
         }}
         onKeyDown={(e) => {
           if (e.key === 'Enter') {
-            if (Array.isArray(activeFilter)) {
+            if (!filterConfig.isMulti) {
+              clearFilters();
+            } else if (Array.isArray(activeFilter)) {
               (activeFilter || []).forEach((v) => {
                 onRemove(v);
               });

diff --git a/searchlib/components/Facets/Unconnected/SingleTermFacet.jsx b/searchlib/components/Facets/Unconnected/SingleTermFacet.jsx
@@ -3,7 +3,7 @@ import { Icon } from 'semantic-ui-react';
 import cx from 'classnames';
 import { Resizable, ToggleSort, Term } from '@eeacms/search/components';
 import { useSort } from '@eeacms/search/lib/hocs';
-import { useAppConfig } from '@eeacms/search/lib/hocs';
+import { useAppConfig, useSearchContext } from '@eeacms/search/lib/hocs';
 
 function getFilterValueDisplay(filterValue) {
   if (filterValue === undefined || filterValue === null) return '';
@@ -68,6 +68,11 @@ const SingleTermFacetViewComponent = (props) => {
     onSearch,
     field,
   } = props;
+  const searchContext = useSearchContext();
+  const { filters = [] } = searchContext;
+
+  const initialValue =
+    (filters.find((f) => f.field === field) || {})?.values || [];
 
   const { appConfig } = useAppConfig();
   const facetConfig = appConfig.facets.find((f) => f.field === field);
@@ -91,6 +96,13 @@ const SingleTermFacetViewComponent = (props) => {
     field,
   );
 
+  const sortedOptionsAdjusted = sortedOptions.map((item) => {
+    if (initialValue.includes(item.value)) {
+      item.selected = true;
+    }
+    return item;
+  });
+
   return (
     <fieldset className={cx('sui-facet searchlib-multiterm-facet', className)}>
       {/*<legend className="sui-facet__title">{label}</legend>*/}
@@ -145,7 +157,8 @@ const SingleTermFacetViewComponent = (props) => {
       </div>
       <Resizable>
         <FacetOptions
-          sortedOptions={sortedOptions}
+          // sortedOptions={sortedOptions}
+          sortedOptions={sortedOptionsAdjusted}
           label={label}
           onSelect={onSelect}
           onRemove={onRemove}

diff --git a/searchlib/components/FilterList/ActiveFilterValue.jsx b/searchlib/components/FilterList/ActiveFilterValue.jsx
@@ -1,11 +1,12 @@
 import React from 'react';
-import { useAppConfig } from '@eeacms/search/lib/hocs';
+import { useAppConfig, useSearchContext } from '@eeacms/search/lib/hocs';
 import { Term } from '@eeacms/search/components';
 import { Label, Icon } from 'semantic-ui-react';
 
 const ActiveFilterValue = (props) => {
   const { field, values, type, removeFilter } = props;
   const { appConfig } = useAppConfig();
+  const { clearFilters } = useSearchContext();
 
   const filterConfig = appConfig.facets.find(
     (f) => (f.id || f.field) === field,
@@ -37,7 +38,9 @@ const ActiveFilterValue = (props) => {
                 name="close"
                 tabIndex={0}
                 onClick={() => {
-                  if (values.length === 1) {
+                  if (!filterConfig.isMulti) {
+                    clearFilters();
+                  } else if (values.length === 1) {
                     removeFilter(field, null, type || filterConfig.filterType);
                   } else {
                     removeFilter(field, value, type || filterConfig.filterType);

diff --git a/searchlib/lib/utils.js b/searchlib/lib/utils.js
@@ -59,7 +59,10 @@ export function applyConfigurationSchema(config) {
   config.disjunctiveFacets = [...(config.disjunctiveFacets || [])];
   const { facets = [] } = config;
   facets.forEach((facet) => {
-    if (facet.isMulti && !config.disjunctiveFacets.includes(facet.field)) {
+    if (
+      facet.factory === 'SingleTermFacet' ||
+      (facet.isMulti && !config.disjunctiveFacets.includes(facet.field))
+    ) {
       config.disjunctiveFacets.push(facet.field);
     }
   });
@@ -291,8 +294,8 @@ export function getBuckets({
 
     let filtered_data = blacklist.length
       ? unfiltered_data.filter(
-        (bucket) => blacklist.indexOf(bucket.value) === -1,
-      )
+          (bucket) => blacklist.indexOf(bucket.value) === -1,
+        )
       : unfiltered_data;
 
     filtered_data = whitelist.length