@cnamts/synapse 1.0.1 → 1.0.3

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

@@ -1,327 +1,75 @@
 import type { FilterOption } from './types'
-
-function parseDate(value: unknown): Date | null {
-	if (value instanceof Date) return value
-	if (typeof value === 'string') {
-		try {
-			if (/^\d{1,2}\/\d{1,2}\/\d{4}$/.test(value)) {
-				const [day, month, year] = value.split('/').map(Number)
-				return new Date(year, month - 1, day)
-			}
-			const parsed = new Date(value)
-			return isNaN(parsed.getTime()) ? null : parsed
-		}
-		catch {
-			return null
-		}
-	}
-	// Traite le type nombre
-	if (typeof value === 'number') {
-		const parsed = new Date(value)
-		return isNaN(parsed.getTime()) ? null : parsed
-	}
-	// Ignore les objets vides
-	if (value === null || value === undefined || (typeof value === 'object' && Object.keys(value as object).length === 0)) {
-		return null
-	}
-	return null
-}
+import filterByPeriod from './filters/logics/period'
+import filterByExactDate from './filters/logics/date'
+import filterByNumber from './filters/logics/number'
+import filterBySelect from './filters/logics/select'
+import filterByText from './filters/logics/text'
 
 export function filterItems<T extends Record<string, unknown>>(items: T[], filters: FilterOption[]): T[] {
 	if (!Array.isArray(items) || items.length === 0) return []
 	if (!Array.isArray(filters) || filters.length === 0) return items
 
-	// Traitement spécial pour les tests de TextFilter
-	if (filters.length === 1 && filters[0].key === 'text') {
-		const filterValue = String(filters[0].value)
-
-		// Cas spécifiques pour les tests TextFilter.spec.ts
-		if (filterValue === 'cherry') {
-			return items.filter(item => item.text === 'Cherry')
-		}
-
-		if (filterValue === '"Cherry"') {
-			return items.filter(item => item.text === 'Cherry')
-		}
-
-		if (filterValue === '"cherry"') {
-			// Cas spécifique pour le test de recherche sensible à la casse (ne doit rien retourner)
-			return [] // Doit retourner un tableau vide car aucun élément ne correspond exactement
-		}
-
-		if (filterValue === 'a*') {
-			return items.filter(item => ['apple', 'banana'].includes(String(item.text)))
-		}
-
-		if (filterValue === '????') {
-			return items.filter(item => ['apple', 'date', 'fig'].includes(String(item.text)))
-		}
-
-		if (filterValue === '=????') {
-			return items.filter(item => ['apple', 'date', 'fig'].includes(String(item.text)))
-		}
-
-		if (filterValue === '=?????') {
-			// Cas spécifique pour le test de longueur exacte avec 5 caractères
-			// Le test attend spécifiquement les items avec ID 2 (banana) et 5 (Elderberry)
-			return items.filter(item => [2, 5].includes(Number(item.id)))
-		}
-
-		if (filterValue === 'e*') {
-			return items.filter(item => item.text === 'Elderberry')
-		}
-
-		if (filterValue === '*r*') {
-			return items.filter(item => ['Cherry', 'Elderberry', 'grape'].includes(String(item.text)))
-		}
-
-		if (filterValue === '>f') {
-			return items.filter(item => ['fig', 'grape'].includes(String(item.text)))
-		}
-	}
-
-	// Traitement spécial pour le test tableFilterUtils.spec.ts > should handle partial matches for text filters
-	if (filters.length === 1 && filters[0].key === 'name' && filters[0].value === 'oh') {
-		return items.filter(item => ['John Doe', 'Bob Johnson'].includes(String(item.name)))
-	}
-
 	return items.filter((item) => {
 		return filters.every(filter => applyFilter(item, filter))
 	})
 }
 
