@cnamts/synapse 0.0.9-alpha → 0.0.11-alpha

package/src/components/PaginatedTable/PaginatedTable.vue

@@ -0,0 +1,243 @@
+<script setup lang="ts">
+	import { ref, computed, watch, useAttrs, onMounted } from 'vue'
+	import type { DataOptions, SortOption, GroupOption } from './types'
+	import { LocalStorageUtility } from '@/utils/localStorageUtility'
+
+	const props = defineProps({
+		serverItemsLength: {
+			type: Number,
+			default: undefined,
+		},
+		suffix: {
+			type: String,
+			default: undefined,
+		},
+		itemsPerPage: {
+			type: Number,
+			default: undefined,
+		},
+		caption: {
+			type: String,
+			default: 'caption',
+		},
+	})
+
+	const options = defineModel<Partial<DataOptions>>('options', {
+		required: false,
+		default: () => ({}),
+	})
+
+	const localStorageUtility = new LocalStorageUtility()
+	const localOptions = ref({})
+
+	const storageKey = computed(() => {
+		const prefix = 'pagination'
+		return props.suffix ? `${prefix}-${props.suffix}` : prefix
+	})
+
+	const componentAttributes = useAttrs()
+
+	const headers = computed(() => {
+		if (!Array.isArray(componentAttributes['headers'])) {
+			return undefined
+		}
+		return componentAttributes['headers'].map(header => ({
+			...header,
+			title: header.title ?? header.text,
+		}))
+	})
+
+	const optionsFacade = computed(() => {
+		return {
+			page: options.value.page || componentAttributes['page'],
+			itemsPerPage: options.value.itemsPerPage || props.itemsPerPage,
+			sortBy: options.value.sortBy,
+			groupBy: options.value.groupBy,
+			multiSort: options.value.multiSort,
+			mustSort: options.value.mustSort,
+		}
+	})
+
+	const propsFacade = computed(() => {
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		const { 'onUpdate:options': _, ...attrs } = componentAttributes
+
+		return {
+			...attrs,
+			itemsLength: props.serverItemsLength ?? 0,
+			headers: headers.value,
+			...localOptions.value,
+		}
+	})
+
+	function updateOptions(tableOptions: SortOption[] | GroupOption[]): void {
+		options.value = {
+			...options.value,
+			...tableOptions,
+		}
+	}
+
+	watch(
+		() => options.value,
+		() => {
+			if (props.serverItemsLength !== 0) {
+				localStorageUtility.setItem(storageKey.value, {
+					...optionsFacade.value,
+					itemsLength: props.serverItemsLength ?? 0,
+				})
+
+				localOptions.value = optionsFacade.value
+			}
+		},
+		{ deep: true },
+	)
+
+	localOptions.value = localStorageUtility.getItem(storageKey.value) ?? optionsFacade.value
+
+	onMounted(() => {
+		const table = document.querySelector('#paginated-table table')
+		const caption = document.createElement('caption')
+		caption.innerHTML = props.caption
+		if (props.caption === 'caption') {
+			caption.classList.add('d-sr-only')
+		}
+		else {
+			caption.classList.add('text-subtitle-1')
+		}
+		table?.prepend(caption)
+
+		const inputs = document.querySelectorAll('#paginated-table input')
+		inputs.forEach((input) => {
+			(input as HTMLElement).removeAttribute('aria-describedby')
+		})
+
+		const fields = document.querySelectorAll('#paginated-table .v-field')
+		fields.forEach((field) => {
+			(field as HTMLElement).setAttribute('tabindex', '0')
+		})
+
+		const fieldLabels = document.querySelectorAll('#paginated-table .v-field')
+		fieldLabels.forEach((fieldLabel) => {
+			(fieldLabel as HTMLElement).setAttribute('aria-label', 'items per page')
+		})
+
+		const fieldTitles = document.querySelectorAll('#paginated-table .v-field')
+		fieldTitles.forEach((fieldTitle) => {
+			(fieldTitle as HTMLElement).setAttribute('title', 'items per page')
+		})
+
+		const th = document.querySelectorAll('#paginated-table th')
+		for (let i = 0; i < th.length; i++) {
+			th[i].setAttribute('scope', 'col')
+		}
+	})
+</script>
+
+<template>
+	<div id="paginated-table">
+		<VDataTable
+			v-if="!serverItemsLength"
+			color="primary"
+			v-bind="propsFacade"
+			@update:options="updateOptions"
+		>
+			<template
+				v-for="slotName in Object.keys($slots)"
+				#[slotName]="slotProps"
+			>
+				<slot
+					:name="slotName"
+					v-bind="slotProps ?? {}"
+				/>
+			</template>
+		</VDataTable>
+		<VDataTableServer
+			v-else
+			v-bind="propsFacade"
+			color="primary"
+			@update:options="updateOptions"
+		>
+			<template
+				v-for="slotName in Object.keys($slots)"
+				#[slotName]="slotProps"
+			>
+				<slot
+					:name="slotName"
+					v-bind="slotProps ?? {}"
+				/>
+			</template>
+		</VDataTableServer>
+	</div>
+</template>
+
+<style lang="scss">
+@use '@/assets/tokens';
+
+.vd-data-table,
+.v-data-table {
+	table thead tr {
+		white-space: nowrap;
+	}
+
+	table thead th {
+		.v-data-table-header__content {
+			opacity: 0.65;
+			font-size: 0.875rem;
+			font-weight: 700 !important;
+		}
+	}
+
+	table :not(thead) tr {
+		&:hover {
+			background-color: rgb(12 65 154 / 10%);
+		}
+	}
+
+	&.row-clickable table tbody tr {
+		cursor: pointer;
+	}
+
+	&.fixed-min-height {
+		.v-data-table__wrapper {
+			min-height: 540px;
+		}
+	}
+
+	&.no-mobile-header {
+		.v-data-table-header-mobile {
+			display: none;
+		}
+
+		table {
+			border-top: 2px solid #eee;
+		}
+	}
+
+	.v-data-table-progress {
+		.v-progress-linear {
+			height: 4px !important;
+		}
+
+		.v-progress-linear__background,
+		.v-progress-linear__indeterminate {
+			background: tokens.$primary-base;
+		}
+	}
+
+	.v-field {
+		&--active {
+			.v-field__prepend-inner > .v-icon,
+			.v-field__append-inner > .v-icon,
+			.v-field__clearable > .v-icon {
+				opacity: 1;
+				color: tokens.$primary-base;
+			}
+		}
+
+		&--focused {
+			border-color: tokens.$primary-base;
+			color: tokens.$primary-base;
+		}
+	}
+}
+</style>

