@ouestfrance/sipa-bms-ui 7.14.1

package/src/composables/search.helper.ts

@@ -0,0 +1,103 @@
+import { Filter, InputType } from '@/models';
+import { isEmptyStringOrNotDefined } from '@/helpers';
+
+export const isBetweenFilter = (filter: Filter): boolean =>
+  filter.type === 'betweenDate' ||
+  filter.type === 'betweenNumber' ||
+  filter.type === 'betweenDateTime';
+
+export const defaultNumberFilterFunction = (
+  itemNumber: number,
+  search: number,
+  isAfterSearch: boolean,
+) => {
+  if (
+    isEmptyStringOrNotDefined(itemNumber) ||
+    isEmptyStringOrNotDefined(search)
+  ) {
+    return true;
+  }
+  return isAfterSearch ? itemNumber >= search : itemNumber <= search;
+};
+export const defaultIsAfterDateFilterFunction = (
+  dateItem: Date,
+  search: Date,
+  isGreaterThan: boolean,
+) => {
+  if (!dateItem || !search) {
+    return true;
+  }
+  return isGreaterThan
+    ? dateItem.getTime() >= search.getTime()
+    : dateItem.getTime() <= search.getTime();
+};
+
+export const dateFilterCompare = (
+  itemDate: string,
+  filter: Filter,
+  isGreaterThan = true,
+) => {
+  const sanitizedItemDate = new Date(itemDate);
+  const searchDate = isEmptyStringOrNotDefined(filter.value)
+    ? null
+    : new Date(filter.value);
+
+  // in date mode, we are more tolerant for search on time (for "locale" purpose)
+  if (filter.inputType === InputType.DATE) {
+    sanitizedItemDate.setHours(+2, 0, 0, 0);
+    searchDate?.setHours(0, 0, 0, 0);
+  }
+  const applyFilter = filter.customFilter
+    ? filter.customFilter
+    : defaultIsAfterDateFilterFunction;
+
+  return applyFilter(sanitizedItemDate, searchDate, isGreaterThan);
+};
+
+export const dateIsBetween = (itemDate: string, filter: Filter) => {
+  const sanitizedItemDate = new Date(itemDate);
+  const fromDate = isEmptyStringOrNotDefined(filter.valueFrom)
+    ? null
+    : new Date(filter.valueFrom);
+  const toDate = isEmptyStringOrNotDefined(filter.valueTo)
+    ? null
+    : new Date(filter.valueTo);
+  // in date mode, we are more tolerant for search on time (for "locale" purpose)
+  if (filter.type === 'betweenDate') {
+    if (fromDate) fromDate.setHours(-2, 0, 0, 0);
+    if (toDate) toDate.setHours(+2, 0, 0, 0);
+    if (toDate) toDate.setHours(23, 59, 59, 0);
+  }
+
+  const applyFilter = filter.customFilter
+    ? filter.customFilter
+    : defaultIsAfterDateFilterFunction;
+
+  //we have at least one of the 2 fields from/to with a value
+  const isValidFrom = fromDate
+    ? applyFilter(sanitizedItemDate, fromDate, true)
+    : true;
+  const isValidTo = toDate
+    ? applyFilter(sanitizedItemDate, toDate, false)
+    : true;
+  return isValidFrom && isValidTo;
+};
+
+export const numberIsBetween = (itemValue: any, filter: Filter) => {
+  if (Number.isNaN(itemValue)) {
+    return true;
+  }
+  const applyFilter = filter.customFilter
+    ? filter.customFilter
+    : defaultNumberFilterFunction;
+  //we have at least one of the 2 fields from/to with a value
+  const isValidFrom =
+    filter.valueFrom === null ||
+    filter.valueFrom === undefined ||
+    applyFilter(Number(itemValue), Number(filter.valueFrom), true);
+  const isValidTo =
+    filter.valueTo === null ||
+    filter.valueTo === undefined ||
+    applyFilter(Number(itemValue), Number(filter.valueTo), false);
+  return isValidFrom && isValidTo;
+};

package/src/composables/sort.composable.spec.ts

