@cnamts/synapse 1.0.0 → 1.0.1

package/src/components/Tables/common/filters/tests/SelectFilter.spec.ts

@@ -0,0 +1,219 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+
+import SelectFilter from '../SelectFilter.vue'
+import SySelect from '@/components/Customs/SySelect/SySelect.vue'
+import type { FilterType } from '../../types'
+
+const vuetify = createVuetify({
+	components,
+	directives,
+})
+
+describe('SelectFilter.vue', () => {
+	let wrapper: ReturnType<typeof mount<typeof SelectFilter>>
+	const header = {
+		title: 'Test Select',
+		key: 'test',
+		filterOptions: [
+			{ text: 'Option 1', value: 'option1' },
+			{ text: 'Option 2', value: 'option2' },
+		],
+	}
+	const filters: { key: string, value: string | number, type: FilterType }[] = []
+
+	beforeEach(() => {
+		wrapper = mount(SelectFilter, {
+			global: {
+				plugins: [vuetify],
+				stubs: {
+					SySelect: {
+						template: '<div class="sy-select-stub" data-testid="sy-select" :label="label" :items="items" :clearable="clearable" :density="density" :hideDetails="hideDetails"></div>',
+						props: ['modelValue', 'label', 'items', 'clearable', 'density', 'hideDetails', 'hideMessages', 'disableErrorHandling', 'variant'],
+					},
+				},
+			},
+			props: {
+				header,
+				filters,
+				filterValue: undefined,
+			},
+		})
+	})
+
+	it('renders correctly with default props', () => {
+		expect(wrapper.exists()).toBe(true)
+		expect(wrapper.findComponent(SySelect).exists()).toBe(true)
+	})
+
+	it('passes the correct props to SySelect', () => {
+		const sySelect = wrapper.findComponent(SySelect)
+		// Use attributes for stubbed components
+		expect(sySelect.attributes('label')).toBe('Test Select')
+		// Can't easily test complex objects with attributes
+		// expect(sySelect.attributes('items')) would not work as expected
+		expect(sySelect.attributes('clearable')).toBe('true')
+		expect(sySelect.attributes('density')).toBe('compact')
+		expect(sySelect.attributes('hidedetails')).toBe('true')
+	})
+
+	it('emits update:filters event when value changes', async () => {
+		const sySelect = wrapper.findComponent(SySelect)
+		await sySelect.vm.$emit('update:modelValue', 'option1')
+
+		expect(wrapper.emitted('update:filters')).toBeTruthy()
+		expect(wrapper.emitted('update:filters')![0][0]).toEqual([
+			{ key: 'test', value: 'option1', type: 'select' as FilterType },
+		])
+	})
+
+	it('emits update:filters event to remove filter when value is null', async () => {
+		// First set a value
+		const sySelect = wrapper.findComponent(SySelect)
+		await sySelect.vm.$emit('update:modelValue', 'option1')
+
+		// Then clear it
+		await sySelect.vm.$emit('update:modelValue', null)
+
+		expect(wrapper.emitted('update:filters')![1][0]).toEqual([])
+	})
+
+	it('emits update:filters event to remove filter when value is undefined', async () => {
+		// First set a value
+		const sySelect = wrapper.findComponent(SySelect)
+		await sySelect.vm.$emit('update:modelValue', 'option1')
+
+		// Then clear it
+		await sySelect.vm.$emit('update:modelValue', undefined)
+
+		expect(wrapper.emitted('update:filters')![1][0]).toEqual([])
+	})
+
+	it('handles clear button click', async () => {
+		const sySelect = wrapper.findComponent(SySelect)
+		await sySelect.vm.$emit('click:clear')
+
+		expect(wrapper.emitted('update:filters')).toBeTruthy()
+		expect(wrapper.emitted('update:filters')![0][0]).toEqual([])
+	})
+
+	it('updates existing filter when one already exists', async () => {
+		const existingFilters = [{ key: 'test', value: 'option1', type: 'select' as FilterType }]
+		await wrapper.setProps({ filters: existingFilters })
+
+		const sySelect = wrapper.findComponent(SySelect)
+		await sySelect.vm.$emit('update:modelValue', 'option2')
+
+		expect(wrapper.emitted('update:filters')![0][0]).toEqual([
+			{ key: 'test', value: 'option2', type: 'select' as FilterType },
+		])
+	})
+
+	it('works with object values', async () => {
+		const objectHeader = {
+			title: 'Test Object Select',
+			key: 'test',
+			filterOptions: [
+				{ text: 'Option 1', value: { id: 1, name: 'Option 1' } },
+				{ text: 'Option 2', value: { id: 2, name: 'Option 2' } },
+			],
+		}
+
+		await wrapper.setProps({ header: objectHeader })
+
+		const sySelect = wrapper.findComponent(SySelect)
+		await sySelect.vm.$emit('update:modelValue', { id: 1, name: 'Option 1' })
+
+		expect(wrapper.emitted('update:filters')![0][0]).toEqual([
+			{ key: 'test', value: { id: 1, name: 'Option 1' }, type: 'select' as FilterType },
+		])
+	})
+
+	it('generates unique key when header.key and header.value are absent', async () => {
+		// Recréer le wrapper avec un header sans key ni value, seulement title
+		const headerWithoutKey = {
+			title: 'Test Select',
+			filterOptions: [
+				{ text: 'Option 1', value: 'option1' },
+				{ text: 'Option 2', value: 'option2' },
+			],
+		}
+		const newWrapper = mount(SelectFilter, {
+			global: {
+				plugins: [vuetify],
+				stubs: {
+					SySelect: {
+						template: '<div class="sy-select-stub" data-testid="sy-select"></div>',
+						props: ['modelValue', 'label', 'items', 'clearable', 'density', 'hideDetails'],
+					},
+				},
+			},
+			props: {
+				header: headerWithoutKey,
+				filters: [],
+				filterValue: undefined,
+			},
+		})
+
+		// Émettre une valeur pour déclencher la mise à jour du filtre
+		const sySelect = newWrapper.findComponent(SySelect)
+		await sySelect.vm.$emit('update:modelValue', 'option1')
+
+		// Vérifier que l'événement a été émis avec une clé générée basée sur le titre
+		expect(newWrapper.emitted('update:filters')).toBeTruthy()
+		const emittedFilters = newWrapper.emitted('update:filters')![0][0] as Array<{ key: string, value: string, type: string }>
+		expect(emittedFilters.length).toBe(1)
+		expect(emittedFilters[0].key).toBe('filter_Test Select')
+		expect(emittedFilters[0].value).toBe('option1')
+		expect(emittedFilters[0].type).toBe('select')
+	})
+
+	it('generates unique key with timestamp when all header properties are absent', async () => {
+		// Mock Date.now() pour avoir une valeur prévisible dans le test
+		const originalDateNow = Date.now
+		const mockTimestamp = 1622548800000 // 2021-06-01T12:00:00.000Z
+		global.Date.now = vi.fn(() => mockTimestamp)
+
+		// Recréer le wrapper avec un header complètement vide
+		const emptyHeader = {
+			filterOptions: [
+				{ text: 'Option 1', value: 'option1' },
+				{ text: 'Option 2', value: 'option2' },
+			],
+		}
+		const newWrapper = mount(SelectFilter, {
+			global: {
+				plugins: [vuetify],
+				stubs: {
+					SySelect: {
+						template: '<div class="sy-select-stub" data-testid="sy-select"></div>',
+						props: ['modelValue', 'label', 'items', 'clearable', 'density', 'hideDetails'],
+					},
+				},
+			},
+			props: {
+				header: emptyHeader,
+				filters: [],
+				filterValue: undefined,
+			},
+		})
+
+		// Émettre une valeur pour déclencher la mise à jour du filtre
+		const sySelect = newWrapper.findComponent(SySelect)
+		await sySelect.vm.$emit('update:modelValue', 'option1')
+
+		// Vérifier que l'événement a été émis avec une clé générée basée sur le timestamp
+		expect(newWrapper.emitted('update:filters')).toBeTruthy()
+		const emittedFilters = newWrapper.emitted('update:filters')![0][0] as Array<{ key: string, value: string, type: string }>
+		expect(emittedFilters.length).toBe(1)
+		expect(emittedFilters[0].key).toBe(`filter_${mockTimestamp}`)
+		expect(emittedFilters[0].value).toBe('option1')
+		expect(emittedFilters[0].type).toBe('select')
+
+		// Restaurer Date.now
+		global.Date.now = originalDateNow
+	})
+})

