[LIBSEARCH-801] Implement "clear active filters" designs for advanced search

src/modules/advanced/components/AdvancedFilter/index.js

@@ -5,93 +5,48 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 const getIsCheckboxFilterChecked = ({ advancedFilter }) => {
-  const hasActiveFilter = advancedFilter.activeFilters?.length > 0;
+  const { activeFilters, conditions } = advancedFilter;
+  const hasActiveFilters = activeFilters?.length > 0;
 
-  if (!hasActiveFilter && advancedFilter.conditions.default === 'checked') {
-    return true;
-  }
-
-  if (hasActiveFilter && advancedFilter.activeFilters[0] === advancedFilter.conditions.checked) {
-    return true;
-  }
-
-  return false;
+  return (!hasActiveFilters && conditions.default === 'checked')
+    || (hasActiveFilters && activeFilters[0] === conditions.checked);
 };
 
 const getDateRangeValue = ({ beginDateQuery, endDateQuery, selectedRange }) => {
-  switch (selectedRange) {
-    case 'Before':
-      if (endDateQuery) {
-        return `before ${endDateQuery}`;
-      }
-      return null;
-    case 'After':
-      if (beginDateQuery) {
-        return `after ${beginDateQuery}`;
-      }
-      return null;
-    case 'Between':
-      if (beginDateQuery && endDateQuery) {
-        return `${beginDateQuery} to ${endDateQuery}`;
-      }
-      return null;
-    case 'In':
-      if (beginDateQuery) {
-        return beginDateQuery;
-      }
-      return null;
-    default:
-      return null;
-  }
+  const dateRanges = {
+    After: beginDateQuery && `after ${beginDateQuery}`,
+    Before: endDateQuery && `before ${endDateQuery}`,
+    Between: (beginDateQuery && endDateQuery) && `${beginDateQuery} to ${endDateQuery}`,
+    In: beginDateQuery
+  };
+
+  return dateRanges[selectedRange] || null;
 };
 
 const getStateDateRangeValues = ({ advancedFilter }) => {
-  if (advancedFilter.activeFilters?.length > 0) {
-    const [filterValue] = advancedFilter.activeFilters;
-
-    // Before
-    if (filterValue.indexOf('before') !== -1) {
-      const values = filterValue.split('before');
-
-      return {
-        stateEndQuery: values[1],
-        stateSelectedRangeOption: 0
-      };
-    }
-
-    // After
-    if (filterValue.indexOf('after') !== -1) {
-      const values = filterValue.split('after');
-
-      return {
-        stateBeginQuery: values[1],
-        stateSelectedRangeOption: 1
-      };
-    }
-
-    // Between
-    if (filterValue.indexOf('to') !== -1) {
-      const values = filterValue.split('to');
-
-      return {
-        stateBeginQuery: values[0],
-        stateEndQuery: values[1],
-        stateSelectedRangeOption: 2
-      };
-    }
+  const rangeValues = {
+    stateSelectedRangeOption: 0
+  };
+  const dates = [null, null];
 
-    // In or other
-    return {
-      stateBeginQuery: filterValue,
-      stateSelectedRangeOption: 3
-    };
+  if (advancedFilter?.activeFilters?.length) {
+    const ranges = ['before', 'after', 'to'];
+    rangeValues.stateSelectedRangeOption = ranges.length;
+    const [filterValue] = advancedFilter.activeFilters;
+    dates.unshift(...filterValue.match(/\d+/gu));
+    ranges.forEach((range, index) => {
+      if (filterValue.includes(range)) {
+        rangeValues.stateSelectedRangeOption = index;
+        if (range === ranges[0]) {
+          dates.unshift(null);
+        }
+      }
+    });
   }
 
-  return {
-    stateBeginQuery: '',
-    stateEndQuery: '',
-    stateSelectedRangeOption: 0
-  };
+  [rangeValues.stateBeginQuery, rangeValues.stateEndQuery] = dates;
+
+  return rangeValues;
 };
 
 const AdvancedFilter = ({ advancedFilter, changeAdvancedFilter }) => {

src/modules/advanced/components/AdvancedSearchForm/index.js

@@ -18,27 +18,24 @@ const AdvancedSearchForm = ({ datastore }) => {
   const [errors, setErrors] = useState([]);
   const dispatch = useDispatch();
 
-  const fields = useSelector((state) => {
-    return state.advanced[datastore.uid].fields;
+  const { activeFilters: advancedFilters = {}, fieldedSearches, fields } = useSelector((state) => {
+    return state.advanced[datastore.uid] || {};
   });
-  const booleanTypes = useSelector((state) => {
-    return state.advanced.booleanTypes;
-  });
-  const fieldedSearches = useSelector((state) => {
-    return state.advanced[datastore.uid].fieldedSearches;
+  const { booleanTypes } = useSelector((state) => {
+    return state.advanced;
   });
   const institution = useSelector((state) => {
     return state.institution;
   });
-  const activeFilters = useSelector((state) => {
-    const currentFilters = state.advanced[datastore.uid].activeFilters || {};
+  const activeFilters = () => {
+    const currentFilters = advancedFilters;
     Object.keys(currentFilters).forEach((filter) => {
       if (!currentFilters[filter]) {
         delete currentFilters[filter];
       }
     });
     return currentFilters;
-  });
+  };
 
   // Functions wrapped with useCallback to prevent unnecessary re-creation
   const changeFieldedSearch = useCallback(({ booleanType, fieldedSearchIndex, query, selectedFieldUid }) => {
@@ -87,9 +84,9 @@ const AdvancedSearchForm = ({ datastore }) => {
       }, [])
       .join(' ');
 
-    if (query.length > 0 || (Object.keys(activeFilters).length > 0)) {
+    if (query.length > 0 || (Object.keys(activeFilters()).length > 0)) {
       const search = {
-        filter: { ...activeFilters },
+        filter: { ...activeFilters() },
         query
       };
 
@@ -110,7 +107,7 @@ const AdvancedSearchForm = ({ datastore }) => {
       ]);
       window.scrollTo(0, 0);
     }
-  }, [navigate, institution, booleanTypes, fieldedSearches, activeFilters, datastore]);
+  }, [navigate, institution, booleanTypes, fieldedSearches, activeFilters(), datastore]);
 
   return (
     <form className='y-spacing' onSubmit={handleSubmit}>
@@ -132,6 +129,7 @@ const AdvancedSearchForm = ({ datastore }) => {
         return (
           <FieldInput
             key={index}
+            booleanTypes={booleanTypes}
             fieldedSearchIndex={index}
             fieldedSearch={fs}
             fields={fields}
@@ -158,7 +156,7 @@ const AdvancedSearchForm = ({ datastore }) => {
         <Icon icon='search' size={24} /> Advanced Search
       </button>
 
-      <FiltersContainer datastore={datastore} />
+      <FiltersContainer datastoreUid={datastore.uid} />
     </form>
   );
 };

src/modules/advanced/components/FieldInput/index.js

@@ -5,6 +5,7 @@ import SearchByOptions from '../../../search/components/SearchByOptions';
 
 const FieldInput = ({
   activeDatastore,
+  booleanTypes,
   changeFieldedSearch,
   fieldedSearch,
   fieldedSearchIndex,
@@ -19,7 +20,7 @@ const FieldInput = ({
       {notFirst && (
         <fieldset className='flex__responsive'>
           <legend className='visually-hidden'>Boolean operator for field {fieldedSearchIndex} and field {fieldedSearchIndex + 1}</legend>
-          {['AND', 'OR', 'NOT'].map((option, index) => {
+          {booleanTypes.map((option, index) => {
             return (
               <label key={index}>
                 <input
@@ -89,6 +90,7 @@ const FieldInput = ({
 
 FieldInput.propTypes = {
   activeDatastore: PropTypes.object,
+  booleanTypes: PropTypes.array,
   changeFieldedSearch: PropTypes.func,
   fieldedSearch: PropTypes.object,
   fieldedSearchIndex: PropTypes.number,

src/modules/advanced/components/FilterList/index.js

@@ -0,0 +1,115 @@
+import './styles.css';
+import '../../../filters/components/Filters/styles.css';
+import { useDispatch, useSelector } from 'react-redux';
+import { Icon } from '../../../reusable';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { setAdvancedFilter } from '../../../advanced';
+
+const FilterList = ({ datastoreUid }) => {
+  const dispatch = useDispatch();
+  const { activeFilters = {}, filters: filterGroup } = useSelector((state) => {
+    return state.advanced[datastoreUid] || {};
+  });
+
+  const filterList = Object.entries(activeFilters).flatMap(([groupUid, filters]) => {
+    const {
+      name = groupUid === 'institution' ? 'Library' : groupUid.charAt(0).toUpperCase() + groupUid.slice(1).replaceAll('_', ' '),
+      type = 'scope_down'
+    } = filterGroup.find((group) => {
+      return group.uid === groupUid;
+    }) || {};
+    return type === 'checkbox'
+      ? []
+      : filters.map((value) => {
+        return { groupUid, name, type, value };
+      });
+  });
+
+  const handleRemoveFilter = ({ groupUid, type, value }) => {
+    const createAction = (overrides = {}) => {
+      dispatch(setAdvancedFilter({
+        ...{
+          datastoreUid,
+          filterGroupUid: groupUid,
+          filterType: type,
+          filterValue: type === 'multiple_select' ? value : null,
+          onlyOneFilterValue: type !== 'multiple_select'
+        },
+        ...overrides
+      }));
+    };
+
+    if (['institution', 'location'].includes(groupUid)) {
+      createAction({ filterGroupUid: 'collection' });
+    }
+
+    if (groupUid === 'institution') {
+      createAction({ filterGroupUid: 'location' });
+    }
+
+    createAction();
+  };
+
+  const handleClearFilters = () => {
+    Object.entries(activeFilters).forEach(([groupUid, filters]) => {
+      filters.forEach(() => {
+        dispatch(setAdvancedFilter({
+          datastoreUid,
+          filterGroupUid: groupUid,
+          filterValue: null,
+          onlyOneFilterValue: true
+        }));
+      });
+    });
+  };
+
+  if (!filterList.length) {
+    return null;
+  }
+
+  return (
+    <section aria-label='active-filters'>
+      <div className='flex margin-bottom__m active-filters-header'>
+        <h2 id='active-filters' className='margin__none h4'>
+          Active filters <span className='text-grey__light'>({filterList.length})</span>
+        </h2>
+        {filterList.length > 1 && (
+          <button
+            className='button-link-light'
+            onClick={(event) => {
+              event.preventDefault();
+              handleClearFilters();
+            }}
+          >
+            Clear all active filters
+          </button>
+        )}
+      </div>
+      <ul className='list__unstyled active-filter-list'>
+        {filterList.map(({ groupUid, name, type, value }) => {
+          return (
+            <li key={`${groupUid}-${value}`}>
+              <button
+                className='padding-y__xs padding-x__s remove-filter underline__hover'
+                onClick={(event) => {
+                  event.preventDefault();
+                  handleRemoveFilter({ groupUid, type, value });
+                }}
+              >
+                {`${name}: ${value}`}
+                <Icon icon='close' />
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+};
+
+FilterList.propTypes = {
+  datastoreUid: PropTypes.string
+};
+
+export default FilterList;

src/modules/advanced/components/FilterList/styles.css

@@ -0,0 +1,33 @@
+.active-filters-header {
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+
+.active-filters-header > .text-grey__light {
+  font-weight: 400;
+}
+
+.active-filter-list {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(1, 1fr);
+}
+
+@media screen and (min-width: 640px) {
+  .active-filter-list {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media screen and (min-width: 820px) {
+  .active-filter-list {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+
+.active-filter-list > li > button {
+  height: 100%;
+  text-align: left;
+  width: 100%;
+}