@@ -0,0 +1,349 @@
+import { defaultSortFunction, useSort } from './sort.composable';
+import { SortValue } from '..';
+import { defineComponent, nextTick } from 'vue';
+import { mount } from '@vue/test-utils';
+
+let previous: any;
+let replaceStateSpy: any;
+
+const factory = (props?: any) => {
+  return mount(
+    defineComponent({
+      props: {
+        persistent: Object as any,
+        tableHeaders: Object as any,
+        defaultSort: Object as any,
+      },
+      setup(props) {
+        return useSort(
+          props.persistent || undefined,
+          props.tableHeaders || undefined,
+          props.defaultSort || undefined,
+        );
+      },
+      template: '<div/>',
+    }),
+    { props: props },
+  );
+};
+
+describe('sort composable', () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+    previous = global.window.location;
+    //@ts-ignore
+    delete global.window.location;
+    replaceStateSpy = vi
+      .spyOn(global.window.history, 'replaceState')
+      .mockImplementation(() => {});
+    global.window.location = {
+      ...previous,
+      protocol: 'https:',
+      host: 'localhost/',
+      pathname: 'path',
+      search: '',
+    };
+  });
+  afterEach(() => {
+    global.window.location = previous;
+  });
+  describe('defaultSortFunction', () => {
+    test.each([
+      ['a', 'b', 'asc', -1],
+      ['a', 'b', 'desc', 1],
+      ['a', 'a', 'desc', 0],
+      [0, 1, 'asc', -1],
+      [0, 1, 'desc', 1],
+      [0, 0, 'asc', 0],
+      [true, false, 'asc', 1],
+      [true, false, 'desc', -1],
+      [true, true, 'asc', 0],
+      ['é', 'e', 'asc', 0],
+      ['E', 'e', 'asc', 0],
+      [1, 'b', 'asc', 0],
+      [null, 'b', 'asc', 0],
+      [undefined, 'b', 'asc', -1],
+      [undefined, 'b', 'desc', 1],
+    ])('with %o and %o and sort %o, should return %o', (a, b, sort, result) => {
+      expect(defaultSortFunction(a, b, sort as SortValue)).toEqual(result);
+    });
+  });
+  describe('changeSort', () => {
+    test('should set a sort if no sort already set', () => {
+      const wrapper = factory();
+      wrapper.vm.changeSort({ key: 'key', label: 'label', sortable: true });
+      expect(wrapper.vm.sort).toEqual({ key: 'key', value: 'asc' });
+    });
+    test('should set a sort if new header selected', () => {
+      const wrapper = factory();
+      wrapper.vm.sort = { key: 'otherKey', value: SortValue.desc };
+      wrapper.vm.changeSort({ key: 'key', label: 'label', sortable: true });
+      expect(wrapper.vm.sort).toEqual({ key: 'key', value: 'asc' });
+    });
+    test('should not set a sort if new header selected but can not be sorted', () => {
+      const wrapper = factory();
+      wrapper.vm.sort = { key: 'otherKey', value: SortValue.desc };
+      wrapper.vm.changeSort({ key: 'key', label: 'label', sortable: false });
+      expect(wrapper.vm.sort).toEqual({ key: 'otherKey', value: 'desc' });
+    });
+    test('should change sort if same header selected', () => {
+      const wrapper = factory();
+      wrapper.vm.sort = { key: 'key', value: SortValue.asc };
+      wrapper.vm.changeSort({ key: 'key', label: 'label', sortable: true });
+      expect(wrapper.vm.sort).toEqual({ key: 'key', value: 'desc' });
+    });
+    test('should cycle sort if same header selected', () => {
+      const wrapper = factory();
+      wrapper.vm.sort = { key: 'key', value: SortValue.desc };
+      wrapper.vm.changeSort({ key: 'key', label: 'label', sortable: true });
+      expect(wrapper.vm.sort).toEqual({ key: 'key', value: 'asc' });
+    });
+    test('should save sort value in path if reflect', async () => {
+      const wrapper = factory();
+      wrapper.vm.changeSort({ key: 'key', label: 'label', sortable: true });
+      await nextTick();
+      expect(replaceStateSpy).toHaveBeenCalled();
+      expect(replaceStateSpy).toHaveBeenLastCalledWith(
+        {
+          path: 'https://localhost/path?table-sort-target=key&table-sort-value=asc',
+        },
+        '',
+        'https://localhost/path?table-sort-target=key&table-sort-value=asc',
+      );
+    });
+  });
+  describe('sortItems', () => {
+    test('should not sort if no sort', () => {
+      const wrapper = factory();
+      wrapper.vm.sort = { key: null, value: SortValue.default };
+      expect(
+        wrapper.vm.sortItems([
+          { column: 'value1' },
+          { column: 'value0' },
+          { column: 'value2' },
+        ]),
+      ).toStrictEqual([
+        { column: 'value1' },
+        { column: 'value0' },
+        { column: 'value2' },
+      ]);
+    });
+    test('should not sort if sort is default', () => {
+      const wrapper = factory();
+      wrapper.vm.sort = { key: 'column', value: SortValue.default };
+      expect(
+        wrapper.vm.sortItems([
+          { column: 'value1' },
+          { column: 'value0' },
+          { column: 'value2' },
+        ]),
+      ).toStrictEqual([
+        { column: 'value1' },
+        { column: 'value0' },
+        { column: 'value2' },
+      ]);
+    });
+    test('should not sort if no key in sort', () => {
+      const wrapper = factory();
+      wrapper.vm.sort = { key: null, value: SortValue.default };
+      expect(
+        wrapper.vm.sortItems([
+          { column: 'value1' },
+          { column: 'value0' },
+          { column: 'value2' },
+        ]),
+      ).toStrictEqual([
+        { column: 'value1' },
+        { column: 'value0' },
+        { column: 'value2' },
+      ]);
+    });
+    test('should sort if sort is asc', () => {
+      const wrapper = factory();
+      wrapper.vm.sort = { key: 'column', value: SortValue.asc };
+      expect(
+        wrapper.vm.sortItems([
+          { column: 'value1' },
+          { column: 'value0' },
+          { column: 'value2' },
+        ]),
+      ).toStrictEqual([
+        { column: 'value0' },
+        { column: 'value1' },
+        { column: 'value2' },
+      ]);
+    });
+    test('should sort complex items if sort is asc', () => {
+      const wrapper = factory();
+      wrapper.vm.sort = { key: 'column.val', value: SortValue.asc };
+      expect(
+        wrapper.vm.sortItems([
+          { column: { val: 'value1' } },
+          { column: { val: 'value0' } },
+          { column: { val: 'value2' } },
+        ]),
+      ).toStrictEqual([
+        { column: { val: 'value0' } },
+        { column: { val: 'value1' } },
+        { column: { val: 'value2' } },
+      ]);
+    });
+    test('should sort if sort is desc', () => {
+      const wrapper = factory();
+      wrapper.vm.sort = { key: 'column', value: SortValue.desc };
+      expect(
+        wrapper.vm.sortItems([
+          { column: 'value1' },
+          { column: 'value0' },
+          { column: 'value2' },
+        ]),
+      ).toStrictEqual([
+        { column: 'value2' },
+        { column: 'value1' },
+        { column: 'value0' },
+      ]);
+    });
+  });
+  describe('customSort', () => {
+    test('should use custom sort if set', () => {
+      const wrapper = factory();
+      wrapper.vm.sort = {
+        key: 'column',
+        value: SortValue.desc,
+        overridenSortFunction: (a, b, value) => {
+          if (a.column > b.column) {
+            return value === SortValue.asc ? -1 : 1;
+          }
+          if (a.column < b.column) {
+            return value === SortValue.asc ? 1 : -1;
+          }
+          return 0;
+        },
+      };
+      expect(
+        wrapper.vm.sortItems([
+          { column: 'value1' },
+          { column: 'value0' },
+          { column: 'value2' },
+        ]),
+      ).toStrictEqual([
+        { column: 'value0' },
+        { column: 'value1' },
+        { column: 'value2' },
+      ]);
+    });
+  });
+  describe('isSortPresentInPath', () => {
+    it('should return false if none is in path', () => {
+      global.window.location = {
+        ...previous,
+        protocol: 'https:',
+        host: 'localhost/',
+        pathname: 'path',
+        search: '',
+      };
+      const wrapper = factory();
+      expect(wrapper.vm.isSortPresentInPath()).toEqual(false);
+    });
+    it('should return false if only one is in path', () => {
+      global.window.location = {
+        ...previous,
+        protocol: 'https:',
+        host: 'localhost/',
+        pathname: 'path',
+        search: '?table-sort-target=key',
+      };
+      const wrapper = factory();
+      expect(wrapper.vm.isSortPresentInPath()).toEqual(false);
+    });
+    it('should return true if both are in path', () => {
+      global.window.location = {
+        ...previous,
+        protocol: 'https:',
+        host: 'localhost/',
+        pathname: 'path',
+        search: '?table-sort-target=key&table-sort-value=val',
+      };
+      const wrapper = factory();
+      expect(wrapper.vm.isSortPresentInPath()).toEqual(true);
+    });
+  });
+  describe('initSort', () => {
+    it('should use default if not persistent', async () => {
+      const wrapper = factory({
+        peristent: false,
+        tableHeaders: [{ key: 'key0', label: 'label' }],
+        defaultSort: { key: 'key', value: SortValue.asc },
+      });
+      await nextTick();
+      expect(wrapper.vm.sort).toEqual({
+        key: 'key',
+        value: SortValue.asc,
+      });
+    });
+    it('should use default if no sort present in path', async () => {
+      global.window.location = {
+        ...previous,
+        protocol: 'https:',
+        host: 'localhost/',
+        pathname: 'path',
+        search: '',
+      };
+      const wrapper = factory({
+        peristent: true,
+        tableHeaders: [{ key: 'key0', label: 'label' }],
+        defaultSort: { key: 'key', value: SortValue.asc },
+      });
+      await nextTick();
+      expect(wrapper.vm.sort).toEqual({ key: 'key', value: SortValue.asc });
+    });
+    it('should use default if sort in path but does not have correct target', async () => {
+      global.window.location = {
+        ...previous,
+        protocol: 'https:',
+        host: 'localhost/',
+        pathname: 'path',
+        search: '?table-sort-target=NotFoundKey&table-sort-value=asc',
+      };
+      const wrapper = factory({
+        peristent: true,
+        tableHeaders: [{ key: 'key0', label: 'label' }],
+        defaultSort: { key: 'key', value: SortValue.asc },
+      });
+      await nextTick();
+      expect(wrapper.vm.sort).toEqual({ key: 'key', value: SortValue.asc });
+    });
+    it('should use default if sort in path but does not have correct value', async () => {
+      global.window.location = {
+        ...previous,
+        protocol: 'https:',
+        host: 'localhost/',
+        pathname: 'path',
+        search: '?table-sort-target=key0&table-sort-value=val',
+      };
+      const wrapper = factory({
+        peristent: true,
+        tableHeaders: [{ key: 'key0', label: 'label' }],
+        defaultSort: { key: 'key', value: SortValue.asc },
+      });
+      await nextTick();
+      expect(wrapper.vm.sort).toEqual({ key: 'key', value: SortValue.asc });
+    });
+    it('should use path sort if sort in path', async () => {
+      global.window.location = {
+        ...previous,
+        protocol: 'https:',
+        host: 'localhost/',
+        pathname: 'path',
+        search: '?table-sort-target=key0&table-sort-value=asc',
+      };
+      const wrapper = factory({
+        peristent: true,
+        tableHeaders: [{ key: 'key0', label: 'label' }],
+        defaultSort: { key: 'key', value: SortValue.asc },
+      });
+      await nextTick();
+      expect(wrapper.vm.sort).toEqual({ key: 'key0', value: SortValue.asc });
+    });
+  });
+});

