@ouestfrance/sipa-bms-ui 7.14.1

package/src/composables/search.composable.ts

@@ -0,0 +1,316 @@
+import {
+  getValueByPath,
+  isEmptyStringOrNotDefined,
+  searchString,
+} from '@/helpers/string.helper';
+import { Filter, SavedFilter } from '@/models';
+import { computed, onMounted, Ref, ref, unref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { useUserPref } from '@/composables/userPref.composable';
+import _cloneDeep from 'lodash/cloneDeep';
+import {
+  handleValueInSearchParams,
+  writeLocation,
+} from '@/helpers/location.helper';
+import {
+  dateFilterCompare,
+  dateIsBetween,
+  isBetweenFilter,
+  numberIsBetween,
+} from '@/composables/search.helper';
+
+const FILTER_KEY = 'bms-ui-filter';
+const FILTER_SEARCH_KEY = `${FILTER_KEY}-search`;
+
+export const useSearch = (
+  persistent: boolean | Ref<boolean> = true,
+  defaultFilters: Filter[] | Ref<Filter[]> = [],
+  defaultFiltersOpened: boolean | Ref<boolean> = false,
+) => {
+  const route = useRoute();
+  const userPref = useUserPref();
+  const reflect = ref<boolean>(unref(persistent));
+  const search = ref<string>('');
+  const filters = ref<Filter[]>(unref(defaultFilters));
+  const isFilterVisible = ref<boolean>(unref(defaultFiltersOpened));
+  const isMounting = ref<boolean>(true);
+
+  const toggleFilters = () => {
+    isFilterVisible.value = !isFilterVisible.value;
+  };
+
+  const numberOfActiveFilters = computed(
+    () =>
+      filters.value?.filter(
+        (f) => f.value !== '' && f.value !== null && f.value !== undefined,
+      ).length,
+  );
+
+  const hydrateFiltersFromUrl = (requestedFilters: Filter[]): Filter[] => {
+    const searchParams = new URLSearchParams(window.location.search);
+
+    requestedFilters.forEach((filterOption) => {
+      const savedFilterName = convertFilterKeyForPath(filterOption);
+      let savedValue: string | boolean | null =
+        searchParams.get(savedFilterName);
+      if (savedValue) {
+        isFilterVisible.value = true;
+        if (filterOption.type === 'boolean') {
+          savedValue = savedValue === 'true';
+        }
+        if (isBetweenFilter(filterOption)) {
+          const betweenValue = (savedValue as string).split('|');
+          filterOption.valueFrom = betweenValue[0];
+          filterOption.valueTo = betweenValue[1] ? betweenValue[1] : '';
+        } else {
+          filterOption.value = savedValue;
+        }
+      }
+    });
+
+    const filtersOpened = searchParams.get('bms-ui-filters-open');
+    if (filtersOpened === 'false') {
+      isFilterVisible.value = false;
+    } else if (filtersOpened === 'true') {
+      isFilterVisible.value = true;
+    }
+    return requestedFilters;
+  };
+
+  const hydrateFiltersFromLocalStorage = (
+    requestedFilters: Filter[],
+  ): Filter[] => {
+    if (userPref) {
+      requestedFilters.forEach((filterOption) => {
+        const savedFilterName = convertFilterKeyForPath(filterOption);
+        const savedFilterPref = userPref.getUserPref(
+          savedFilterName,
+          route.path,
+        );
+        if (savedFilterPref !== undefined) {
+          filterOption.value = savedFilterPref;
+        }
+      });
+    }
+    return requestedFilters;
+  };
+
+  const hasFiltersInUrl = (): boolean => {
+    return (
+      Array.from(new URLSearchParams(window.location.search).keys()).filter(
+        (param: string) => param.includes(FILTER_KEY),
+      ).length > 0
+    );
+  };
+
+  const initFilters = (): void => {
+    const requestedFilters = _cloneDeep(filters.value);
+    let hydratedFilters = requestedFilters;
+    if (reflect.value) {
+      hydratedFilters = hasFiltersInUrl()
+        ? hydrateFiltersFromUrl(requestedFilters)
+        : hydrateFiltersFromLocalStorage(requestedFilters);
+    }
+    filters.value = hydratedFilters.map((filter) => {
+      if (filter.value === undefined) {
+        filter.value = null;
+      }
+      return filter;
+    });
+  };
+
+  const filterItems = (items: any[]): any[] => {
+    const defaultTextFilterFunction = (
+      item: any,
+      value: any,
+      target: string,
+    ) => {
+      return searchString(getValueByPath(item, target) + '', value + '');
+    };
+    return items.filter((item) => {
+      return filters.value.every((filter) => {
+        if (isBetweenFilter(filter)) {
+          if (
+            (!getfilterValue(filter, 'valueFrom') &&
+              !getfilterValue(filter, 'valueTo')) ||
+            (!filter.customFilter && item[filter.key] === undefined)
+          ) {
+            return true;
+          } else {
+            try {
+              if (filter.type === 'betweenNumber') {
+                return numberIsBetween(item[filter.key], filter);
+              } else {
+                return dateIsBetween(item[filter.key], filter);
+              }
+            } catch (e: any) {
+              return true;
+            }
+          }
+        }
+        if (isEmptyStringOrNotDefined(filter.value)) {
+          return true;
+        }
+        if (filter.type === 'inputDate') {
+          const applyFilter = filter.customFilter
+            ? filter.customFilter
+            : dateFilterCompare;
+          return applyFilter(item[filter.key], filter, true);
+        }
+
+        const applyFilter = filter.customFilter
+          ? filter.customFilter
+          : defaultTextFilterFunction;
+        return applyFilter(item, filter.value, filter.key);
+      });
+    });
+  };
+
+  const reflectSearchToUserPref = (str: string): void => {
+    userPref.saveUserPref(FILTER_SEARCH_KEY, str, route.path);
+  };
+
+  const reflectFiltersToUserPref = (filters: Filter[]): void => {
+    filters.forEach((filter) => {
+      const savedFilterName = convertFilterKeyForPath(filter);
+      userPref.saveUserPref(savedFilterName, filter.value, route.path);
+    });
+  };
+
+  watch(search, () => {
+    if (reflect.value) {
+      reflectSearchToPath(search.value, FILTER_SEARCH_KEY);
+      reflectSearchToUserPref(search.value);
+    }
+  });
+  watch(
+    () => filters,
+    () => {
+      if (reflect.value && filters.value) {
+        reflectFiltersToPath(filters.value);
+        reflectFiltersToUserPref(filters.value);
+      }
+    },
+    { deep: true },
+  );
+
+  const initSearch = () => {
+    if (reflect.value) {
+      const searchParams = new URLSearchParams(window.location.search);
+
+      if (searchParams.get(FILTER_SEARCH_KEY)) {
+        search.value = searchParams.get(FILTER_SEARCH_KEY) || '';
+      }
+      if (!search.value && !hasFiltersInUrl()) {
+        search.value =
+          userPref.getUserPref(FILTER_SEARCH_KEY, route.path) || '';
+      }
+    }
+  };
+
+  const resetAllFilters = () => {
+    isMounting.value = true;
+    initSearch();
+    initFilters();
+    isMounting.value = false;
+  };
+
+  onMounted(() => {
+    resetAllFilters();
+  });
+
+  const isSavedFilterActive = (savedFilter: SavedFilter): boolean => {
+    return savedFilter.filters.every((saveF) => {
+      const targetFilter = filters.value.find((f) => f.key === saveF.target);
+      if (!targetFilter) {
+        return false;
+      }
+      return (
+        targetFilter.value === saveF.value ||
+        (targetFilter.value === '' && saveF.value === null) ||
+        (targetFilter.value === null && saveF.value === '')
+      );
+    });
+  };
+
+  const resetFilters = () => {
+    filters.value = filters.value.map((filter) => {
+      let resetFilter = { ...filter };
+      const valueKeys = ['value', 'valueFrom', 'valueTo'];
+      valueKeys.forEach((key) => {
+        if (
+          resetFilter[key as keyof Filter] !== null &&
+          resetFilter[key as keyof Filter] !== undefined
+        ) {
+          resetFilter[key as keyof Filter] = null;
+        }
+      });
+      return resetFilter;
+    });
+  };
+
+  const selectSavedFilter = (savedFilter: SavedFilter) => {
+    if (isSavedFilterActive(savedFilter)) {
+      resetFilters();
+    } else {
+      filters.value.forEach((filter) => {
+        const foundSavedFilter = savedFilter.filters.find(
+          (f) => filter.key === f.target,
+        );
+        if (foundSavedFilter) {
+          filter.value = foundSavedFilter.value;
+        }
+      });
+    }
+  };
+
+  return {
+    search,
+    reflect,
+    filters,
+    isFilterVisible,
+    numberOfActiveFilters,
+    isMounting,
+    toggleFilters,
+    filterItems,
+    isSavedFilterActive,
+    resetFilters,
+    selectSavedFilter,
+    resetAllFilters,
+  };
+};
+
+export const reflectFiltersToPath = (filters: Filter[]): void => {
+  let searchParams = new URLSearchParams(window.location.search);
+  searchParams = filters.reduce((acc, filter) => {
+    const key = convertFilterKeyForPath(filter);
+    let value;
+    if (isBetweenFilter(filter)) {
+      const from = getfilterValue(filter, 'valueFrom').toString();
+      const to = getfilterValue(filter, 'valueTo').toString();
+      // escape "|" separator if end the string
+      value = `${from}|${to}`.replace(/\|$/g, '');
+    } else {
+      value = getfilterValue(filter).toString();
+    }
+    return handleValueInSearchParams(acc, key, value);
+  }, searchParams);
+  writeLocation(searchParams);
+};
+
+const convertFilterKeyForPath = (filter: Filter): string => {
+  return `${FILTER_KEY}-${filter.key}`;
+};
+
+const getfilterValue = (filter: Filter, key: string = 'value'): string => {
+  return filter[key as keyof Filter] === null ||
+    filter[key as keyof Filter] === undefined
+    ? ''
+    : filter[key as keyof Filter];
+};
+
+export const reflectSearchToPath = (searchValue: string, key: string): void => {
+  let searchParams = new URLSearchParams(window.location.search);
+  searchParams = handleValueInSearchParams(searchParams, key, searchValue);
+  writeLocation(searchParams);
+};

package/src/composables/search.helper.spec.ts

@@ -0,0 +1,339 @@
+/* eslint-disable */
+import {
+  dateFilterCompare,
+  dateIsBetween,
+  defaultIsAfterDateFilterFunction,
+  defaultNumberFilterFunction,
+  isBetweenFilter,
+  numberIsBetween,
+} from './search.helper';
+import { type Filter, FilterType, InputType } from '@/models';
+import { vi, it, expect, afterEach } from 'vitest';
+
+describe('isBetweenInput', () => {
+  test('should return true for filter type "betweenDate"', () => {
+    const filter = { type: 'betweenDate' } as Filter;
+    const result = isBetweenFilter(filter);
+    expect(result).toBe(true);
+  });
+
+  test('should return true for filter type "betweenNumber"', () => {
+    const filter = { type: 'betweenDate' } as Filter;
+    const result = isBetweenFilter(filter);
+    expect(result).toBe(true);
+  });
+
+  test('should return true for filter type "betweenDateTime"', () => {
+    const filter = { type: 'betweenDateTime' } as Filter;
+    const result = isBetweenFilter(filter);
+    expect(result).toBe(true);
+  });
+
+  test('should return false for filter type that is not "betweenDate", "betweenNumber", or "betweenDateTime"', () => {
+    const filter = { type: 'notBetween' as FilterType } as Filter;
+    const result = isBetweenFilter(filter);
+    expect(result).toBe(false);
+  });
+});
+
+describe('dateFilterCompare', () => {
+  it('should compare two dates when the search date is defined', () => {
+    const filter: Filter = {
+      key: '',
+      label: '',
+      type: 'inputDate',
+      value: '2024-10-09',
+      inputType: InputType.DATE,
+    };
+    const result = dateFilterCompare('2024-10-10T12:00:00', filter);
+    expect(result).toBe(true);
+  });
+
+  it('should handle empty or undefined search date', () => {
+    const filter: Filter = {
+      key: '',
+      label: '',
+      type: 'inputDate',
+      value: '',
+      inputType: InputType.DATE,
+    };
+    const result = dateFilterCompare('2024-10-10T12:00:00', filter);
+    expect(result).toBe(true);
+  });
+
+  it('should correctly adjust the time in date mode', () => {
+    const filter: Filter = {
+      key: '',
+      label: '',
+      type: 'inputDate',
+      value: '2024-10-09',
+      inputType: InputType.DATE,
+    };
+    const result = dateFilterCompare('2024-10-09T23:59:59', filter);
+    expect(result).toBe(true);
+  });
+
+  it('should return false if itemDate is before searchDate', () => {
+    const filter: Filter = {
+      key: '',
+      label: '',
+      type: 'inputDate',
+      value: '2024-10-10',
+      inputType: InputType.DATE,
+    };
+
+    const result = dateFilterCompare('2024-10-09T12:00:00', filter);
+    expect(result).toBe(false);
+  });
+
+  it('should compare with isGreaterThan = false', () => {
+    const filter: Filter = {
+      key: '',
+      label: '',
+      type: 'inputDate',
+      value: '2024-10-10',
+      inputType: InputType.DATE,
+    };
+
+    const result = dateFilterCompare('2024-10-09T12:00:00', filter, false);
+    expect(result).toBe(true);
+  });
+});
+
+describe('defaultIsAfterDateFilterFunction', () => {
+  test('should return true if dateItem is null', () => {
+    const result = defaultIsAfterDateFilterFunction(
+      // @ts-ignore
+      null,
+      new Date('2023-01-01'),
+      true,
+    );
+    expect(result).toBe(true);
+  });
+
+  test('should return true if dateItem is after the search date and isAfterSearch is true', () => {
+    const dateItem = new Date('2024-01-01');
+    const search = new Date('2023-01-01');
+    const result = defaultIsAfterDateFilterFunction(dateItem, search, true);
+    expect(result).toBe(true);
+  });
+
+  test('should return false if dateItem is before the search date and isAfterSearch is true', () => {
+    const dateItem = new Date('2022-01-01');
+    const search = new Date('2023-01-01');
+    const result = defaultIsAfterDateFilterFunction(dateItem, search, true);
+    expect(result).toBe(false);
+  });
+
+  test('should return true if dateItem is before the search date and isAfterSearch is false', () => {
+    const dateItem = new Date('2022-01-01');
+    const search = new Date('2023-01-01');
+    const result = defaultIsAfterDateFilterFunction(dateItem, search, false);
+    expect(result).toBe(true);
+  });
+
+  test('should return false if dateItem is after the search date and isAfterSearch is false', () => {
+    const dateItem = new Date('2024-01-01');
+    const search = new Date('2023-01-01');
+    const result = defaultIsAfterDateFilterFunction(dateItem, search, false);
+    expect(result).toBe(false);
+  });
+
+  test('should return true if dateItem is the same as the search date and isAfterSearch is true', () => {
+    const dateItem = new Date('2023-01-01');
+    const search = new Date('2023-01-01');
+    const result = defaultIsAfterDateFilterFunction(dateItem, search, true);
+    expect(result).toBe(true);
+  });
+
+  test('should return true if dateItem is the same as the search date and isAfterSearch is false', () => {
+    const dateItem = new Date('2023-01-01');
+    const search = new Date('2023-01-01');
+    const result = defaultIsAfterDateFilterFunction(dateItem, search, false);
+    expect(result).toBe(true);
+  });
+});
+
+describe('defaultNumberFilterFunction', () => {
+  // Cas où itemNumber ou search sont null ou indéfinis
+  test('should return true if itemNumber is undefined or null', () => {
+    // @ts-ignore
+    const result = defaultNumberFilterFunction(null, 5, true);
+    expect(result).toBe(true);
+  });
+
+  test('should return true if search is undefined or null', () => {
+    // @ts-ignore
+    const result = defaultNumberFilterFunction(5, null, true);
+    expect(result).toBe(true);
+  });
+
+  test('should return true if both itemNumber and search are undefined or null', () => {
+    // @ts-ignore
+    const result = defaultNumberFilterFunction(null, null, true);
+    expect(result).toBe(true);
+  });
+
+  // Cas où itemNumber ou search est égal à 0
+  test('should correctly handle 0 as itemNumber and return false if isAfterSearch is true and search is greater', () => {
+    const result = defaultNumberFilterFunction(0, 5, true);
+    expect(result).toBe(false);
+  });
+
+  test('should correctly handle 0 as search and return true if itemNumber is greater and isAfterSearch is true', () => {
+    const result = defaultNumberFilterFunction(5, 0, true);
+    expect(result).toBe(true);
+  });
+
+  test('should correctly handle 0 as itemNumber and return true if isAfterSearch is false and search is greater', () => {
+    const result = defaultNumberFilterFunction(0, 5, false);
+    expect(result).toBe(true);
+  });
+
+  // Comparaisons normales
+  test('should return true if itemNumber is greater than search and isAfterSearch is true', () => {
+    const result = defaultNumberFilterFunction(10, 5, true);
+    expect(result).toBe(true);
+  });
+
+  test('should return false if itemNumber is less than search and isAfterSearch is true', () => {
+    const result = defaultNumberFilterFunction(3, 5, true);
+    expect(result).toBe(false);
+  });
+
+  test('should return true if itemNumber is less than search and isAfterSearch is false', () => {
+    const result = defaultNumberFilterFunction(3, 5, false);
+    expect(result).toBe(true);
+  });
+
+  test('should return false if itemNumber is greater than search and isAfterSearch is false', () => {
+    const result = defaultNumberFilterFunction(10, 5, false);
+    expect(result).toBe(false);
+  });
+
+  // Cas d'égalité
+  test('should return true if itemNumber is equal to search regardless of isAfterSearch being true', () => {
+    const result = defaultNumberFilterFunction(5, 5, true);
+    expect(result).toBe(true);
+  });
+
+  test('should return true if itemNumber is equal to search regardless of isAfterSearch being false', () => {
+    const result = defaultNumberFilterFunction(5, 5, false);
+    expect(result).toBe(true);
+  });
+});
+
+describe('dateIsBetween', () => {
+  const validDate = '2024-01-19T08:27:12Z'; // Date de test
+  const filter: Filter = {
+    key: '',
+    label: '',
+    type: 'betweenDate',
+    valueFrom: '2024-01-18',
+    valueTo: '2024-01-20',
+    customFilter: undefined, // not our responsability
+  };
+
+  test('should return true if itemDate is within the filter range', () => {
+    const result = dateIsBetween(validDate, filter);
+    expect(result).toBe(true);
+  });
+
+  test('should return true if itemDate and the filter range in the same day', () => {
+    const filterOnOneDay = {
+      ...filter,
+      valueFrom: '2024-01-19',
+      valueTo: '2024-01-19',
+    };
+    const result = dateIsBetween(validDate, filterOnOneDay);
+    expect(result).toBe(true);
+  });
+
+  test('should return false if itemDate is before the filter range', () => {
+    const filterBefore = { ...filter, valueFrom: '2024-01-20T09:00:00Z' };
+    const result = dateIsBetween(validDate, filterBefore);
+    expect(result).toBe(false);
+  });
+
+  test('should return false if itemDate is after the filter range', () => {
+    const filterAfter = { ...filter, valueTo: '2024-01-18T08:00:00Z' };
+    const result = dateIsBetween(validDate, filterAfter);
+    expect(result).toBe(false);
+  });
+
+  test('should return true if filter valueFrom is undefined and valueTo in range', () => {
+    const filterUndefinedFrom = { ...filter, valueFrom: undefined };
+    const result = dateIsBetween(validDate, filterUndefinedFrom);
+    expect(result).toBe(true);
+  });
+
+  test('should return true if filter valueTo is undefined and valueFrom in range', () => {
+    const filterUndefinedTo = { ...filter, valueTo: undefined };
+    const result = dateIsBetween(validDate, filterUndefinedTo);
+    expect(result).toBe(true);
+  });
+
+  test('should return true if filter valueFrom and valueTo are both undefined', () => {
+    const filterBothUndefined = {
+      ...filter,
+      valueFrom: undefined,
+      valueTo: undefined,
+    };
+    const result = dateIsBetween(validDate, filterBothUndefined);
+    expect(result).toBe(true); // Because both are undefined
+  });
+});
+
+describe('numberIsBetween', () => {
+  const filter: Filter = {
+    label: '',
+    type: 'betweenNumber',
+    key: 'value',
+    valueFrom: 10,
+    valueTo: 20,
+    customFilter: undefined,
+  };
+
+  const itemInRange = 15; // Un item dans la plage
+  const itemBelowRange = 5; // Un item en dessous de la plage
+  const itemAboveRange = 25; // Un item au-dessus de la plage
+
+  test('should return true if item value is within the filter range', () => {
+    const result = numberIsBetween(itemInRange, filter);
+    expect(result).toBe(true);
+  });
+
+  test('should return false if item value is below the filter range', () => {
+    const result = numberIsBetween(itemBelowRange, filter);
+    expect(result).toBe(false);
+  });
+
+  test('should return false if item value is above the filter range', () => {
+    const result = numberIsBetween(itemAboveRange, filter);
+    expect(result).toBe(false);
+  });
+
+  test('should return true if filter valueFrom is null', () => {
+    const filterNullFrom = { ...filter, valueFrom: null };
+    const result = numberIsBetween(itemInRange, filterNullFrom);
+    expect(result).toBe(true);
+  });
+
+  test('should return true if filter valueTo is null', () => {
+    const filterNullTo = { ...filter, valueTo: null };
+    const result = numberIsBetween(itemInRange, filterNullTo);
+    expect(result).toBe(true);
+  });
+
+  test('should return true if both filter valueFrom and valueTo are null', () => {
+    const filterBothNull = { ...filter, valueFrom: null, valueTo: null };
+    const result = numberIsBetween(itemInRange, filterBothNull);
+    expect(result).toBe(true); // Because both are null
+  });
+
+  test('should handle NaN gracefully', () => {
+    const invalidItemValue = NaN;
+    const result = numberIsBetween(invalidItemValue, filter);
+    expect(result).toBe(true); // all invalid input value is not filter
+  });
+});