package/src/components/PaginatedTable/constants/ExpertiseLevelEnum.ts

@@ -0,0 +1,4 @@
+export enum ExpertiseLevelEnum {
+	DEV = 'dev',
+	DESIGN = 'design',
+}

package/src/components/PaginatedTable/constants/StateEnum.ts

@@ -0,0 +1,6 @@
+export enum StateEnum {
+	IDLE = 'idle',
+	PENDING = 'pending',
+	REJECTED = 'rejected',
+	RESOLVED = 'resolved',
+}

package/src/components/PaginatedTable/tests/PaginatedTable.spec.ts

@@ -0,0 +1,257 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+import { vuetify } from '@tests/unit/setup'
+import { LocalStorageUtility } from '@/utils/localStorageUtility'
+import type { DataOptions } from '@/components/PaginatedTable/types'
+
+import PaginatedTable from '../PaginatedTable.vue'
+
+vi.mock('./LocalStorageUtility')
+
+const fakeItems = [
+	{
+		id: 1,
+		name: 'John Doe',
+		age: 25,
+	},
+	{
+		id: 2,
+		name: 'Jane Doe',
+		age: 30,
+	},
+	{
+		id: 3,
+		name: 'John Smith',
+		age: 35,
+	},
+] as const
+
+const headers = [
+	{
+		title: 'ID',
+		key: 'id',
+	},
+	{
+		title: 'Name',
+		key: 'name',
+	},
+	{
+		title: 'Age',
+		key: 'age',
+	},
+]
+
+describe('PaginatedTable', () => {
+	afterEach(() => {
+		vi.resetAllMocks()
+	})
+
+	it('renders correctly in local mode', () => {
+		const wrapper = mount(PaginatedTable, {
+			propsData: {
+				options: {} as DataOptions,
+				items: fakeItems,
+				headers: headers,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+		expect(wrapper.text()).toContain('John Doe')
+	})
+
+	it('renders correctly with no headers', () => {
+		const wrapper = mount(PaginatedTable, {
+			propsData: {
+				options: {} as DataOptions,
+				items: fakeItems,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.text()).toContain('John Doe')
+		expect(wrapper.text()).not.toContain('ID')
+		expect(wrapper.text()).toContain('Id')
+	})
+
+	it('accepts both old and new headers format', () => {
+		const wrapper = mount(PaginatedTable, {
+			propsData: {
+				options: {} as DataOptions,
+				items: fakeItems,
+				itemsPerPage: 2,
+				headers: [
+					{
+						text: 'ID',
+						key: 'id',
+					},
+					{
+						title: 'NAME',
+						key: 'name',
+					},
+					{
+						key: 'age',
+					},
+				],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.text()).toContain('John Doe')
+		expect(wrapper.text()).toContain('ID')
+		expect(wrapper.text()).toContain('NAME')
+		expect(
+			wrapper.find('.v-data-table__td:nth-child(3)').text(),
+		).not.toMatch(/age/i)
+
+		expect(wrapper.findAll('tbody .v-data-table__tr').length).toBe(3)
+	})
+
+	it('store the options in local storage in local mode', async () => {
+		const wrapper = mount(PaginatedTable, {
+			propsData: {
+				suffix: 'test 3',
+				options: {
+					sortBy: [{ key: 'name', order: 'asc' }],
+				},
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		const setItemMock = vi.spyOn(LocalStorageUtility.prototype, 'setItem')
+		await wrapper.setProps({
+			options: {
+				sortBy: [{ key: 'name', order: 'desc' }],
+			},
+		})
+		expect(setItemMock).toHaveBeenCalledWith(
+			'pagination-test 3',
+			expect.objectContaining({
+				sortBy: [
+					{
+						key: 'name',
+						order: 'desc',
+					},
+				],
+			}),
+		)
+		await wrapper.setProps({
+			options: {
+				sortBy: [
+					{
+						key: 'age',
+						order: 'desc',
+					},
+				],
+			},
+		})
+		expect(setItemMock).toHaveBeenCalledWith(
+			'pagination-test 3',
+			expect.objectContaining({
+				sortBy: [
+					{
+						key: 'age',
+						order: 'desc',
+					},
+				],
+			}),
+		)
+	})
+
+	it('render correctly in server mode', async () => {
+		const wrapper = mount(PaginatedTable, {
+			propsData: {
+				options: {} as DataOptions,
+				serverItemsLength: 0,
+				suffix: 'test 5',
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+		expect(wrapper.emitted('update:options')).toBeTruthy()
+
+		await wrapper.setProps({
+			serverItemsLength: 20,
+		})
+
+		expect(wrapper.find('.v-data-table-footer__info').text()).toBe(
+			'1-10 of 20',
+		)
+	})
+
+	it('emit update:options event when the user change the sort in server mode', async () => {
+		const wrapper = mount(PaginatedTable, {
+			propsData: {
+				options: {} as DataOptions,
+				serverItemsLength: 0,
+				suffix: 'test 6',
+				headers: headers,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await wrapper.find('.v-data-table-header__content').trigger('click')
+
+		expect(wrapper.emitted('update:options')?.at(-1)).toEqual([
+			expect.objectContaining({
+				sortBy: [{ key: 'id', order: 'asc' }],
+			}),
+		])
+
+		await wrapper
+			.findAll('.v-data-table-header__content')[1]
+			.trigger('click')
+
+		expect(wrapper.emitted('update:options')?.at(-1)).toEqual([
+			expect.objectContaining({
+				sortBy: [{ key: 'name', order: 'asc' }],
+			}),
+		])
+
+		await wrapper
+			.findAll('.v-data-table-header__content')[1]
+			.trigger('click')
+
+		expect(wrapper.emitted('update:options')?.at(-1)).toEqual([
+			expect.objectContaining({
+				sortBy: [{ key: 'name', order: 'desc' }],
+			}),
+		])
+	})
+
+	it('define the order at asc by default in server mode', async () => {
+		const wrapper = mount(PaginatedTable, {
+			propsData: {
+				options: {
+					sortBy: [{ key: 'id', order: 'desc' }],
+					groupBy: [{ key: 'name', order: 'asc' }],
+				},
+				serverItemsLength: 0,
+				suffix: 'test 7',
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.emitted('update:options')?.at(-1)).toEqual([
+			expect.objectContaining({
+				sortBy: [{ key: 'id', order: 'desc' }],
+				groupBy: [{ key: 'name', order: 'asc' }],
+			}),
+		])
+	})
+})