@autoafleveren/ui 1.3.2 → 1.3.3

package/src/modules/components/AppDataTable/AppDataTable.vue

@@ -0,0 +1,323 @@
+<script lang="ts" generic="Item extends { id: number }" setup>
+  import { computed, onMounted, ref, useSlots, watch } from 'vue';
+  import { useKeyModifier } from '@vueuse/core';
+  import Vue3EasyDataTable from 'vue3-easy-data-table';
+  import { AppLoader } from '~components';
+  import { useActionBar, useContextMenu } from '~composables';
+  import AppDataTableFooter from './AppDataTableFooter.vue';
+
+  import type { ServerOptions } from 'vue3-easy-data-table';
+  import type { Props, DataTableInstance } from '.';
+
+  const props = withDefaults(defineProps<Props<Item>>(), {
+    actionBarSelection: true,
+    actionBarSelectionKey: 'id',
+    rowsPerPage: 50,
+    rowItems: () => [20, 50, 100, 200, 500],
+    hideFooter: false,
+  });
+
+  const emit = defineEmits<{
+    (event: 'update:modelValue', value: number[]): void;
+    (event: 'update:sort', value: string | undefined): void;
+    (event: 'updatePage', value: number): void;
+    (event: 'clickItem', value: Item): void;
+    (event: 'contextMenuOpen', value: Item): void;
+    (event: 'clickContextItem', value: Item): void;
+  }>();
+
+  const slots = useSlots();
+  const actionBar = useActionBar();
+  const contextMenu = useContextMenu();
+  const sort = defineModel<string>('sort');
+  const altState = useKeyModifier('Alt');
+  const dataTable = ref<typeof Vue3EasyDataTable | undefined>();
+  const tableSelection = ref<number[] | undefined>(props?.modelValue ?? undefined);
+
+  const dataTableInstance = computed((): DataTableInstance | undefined => {
+    return dataTable.value as DataTableInstance | undefined;
+  });
+
+  // @ts-expect-error 'tableSelection' is not assignable to type 'Ref<unknown[]>'
+  watch(() => tableSelection.value, (value: unknown[]) => {
+    if (tableSelection.value && props.actionBarSelection !== false) {
+      // eslint-disable-next-line unicorn/no-useless-spread
+      emit('update:modelValue', [...value.map(item => item?.[props.actionBarSelectionKey])]);
+    }
+  });
+
+  onMounted(() => {
+    if (props?.modelValue) {
+      watch(props.modelValue, (value: number[]) => {
+        tableSelection.value = value;
+      });
+    }
+  });
+
+  function updateSelection(value?: unknown[]): void {
+    if (tableSelection.value) {
+      actionBar.setTableSelection(tableSelection.value);
+    }
+
+    if (!value && props.actionBarSelection) {
+      // @ts-expect-error 'tableSelection' is not assignable to type 'Ref<unknown[]>'
+      actionBar.setSelection(tableSelection.value.map(item => item?.[props.actionBarSelectionKey]));
+
+      return;
+    }
+
+    if (value && props.actionBarSelection) {
+      actionBar.setSelection(value.map(item => item?.[props.actionBarSelectionKey]));
+    }
+
+    if (props.actionBarSelection === false) {
+      // @ts-expect-error 'update:modelValue' is not assignable to parameter of type 'clickContextItem'
+      // eslint-disable-next-line unicorn/no-useless-spread
+      emit('update:modelValue', [...value.map(item => item?.[props.actionBarSelectionKey])]);
+    }
+  }
+
+  function updatePage(page: number): void {
+    dataTableInstance.value?.updatePage(page);
+    emit('updatePage', page);
+  }
+
+  function previousPage(): void {
+    dataTableInstance.value?.prevPage();
+    emit('updatePage', (dataTableInstance.value?.currentPaginationNumber ?? 2) - 1);
+  }
+
+  function nextPage(): void {
+    dataTableInstance.value?.nextPage();
+    emit('updatePage', (dataTableInstance.value?.currentPaginationNumber ?? 0) + 1);
+  }
+
+  function clickRow(item: Item): void {
+    if (altState.value && tableSelection.value !== undefined) {
+      // @ts-expect-error table items not typed
+      const index = tableSelection.value.findIndex(tableItem => tableItem.id === item.id);
+
+      if (index > -1) {
+        tableSelection.value.splice(index, 1);
+
+        updateSelection();
+
+        return;
+      }
+
+      // @ts-expect-error table items not typed
+      tableSelection.value.push({ ...item, isSelected: undefined });
+
+      updateSelection();
+
+      return;
+    }
+
+    emit('clickItem', item);
+  }
+
+  function onUpdateServerOptions(value: ServerOptions): void {
+    if (value.sortBy) {
+      sort.value = `${value.sortType === 'desc' ? '-' : ''}${value.sortBy}`;
+
+      return;
+    }
+
+    sort.value = undefined;
+  }
+
+  defineExpose({ dataTableInstance });
+
+  defineOptions({ inheritAttrs: false });
+
+  actionBar.onResetSelection.value = (selection: Array<number | string>): void => {
+    if (props?.modelValue !== undefined) {
+      // @ts-expect-error 'tableSelection' is not assignable to type 'Ref<unknown[]>'
+      tableSelection.value = selection;
+    }
+  };
+</script>
+
+<template>
+  <div
+    :class="{ 'app-table-without-selection': props?.modelValue === undefined }"
+    class="app-data-table-wrapper"
+  >
+    <Vue3EasyDataTable
+      ref="dataTable"
+      v-bind="{ ...$props, ...$attrs }"
+      v-model:items-selected="tableSelection"
+      :hide-footer="true"
+      :class="{ 'app-hide-footer': hideFooter }"
+      :headers="headers"
+      :checkbox-column-width="30"
+      :rows-items="rowItems"
+      :rows-per-page="rowsPerPage"
+      body-row-class-name="drop-shadow-xs rounded-xl"
+      @update:items-selected="updateSelection"
+      @click-row="clickRow"
+      @contextmenu-row="contextMenu.open"
+      @update:server-options="onUpdateServerOptions"
+    >
+      <template #loading>
+        <AppLoader size="medium" />
+      </template>
+
+      <template
+        v-for="(slot, index) of Object.keys(slots)"
+        :key="index"
+        #[slot]="item"
+      >
+        <slot
+          :name="slot"
+          v-bind="item"
+        ></slot>
+      </template>
+    </Vue3EasyDataTable>
+
+    <div
+      v-if="dataTableInstance && !hideFooter"
+      class="w-full -mt-24 -translate-y-0.5"
+    >
+      <AppDataTableFooter
+        :data-table="dataTableInstance"
+        :current-page="currentPage"
+        @next-page="nextPage"
+        @previous-page="previousPage"
+        @update-page="updatePage"
+      >
+        <template #results="{ results }">
+          <slot
+            :results="results"
+            name="footer-results"
+          ></slot>
+        </template>
+      </AppDataTableFooter>
+    </div>
+  </div>
+</template>
+
+<style>
+  @reference "./../../../css/main.css";
+  @import 'vue3-easy-data-table/dist/style.css';
+
+  .app-table-without-selection {
+    tr th:first-child, tr td:first-child {
+      @apply pl-4!;
+    }
+  }
+
+  .vue3-easy-data-table {
+    @apply border-none!;
+
+    .vue3-easy-data-table__main {
+      @apply bg-transparent border-0;
+
+      .easy-checkbox {
+        @apply w-15 h-5 flex justify-center items-center -mx-5;
+
+        input[type=checkbox] {
+          @apply text-zinc-700 appearance-none h-5 w-5 border visible float-none
+          border-zinc-300 cursor-pointer rounded bg-white
+          checked:border-[5px]! checked:border-primary checked:bg-primary
+          disabled:border-10 disabled:border-zinc-100! disabled:cursor-not-allowed
+          focus:border-2 focus:border-primary focus-visible:outline-hidden;
+
+          + label {
+            &:before {
+              @apply opacity-0 w-5 h-5 ml-5;
+            }
+
+            &:after {
+              @apply w-3! h-1.5! ml-5;
+              transform: translate(.3em, .4em) rotate(-55deg) !important;
+            }
+          }
+        }
+      }
+
+      table {
+        @apply select-none border-none mb-24;
+
+        border-collapse: separate;
+        border-spacing: 0 15px;
+      }
+
+      .vue3-easy-data-table__message {
+        @apply -translate-y-25;
+      }
+
+      .vue3-easy-data-table__loading {
+        @apply top-3.5 rounded-2xl;
+
+        z-index: 999;
+      }
+
+      .vue3-easy-data-table__header {
+        tr {
+          @apply rounded-xl bg-primary;
+
+          th {
+            @apply border-none bg-primary text-white px-4 py-4 text-base font-bold whitespace-nowrap h-12;
+
+            &:first-child {
+              @apply w-1! rounded-l-2xl border-l-[16px] border-0 border-solid border-transparent;
+            }
+
+            &:last-child {
+              @apply rounded-r-2xl;
+            }
+
+            &.sortable {
+              .sortType-icon {
+                @apply border-none bg-multiselect-caret w-5 h-5 bg-contain brightness-0 invert translate-y-px mt-px!;
+              }
+            }
+          }
+        }
+      }
+
+      .vue3-easy-data-table__body tr {
+        @apply bg-white;
+
+        &:hover {
+          td {
+            @apply bg-zinc-50;
+          }
+        }
+
+        td {
+          @apply border-none px-4 py-3.5 text-base text-zinc-700 whitespace-nowrap h-12;
+
+          .easy-checkbox {
+            @apply h-10 -my-2.5;
+
+            input[type=checkbox] {
+              + label {
+                &:before {
+                  @apply mt-2.5;
+                }
+
+                &:after {
+                  @apply mt-2.5;
+                }
+              }
+            }
+          }
+
+          &:first-child {
+            @apply rounded-l-2xl border-l-[16px] border-0 border-solid border-transparent relative;
+          }
+
+          &:last-child {
+            @apply rounded-r-2xl;
+          }
+
+          a:hover {
+            @apply underline;
+          }
+        }
+      }
+    }
+  }
+</style>