package/src/composables/sort.composable.ts

@@ -0,0 +1,129 @@
+import { sanitizeString } from '@/helpers/string.helper';
+import { Sort, SortValue, TableHeader } from '@/models';
+import { Ref, onMounted, ref, unref, watch } from 'vue';
+import _get from 'lodash/get';
+import {
+  getStringFromPathQuery,
+  saveValuesToPathQuery,
+} from '@/helpers/location.helper';
+
+const SORT_TARGET_KEY = 'table-sort-target';
+const SORT_VALUE_KEY = 'table-sort-value';
+
+export const useSort = (
+  persistent: boolean | Ref<boolean> = true,
+  tableHeaders: TableHeader[] | Ref<TableHeader[]> = [],
+  defaultSort: Sort | Ref<Sort> = {
+    key: null,
+    value: SortValue.default,
+    overridenSortFunction: undefined,
+  },
+) => {
+  const reflect = ref<boolean>(unref(persistent));
+  const headers = ref<TableHeader[]>(unref(tableHeaders));
+  const sort: Ref<Sort> = ref(unref(defaultSort));
+  const isMounting: Ref<boolean> = ref(true);
+
+  const changeSort = (header: TableHeader) => {
+    if (!header.sortable) {
+      return;
+    }
+    if (sort.value.key !== header.key) {
+      sort.value = {
+        key: header.key,
+        value: SortValue.asc,
+        overridenSortFunction: header.sortFunction || undefined,
+      };
+    } else {
+      sort.value.value =
+        sort.value.value === SortValue.asc ? SortValue.desc : SortValue.asc;
+    }
+  };
+
+  const sortItems = (items: any[]): any[] => {
+    if (!sort.value.key || sort.value.value === SortValue.default) {
+      return items;
+    }
+    return items.sort((a: any, b: any) => {
+      if (sort.value.overridenSortFunction) {
+        return sort.value.overridenSortFunction(a, b, sort.value.value);
+      }
+      if (sort.value.key) {
+        return defaultSortFunction(
+          _get(a, sort.value.key),
+          _get(b, sort.value.key),
+          sort.value.value,
+        );
+      }
+      return 0;
+    });
+  };
+
+  onMounted(() => {
+    if (reflect.value && isSortPresentInPath()) {
+      const target = getStringFromPathQuery(SORT_TARGET_KEY);
+      const requestedSortValue = getStringFromPathQuery(SORT_VALUE_KEY);
+      const foundHeader = headers.value.find((header) => header.key === target);
+      if (
+        foundHeader &&
+        Object.values(SortValue).includes(requestedSortValue as SortValue)
+      ) {
+        sort.value = {
+          key: target,
+          value: requestedSortValue as SortValue,
+          overridenSortFunction: foundHeader.sortFunction || undefined,
+        };
+      }
+    }
+    isMounting.value = false;
+  });
+
+  const isSortPresentInPath = (): boolean => {
+    return (
+      !!getStringFromPathQuery(SORT_TARGET_KEY) &&
+      !!getStringFromPathQuery(SORT_VALUE_KEY)
+    );
+  };
+
+  watch(
+    () => sort.value,
+    () => {
+      if (reflect.value && sort.value.key) {
+        saveValuesToPathQuery([
+          { key: SORT_TARGET_KEY, value: sort.value.key },
+          { key: SORT_VALUE_KEY, value: sort.value.value },
+        ]);
+      }
+    },
+    { deep: true },
+  );
+
+  return {
+    sort,
+    isMounting,
+    changeSort,
+    sortItems,
+    isSortPresentInPath,
+  };
+};
+
+export const defaultSortFunction = (
+  valA: any,
+  valB: any,
+  value: SortValue,
+): number => {
+  if (typeof valA === 'string') {
+    valA = sanitizeString(valA);
+  }
+  if (typeof valB === 'string') {
+    valB = sanitizeString(valB);
+  }
+
+  if (valA < valB || (valA === undefined && valB !== undefined)) {
+    return value === SortValue.asc ? -1 : 1;
+  }
+  if (valA > valB || (valA !== undefined && valB === undefined)) {
+    return value === SortValue.asc ? 1 : -1;
+  }
+  return 0;
+};