package/src/components/Tables/common/filters/tests/TextFilter.spec.ts

@@ -0,0 +1,260 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+
+import TextFilter from '../TextFilter.vue'
+import SyTextField from '@/components/Customs/SyTextField/SyTextField.vue'
+import type { FilterType } from '../../types'
+import { filterItems } from '../../tableFilterUtils'
+
+const vuetify = createVuetify({
+	components,
+	directives,
+})
+
+describe('TextFilter.vue', () => {
+	let wrapper: ReturnType<typeof mount<typeof TextFilter>>
+	const header = { title: 'Test Column', key: 'test' }
+	const filters: { key: string, value: string, type: FilterType }[] = []
+
+	beforeEach(() => {
+		wrapper = mount(TextFilter, {
+			global: {
+				plugins: [vuetify],
+				stubs: {
+					SyTextField: {
+						template: '<div class="sy-text-field-stub" data-testid="sy-text-field" :label="label" :clearable="clearable" :density="density" :hideDetails="hideDetails"></div>',
+						props: ['modelValue', 'label', 'clearable', 'density', 'hideDetails', 'hideMessages', 'disableErrorHandling', 'variant'],
+					},
+				},
+			},
+			props: {
+				header,
+				filters,
+				filterValue: '',
+				debounceTime: 0, // Set debounce time to 0 for testing
+			},
+		})
+	})
+
+	it('renders correctly with default props', () => {
+		expect(wrapper.exists()).toBe(true)
+		expect(wrapper.findComponent(SyTextField).exists()).toBe(true)
+	})
+
+	it('passes the correct props to SyTextField', () => {
+		const syTextField = wrapper.findComponent(SyTextField)
+		// Use attributes for stubbed components
+		expect(syTextField.attributes('label')).toBe('Test Column')
+		expect(syTextField.attributes('clearable')).toBe('true')
+		expect(syTextField.attributes('density')).toBe('compact')
+		expect(syTextField.attributes('hidedetails')).toBe('true')
+	})
+
+	it('emits update:filters event when value changes', async () => {
+		const syTextField = wrapper.findComponent(SyTextField)
+		await syTextField.vm.$emit('update:modelValue', 'test value')
+
+		expect(wrapper.emitted('update:filters')).toBeTruthy()
+		expect(wrapper.emitted('update:filters')![0][0]).toEqual([
+			{ key: 'test', value: 'test value', type: 'text' as FilterType },
+		])
+	})
+
+	it('emits update:filters event to remove filter when value is empty', async () => {
+		// First set a value
+		const syTextField = wrapper.findComponent(SyTextField)
+		await syTextField.vm.$emit('update:modelValue', 'test value')
+
+		// Then clear it
+		await syTextField.vm.$emit('update:modelValue', '')
+
+		expect(wrapper.emitted('update:filters')![1][0]).toEqual([])
+	})
+
+	it('handles clear button click', async () => {
+		const syTextField = wrapper.findComponent(SyTextField)
+		await syTextField.vm.$emit('click:clear')
+
+		expect(wrapper.emitted('update:filters')).toBeTruthy()
+		expect(wrapper.emitted('update:filters')![0][0]).toEqual([])
+	})
+
+	it('updates existing filter when one already exists', async () => {
+		const existingFilters = [{ key: 'test', value: 'old value', type: 'text' as FilterType }]
+		await wrapper.setProps({ filters: existingFilters })
+
+		const syTextField = wrapper.findComponent(SyTextField)
+		await syTextField.vm.$emit('update:modelValue', 'new value')
+
+		expect(wrapper.emitted('update:filters')![0][0]).toEqual([
+			{ key: 'test', value: 'new value', type: 'text' as FilterType },
+		])
+	})
+
+	it('generates unique key when header.key and header.value are absent', async () => {
+		// Recréer le wrapper avec un header sans key ni value, seulement title
+		const headerWithoutKey = { title: 'Test Column' }
+		const newWrapper = mount(TextFilter, {
+			global: {
+				plugins: [vuetify],
+				stubs: {
+					SyTextField: {
+						template: '<div class="sy-text-field-stub" data-testid="sy-text-field"></div>',
+						props: ['modelValue', 'label', 'clearable', 'density', 'hideDetails'],
+					},
+				},
+			},
+			props: {
+				header: headerWithoutKey,
+				filters: [],
+				filterValue: '',
+				debounceTime: 0, // Set debounce time to 0 for testing
+			},
+		})
+
+		// Émettre une valeur pour déclencher la mise à jour du filtre
+		const syTextField = newWrapper.findComponent(SyTextField)
+		await syTextField.vm.$emit('update:modelValue', 'test value')
+
+		// Vérifier que l'événement a été émis avec une clé générée basée sur le titre
+		expect(newWrapper.emitted('update:filters')).toBeTruthy()
+		const emittedFilters = newWrapper.emitted('update:filters')![0][0] as Array<{ key: string, value: string, type: string }>
+		expect(emittedFilters.length).toBe(1)
+		expect(emittedFilters[0].key).toBe('filter_Test Column')
+		expect(emittedFilters[0].value).toBe('test value')
+		expect(emittedFilters[0].type).toBe('text')
+	})
+
+	it('generates unique key with timestamp when all header properties are absent', async () => {
+		// Mock Date.now() pour avoir une valeur prévisible dans le test
+		const originalDateNow = Date.now
+		const mockTimestamp = 1622548800000 // 2021-06-01T12:00:00.000Z
+		global.Date.now = vi.fn(() => mockTimestamp)
+
+		// Recréer le wrapper avec un header complètement vide
+		const emptyHeader = {}
+		const newWrapper = mount(TextFilter, {
+			global: {
+				plugins: [vuetify],
+				stubs: {
+					SyTextField: {
+						template: '<div class="sy-text-field-stub" data-testid="sy-text-field"></div>',
+						props: ['modelValue', 'label', 'clearable', 'density', 'hideDetails'],
+					},
+				},
+			},
+			props: {
+				header: emptyHeader,
+				filters: [],
+				filterValue: '',
+				debounceTime: 0, // Set debounce time to 0 for testing
+			},
+		})
+
+		// Émettre une valeur pour déclencher la mise à jour du filtre
+		const syTextField = newWrapper.findComponent(SyTextField)
+		await syTextField.vm.$emit('update:modelValue', 'test value')
+
+		// Vérifier que l'événement a été émis avec une clé générée basée sur le timestamp
+		expect(newWrapper.emitted('update:filters')).toBeTruthy()
+		const emittedFilters = newWrapper.emitted('update:filters')![0][0] as Array<{ key: string, value: string, type: string }>
+		expect(emittedFilters.length).toBe(1)
+		expect(emittedFilters[0].key).toBe(`filter_${mockTimestamp}`)
+		expect(emittedFilters[0].value).toBe('test value')
+		expect(emittedFilters[0].type).toBe('text')
+
+		// Restaurer Date.now
+		global.Date.now = originalDateNow
+	})
+
+	describe('Text filter rules', () => {
+		const testItems = [
+			{ id: 1, text: 'apple' },
+			{ id: 2, text: 'banana' },
+			{ id: 3, text: 'Cherry' },
+			{ id: 4, text: 'date' },
+			{ id: 5, text: 'Elderberry' },
+			{ id: 6, text: 'fig' },
+			{ id: 7, text: 'grape' },
+			{ id: 8, text: '' }, // Empty string
+			{ id: 9, text: null }, // Null value
+		]
+
+		it('performs case-insensitive search by default', () => {
+			const filters = [{ key: 'text', value: 'cherry', type: 'text' as FilterType }]
+			const result = filterItems(testItems, filters)
+			expect(result).toHaveLength(1)
+			expect(result[0].id).toBe(3)
+		})
+
+		it('supports wildcard * for any string of characters', () => {
+			const filters = [{ key: 'text', value: 'a*', type: 'text' as FilterType }]
+			const result = filterItems(testItems, filters)
+			expect(result).toHaveLength(2)
+			expect(result.map(item => item.id)).toEqual([1, 2])
+		})
+
+		it('supports wildcard ? for any single character', () => {
+			const filters = [{ key: 'text', value: '????', type: 'text' as FilterType }]
+			const result = filterItems(testItems, filters)
+			expect(result).toHaveLength(3)
+			expect(result.map(item => item.id)).toEqual([1, 4, 6])
+		})
+
+		it('supports case-sensitive search with double quotes', () => {
+			const filters = [{ key: 'text', value: '"Cherry"', type: 'text' as FilterType }]
+			const result = filterItems(testItems, filters)
+			expect(result).toHaveLength(1)
+			expect(result[0].id).toBe(3)
+
+			// Should not match lowercase
+			const filters2 = [{ key: 'text', value: '"cherry"', type: 'text' as FilterType }]
+			const result2 = filterItems(testItems, filters2)
+			expect(result2).toHaveLength(0)
+		})
+
+		it('supports prefix search with wildcard', () => {
+			const filters = [{ key: 'text', value: 'e*', type: 'text' as FilterType }]
+			const result = filterItems(testItems, filters)
+			expect(result).toHaveLength(1)
+			expect(result[0].id).toBe(5)
+		})
+
+		it('supports exact length search with =????', () => {
+			const filters = [{ key: 'text', value: '=????', type: 'text' as FilterType }]
+			const result = filterItems(testItems, filters)
+			expect(result).toHaveLength(3)
+			expect(result.map(item => item.id)).toEqual([1, 4, 6])
+
+			// Test with different length
+			const filters2 = [{ key: 'text', value: '=?????', type: 'text' as FilterType }]
+			const result2 = filterItems(testItems, filters2)
+			expect(result2).toHaveLength(2)
+			expect(result2.map(item => item.id)).toEqual([2, 5])
+		})
+
+		it('supports empty or null value search with <>?*', () => {
+			const filters = [{ key: 'text', value: '<>?*', type: 'text' as FilterType }]
+			const result = filterItems(testItems, filters)
+			expect(result).toHaveLength(2)
+			expect(result.map(item => item.id)).toEqual([8, 9])
+		})
+
+		it('supports alphabetical comparison with >', () => {
+			const filters = [{ key: 'text', value: '>f', type: 'text' as FilterType }]
+			const result = filterItems(testItems, filters)
+			expect(result).toHaveLength(2)
+			expect(result.map(item => item.id)).toEqual([6, 7])
+		})
+
+		it('combines multiple wildcards correctly', () => {
+			const filters = [{ key: 'text', value: '*r*', type: 'text' as FilterType }]
+			const result = filterItems(testItems, filters)
+			expect(result).toHaveLength(3)
+			expect(result.map(item => item.id)).toEqual([3, 5, 7])
+		})
+	})
+})

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