package/src/modules/components/AppDataTable/AppDataTableFooter.vue

@@ -0,0 +1,91 @@
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { AppPagination, AppSelect } from '~components';
+
+  import type { DataTableInstance } from '.';
+
+  const props = defineProps<{
+    dataTable?: DataTableInstance;
+    currentPage?: number;
+  }>();
+
+  const emit = defineEmits<{
+    nextPage: [];
+    previousPage: [];
+    updatePage: [page: number];
+  }>();
+
+  const dataTable = computed(() => props.dataTable);
+  const clientItemsLength = computed((): number => dataTable.value?.clientItemsLength ?? 0);
+  const maxPaginationNumber = computed(() => dataTable.value?.maxPaginationNumber);
+  const currentPaginationNumber = computed(() => props.currentPage ?? dataTable.value?.currentPaginationNumber);
+
+  function nextPage(): void {
+    emit('nextPage');
+  }
+
+  function previousPage(): void {
+    emit('previousPage');
+  }
+
+  function updatePage(paginationNumber: number): void {
+    emit('updatePage', paginationNumber);
+  }
+
+  function updateRowsPerPage(): void {
+    emit('updatePage', 1);
+  }
+</script>
+
+<template>
+  <div class="relative z-50 w-full rounded-2xl bg-white px-4 py-3 shadow-2xs">
+    <div class="my-[3px] flex w-full flex-col justify-between space-y-2 md:flex-row">
+      <div
+        class="items-center sm:flex"
+        data-test-results
+      >
+        <div
+          v-if="dataTable"
+          class="flex w-full items-center md:mr-4 md:space-x-2"
+        >
+          <div class="hidden md:block">
+            Tonen
+          </div>
+
+          <AppSelect
+            v-model="dataTable.rowsPerPageActiveOption"
+            :can-clear="false"
+            :can-deselect="false"
+            :options="dataTable.rowsPerPageOptions"
+            :additional-classes="{ singleLabel: 'p-3!', caret: 'mr-2!' }"
+            open-direction="up"
+            wrapper-classes="w-full"
+            class="h-10 w-full md:w-20"
+            @change="updateRowsPerPage"
+          />
+        </div>
+
+        <div
+          class="hidden whitespace-nowrap md:flex"
+          data-test-results-count
+        >
+          <slot
+            :results="clientItemsLength"
+            name="results"
+          >
+            {{ clientItemsLength }} results
+          </slot>
+        </div>
+      </div>
+
+      <AppPagination
+        v-if="clientItemsLength > 0"
+        :current-page="currentPaginationNumber"
+        :last-page="maxPaginationNumber"
+        @paginate="updatePage"
+        @next-page="nextPage"
+        @previous-page="previousPage"
+      />
+    </div>
+  </div>
+</template>

