@cnamts/synapse 1.0.1 → 1.0.2

package/src/components/Tables/common/tableStorageUtils.ts

@@ -1,5 +1,5 @@
 import { computed, ref, type Ref } from 'vue'
-import type { DataOptions } from './types'
+import type { DataOptions, DataTableHeaders } from './types'
 import { LocalStorageUtility } from '@/utils/localStorageUtility'
 
 /**
@@ -35,9 +35,17 @@ export function useTableStorage({
 		return `${storageKey.value}-column-widths`
 	})
 
+	// Separate key for headers
+	const heardersKey = computed(() => {
+		return `${storageKey.value}-headers`
+	})
+
 	// Column widths storage
 	const columnWidths = ref<ColumnWidthsStorage>({})
 
+	// Headers storage
+	const headers = ref<DataTableHeaders[] | undefined>(undefined)
+
 	// Configuration of local storage synchronization
 	function setupLocalStorage() {
 		// Watch for option changes and update local storage
@@ -64,6 +72,12 @@ export function useTableStorage({
 			if (storedColumnWidths) {
 				columnWidths.value = storedColumnWidths
 			}
+
+			// Load headers from storage
+			const storedHeaders = localStorageUtility.getItem<DataTableHeaders[]>(heardersKey.value)
+			if (storedHeaders) {
+				headers.value = storedHeaders
+			}
 		}
 
 		// Save column widths to localStorage
@@ -81,12 +95,23 @@ export function useTableStorage({
 			saveColumnWidths(updatedWidths)
 		}
 
-		return { watchOptions, initFromStorage, saveColumnWidths, updateColumnWidth }
+		// Save headers to localStorage
+		const saveHeaders = (headers: DataTableHeaders[] | undefined) => {
+			if (!headers) {
+				localStorageUtility.removeItem(heardersKey.value)
+				return
+			}
+
+			localStorageUtility.setItem(heardersKey.value, headers)
+		}
+
+		return { watchOptions, initFromStorage, saveColumnWidths, updateColumnWidth, saveHeaders }
 	}
 
 	return {
 		localOptions,
 		columnWidths,
+		headers,
 		storageKey,
 		columnWidthsKey,
 		setupLocalStorage,

package/src/components/Tables/common/tableStyles.scss

@@ -51,4 +51,30 @@
 			color: tokens.$primary-base;
 		}
 	}
+
+	// Override Vuetify's checkbox styles to use primary color
+	.v-table .v-selection-control {
+		color: rgb(var(--v-theme-primary)) !important;
+	}
+
+	.v-table .v-selection-control--dirty .v-selection-control__input::before {
+		background-color: rgb(var(--v-theme-primary)) !important;
+		border-color: rgb(var(--v-theme-primary)) !important;
+	}
+
+	// Target the header checkbox specifically
+	.v-data-table-header__checkbox .v-selection-control {
+		color: rgb(var(--v-theme-primary)) !important;
+	}
+
+	// Target the row checkboxes specifically
+	.v-data-table-row__checkbox .v-selection-control {
+		color: rgb(var(--v-theme-primary)) !important;
+	}
+
+	// Add a global style for all checkboxes in the table
+	.v-checkbox .v-selection-control__input::before,
+	.v-checkbox-btn .v-selection-control__input::before {
+		border-color: rgb(var(--v-theme-primary)) !important;
+	}
 }

package/src/components/Tables/common/tableUtils.ts

@@ -10,7 +10,6 @@ export function useTableUtils({
 	tableId,
 	prefix,
 	suffix,
-	itemsPerPage,
 	serverItemsLength,
 	componentAttributes,
 	options,
@@ -18,7 +17,6 @@ export function useTableUtils({
 	tableId: string
 	prefix: string
 	suffix?: string
-	itemsPerPage?: number
 	caption?: string
 	serverItemsLength?: number
 	componentAttributes: Record<string, unknown>
@@ -26,7 +24,7 @@ export function useTableUtils({
 	density?: TableDensityType
 }) {
 	// Use the separated storage utility
-	const { localOptions, columnWidths, storageKey, setupLocalStorage, updateColumnWidth } = useTableStorage({
+	const { localOptions, columnWidths, headers, storageKey, setupLocalStorage, updateColumnWidth } = useTableStorage({
 		prefix,
 		suffix,
 		serverItemsLength,
@@ -38,20 +36,10 @@ export function useTableUtils({
 		tableId,
 	})
 
-	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 || itemsPerPage,
+			itemsPerPage: options.value.itemsPerPage || 10,
 			sortBy: options.value.sortBy,
 			groupBy: options.value.groupBy,
 			multiSort: options.value.multiSort,
@@ -65,7 +53,6 @@ export function useTableUtils({
 
 		const props = {
 			...attrs,
-			headers: headers.value,
 			...localOptions.value,
 			...(serverItemsLength !== undefined ? { itemsLength: serverItemsLength } : {}),
 		}
@@ -104,12 +91,12 @@ export function useTableUtils({
 		localOptions,
 		columnWidths,
 		storageKey,
-		headers,
 		optionsFacade,
 		propsFacade,
 		updateOptions,
 		setupAccessibility,
 		setupLocalStorage,
 		updateColumnWidth,
+		headers,
 	}
 }

package/src/components/Tables/common/tests/SyTablePagination.spec.ts

@@ -0,0 +1,170 @@
+import { mount } from '@vue/test-utils'
+import { expect, describe, it } from 'vitest'
+import SyTablePagination from '../SyTablePagination.vue'
+import { vuetify } from '@tests/unit/setup'
+
+describe('SyTablePagination.vue', () => {
+	it('renders the component with default props', () => {
+		const wrapper = mount(SyTablePagination, {
+			props: {
+				page: 1,
+				itemsPerPage: 10,
+				itemsLength: 100,
+				pageCount: 10,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.exists()).toBe(true)
+		expect(wrapper.find('.sy-table-pagination').exists()).toBe(true)
+	})
+
+	it('displays pagination when there are multiple pages', () => {
+		const wrapper = mount(SyTablePagination, {
+			props: {
+				page: 1,
+				itemsPerPage: 10,
+				itemsLength: 100,
+				pageCount: 10,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.find('.pagination').exists()).toBe(true)
+	})
+
+	it('does not display pagination navigation when there is only one page', () => {
+		const wrapper = mount(SyTablePagination, {
+			props: {
+				page: 1,
+				itemsPerPage: 10,
+				itemsLength: 5,
+				pageCount: 1,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.find('.sy-table-pagination').exists()).toBe(true)
+		expect(wrapper.find('.pagination').exists()).toBe(false)
+	})
+
+	it('always shows items per page selector even with only one page', () => {
+		const wrapper = mount(SyTablePagination, {
+			props: {
+				page: 1,
+				itemsPerPage: 10,
+				itemsLength: 5,
+				pageCount: 1,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.find('.sy-table-pagination').exists()).toBe(true)
+		expect(wrapper.find('.info').exists()).toBe(true)
+		expect(wrapper.findComponent({ name: 'SySelect' }).exists()).toBe(true)
+	})
+
+	it('includes standard options and current itemsPerPage value', async () => {
+		// Test with standard value
+		const wrapper1 = mount(SyTablePagination, {
+			props: {
+				page: 1,
+				itemsPerPage: 10, // Standard value
+				itemsLength: 42,
+				pageCount: 5,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const vm1 = wrapper1.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
+		expect(vm1.itemsPerPageOptions).toBeDefined()
+
+		const options1 = vm1.itemsPerPageOptions
+		// Should have standard options 5, 10, 25, 50, 100) plus the 'All' option (-1)
+		expect(options1.map(o => o.value).sort((a, b) => a - b)).toEqual([-1, 5, 10, 25, 50, 100])
+
+		// Test with custom value
+		const wrapper2 = mount(SyTablePagination, {
+			props: {
+				page: 1,
+				itemsPerPage: 42, // Custom value
+				itemsLength: 100,
+				pageCount: 5,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const vm2 = wrapper2.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
+		const options2 = vm2.itemsPerPageOptions
+
+		// Should include the custom value (42)
+		const hasCustomValue = options2.some(option => option.value === 42)
+		expect(hasCustomValue).toBe(true)
+
+		// Should have standard options + custom value + 'All' option
+		expect(options2.map(o => o.value).sort((a, b) => a - b)).toEqual([-1, 5, 10, 25, 42, 50, 100])
+	})
+
+	it('shows correct range when "All" is selected', async () => {
+		const wrapper = mount(SyTablePagination, {
+			props: {
+				page: 1,
+				itemsPerPage: -1, // "All" option
+				itemsLength: 42,
+				pageCount: 1,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const infoText = wrapper.find('.info').text()
+		expect(infoText).toContain('1-42')
+	})
+
+	it('emits update:page event when nextPage method is called', async () => {
+		const wrapper = mount(SyTablePagination, {
+			props: {
+				page: 1,
+				itemsPerPage: 10,
+				itemsLength: 100,
+				pageCount: 10,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await (wrapper.vm as unknown as { nextPage: () => Promise<void> }).nextPage()
+
+		expect(wrapper.emitted('update:page')).toBeTruthy()
+		expect(wrapper.emitted('update:page')![0]).toEqual([2])
+	})
+
+	it('has the correct structure for items per page selection', () => {
+		const wrapper = mount(SyTablePagination, {
+			props: {
+				page: 1,
+				itemsPerPage: 10,
+				itemsLength: 100,
+				pageCount: 10,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.find('.rows-per-page-label').exists()).toBe(true)
+
+		const labelText = wrapper.find('.rows-per-page-label').text()
+		expect(labelText).toContain('Lignes par page')
+	})
+})

package/src/components/Tables/common/tests/filterByRange.spec.ts

@@ -0,0 +1,215 @@
+import { vuetify } from '@tests/unit/setup'
+import { mount } from '@vue/test-utils'
+import { afterAll, describe, expect, it, vi } from 'vitest'
+import SyTable from '../../SyTable/SyTable.vue'
+import DateFilter from '../filters/DateFilter.vue'
+import NumberFilter from '../filters/NumberFilter.vue'
+import PeriodFilter from '../filters/PeriodFilter.vue'
+import SelectFilter from '../filters/SelectFilter.vue'
+import TextFilter from '../filters/TextFilter.vue'
+
+const headers = [
+	{
+		title: 'Nom',
+		key: 'name',
+		filterable: true,
+		filterType: 'text' as const,
+	},
+	{
+		title: 'Date de naissance',
+		key: 'birthdate',
+		filterable: true,
+		filterType: 'period' as const,
+	},
+]
+
+const items = [
+	{
+		name: 'Alice',
+		birthdate: '1990-01-01',
+	},
+	{
+		name: 'Bob',
+		birthdate: '1985-05-15',
+	},
+	{
+		name: 'Charlie',
+		birthdate: '2000-12-31',
+	},
+	{
+		name: 'David',
+		birthdate: '1995-07-20',
+	},
+]
+
+describe('SyTable - filterByRange', () => {
+	vi.mock('../../common/filters/getFilterComponent', () => {
+		return {
+			// eslint-disable-next-line @typescript-eslint/no-unused-vars
+			default: (filterType?: string, filterOptions?: unknown) => {
+				if (filterType === 'select') {
+					return SelectFilter
+				}
+				else if (filterType === 'date') {
+					return DateFilter
+				}
+				else if (filterType === 'period') {
+					return PeriodFilter
+				}
+				else if (filterType === 'number') {
+					return NumberFilter
+				}
+				else {
+					return TextFilter
+				}
+			},
+		}
+	})
+	afterAll(() => {
+		vi.resetModules()
+	})
+
+	it('filter by max date', async () => {
+		const wrapper = mount(SyTable, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				headers,
+				items,
+				showFilters: true,
+				suffix: 'test',
+			},
+		})
+
+		const expectedNames = ['Alice', 'Bob', 'Charlie', 'David']
+		expectedNames.forEach((element) => {
+			expect(wrapper.text()).toContain(element)
+		})
+
+		const endDate = wrapper.find('input[aria-label="Fin"]')
+		await endDate.setValue('01/01/2000')
+
+		const textContent = wrapper.text()
+
+		const filteredNames = ['Alice', 'Bob', 'David']
+		filteredNames.forEach((element) => {
+			expect(textContent).toContain(element)
+		})
+		const notFilteredNames = ['Charlie']
+		notFilteredNames.forEach((element) => {
+			expect(textContent).not.toContain(element)
+		})
+	})
+
+	it('filter by min date', async () => {
+		const wrapper = mount(SyTable, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				headers,
+				items,
+				showFilters: true,
+				suffix: 'test',
+			},
+		})
+
+		const expectedNames = ['Alice', 'Bob', 'Charlie', 'David']
+		expectedNames.forEach((element) => {
+			expect(wrapper.text()).toContain(element)
+		})
+
+		const startDate = wrapper.find('input[aria-label="Début"]')
+		await startDate.setValue('01/01/1995')
+
+		const textContent = wrapper.text()
+
+		const filteredNames = ['Charlie', 'David']
+		filteredNames.forEach((element) => {
+			expect(textContent).toContain(element)
+		})
+		const notFilteredNames = ['Alice', 'Bob']
+		notFilteredNames.forEach((element) => {
+			expect(textContent).not.toContain(element)
+		})
+	})
+
+	it('filter by min and max date', async () => {
+		const wrapper = mount(SyTable, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				headers,
+				items,
+				showFilters: true,
+				suffix: 'test',
+			},
+		})
+
+		const expectedNames = ['Alice', 'Bob', 'Charlie', 'David']
+		expectedNames.forEach((element) => {
+			expect(wrapper.text()).toContain(element)
+		})
+
+		const startDate = wrapper.find('input[aria-label="Début"]')
+		await startDate.setValue('01/01/1989')
+
+		const endDate = wrapper.find('input[aria-label="Fin"]')
+		await endDate.setValue('01/01/2000')
+
+		const textContent = wrapper.text()
+
+		const filteredNames = ['Alice', 'David']
+		filteredNames.forEach((element) => {
+			expect(textContent).toContain(element)
+		})
+		const notFilteredNames = ['Charlie', 'Bob']
+		notFilteredNames.forEach((element) => {
+			expect(textContent).not.toContain(element)
+		})
+	})
+
+	it('updates the items when date changes', async () => {
+		const wrapper = mount(SyTable, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				headers,
+				items,
+				showFilters: true,
+				suffix: 'test',
+			},
+		})
+
+		const startDate = wrapper.find('input[aria-label="Début"]')
+		await startDate.setValue('01/01/1990')
+
+		const endDate = wrapper.find('input[aria-label="Fin"]')
+		await endDate.setValue('01/01/2000')
+
+		const textContent = wrapper.text()
+
+		let filteredNames = ['Alice', 'David']
+		filteredNames.forEach((element) => {
+			expect(textContent).toContain(element)
+		})
+		let notFilteredNames = ['Bob', 'Charlie']
+		notFilteredNames.forEach((element) => {
+			expect(textContent).not.toContain(element)
+		})
+
+		await endDate.setValue('01/01/1995')
+
+		filteredNames = ['Alice']
+		filteredNames.forEach((element) => {
+			expect(wrapper.text()).toContain(element)
+		})
+		notFilteredNames = ['Bob', 'Charlie', 'David']
+		notFilteredNames.forEach((element) => {
+			expect(wrapper.text()).not.toContain(element)
+		})
+	})
+})

package/src/components/Tables/common/tests/tableFilterUtils.spec.ts

@@ -59,20 +59,6 @@ describe('tableFilterUtils', () => {
 			expect(result[0].id).toBe(2)
 		})
 
-		it('should filter by period correctly', () => {
-			const filters: FilterOption[] = [
-				{
-					key: 'vacationPeriod',
-					value: { from: '01/07/2023', to: '31/07/2023' },
-					type: 'period',
-				},
-			]
-			const result = filterItems(testItems, filters)
-			expect(result).toHaveLength(2)
-			expect(result.map(item => item.id)).toContain(1)
-			expect(result.map(item => item.id)).toContain(3)
-		})
-
 		it('should apply multiple filters correctly', () => {
 			const filters: FilterOption[] = [
 				{ key: 'department', value: 'IT', type: 'select' },

package/src/components/Tables/common/tests/tableUtils.spec.ts

@@ -48,49 +48,6 @@ describe('tableUtils', () => {
 		expect(storageKey.value).toBe('table')
 	})
 
-	it('should transform headers correctly', () => {
-		const options = ref<Partial<DataOptions>>({})
-		const componentAttributes = {
-			headers: [
-				{
-					text: 'ID',
-					key: 'id',
-				},
-				{
-					title: 'Name',
-					key: 'name',
-				},
-				{
-					key: 'age',
-				},
-			],
-		}
-
-		const { headers } = useTableUtils({
-			tableId: 'test-table',
-			prefix: 'table',
-			caption: 'Test Table',
-			componentAttributes,
-			options,
-		})
-
-		expect(headers.value).toEqual([
-			{
-				text: 'ID',
-				key: 'id',
-				title: 'ID',
-			},
-			{
-				title: 'Name',
-				key: 'name',
-			},
-			{
-				key: 'age',
-				title: undefined,
-			},
-		])
-	})
-
 	it('should handle undefined headers', () => {
 		const options = ref<Partial<DataOptions>>({})
 		const componentAttributes = {}
@@ -118,7 +75,6 @@ describe('tableUtils', () => {
 		const { optionsFacade } = useTableUtils({
 			tableId: 'test-table',
 			prefix: 'table',
-			itemsPerPage: 10,
 			caption: 'Test Table',
 			componentAttributes,
 			options,
@@ -126,8 +82,8 @@ describe('tableUtils', () => {
 
 		expect(optionsFacade.value).toEqual({
 			page: 2,
-			itemsPerPage: 10,
 			sortBy: [{ key: 'name', order: 'asc' }],
+			itemsPerPage: 10,
 			groupBy: undefined,
 			multiSort: undefined,
 			mustSort: undefined,
@@ -137,7 +93,6 @@ describe('tableUtils', () => {
 	it('should create propsFacade correctly for client table', () => {
 		const options = ref<Partial<DataOptions>>({})
 		const componentAttributes = {
-			'headers': [{ title: 'ID', key: 'id' }],
 			'items': [{ id: 1 }],
 			'onUpdate:options': vi.fn(),
 		}
@@ -151,7 +106,6 @@ describe('tableUtils', () => {
 		})
 
 		expect(propsFacade.value).toMatchObject({
-			headers: [{ title: 'ID', key: 'id' }],
 			items: [{ id: 1 }],
 		})
 		expect(propsFacade.value['onUpdate:options']).toBeUndefined()
@@ -160,7 +114,6 @@ describe('tableUtils', () => {
 	it('should create propsFacade correctly for server table', () => {
 		const options = ref<Partial<DataOptions>>({})
 		const componentAttributes = {
-			headers: [{ title: 'ID', key: 'id' }],
 			items: [{ id: 1 }],
 		}
 
@@ -174,7 +127,6 @@ describe('tableUtils', () => {
 		})
 
 		expect(propsFacade.value).toMatchObject({
-			headers: [{ title: 'ID', key: 'id' }],
 			items: [{ id: 1 }],
 			itemsLength: 100,
 		})
@@ -208,7 +160,9 @@ describe('tableUtils', () => {
 	it('should setup local storage correctly', () => {
 		mockLocalStorageUtility.getItem.mockReturnValue({
 			page: 2,
-			itemsPerPage: 20,
+			options: {
+				itemsPerPage: 20,
+			},
 		})
 
 		const options = ref<Partial<DataOptions>>({})
@@ -228,7 +182,9 @@ describe('tableUtils', () => {
 		expect(mockLocalStorageUtility.getItem).toHaveBeenCalledWith('table-test')
 		expect(localOptions.value).toEqual({
 			page: 2,
-			itemsPerPage: 20,
+			options: {
+				itemsPerPage: 20,
+			},
 		})
 
 		// Test watchOptions