package/src/composables/userPref.composable.spec.ts

@@ -0,0 +1,115 @@
+import { useUserPref } from '@/composables/userPref.composable';
+
+describe('userPref Composable', () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+    vi.resetModules();
+    vi.stubGlobal('localStorage', {
+      getItem: vi.fn(),
+      setItem: vi.fn(),
+    });
+  });
+  describe('getUserPref', () => {
+    const { getUserPref } = useUserPref();
+    it('should return undefined if no localStorage available', () => {
+      (localStorage.getItem as any).mockReturnValueOnce(null);
+      expect(getUserPref('key')).toEqual(undefined);
+    });
+    it('should return undefined if localStorage has no value for searched path', () => {
+      (localStorage.getItem as any).mockReturnValueOnce(
+        '{"path1": false, "path2": true}',
+      );
+      expect(getUserPref('key', 'path3')).toEqual(undefined);
+    });
+    it('should return undefined if localStorage is not correctly formated', () => {
+      (localStorage.getItem as any).mockReturnValueOnce(
+        '{"path1": {"key": "value"}, "path2": true',
+      );
+      expect(getUserPref('key', 'path1')).toEqual(undefined);
+    });
+    it('should return undefined if localStorage does not have key for path', () => {
+      (localStorage.getItem as any).mockReturnValueOnce(
+        '{"path1": {"key": "value"}, "path2": true}',
+      );
+      expect(getUserPref('keyNotExisting', 'path1')).toEqual(undefined);
+    });
+    it('should return the value if localStorage has key for path', () => {
+      (localStorage.getItem as any).mockReturnValueOnce(
+        '{"path1": {"key": "value"}, "path2": true}',
+      );
+      expect(getUserPref('key', 'path1')).toEqual('value');
+    });
+    it('should return the value if localStorage has key for global', () => {
+      (localStorage.getItem as any).mockReturnValueOnce(
+        '{"path1": {}, "path2": true, "global": {"key": "value"}}',
+      );
+      expect(getUserPref('key')).toEqual('value');
+    });
+  });
+
+  describe('saveUserPref', () => {
+    const { saveUserPref } = useUserPref();
+    it('should create a new entry in localStorage if there is no pref saved', () => {
+      (localStorage.getItem as any).mockReturnValueOnce(null);
+      saveUserPref('key', 'value', 'path');
+      expect(localStorage.setItem).toHaveBeenCalled();
+      expect(localStorage.setItem).toHaveBeenCalledWith(
+        'userPref',
+        '{"path":{"key":"value"}}',
+      );
+    });
+    it('should create a new entry in localStorage in global if there is no pref saved', () => {
+      (localStorage.getItem as any).mockReturnValueOnce(null);
+      saveUserPref('key', 'value');
+      expect(localStorage.setItem).toHaveBeenCalled();
+      expect(localStorage.setItem).toHaveBeenCalledWith(
+        'userPref',
+        '{"global":{"key":"value"}}',
+      );
+    });
+    it('should add a new entry in localStorage if there is no pref saved', () => {
+      (localStorage.getItem as any).mockReturnValueOnce(
+        '{"path1": {"key": "value"}, "path2": true}',
+      );
+      saveUserPref('key', 'value', 'path3');
+      expect(localStorage.setItem).toHaveBeenCalled();
+      expect(localStorage.setItem).toHaveBeenCalledWith(
+        'userPref',
+        '{"path1":{"key":"value"},"path2":true,"path3":{"key":"value"}}',
+      );
+    });
+    it('should add a new entry in localStorage in global if there is no pref saved', () => {
+      (localStorage.getItem as any).mockReturnValueOnce(
+        '{"path1": {"key": "value"}, "path2": true}',
+      );
+      saveUserPref('key', 'value');
+      expect(localStorage.setItem).toHaveBeenCalled();
+      expect(localStorage.setItem).toHaveBeenCalledWith(
+        'userPref',
+        '{"path1":{"key":"value"},"path2":true,"global":{"key":"value"}}',
+      );
+    });
+    it('should edit a entry in localStorage if there is pref saved', () => {
+      (localStorage.getItem as any).mockReturnValueOnce(
+        '{"path1": {"key": "value","key2":"value3"}, "path2": true}',
+      );
+      saveUserPref('key', 'value2', 'path1');
+      expect(localStorage.setItem).toHaveBeenCalled();
+      expect(localStorage.setItem).toHaveBeenCalledWith(
+        'userPref',
+        '{"path1":{"key":"value2","key2":"value3"},"path2":true}',
+      );
+    });
+    it('should edit a global entry in localStorage if there is pref saved', () => {
+      (localStorage.getItem as any).mockReturnValueOnce(
+        '{"path1": {"key": "value","key2":"value3"}, "path2": true,"global":{"key":"value"}}',
+      );
+      saveUserPref('key', 'value2');
+      expect(localStorage.setItem).toHaveBeenCalled();
+      expect(localStorage.setItem).toHaveBeenCalledWith(
+        'userPref',
+        '{"path1":{"key":"value","key2":"value3"},"path2":true,"global":{"key":"value2"}}',
+      );
+    });
+  });
+});