package/src/modules/components/AppDataTable/__mocks__/index.ts

@@ -0,0 +1,71 @@
+import { vi } from 'vitest';
+
+import type { Item, Header } from 'vue3-easy-data-table';
+import type { DataTableInstance } from '../index.d';
+
+export const nextPageMock = vi.fn();
+export const previousPageMock = vi.fn();
+export const updatePageMock = vi.fn();
+export const updateRowsPerPageActiveOptionMock = vi.fn();
+
+export const dataTableInstance: DataTableInstance = {
+  clientItemsLength: 100,
+  currentPageFirstIndex: 1,
+  currentPageLastIndex: 20,
+  currentPaginationNumber: 1,
+  isFirstPage: true,
+  isLastPage: false,
+  maxPaginationNumber: 5,
+  nextPage: () => nextPageMock,
+  // eslint-disable-next-line unicorn/prevent-abbreviations
+  prevPage: () => previousPageMock,
+  rowsPerPageActiveOption: 20,
+  rowsPerPageOptions: [20, 50, 100],
+  updatePage: updatePageMock,
+  updateRowsPerPageActiveOption: updateRowsPerPageActiveOptionMock,
+};
+
+// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+export const items: Array<(Item & { id: number })> = [
+  {
+    id: 1,
+    player: 'Stephen Curry',
+    team: 'GSW',
+    number: 30,
+    position: 'G',
+    indicator: { height: '6-2', weight: 185 },
+    lastAttended: 'Davidson',
+    country: 'USA',
+  },
+  {
+    id: 2,
+    player: 'Lebron James',
+    team: 'LAL',
+    number: 6,
+    position: 'F',
+    indicator: { height: '6-9', weight: 250 },
+    lastAttended: 'St. Vincent-St. Mary HS (OH)',
+    country: 'USA',
+  },
+  {
+    id: 3,
+    player: 'Kevin Durant',
+    team: 'BKN',
+    number: 7,
+    position: 'F',
+    indicator: { height: '6-10', weight: 240 },
+    lastAttended: 'Texas-Austin',
+    country: 'USA',
+  },
+];
+
+export const headers: Header[] = [
+  { text: 'Player', value: 'player' },
+  { text: 'Team', value: 'team' },
+  { text: 'Number', value: 'number' },
+  { text: 'Position', value: 'position' },
+  { text: 'Height', value: 'indicator.height' },
+  { text: 'Weight', value: 'indicator.weight', sortable: true },
+  { text: 'Last attended', value: 'lastAttended', width: 200 },
+  { text: 'Country', value: 'country' },
+];

