Merge pull request #886 from City-of-Helsinki/UHF-9563_area_filter_mu…

…ltiselect UHF-9563: add multiselect for job search area filter
City-of-Helsinki · Jan 22, 2024 · bb86e37 · bb86e37
2 parents a8a6523 + a2e558c
commit bb86e37
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 13 deletions.
diff --git a/dist/js/job-search.min.js b/dist/js/job-search.min.js
diff --git a/src/js/react/apps/job-search/containers/FormContainer.tsx b/src/js/react/apps/job-search/containers/FormContainer.tsx
@@ -52,7 +52,7 @@ const FormContainer = () => {
   // Set form control values from url parameters on load
   useEffect(() => {
     setKeyword(urlParams?.keyword?.toString() || '');
-    setAreaFilter(getInitialAreaFilter(urlParams?.area_filter, areaFilterOptions));
+    setAreaFilter(transformDropdownsValues(urlParams?.area_filter, areaFilterOptions));
     setTaskAreaFilter(transformDropdownsValues(urlParams?.task_areas, taskAreasOptions));
     setEmploymentFilter(transformDropdownsValues(urlParams?.employment, employmentOptions));
     setContinuous(!!urlParams?.continuous);
@@ -69,7 +69,7 @@ const FormContainer = () => {
 
     event.preventDefault();
     setUrlParams({
-      area_filter: areaFilterSelection?.value,
+      area_filter: areaFilterSelection.map((selection: OptionType) => selection.value),
       employment: employmentSelection.reduce((acc: any, curr: any) => {
         const target = curr.additionalValue
           ? [curr.additionalValue.toString(), curr.value.toString()]
@@ -222,6 +222,7 @@ const FormContainer = () => {
                   clearButtonAriaLabel={Drupal.t('Clear @label selection', {'@label': areaFilterLabel}, { context: 'React search clear selection label' })}
                   className='job-search-form__dropdown'
                   clearable
+                  multiselect
                   selectedItemRemoveButtonAriaLabel={Drupal.t(
                     'Remove item',
                     {},

diff --git a/src/js/react/apps/job-search/containers/SelectionsContainer.tsx b/src/js/react/apps/job-search/containers/SelectionsContainer.tsx
@@ -6,6 +6,7 @@ import SearchComponents from '../enum/SearchComponents';
 import { getLanguageLabel } from '../helpers/Language';
 import transformDropdownsValues from '../helpers/Params';
 import {
+  areaFilterAtom,
   areaFilterSelectionAtom,
   continuousAtom,
   employmentAtom,
@@ -21,7 +22,6 @@ import {
   youthSummerJobsAtom,
 } from '../store';
 import OptionType from '../types/OptionType';
-import { getAreaInfo } from '../helpers/Areas';
 
 const SelectionsContainer = () => {
   const urlParams = useAtomValue(urlAtom);
@@ -30,9 +30,11 @@ const SelectionsContainer = () => {
   const updateTaskAreas = useSetAtom(taskAreasSelectionAtom);
   const employmentOptions = useAtomValue(employmentAtom);
   const updateEmploymentOptions = useSetAtom(employmentSelectionAtom);
+  const updateAreaFilter = useSetAtom(areaFilterSelectionAtom);
+  const areaFilterOptions = useAtomValue(areaFilterAtom);
 
   const showClearButton =
-    urlParams?.area_filter ||
+    urlParams?.area_filter?.length ||
     urlParams?.task_areas?.length ||
     urlParams?.continuous ||
     urlParams?.internship ||
@@ -68,10 +70,10 @@ const SelectionsContainer = () => {
         />
       )}      
       {urlParams.area_filter && (
-        <SingleFilter
-          label={getAreaInfo.find(area => area.key === urlParams.area_filter?.toString())?.label}
-          atom={areaFilterSelectionAtom}
+        <ListFilter
+          updater={updateAreaFilter}
           valueKey={SearchComponents.AREA_FILTER}
+          values={transformDropdownsValues(urlParams.area_filter, areaFilterOptions)}
         />
       )}
       {urlParams.continuous && (

diff --git a/src/js/react/apps/job-search/hooks/useQueryString.tsx b/src/js/react/apps/job-search/hooks/useQueryString.tsx
@@ -136,10 +136,15 @@ const useQueryString = (urlParams: URLParams): string => {
     });
   }
 
-  if (urlParams.area_filter) {
+  if (urlParams?.area_filter?.length) {
+    const postalCodes: string[] = [];
+    urlParams.area_filter.forEach(areaCode => {
+      postalCodes.push(...getAreaInfo.find(area => area.key === areaCode)?.postalCodes || []);
+    });
+
     query.bool.filter.push({
       terms: {
-        [IndexFields.POSTAL_CODE]: getAreaInfo.find(area => area.key === urlParams.area_filter?.toString())?.postalCodes,
+        [IndexFields.POSTAL_CODE]: postalCodes
       }
     });
   }

diff --git a/src/js/react/apps/job-search/store.tsx b/src/js/react/apps/job-search/store.tsx
@@ -290,7 +290,7 @@ export const summerJobsAtom = atom<boolean>(false);
 export const youthSummerJobsAtom = atom<boolean>(false);
 
 export const resetFormAtom = atom(null, (get, set) => {
-  set(areaFilterSelectionAtom, null);
+  set(areaFilterSelectionAtom, []);
   set(taskAreasSelectionAtom, []);
   set(keywordAtom, '');
   set(continuousAtom, false);
@@ -311,4 +311,4 @@ export const areaFilterAtom = atom(
   )
 ));
 
-export const areaFilterSelectionAtom = atom<OptionType | null>(null);
+export const areaFilterSelectionAtom = atom<OptionType[]>([] as OptionType[]);
diff --git a/src/js/react/apps/job-search/types/URLParams.ts b/src/js/react/apps/job-search/types/URLParams.ts
@@ -1,5 +1,5 @@
 type URLParams = {
-  area_filter?: string;
+  area_filter?: string[];
   continuous?: boolean;
   employment?: string[];
   internship?: boolean;