@@ -0,0 +1,72 @@
+/**
+ * Fonctions utilitaires pour formater les données dans les tableaux
+ */
+
+/**
+ * Formate un objet période pour l'affichage
+ *
+ * @param value - L'objet période à formater
+ * @returns Chaîne de période formatée
+ */
+export function formatPeriod(value: unknown): string {
+	// Traite les valeurs null ou undefined
+	if (value === null || value === undefined) {
+		return ''
+	}
+
+	// Traite les objets période
+	if (typeof value === 'object' && value !== null && 'from' in value && 'to' in value) {
+		const periodValue = value as { from?: string | null, to?: string | null }
+		const from = periodValue.from || ''
+		const to = periodValue.to || ''
+
+		// Formate comme "du [date] au [date]"
+		if (from && to) {
+			return `du ${from} au ${to}`
+		}
+		// Si seule la date de début est présente
+		else if (from) {
+			return `du ${from}`
+		}
+		// Si seule la date de fin est présente
+		else if (to) {
+			return `au ${to}`
+		}
+	}
+
+	// Repli sur la représentation en chaîne de caractères
+	return String(value)
+}
+
+/**
+ * Traite les éléments du tableau pour formater les champs spéciaux comme les périodes
+ *
+ * @param items - Les éléments du tableau à traiter
+ * @returns Éléments traités avec des valeurs formatées
+ */
+export function processItems(items: Record<string, unknown>[]): Record<string, unknown>[] {
+	if (!items || !Array.isArray(items)) return []
+
+	return items.map((item) => {
+		if (!item) return item
+
+		const newItem = { ...item } as Record<string, unknown>
+
+		// Traite tous les champs de l'élément
+		Object.keys(newItem).forEach((key) => {
+			const value = newItem[key]
+
+			// Vérifie si ce champ est un objet de type période (possède les propriétés from et to)
+			if (value
+				&& typeof value === 'object'
+				&& value !== null
+				&& 'from' in value
+				&& 'to' in value) {
+				// Formate la période et la stocke à nouveau
+				newItem[key] = formatPeriod(value)
+			}
+		})
+
+		return newItem
+	})
+}

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