package/src/modules/components/AppDataTable/__tests__/app-data-table-footer.spec.ts

@@ -0,0 +1,107 @@
+import { flushPromises, shallowMount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import AppSelectStub from '~/tests/stubs/AppSelect';
+import AppPagination from '../../AppPagination/AppPagination.vue';
+import AppDataTableFooter from '../AppDataTableFooter.vue';
+import { dataTableInstance } from '../__mocks__';
+
+import type { VueWrapper } from '@vue/test-utils';
+
+function createWrapper(withSlots = false): VueWrapper<InstanceType<typeof AppDataTableFooter>> {
+  return shallowMount(AppDataTableFooter, {
+    props: {
+      dataTable: { ...dataTableInstance },
+    },
+    slots: withSlots ? {
+      results: '<div>results slot</div>',
+    } : undefined,
+
+    global: {
+      stubs: {
+        AppSelect: AppSelectStub,
+      },
+    },
+  });
+}
+
+describe('the generic AppDataTableFooter component', () => {
+  it('should render the total results', () => {
+    const wrapper = createWrapper();
+
+    const resultsElement = wrapper.find('[data-test-results-count]');
+    expect(resultsElement.exists()).toBe(true);
+    expect(resultsElement.text()).toBe('100 results');
+  });
+
+  it('should render total results slot when provided', () => {
+    const wrapper = createWrapper(true);
+
+    const resultsElement = wrapper.find('[data-test-results-count]');
+    expect(resultsElement.exists()).toBe(true);
+    expect(resultsElement.text()).toBe('results slot');
+  });
+
+  it('should render results select', async () => {
+    expect.assertions(6);
+
+    const wrapper = createWrapper();
+
+    const resultSelect = wrapper.findComponent(AppSelectStub);
+    expect(resultSelect.exists()).toBe(true);
+    expect(resultSelect.props('modelValue')).toBe(20);
+
+    expect(wrapper.vm.dataTable?.rowsPerPageActiveOption).toBe(20);
+
+    resultSelect.vm.$emit('update:modelValue', 50);
+    resultSelect.vm.$emit('change');
+
+    await flushPromises();
+
+    expect(wrapper.vm.dataTable?.rowsPerPageActiveOption).toBe(50);
+    expect(wrapper.emitted('updatePage')).toBeDefined();
+    expect(wrapper.emitted('updatePage')?.[0]?.[0]).toBe(1);
+  });
+
+  it('should render the AppPagination', () => {
+    const wrapper = createWrapper();
+
+    const pagination = wrapper.findComponent(AppPagination);
+    expect(pagination.exists()).toBe(true);
+    expect(pagination.props('currentPage')).toBe(dataTableInstance.currentPaginationNumber);
+    expect(pagination.props('lastPage')).toBe(dataTableInstance.maxPaginationNumber);
+  });
+
+  it('should emit nextPage', () => {
+    const wrapper = createWrapper();
+
+    expect(wrapper.emitted('nextPage')).toBeUndefined();
+
+    const pagination = wrapper.findComponent<typeof AppPagination>({ name: 'AppPagination' });
+    pagination.vm.$emit('nextPage');
+
+    expect(wrapper.emitted('nextPage')).toBeDefined();
+  });
+
+  it('should emit previousPage', () => {
+    const wrapper = createWrapper();
+
+    expect(wrapper.emitted('previousPage')).toBeUndefined();
+
+    const pagination = wrapper.findComponent(AppPagination);
+    pagination.vm.$emit('previousPage');
+
+    expect(wrapper.emitted('previousPage')).toBeDefined();
+  });
+
+  it('should emit paginate', () => {
+    const wrapper = createWrapper();
+
+    expect(wrapper.emitted('updatePage')).toBeUndefined();
+
+    const pagination = wrapper.findComponent(AppPagination);
+    pagination.vm.$emit('paginate', 1);
+
+    expect(wrapper.emitted('updatePage')).toBeDefined();
+    expect(wrapper.emitted('updatePage')?.[0]?.[0]).toBe(1);
+  });
+});