@cnamts/synapse 1.0.5 → 1.0.7

package/src/components/Tables/SyServerTable/tests/SyServerTable.spec.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi, afterEach, beforeAll } from 'vitest'
+import { describe, it, expect, vi, afterEach, beforeAll, beforeEach } from 'vitest'
 import { mount } from '@vue/test-utils'
 
 import { vuetify } from '@tests/unit/setup'
@@ -70,11 +70,42 @@ describe('SyServerTable', () => {
 		}
 	})
 
-	afterEach(() => {
+	// Store wrapper references to unmount them after each test
+	let activeWrappers: ReturnType<typeof mount>[] = []
+	// Helper pour attendre que les opérations asynchrones soient terminées
+	async function flushPromises() {
+		return new Promise(resolve => setTimeout(resolve, 0))
+	}
+
+	beforeEach(() => {
+		// Reset LocalStorageUtility mock implementation before each test
+		vi.mocked(LocalStorageUtility.prototype.getItem).mockReturnValue(null)
+		vi.mocked(LocalStorageUtility.prototype.setItem).mockImplementation(() => {})
+		vi.mocked(LocalStorageUtility.prototype.removeItem).mockImplementation(() => {})
+	})
+
+	afterEach(async () => {
+		// Attendre que toutes les promesses soient résolues avant de démonter
+		await flushPromises()
+
+		// Properly unmount all components to prevent memory leaks -> attachTo: document.body
+		for (const wrapper of activeWrappers) {
+			if (wrapper && typeof wrapper.unmount === 'function') {
+				wrapper.unmount()
+				// Attendre après chaque démontage pour permettre le nettoyage
+				await flushPromises()
+			}
+		}
+		activeWrappers = []
+
+		// Reset all mocks
 		vi.resetAllMocks()
+
+		// Attendre une dernière fois pour s'assurer que tout est nettoyé
+		await flushPromises()
 	})
 
-	it('renders correctly with default props', () => {
+	it('renders correctly with default props', async () => {
 		const wrapper = mount(SyServerTable, {
 			props: {
 				options: {} as DataOptions,
@@ -90,12 +121,19 @@ describe('SyServerTable', () => {
 			},
 		})
 
+		// Attendre que tous les effets asynchrones soient terminés
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
 		expect(wrapper.find('.sy-server-table').exists()).toBe(true)
 		expect(wrapper.find('table').exists()).toBe(true)
 		expect(wrapper.text()).toContain('John Doe')
+
+		// Ajouter le wrapper à la liste pour le démontage
+		activeWrappers.push(wrapper)
 	})
 
-	it('accepts both old and new headers format', () => {
+	it('accepts both old and new headers format', async () => {
 		const wrapper = mount(SyServerTable, {
 			props: {
 				options: {} as DataOptions,
@@ -146,12 +184,21 @@ describe('SyServerTable', () => {
 			},
 		})
 
+		// Attendre que le composant soit monté et les effets initiaux terminés
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
+		// Modifier les props et attendre la mise à jour
 		await wrapper.setProps({
 			options: {
 				sortBy: [{ key: 'name', order: 'desc' }],
 			},
 		})
 
+		// Attendre que tous les effets asynchrones soient terminés
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
 		expect(setItemMock).toHaveBeenCalledWith(
 			'server-table-test-server-storage',
 			expect.objectContaining({
@@ -164,6 +211,9 @@ describe('SyServerTable', () => {
 				itemsLength: 10,
 			}),
 		)
+
+		// Ajouter le wrapper à la liste pour le démontage
+		activeWrappers.push(wrapper)
 	})
 
 	it('emits update:options event when sorting changes', async () => {
@@ -182,16 +232,27 @@ describe('SyServerTable', () => {
 			},
 		})
 
+		// Attendre que le composant soit monté et les effets initiaux terminés
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
 		// Simulate a sort event from VDataTableServer
 		await wrapper.findComponent({ name: 'VDataTableServer' }).vm.$emit('update:options', {
 			sortBy: [{ key: 'name', order: 'asc' }],
 		})
 
+		// Attendre que tous les effets asynchrones soient terminés
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
 		const emittedOptions = wrapper.emitted('update:options')
 		expect(emittedOptions).toBeTruthy()
+
+		// Ajouter le wrapper à la liste pour le démontage
+		activeWrappers.push(wrapper)
 	})
 
-	it('passes itemsPerPage prop correctly', () => {
+	it('passes itemsPerPage prop correctly', async () => {
 		const wrapper = mount(SyServerTable, {
 			props: {
 				options: { itemsPerPage: 5 } as DataOptions,
@@ -207,11 +268,18 @@ describe('SyServerTable', () => {
 			},
 		})
 
+		// Attendre que tous les effets asynchrones soient terminés
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
 		const dataTableServer = wrapper.findComponent({ name: 'VDataTableServer' })
 		expect(dataTableServer.props('itemsPerPage')).toBe(5)
+
+		// Ajouter le wrapper à la liste pour le démontage
+		activeWrappers.push(wrapper)
 	})
 
-	it('passes serverItemsLength correctly', () => {
+	it('passes serverItemsLength correctly', async () => {
 		const wrapper = mount(SyServerTable, {
 			props: {
 				options: {} as DataOptions,
@@ -227,8 +295,15 @@ describe('SyServerTable', () => {
 			},
 		})
 
+		// Attendre que tous les effets asynchrones soient terminés
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
 		const dataTableServer = wrapper.findComponent({ name: 'VDataTableServer' })
 		expect(dataTableServer.props('itemsLength')).toBe(25)
+
+		// Ajouter le wrapper à la liste pour le démontage
+		activeWrappers.push(wrapper)
 	})
 
 	it('should show filters when showFilters prop is true', async () => {
@@ -263,8 +338,14 @@ describe('SyServerTable', () => {
 		})
 
 		await wrapper.vm.$nextTick()
+		// Attendre que tous les effets asynchrones soient terminés
+		await flushPromises()
+
 		const filterComponents = wrapper.findAllComponents({ name: 'SyTableFilter' })
 		expect(filterComponents.length).toBeGreaterThan(0)
+
+		// Ajouter le wrapper à la liste pour le démontage
+		activeWrappers.push(wrapper)
 	})
 
 	it('updates filters when SyTableFilter emits update:filters', async () => {
@@ -289,17 +370,29 @@ describe('SyServerTable', () => {
 			},
 		})
 
+		// Attendre que le composant soit monté et les effets initiaux terminés
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
 		const filterComponent = wrapper.findComponent(SyTableFilter)
 		await filterComponent.vm.$emit('update:filters', [{ key: 'name', value: 'Jane', type: 'text' }])
 
+		// Attendre que tous les effets d'émission soient terminés
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
 		// Check that the component emitted an update:options event with the correct filters
 		const emitted = wrapper.emitted('update:options')
 		expect(emitted).toBeTruthy()
+
 		if (emitted) {
 			const lastEmitted = emitted[emitted.length - 1][0] as { filters?: FilterOption[] }
 			expect(lastEmitted).toHaveProperty('filters')
 			expect(lastEmitted.filters).toEqual([{ key: 'name', value: 'Jane', type: 'text' }])
 		}
+
+		// Ajouter le wrapper à la liste pour le démontage
+		activeWrappers.push(wrapper)
 	})
 
 	it('should show reset filters button when filters are applied', async () => {
@@ -407,6 +500,11 @@ describe('SyServerTable', () => {
 			},
 		})
 
+		// Attendre que le composant soit monté et les effets initiaux terminés
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
+		// Modifier les props et attendre la mise à jour
 		await wrapper.setProps({
 			serverItemsLength: 20,
 		})

package/src/components/Tables/SyTable/SyTable.mdx

@@ -24,38 +24,33 @@ Pour gérer individuellement le stockage des options pour différents tableaux,
 ### Tri des colonnes
 
 Le composant permet de trier les données par colonne en cliquant sur l'en-tête de la colonne.
-<Canvas story={{height: '550px'}} of={SyTable.SortBy} />
 
 Le multi-tri est également supporté. Vous pouvez activer cette fonctionnalité en utilisant la prop `multi-sort`.
-<Canvas story={{height: '550px'}} of={SyTable.MultiSort} />
 
 ### Filtres des colonnes
 
 Le composant permet d'appliquer des filtres sur les colonnes. Vous pouvez définir des filtres personnalisés pour chaque colonne en utilisant la prop `show-filters`. Voir d'autres exemples de filtres dans les stories.
-<Canvas story={{height: '550px'}} of={SyTable.FilterByText} />
 
 ### Resize des colonnes
 
 Le composant peut permettre de redimensionner les colonnes en utilisant la prop `resizable-columns`. Vous pouvez activer ou désactiver cette fonctionnalité selon vos besoins.
-<Canvas story={{height: '550px'}} of={SyTable.ResizableColumns} />
 
 ### Réorganisation des colonnes
 
 Le composant permet de cacher ou réorganiser l'ordre des colonnes en utilisant la prop `enable-column-controls`. Vous pouvez activer ou désactiver cette fonctionnalité selon vos besoins.
-<Canvas story={{height: '550px'}} of={SyTable.ColumnControls} />
 
 ### Selection des lignes
 
 Le composant permet de sélectionner des lignes individuellement ou en masse. Vous pouvez activer la sélection en utilisant la prop `show-select`.
-<Canvas story={{height: '550px'}} of={SyTable.RowSelection} />
 
 ### Slot item
 Le composant permet de personnaliser l'affichage des contenus en utilisant le slot `item`. Vous pouvez définir la structure de chaque contenu en fonction de vos besoins.
-<Canvas story={{height: '550px'}} of={SyTable.SlotItem} />
 
 ### Slot headers
 Le composant permet de personnaliser l'affichage des en-têtes de colonnes en utilisant le slot `headers`. Vous pouvez définir la structure de chaque en-tête en fonction de vos besoins.
-<Canvas story={{height: '550px'}} of={SyTable.SlotHeaders} />
+
+### Items par page options
+Le composant permet de personnaliser le nombre possible d'éléments par page en utilisant la prop `items-per-page-options`. Vous pouvez spécifier un tableau d'options pour permettre de choisir le nombre d'éléments affichés par page.
 
 ### Accessibilité
 
@@ -139,8 +134,6 @@ Le composant améliore l'accessibilité en ajoutant automatiquement :
 
 Pour utiliser plusieurs tableaux sur une même page avec des options indépendantes, utilisez la prop `suffix` pour chaque tableau.
 
-<Canvas of={SyTable.ManyTables} />
-
 ## Bonnes pratiques
 
 - Utilisez des en-têtes clairs et descriptifs pour chaque colonne

package/src/components/Tables/SyTable/SyTable.stories.ts

@@ -61,6 +61,15 @@ const meta = {
 				type: { summary: 'DataOptions', detail: '{ page: number, itemsPerPage: number, sortBy: SortOptions[], groupBy?: SortOptions[], multiSort?: boolean, mustSort?: boolean, filters?: FilterOption[] }' },
 			},
 		},
+		itemsPerPageOptions: {
+			description: 'Limite les options disponibles dans le sélecteur "itemsPerPage"',
+			control: { type: 'object' },
+			table: {
+				category: 'props',
+				type: { summary: 'number[]' },
+				defaultValue: { summary: 'undefined' },
+			},
+		},
 		suffix: {
 			description: 'Suffixe permettant de gérer individuellement le stockage des options d\'un tableau d\'une page à l\'autre. Ce prop est obligatoire pour garantir un stockage unique pour chaque tableau.',
 			control: { type: 'text' },
@@ -3359,3 +3368,236 @@ export const SlotHeaders: Story = {
 		}
 	},
 }
+
+export const ItemsPerPageOptions: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyTable
+						v-model:options="options"
+						:headers="headers"
+						:items="items"
+						:items-per-page-options="[5, 10, 15]"
+						suffix="items-per-page-options-table"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { SyTable } from '@cnamts/synapse'
+					
+					const options = ref({
+						itemsPerPage: 5,
+					})
+					
+					const headers = ref([
+						{
+							title: 'Nom',
+							key: 'lastname',
+						},
+						{
+							title: 'Prénom',
+							key: 'firstname',
+						},
+						{
+                            title: 'Email',
+							value: 'email',
+						},
+					])
+						
+					const items = ref([
+						{
+							firstname: 'Virginie',
+							lastname: 'Beauchesne',
+							email: 'virginie.beauchesne@example.com',
+						},
+						{
+							firstname: 'Simone',
+							lastname: 'Bellefeuille',
+							email: 'simone.bellefeuille@example.com',
+						},
+						{
+							firstname: 'Étienne',
+							lastname: 'Salois',
+							email: 'etienne.salois@example.com',
+						},
+						{
+							firstname: 'Thierry',
+							lastname: 'Bobu',
+							email: 'thierry.bobu@example.com',
+						},
+						{
+							firstname: 'Bernadette',
+							lastname: 'Langelier',
+							email: 'bernadette.langelier@exemple.com',
+						},
+						{
+							firstname: 'Agate',
+							lastname: 'Roy',
+							email: 'agate.roy@exemple.com',
+						},
+						{
+                            firstname: 'Théo',
+							lastname: 'Garnier',
+							email: 'theo.garnier@exemple.com',
+						},
+						{
+                            firstname: 'Clara',
+							lastname: 'Moreau',
+							email: 'clara.moreau@exemple.com',
+						},
+						{
+							firstname: 'Lucas',
+							lastname: 'Lefebvre',
+							email: 'lucas.lefebre@exemple.com',
+						},
+						{
+							firstname: 'Emma',
+							lastname: 'Dubois',
+							email: 'emma.dubois@exemple.com',
+						},
+						{
+							firstname: 'Julien',
+							lastname: 'Martin',
+							email: 'julien.martin@exemple.com',
+						},
+						{
+							firstname: 'Sophie',
+							lastname: 'Bernard',
+							email: 'sophie.bernard@exemple.com',
+						},
+						{
+							firstname: 'Antoine',
+							lastname: 'Lemoine',
+							email: 'antoine.lemoine@exemple.com',
+						},
+						{
+							firstname: 'Camille',
+							lastname: 'Rousseau',
+							email: 'camille.rousseau@exemple.com',
+						},
+					])
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		'headers': [
+			{
+				title: 'Nom',
+				key: 'lastname',
+			},
+			{
+				title: 'Prénom',
+				key: 'firstname',
+			},
+			{
+				title: 'Email',
+				value: 'email',
+			},
+		],
+		'items': [
+			{
+				firstname: 'Virginie',
+				lastname: 'Beauchesne',
+				email: 'virginie.beauchesne@example.com',
+			},
+			{
+				firstname: 'Simone',
+				lastname: 'Bellefeuille',
+				email: 'simone.bellefeuille@example.com',
+			},
+			{
+				firstname: 'Étienne',
+				lastname: 'Salois',
+				email: 'etienne.salois@example.com',
+			},
+			{
+				firstname: 'Thierry',
+				lastname: 'Bobu',
+				email: 'thierry.bobu@example.com',
+			},
+			{
+				firstname: 'Bernadette',
+				lastname: 'Langelier',
+				email: 'bernadette.langelier@exemple.com',
+			},
+			{
+				firstname: 'Agate',
+				lastname: 'Roy',
+				email: 'agate.roy@exemple.com',
+			},
+			{
+				firstname: 'Théo',
+				lastname: 'Garnier',
+				email: 'theo.garnier@exemple.com',
+			},
+			{
+				firstname: 'Clara',
+				lastname: 'Moreau',
+				email: 'clara.moreau@exemple.com',
+			},
+			{
+				firstname: 'Lucas',
+				lastname: 'Lefebvre',
+				email: 'lucas.lefebre@exemple.com',
+			},
+			{
+				firstname: 'Emma',
+				lastname: 'Dubois',
+				email: 'emma.dubois@exemple.com',
+			},
+			{
+				firstname: 'Julien',
+				lastname: 'Martin',
+				email: 'julien.martin@exemple.com',
+			},
+			{
+				firstname: 'Sophie',
+				lastname: 'Bernard',
+				email: 'sophie.bernard@exemple.com',
+			},
+			{
+				firstname: 'Antoine',
+				lastname: 'Lemoine',
+				email: 'antoine.lemoine@exemple.com',
+			},
+			{
+				firstname: 'Camille',
+				lastname: 'Rousseau',
+				email: 'camille.rousseau@exemple.com',
+			},
+		],
+		'options': {
+			itemsPerPage: 5,
+		},
+		'itemsPerPageOptions': [5, 10, 15],
+		'caption': '',
+		'suffix': 'default-table',
+		'density': 'default',
+		'striped': false,
+		'onUpdate:options': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { SyTable },
+			setup() {
+				return { args }
+			},
+			template: `
+				<SyTable
+					v-model:options="args.options"
+					v-bind="args"
+				/>
+			`,
+		}
+	},
+}

package/src/components/Tables/SyTable/SyTable.vue

@@ -29,6 +29,7 @@
 		showSelect: false,
 		multiSort: false,
 		mustSort: false,
+		itemsPerPageOptions: undefined,
 	})
 
 	const emit = defineEmits<{
@@ -421,6 +422,7 @@
 						:items-per-page="itemsPerPageValue"
 						:page-count="pageCount"
 						:items-length="filteredItems.length"
+						:items-per-page-options="props.itemsPerPageOptions"
 						@update:page="page = $event"
 						@update:items-per-page="updateItemsPerPage"
 					/>

package/src/components/Tables/common/SyTablePagination.vue

@@ -9,7 +9,10 @@
 
 	// Items per page options - standard options and current value
 	const itemsPerPageOptions = computed(() => {
-		const standardOptions = [5, 10, 25, 50, 100]
+		// Use provided itemsPerPageOptions or default standard options
+		const baseOptions = props.itemsPerPageOptions || [5, 10, 25, 50, 100]
+		// Filter out -1 from base options since we'll handle it separately
+		const standardOptions = [...baseOptions.filter(option => option !== -1)]
 
 		// Add the current itemsPerPage if it's not already in the standard options
 		// and it's not -1 (which represents "Tous")
@@ -25,11 +28,14 @@
 			value,
 		}))
 
-		// Add "Tous" option to display all elements
-		options.push({
-			text: locales.pagination.all,
-			value: -1,
-		})
+		// Add "Tous" option only if not limited by itemsPerPageOptions
+		// or if explicitly allowed (by including -1 in itemsPerPageOptions)
+		if (!props.itemsPerPageOptions || props.itemsPerPageOptions.includes(-1)) {
+			options.push({
+				text: locales.pagination.all,
+				value: -1,
+			})
+		}
 
 		return options
 	})
@@ -39,6 +45,7 @@
 		pageCount: number
 		itemsPerPage: number
 		itemsLength: number
+		itemsPerPageOptions?: number[]
 	}>()
 
 	const emit = defineEmits<{

package/src/components/Tables/common/TableHeader.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-	import { computed, nextTick, onMounted, ref, inject, watch, type Ref } from 'vue'
+	import { computed, nextTick, onMounted, ref, inject, watch, type Ref, onUnmounted } from 'vue'
 	import type { VDataTable, VDataTableServer } from 'vuetify/components'
 	import { locales } from './locales'
 
@@ -106,16 +106,19 @@
 	}
 
 	const tableWidth = ref(0)
-	onMounted(async () => {
-		await nextTick()
+	function updateTableWidth() {
 		if (props.table) {
 			tableWidth.value = props.table.$el.offsetWidth
 		}
+	}
+	onMounted(async () => {
+		await nextTick()
+		updateTableWidth()
 	})
-	window.addEventListener('resize', () => {
-		if (props.table) {
-			tableWidth.value = props.table.$el.offsetWidth
-		}
+	window.addEventListener('resize', updateTableWidth)
+
+	onUnmounted(() => {
+		window.removeEventListener('resize', updateTableWidth)
 	})
 
 	function resizeKeyboardColumn(increment: number) {

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

@@ -1,4 +1,4 @@
-import { onMounted } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 
 /**
  * Utility function to enhance table accessibility
@@ -8,6 +8,8 @@ export function useTableAccessibility({
 }: {
 	tableId: string
 }) {
+	// Référence pour stocker et nettoyer les timeouts
+	const accessibilityTimeouts = ref<ReturnType<typeof setTimeout>[]>([])
 	function setupAccessibility() {
 		onMounted(() => {
 			const captionElement = document.querySelector(`#${tableId} caption`)
@@ -31,11 +33,12 @@ export function useTableAccessibility({
 				}
 
 				// Check again after a delay
-				setTimeout(() => {
+				const timeoutId = setTimeout(() => {
 					if (element.hasAttribute('aria-controls')) {
 						element.removeAttribute('aria-controls')
 					}
 				}, 500)
+				accessibilityTimeouts.value.push(timeoutId)
 			})
 
 			const fieldLabels = document.querySelectorAll(`#${tableId} .v-field`)
@@ -53,6 +56,14 @@ export function useTableAccessibility({
 				th[i].setAttribute('scope', 'col')
 			}
 		})
+
+		// Nettoyer tous les timeouts lors du démontage du composant
+		onUnmounted(() => {
+			accessibilityTimeouts.value.forEach((timeoutId) => {
+				clearTimeout(timeoutId)
+			})
+			accessibilityTimeouts.value = []
+		})
 	}
 
 	return {