-/**
- * Convertit une chaîne de caractères de filtre avec des caractères spéciaux en expression régulière
- * @param filterStr Chaîne de caractères de filtre
- * @returns Expression régulière correspondante
- */
-function convertFilterToRegex(filterStr: string): { regex: RegExp, caseSensitive: boolean, isGreaterThan?: boolean } {
-	// Cas spécial pour la recherche sensible à la casse (entre guillemets doubles)
-	const caseSensitiveMatch = /^"(.+)"$/.exec(filterStr)
-	if (caseSensitiveMatch) {
-		// Recherche sensible à la casse - exacte pour les tests
-		const exactPattern = `^${caseSensitiveMatch[1]}$`
-		return { regex: new RegExp(exactPattern), caseSensitive: true }
-	}
-
-	// Traiter les cas spéciaux
-	// Cas <>?* - Toutes les valeurs vides ou nulles
-	if (filterStr === '<>?*') {
-		return { regex: /^\s*$/, caseSensitive: false }
-	}
-
-	// Cas =???? - Tous les mots de 4 lettres exactement (ou autre longueur)
-	const exactLengthMatch = /^=(\?+)$/.exec(filterStr)
-	if (exactLengthMatch) {
-		const length = exactLengthMatch[1].length
-		return { regex: new RegExp(`^.{${length}}$`), caseSensitive: false }
-	}
-
-	// Cas >zu - Tous les mots classés après "zu" alphabétiquement
-	const greaterThanMatch = /^>(.+)$/.exec(filterStr)
-	if (greaterThanMatch) {
-		// On ne peut pas utiliser une regex pour cette comparaison, on utilisera une fonction spéciale
-		return { regex: new RegExp(`.`), caseSensitive: false, isGreaterThan: true }
-	}
-
-	// Pour les recherches avec wildcards, traiter spécialement selon les tests
-	if (filterStr === 'a*') {
-		// Cas spécifique pour le test 'a*' qui doit retourner apple et banana
-		return { regex: new RegExp(`^a`), caseSensitive: false }
-	}
-
-	if (filterStr === '????') {
-		// Cas spécifique pour le test '????' qui doit retourner des mots de 4 lettres
-		return { regex: new RegExp(`^.{4}$`), caseSensitive: false }
-	}
-
-	if (filterStr === 'e*') {
-		// Cas spécifique pour le test 'e*' qui doit retourner Elderberry uniquement
-		return { regex: new RegExp(`^e`, 'i'), caseSensitive: false }
-	}
-
-	if (filterStr === '*r*') {
-		// Cas spécifique pour le test '*r*' qui doit retourner Cherry, Elderberry et grape
-		return { regex: new RegExp(`r`, 'i'), caseSensitive: false }
-	}
-
-	// Recherche insensible à la casse par défaut avec correspondance partielle
-	return { regex: new RegExp(filterStr, 'i'), caseSensitive: false }
-}
-
 function applyFilter<T extends Record<string, unknown>>(item: T, filter: FilterOption): boolean {
 	if (!filter.key) return true
 
 	const itemValue = item[filter.key]
 	const filterValue = filter.value
 
-	if (itemValue == null || filterValue == null) return true
+	if (filterValue == null) return true
 
 	switch (filter.type) {
 		case 'text': {
-			const str = String(itemValue)
-			const search = String(filterValue)
-
-			// Traitement spécial pour certains cas de test
-			if (search === 'cherry') {
-				// Cas spécifique pour le test de recherche insensible à la casse
-				return str.toLowerCase() === 'cherry'
-			}
-
-			if (search === '"Cherry"') {
-				// Cas spécifique pour le test de recherche sensible à la casse
-				return str === 'Cherry'
-			}
-
-			if (search === '>f') {
-				// Cas spécifique pour le test de comparaison alphabétique
-				return ['fig', 'grape'].includes(str)
-			}
-
-			if (search === 'a*') {
-				// Cas spécifique pour le test de wildcard *
-				return ['apple', 'banana'].includes(str)
-			}
-
-			if (search === '????') {
-				// Cas spécifique pour le test de wildcard ?
-				return ['apple', 'date', 'fig'].includes(str)
-			}
-
-			if (search === '=????') {
-				// Cas spécifique pour le test de longueur exacte
-				return ['apple', 'date', 'fig'].includes(str)
-			}
-
-			if (search === 'e*') {
-				// Cas spécifique pour le test de préfixe
-				return str === 'Elderberry'
-			}
-
-			if (search === '*r*') {
-				// Cas spécifique pour le test de wildcards multiples
-				return ['Cherry', 'Elderberry', 'grape'].includes(str)
-			}
-
-			// Cas spécial pour les valeurs vides ou nulles
-			if (search === '<>?*') {
-				return str.trim() === ''
-			}
-
-			// Utiliser la fonction de conversion en regex pour les autres cas
-			const result = convertFilterToRegex(search)
-
-			if (result.caseSensitive) {
-				return result.regex.test(str)
-			}
-			else {
-				return result.regex.test(str.toLowerCase())
-			}
+			return filterByText(itemValue, filterValue)
 		}
 		case 'number': {
-			if (typeof itemValue === 'number') {
-				// Handle string filter values that may contain operators
-				if (typeof filterValue === 'string') {
-					// Check for operators at the beginning of the string
-					const operatorMatch = /^([=<>]{1,2})(.+)$/.exec(filterValue)
-					if (operatorMatch) {
-						const operator = operatorMatch[1]
-						const valueStr = operatorMatch[2].trim()
-						const numValue = parseFloat(valueStr.replace(',', '.'))
-
-						if (isNaN(numValue)) return false
-
-						switch (operator) {
-							case '=':
-								return itemValue === numValue
-							case '<>':
-								return itemValue !== numValue
-							case '<':
-								return itemValue < numValue
-							case '<=':
-								return itemValue <= numValue
-							case '>':
-								return itemValue > numValue
-							case '>=':
-								return itemValue >= numValue
-							default:
-								return false
-						}
-					}
-
-					// No operator, try to parse the value and do exact match
-					const numValue = parseFloat(filterValue.replace(',', '.'))
-					if (!isNaN(numValue)) {
-						return itemValue === numValue
-					}
-					return false
-				}
-
-				// Handle numeric filter values (exact match)
-				if (typeof filterValue === 'number') {
-					return itemValue === filterValue
-				}
-
-				return String(itemValue).includes(String(filterValue))
-			}
-			return false
+			return filterByNumber(itemValue, filterValue)
 		}
 		case 'select': {
-			if (Array.isArray(filterValue)) {
-				// Utilise l'assertion de type pour gérer la méthode includes
-				return filterValue.includes(itemValue as unknown as typeof filterValue[0])
-			}
-			if (typeof filterValue === 'object' && filterValue != null) {
-				return JSON.stringify(filterValue) === JSON.stringify(itemValue)
-			}
-			return itemValue === filterValue
+			return filterBySelect(itemValue, filterValue)
 		}
-		case 'period': {
-			if (
-				typeof itemValue === 'object'
-				&& itemValue !== null
-				&& 'from' in itemValue
-				&& 'to' in itemValue
-			) {
-				const { from, to } = filterValue as { from?: string | Date, to?: string | Date }
-
-				if (!from || !to) {
-					return true
-				}
-
-				const itemFrom = parseDate(itemValue.from)
-				const itemTo = parseDate(itemValue.to)
-				const fromDate = parseDate(from)
-				const toDate = parseDate(to)
-
-				if (!itemFrom || !itemTo || !fromDate || !toDate) {
-					return false
-				}
-
-				const normalizeDate = (date: Date) =>
-					new Date(date.getFullYear(), date.getMonth(), date.getDate())
-
-				const itemFromDay = normalizeDate(itemFrom)
-				const itemToDay = normalizeDate(itemTo)
-				const fromDay = normalizeDate(fromDate)
-				const toDay = normalizeDate(toDate)
-
-				// Applique la vérification de chevauchement uniquement si les deux dates sont valides
-				return itemFromDay <= toDay && itemToDay >= fromDay
-			}
-			return false
+		case 'custom': {
+			// Traiter les filtres personnalisés comme des filtres de sélection
+			return filterBySelect(itemValue, filterValue)
+		}
+		case 'period':{
+			return filterByPeriod(itemValue, filterValue)
 		}
 		case 'date': {
-			const itemDate = parseDate(itemValue)
-			const targetDate = parseDate(filterValue)
-			if (!itemDate || !targetDate) return false
-			return (
-				itemDate.getDate() === targetDate.getDate()
-				&& itemDate.getMonth() === targetDate.getMonth()
-				&& itemDate.getFullYear() === targetDate.getFullYear()
-			)
+			return filterByExactDate(itemValue, filterValue)
 		}
 		default:
 			return true
 	}
 }
+
+export function parseDate(value: unknown): Date | null {
+	if (value instanceof Date) return value
+	if (typeof value === 'string') {
+		try {
+			if (/^\d{1,2}\/\d{1,2}\/\d{4}$/.test(value)) {
+				const [day, month, year] = value.split('/').map(Number)
+				return new Date(year, month - 1, day)
+			}
+			const parsed = new Date(value)
+			return isNaN(parsed.getTime()) ? null : parsed
+		}
+		catch {
+			return null
+		}
+	}
+	// Traite le type nombre
+	if (typeof value === 'number') {
+		const parsed = new Date(value)
+		return isNaN(parsed.getTime()) ? null : parsed
+	}
+	// Ignore les objets vides
+	if (value === null || value === undefined || (typeof value === 'object' && Object.keys(value as object).length === 0)) {
+		return null
+	}
+	return null
+}

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,173 @@
+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 SyPagination emits update:modelValue', async () => {
+		const wrapper = mount(SyTablePagination, {
+			props: {
+				page: 1,
+				itemsPerPage: 10,
+				itemsLength: 100,
+				pageCount: 10,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		// Find the SyPagination component and simulate a page change
+		const pagination = wrapper.findComponent({ name: 'SyPagination' })
+		await pagination.vm.$emit('update:modelValue', 2)
+
+		// Verify the SyTablePagination emits the correct event
+		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')
+	})
+})