@ouestfrance/sipa-bms-ui 7.14.1

package/src/components/table/BmsServerTable.vue

@@ -0,0 +1,402 @@
+<script lang="ts" setup>
+import BmsEmptyScreen from '@/components/table/BmsEmptyScreen.vue';
+import BmsPagination from '@/components/table/BmsPagination.vue';
+import UiBmsTable from '@/components/table/UiBmsTable.vue';
+import UiFilterButton from '@/components/table/UiFilterButton.vue';
+import { usePagination } from '@/composables/pagination.composable';
+import { useSearch } from '@/composables/search.composable';
+import { useSort } from '@/composables/sort.composable';
+import {
+  Filter,
+  SavedFilter,
+  SelectMode,
+  ServerTableRequestParams,
+  Sort,
+  SortValue,
+  TableHeader,
+} from '@/models';
+import _debounce from 'lodash/debounce';
+import { computed, type Ref, ref, type Slots, watch, watchEffect } from 'vue';
+import BmsTableFilters from '@/components/table/BmsTableFilters.vue';
+import BmsSearch from '../form/BmsSearch.vue';
+import { BmsTag } from '@/index';
+import { Trash } from 'lucide-vue-next';
+import { CanceledError } from 'axios';
+
+interface UiTableProps {
+  disableSearch?: boolean;
+  headers: TableHeader[];
+  filters?: Filter[];
+  url?: string;
+  mode?: 'normal' | 'dense';
+  persistent?: boolean;
+  pagination?: number[];
+  size?: number;
+  initialPage?: number;
+  debounceTime?: number;
+  request?: (
+    params: ServerTableRequestParams,
+    abortController: AbortController,
+    url?: string,
+  ) => Promise<{ data: unknown[]; total: number }>;
+  defaultFiltersOpened?: boolean;
+  savedFilters?: SavedFilter[];
+  canSaveFilters?: boolean;
+  defaultSort?: Sort;
+  selectedItems?: unknown[];
+  selectable?: boolean;
+  selectableDisabled?: boolean;
+  maxSelectedSize?: number;
+  selectMode?: SelectMode;
+}
+
+const props = withDefaults(defineProps<UiTableProps>(), {
+  mode: 'normal',
+  persistent: true,
+  pagination: () => [25, 50, 100],
+  size: 25,
+  initialPage: 0,
+  filters: () => [],
+  defaultFiltersOpened: false,
+  debounceTime: 400,
+  savedFilters: () => [],
+  canSaveFilters: false,
+  defaultSort: () => ({
+    key: null,
+    value: SortValue.default,
+  }),
+  selectedItems: () => [],
+  selectable: false,
+  selectableDisabled: false,
+  maxSelectedSize: 10000,
+  selectMode: SelectMode.DEFAULT,
+  request: async (
+    {
+      size,
+      page,
+      search,
+      sort,
+    }: { size: number; page: number; search?: string; sort?: Sort },
+    controller: AbortController,
+    url?: string,
+  ) => {
+    if (!url) {
+      throw 'URL must be defined';
+    }
+
+    const searchParams: {
+      size: string;
+      page: string;
+      search?: string;
+      sort?: string;
+    } = {
+      size: '' + size,
+      page: '' + page,
+    };
+
+    if (search) {
+      searchParams['search'] = search;
+    }
+
+    if (sort && sort.key && sort.value !== SortValue.default) {
+      searchParams['sort'] = `${sort.key},${sort.value}`;
+    }
+
+    const response = await fetch(
+      `${url}?${new URLSearchParams(searchParams)}`,
+      {
+        method: 'GET',
+        signal: controller.signal,
+      },
+    );
+
+    const totalItems = response.headers.get('X-Total');
+    const data = await response.json();
+    return { data, total: totalItems ? parseInt(totalItems) : Infinity };
+  },
+});
+
+const {
+  offset,
+  items,
+  size,
+  pagination,
+  currentPage,
+  paginationsOptions,
+  goToPage,
+  isMounting: isPaginationMounting,
+} = usePagination(
+  props.persistent,
+  props.size,
+  props.pagination,
+  props.initialPage,
+);
+
+const {
+  changeSort,
+  sort,
+  isMounting: isSortMounting,
+} = useSort(props.persistent, props.headers, props.defaultSort);
+
+defineSlots();
+
+const {
+  search,
+  reflect,
+  filters,
+  isFilterVisible,
+  numberOfActiveFilters,
+  isMounting: isSearchMounting,
+  toggleFilters,
+  isSavedFilterActive,
+  resetFilters,
+  selectSavedFilter,
+} = useSearch(props.persistent, props.filters, props.defaultFiltersOpened);
+
+const emits = defineEmits<{
+  deleteSavedFilter: [value: SavedFilter];
+  saveFilter: [value: SavedFilter];
+  'update:selectMode': [selectMode: SelectMode];
+}>();
+
+const loading = ref<boolean>(false);
+const total = ref<number>(Infinity);
+const totalPages = computed(() => Math.ceil(total.value / size.value));
+const controller = ref<AbortController>();
+const isMounting = ref(true);
+const selectedItems: Ref<unknown[]> = defineModel('selectedItems', {
+  default: [] as unknown[],
+});
+const localSelectMode = computed({
+  get: () => props.selectMode,
+  set: (selectMode: SelectMode) => {
+    emits('update:selectMode', selectMode);
+  },
+});
+
+watchEffect(
+  async () => {
+    isMounting.value =
+      isPaginationMounting.value ||
+      isSortMounting.value ||
+      isSearchMounting.value;
+  },
+  { flush: 'post' },
+);
+
+watchEffect(() => {
+  reflect.value =
+    props.persistent && !(props.disableSearch && props.filters.length === 0);
+  size.value = props.size;
+  pagination.value = props.pagination;
+});
+
+watch([currentPage, isMounting], () => {
+  if (!isMounting.value && !loading.value) {
+    fetchData();
+  }
+});
+
+watch(
+  [() => filters.value, () => sort.value, size, search],
+  () => {
+    if (!isMounting.value) {
+      currentPage.value = props.initialPage;
+      emits('update:selectMode', SelectMode.DEFAULT);
+      fetchData();
+    }
+  },
+  { deep: true },
+);
+
+watch(
+  [() => filters.value, search],
+  () => {
+    if (!isMounting.value) {
+      selectedItems.value = [];
+    }
+  },
+  { deep: true },
+);
+
+async function fetchData() {
+  if (controller.value) {
+    controller.value.abort();
+  }
+  controller.value = new AbortController();
+  loading.value = true;
+
+  try {
+    const { data, total: totalItems } = await props.request(
+      {
+        size: size.value,
+        offset: offset.value,
+        page: currentPage.value,
+        search: search.value,
+        filters: filters.value,
+        sort: sort.value,
+      },
+      controller.value,
+      props.url,
+    );
+
+    items.value = data;
+    total.value = totalItems;
+
+    loading.value = false;
+  } catch (error) {
+    if (
+      !(error instanceof CanceledError) &&
+      (error as any)?.name !== 'AbortError'
+    ) {
+      throw error;
+    }
+  }
+}
+
+const debouncedSearch = _debounce((value: string) => {
+  search.value = value;
+}, props.debounceTime);
+
+const onPrevClick = () => {
+  goToPage(currentPage.value - 1, total.value);
+};
+
+const onNextClick = () => {
+  goToPage(currentPage.value + 1, total.value);
+};
+
+const go = (index: number) => {
+  goToPage(index + props.initialPage, total.value);
+};
+
+defineExpose({
+  refresh: fetchData,
+});
+
+const onSavedFilterDismiss = (savedFilter: SavedFilter) => {
+  emits('deleteSavedFilter', savedFilter);
+};
+
+const onSaveFilter = (savedFilter: SavedFilter) => {
+  emits('saveFilter', savedFilter);
+};
+
+const onClickHeader = (header: TableHeader) => {
+  changeSort(header);
+};
+
+const onClearSelection = () => {
+  emits('update:selectMode', SelectMode.DEFAULT);
+  selectedItems.value = [];
+};
+
+const onSelectAll = () => emits('update:selectMode', SelectMode.ALL);
+</script>
+
+<template>
+  <UiBmsTable
+    v-model:selectedItems="selectedItems"
+    v-model:selectMode="localSelectMode"
+    :loading="loading"
+    :items="items"
+    :headers="headers"
+    :mode="mode"
+    :hasFilters="filters.length > 0"
+    :sort="sort"
+    :selectable="selectable"
+    :selectableDisabled="selectableDisabled"
+    :totalSize="total"
+    :maxSelectedSize="maxSelectedSize"
+    @clickHeader="onClickHeader"
+    @selectAll="onSelectAll"
+    @clearSelection="onClearSelection"
+  >
+    <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
+      <slot :name="name" v-bind="slotData" />
+    </template>
+
+    <template #filters>
+      <Transition name="table-fade">
+        <div v-show="isFilterVisible" class="filters-container">
+          <BmsTableFilters
+            v-model="filters"
+            :canSaveFilters="canSaveFilters"
+            @saveFilter="onSaveFilter"
+            @resetFilters="resetFilters"
+          >
+          </BmsTableFilters>
+        </div>
+      </Transition>
+    </template>
+
+    <template #saved-filters>
+      <BmsTag
+        v-if="canSaveFilters"
+        v-for="savedFilter in savedFilters"
+        :key="savedFilter.id"
+        :active="isSavedFilterActive(savedFilter)"
+        @click="selectSavedFilter(savedFilter)"
+        @dismiss="onSavedFilterDismiss(savedFilter)"
+      >
+        <template #default>
+          {{ savedFilter.name }}
+        </template>
+        <template #closeIcon>
+          <Trash />
+        </template>
+      </BmsTag>
+    </template>
+
+    <template #search>
+      <UiFilterButton
+        v-if="filters.length > 0"
+        :activeFiltersNb="numberOfActiveFilters"
+        :isFilterVisible="isFilterVisible"
+        @toggleFilters="toggleFilters"
+      />
+      <template v-if="!disableSearch">
+        <slot name="search">
+          <BmsSearch
+            :modelValue="search"
+            class="table-search"
+            @update:modelValue="debouncedSearch"
+          />
+        </slot>
+      </template>
+    </template>
+
+    <template #empty>
+      <slot name="empty">
+        <BmsEmptyScreen
+          :title="search ? 'Aucun résultat' : 'Aucune donnée'"
+          :description="
+            search
+              ? 'Votre recherche n\'a retourné aucun résultat.'
+              : 'Il semblerait qu\'il n\'y ait rien ici.'
+          "
+        />
+      </slot>
+    </template>
+
+    <template #pagination>
+      <div v-if="props.size" class="bms-table__pagination">
+        <BmsPagination
+          v-model:currentSize="size"
+          :total="total"
+          :currentPage="props.initialPage === 1 ? currentPage - 1 : currentPage"
+          :sizes="paginationsOptions"
+          :pages="totalPages"
+          @prev="onPrevClick"
+          @next="onNextClick"
+          @go="go($event)"
+        />
+      </div>
+    </template>
+  </UiBmsTable>
+</template>
+<style lang="scss" scoped>
+.table-search {
+  width: 260px;
+}
+</style>