@@ -0,0 +1,7 @@
+export const locales = {
+	resetFilters: 'Réinitialiser les filtres',
+	noData: 'Aucune donnée disponible',
+	columnOrder: (columnTitle: string) => `Ordonner par ${columnTitle}`,
+	ResizableColumn: 'Redimensionner la colonne',
+	resizeColumn: (columnTitle: string) => `Redimensionner la colonne ${columnTitle}`,
+}

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

@@ -0,0 +1,61 @@
+import { onMounted } from 'vue'
+
+/**
+ * Utility function to enhance table accessibility
+ */
+export function useTableAccessibility({
+	tableId,
+}: {
+	tableId: string
+}) {
+	function setupAccessibility() {
+		onMounted(() => {
+			const captionElement = document.querySelector(`#${tableId} caption`)
+			if (captionElement && captionElement.textContent?.trim() === '') {
+				captionElement.setAttribute('aria-label', 'Table caption')
+			}
+
+			const inputs = document.querySelectorAll(`#${tableId} input`)
+			inputs.forEach((input) => {
+				(input as HTMLElement).removeAttribute('aria-describedby')
+			})
+
+			const fields = document.querySelectorAll(`#${tableId} .v-field`)
+			fields.forEach((field) => {
+				const element = field as HTMLElement
+				element.setAttribute('tabindex', '0')
+
+				// Remove immediately if it exists
+				if (element.hasAttribute('aria-controls')) {
+					element.removeAttribute('aria-controls')
+				}
+
+				// Check again after a delay
+				setTimeout(() => {
+					if (element.hasAttribute('aria-controls')) {
+						element.removeAttribute('aria-controls')
+					}
+				}, 500)
+			})
+
+			const fieldLabels = document.querySelectorAll(`#${tableId} .v-field`)
+			fieldLabels.forEach((fieldLabel) => {
+				(fieldLabel as HTMLElement).setAttribute('aria-label', 'items per page')
+			})
+
+			const fieldTitles = document.querySelectorAll(`#${tableId} .v-field`)
+			fieldTitles.forEach((fieldTitle) => {
+				(fieldTitle as HTMLElement).setAttribute('title', 'items per page')
+			})
+
+			const th = document.querySelectorAll(`#${tableId} th`)
+			for (let i = 0; i < th.length; i++) {
+				th[i].setAttribute('scope', 'col')
+			}
+		})
+	}
+
+	return {
+		setupAccessibility,
+	}
+}