package/src/components/table/BmsTable.spec.ts

@@ -0,0 +1,309 @@
+import BmsTable from '@/components/table/BmsTable.vue';
+import { field } from '@/plugins/field';
+import { mount, MountingOptions } from '@vue/test-utils';
+import { nextTick, ref } from 'vue';
+
+vi.mock('vue-router', () => ({
+  useRoute: vi.fn().mockImplementation(() => ref({ path: 'path' })),
+}));
+
+const intersectionObserverMock = () => ({
+  observe: () => null,
+});
+window.IntersectionObserver = vi
+  .fn()
+  .mockImplementation(intersectionObserverMock);
+
+const headers = [
+  { label: 'Nom', key: 'name', class: 'customClass0', sortable: true },
+  { label: 'Titre', key: 'title', align: 'start', sortable: true },
+  { label: 'Age', key: 'age', align: 'center', sortable: true },
+  { label: 'Surnom', key: 'nickname', align: 'end', sortable: true },
+  { label: 'Boolean', key: 'boolean', align: 'end', sortable: true },
+];
+
+const items = [
+  {
+    name: 'Hello',
+    title: 'Hello world',
+    age: 4,
+    nickname: 'Nick1',
+    boolean: true,
+  },
+  { name: 'Foo', title: 'Bar', age: 10, nickname: 'Nick2', boolean: false },
+];
+
+const factory = (options: MountingOptions<any, {}> = {}) => {
+  return mount(BmsTable, {
+    global: {
+      plugins: [field],
+      stubs: ['BmsPagination'],
+    },
+    props: {
+      headers,
+      items,
+    },
+    ...options,
+  } as any);
+};
+
+describe('BmsTable', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.stubGlobal('localStorage', {
+      getItem: vi.fn().mockImplementation(() => '{}'),
+      setItem: vi.fn().mockImplementation(() => {}),
+    });
+  });
+  it('should filter table', async () => {
+    const wrapper = factory();
+    await nextTick();
+
+    const input = wrapper.find('input[type="text"]');
+    expect(wrapper.findAll('tbody tr').length).toEqual(2);
+
+    await input.setValue('Foo');
+    await nextTick();
+
+    expect(wrapper.findAll('tbody tr').length).toEqual(1);
+    expect(wrapper.find('tbody tr').text()).toContain('Foo');
+  });
+
+  describe('search form', () => {
+    it('should show a search input by default', () => {
+      const wrapper = factory();
+
+      expect(wrapper.find('input[type="search"]')).toBeTruthy();
+    });
+
+    it('should not show a search input when explicit asking', () => {
+      const wrapper = factory({
+        props: {
+          headers,
+          items,
+          disableSearch: true,
+        },
+      });
+
+      expect(() => wrapper.get('input[type="search"]')).toThrowError();
+    });
+  });
+
+  describe('initSearchValue', () => {
+    let wrapper: any;
+    let previous: any;
+
+    beforeEach(() => {
+      previous = global.window.location;
+      //@ts-ignore
+      delete global.window.location;
+    });
+    afterEach(() => {
+      global.window.location = previous;
+    });
+
+    test('should populate searchValue with url data', async () => {
+      global.window.location = {
+        ...previous,
+        search: '?bms-ui-filter-search=toto',
+      };
+      wrapper = factory({
+        props: {
+          headers,
+          items,
+        },
+      });
+      await nextTick();
+      expect(wrapper.vm.search).toEqual('toto');
+    });
+    test('should let default searchValue if not in url', async () => {
+      global.window.location = { ...previous, search: '' };
+      wrapper = factory({
+        props: {
+          headers,
+          items,
+        },
+      });
+      await nextTick();
+      expect(wrapper.vm.search).toEqual('');
+    });
+  });
+
+  describe('filters', () => {
+    test('should filter with an input', async () => {
+      const wrapper = factory({
+        props: {
+          headers,
+          items,
+          disableSearch: true,
+          defaultFiltersOpened: true,
+          filters: [
+            {
+              key: 'name',
+              label: 'input',
+              type: 'input',
+            },
+          ],
+        },
+      });
+      await nextTick();
+
+      const input = wrapper.find('input');
+      expect(wrapper.findAll('tbody tr').length).toEqual(2);
+
+      await input.setValue('Foo');
+      await nextTick();
+
+      expect(wrapper.findAll('tbody tr').length).toEqual(1);
+      expect(wrapper.find('tbody tr').text()).toContain('Foo');
+    });
+    test('should filter with a boolean', async () => {
+      const wrapper = factory({
+        props: {
+          headers,
+          items,
+          disableSearch: true,
+          defaultFiltersOpened: true,
+          filters: [
+            {
+              key: 'boolean',
+              label: 'boolean',
+              type: 'boolean',
+            },
+          ],
+        },
+      });
+      await nextTick();
+
+      expect(wrapper.findAll('tbody tr').length).toEqual(2);
+      const option = wrapper.find('[data-testid="false"]');
+      expect(option).toBeTruthy();
+      await option.trigger('click');
+
+      expect(wrapper.findAll('tbody tr').length).toEqual(1);
+      expect(wrapper.find('tbody tr').text()).toContain('Foo');
+    });
+    test('should filter with a boolean custom filter', async () => {
+      const wrapper = factory({
+        props: {
+          headers,
+          items,
+          disableSearch: true,
+          defaultFiltersOpened: true,
+          filters: [
+            {
+              key: 'title',
+              label: 'isHelloWorld',
+              type: 'boolean',
+              customFilter: (item: any, value: any, target: string) =>
+                (item[target] === 'Hello world') === value,
+            },
+          ],
+        },
+      });
+      await nextTick();
+
+      expect(wrapper.findAll('tbody tr').length).toEqual(2);
+      const option = wrapper.find('[data-testid="false"]');
+      expect(option).toBeTruthy();
+      await option.trigger('click');
+
+      expect(wrapper.findAll('tbody tr').length).toEqual(1);
+      expect(wrapper.find('tbody tr').text()).toContain('Foo');
+    });
+    test('should filter with a boolean custom filter with no target', async () => {
+      const wrapper = factory({
+        props: {
+          headers,
+          items,
+          disableSearch: true,
+          defaultFiltersOpened: true,
+          filters: [
+            {
+              key: 'titleCutsomKey',
+              label: 'isHelloWorld',
+              type: 'boolean',
+              customFilter: (item: any, value: any) =>
+                (item.title === 'Hello world') === value,
+            },
+          ],
+        },
+      });
+      await nextTick();
+
+      expect(wrapper.findAll('tbody tr').length).toEqual(2);
+      const option = wrapper.find('[data-testid="false"]');
+      expect(option).toBeTruthy();
+      await option.trigger('click');
+
+      expect(wrapper.findAll('tbody tr').length).toEqual(1);
+      expect(wrapper.find('tbody tr').text()).toContain('Foo');
+    });
+    test('should filter with a select', async () => {
+      const wrapper = factory({
+        props: {
+          headers,
+          items,
+          disableSearch: true,
+          defaultFiltersOpened: true,
+          filters: [
+            {
+              key: 'nickname',
+              label: 'select',
+              type: 'select',
+              selectOptions: [
+                {
+                  label: 'Nick1',
+                  value: 'Nick1',
+                },
+                {
+                  label: 'Nick2',
+                  value: 'Nick2',
+                },
+              ],
+            },
+          ],
+        },
+      });
+      await nextTick();
+
+      expect(wrapper.findAll('tbody tr').length).toEqual(2);
+      const option = wrapper.find('[data-testid="Nick2"]');
+      expect(option).toBeTruthy();
+      await option.trigger('click');
+
+      expect(wrapper.findAll('tbody tr').length).toEqual(1);
+      expect(wrapper.find('tbody tr').text()).toContain('Foo');
+    });
+  });
+  describe('sort', () => {
+    test('should sort items desc', async () => {
+      const wrapper = factory({
+        props: {
+          headers,
+          items,
+          persistent: false,
+          disableSearch: true,
+          defaultFiltersOpened: true,
+          defaultSort: { key: 'name', value: 'desc' },
+        },
+      });
+      await nextTick();
+      expect(wrapper.find('tbody tr').text()).toContain('Hello');
+    });
+    test('should sort items asc', async () => {
+      const wrapper = factory({
+        props: {
+          headers,
+          items,
+          persistent: false,
+          disableSearch: true,
+          defaultFiltersOpened: true,
+          defaultSort: { key: 'name', value: 'asc' },
+        },
+      });
+      await nextTick();
+      expect(wrapper.find('tbody tr').text()).toContain('Foo');
+    });
+  });
+});