@cnamts/synapse 1.0.8 → 1.0.9

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

@@ -3,9 +3,10 @@ import * as SyTable from './SyTable.stories';
 
 <Meta of={SyTable} />
 
-# SyTable
-
-Le composant `SyTable` est utilisé pour afficher des données tabulaires côté client. Il s'appuie sur le composant `VDataTable` de Vuetify et offre des fonctionnalités supplémentaires comme le stockage local des options de tableau et des améliorations d'accessibilité.
+<div className="header">
+  <h1>SyTable</h1>
+  <p>Le composant `SyTable` est utilisé pour afficher des données tabulaires côté client. Il s'appuie sur le composant `VDataTable` de Vuetify et offre des fonctionnalités supplémentaires comme le stockage local des options de tableau et des améliorations d'accessibilité.</p>
+</div>
 
 <Canvas story={{height: '550px'}} of={SyTable.Default} />
 
@@ -79,6 +80,7 @@ Le composant améliore l'accessibilité en ajoutant automatiquement :
   const options = ref({
     itemsPerPage: 4,
   })
+import '../../../stories/styles/shared.css';
   
   const headers = ref([
     {

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

@@ -70,6 +70,10 @@ const meta = {
 				defaultValue: { summary: 'undefined' },
 			},
 		},
+		saveState: {
+			description: 'Permet d\'activer ou non la sauvegarde des options (pagination, tris, ordre des colonnes) du tableau dans le localStorage. Par défaut, cette fonctionnalité est activée.',
+			control: { type: 'boolean' },
+		},
 		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' },
@@ -338,7 +342,7 @@ export const SortBy: Story = {
 							key: 'firstname',
 						},
 						{
-                            title: 'Email',
+							title: 'Email',
 							value: 'email',
 						},
 					])

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

@@ -8,7 +8,7 @@
 	import { processItems } from '../common/formatters'
 	import { locales } from '../common/locales'
 	import OrganizeColumns from '../common/organizeColumns/OrganizeColumns.vue'
-	import { useTableUtils } from '../common/tableUtils'
+	import { useTableProps } from '../common/tableProps'
 	import type { DataOptions, SyTableProps } from '../common/types'
 	import { useTableFilter } from '../common/useTableFilter'
 	import { usePagination } from '../common/usePagination'
@@ -17,9 +17,12 @@
 	import { useTableItems } from '../common/useTableItems'
 	import { useTableCheckbox } from '../common/useTableCheckbox'
 	import { useTableAria } from '../common/useTableAria'
+	import { useTableAccessibility } from '../common/tableAccessibilityUtils'
+	import useStoredOptions from '../common/useStoredOptions'
 
 	const props = withDefaults(defineProps<SyTableProps>(), {
 		caption: '',
+		saveState: true,
 		showFilters: false,
 		resizableColumns: false,
 		items: () => [],
@@ -61,27 +64,28 @@
 	// Generate a unique ID for this table instance
 	const uniqueTableId = ref(`sy-table-${Math.random().toString(36).substr(2, 9)}`)
 
+	const { storedOptions, storeOptions } = useStoredOptions({
+		key: computed(() => props.suffix ? `table-${props.suffix}` : 'table'),
+		saveState: toRef(props, 'saveState'),
+	})
+
 	const {
 		propsFacade,
 		updateOptions,
-		setupAccessibility,
-		setupLocalStorage,
-		columnWidths,
-		updateColumnWidth,
-		headers: storageHeaders,
-	} = useTableUtils({
-		tableId: uniqueTableId.value,
-		prefix: 'table',
-		suffix: props.suffix,
-		caption: props.caption,
+	} = useTableProps({
 		componentAttributes,
 		options,
-		density: props.density,
+		storedOptions: storedOptions.options,
+	})
+
+	const { setupAccessibility } = useTableAccessibility({
+		tableId: uniqueTableId.value,
 	})
 
 	// Use the table headers composable
 	const { headers, displayHeaders, getEnhancedHeader } = useTableHeaders({
-		headersProp: storageHeaders.value ? storageHeaders : toRef(props, 'headers'),
+		headersProp: toRef(props, 'headers'),
+		storedHeaders: storedOptions.headers,
 		filterInputConfig: props.filterInputConfig,
 	})
 
@@ -89,7 +93,7 @@
 	const itemsRef = computed(() => props.items)
 
 	// Use the table items composable
-	const { filteredItems, createEmptyItemWithStructure } = useTableItems({
+	const { filteredItems } = useTableItems({
 		items: itemsRef,
 		headers,
 		filters,
@@ -176,51 +180,32 @@
 
 	setupAccessibility()
 
-	const { watchOptions, saveHeaders } = setupLocalStorage()
-
 	// Create a reactive reference to column widths that will be provided to children
-	const reactiveColumnWidths = ref(columnWidths.value)
+	const reactiveColumnWidths = ref(storedOptions.columnWidths || {})
 
 	// Provide column widths and update function to child components
 	provide('columnWidths', reactiveColumnWidths)
 	provide('updateColumnWidth', (key: string, width: number | string) => {
 		// Update both the local reactive reference and call the storage utility
 		reactiveColumnWidths.value[key] = width
-		updateColumnWidth(key, width)
 	})
 
-	// Watch for changes to columnWidths from storage and update the reactive reference
+	// Save options, headers, and column widths to local storage whenever they change
 	watch(
-		() => columnWidths.value,
-		(newWidths) => {
-			reactiveColumnWidths.value = { ...newWidths }
-		},
-		{ deep: true, immediate: true },
-	)
-
-	watch(
-		() => options.value,
+		[
+			() => options.value,
+			() => headers.value,
+			() => reactiveColumnWidths.value,
+		],
 		() => {
-			// Call watchOptions to update localStorage
-			watchOptions()
-
-			// We need to use nextTick to ensure the table has re-rendered
-			nextTick(() => {
-				// Update the reactive reference directly, which will update the provided value
-				reactiveColumnWidths.value = { ...columnWidths.value }
+			storeOptions({
+				options: options.value,
+				headers: headers.value,
+				columnWidths: reactiveColumnWidths.value,
 			})
 		},
 		{ deep: true },
 	)
-
-	watch(
-		headers,
-		() => {
-			saveHeaders(headers.value)
-		},
-		{ deep: true },
-	)
-
 </script>
 
 <template>
@@ -243,7 +228,7 @@
 			color="primary"
 			:headers="displayHeaders"
 			v-bind="propsFacade"
-			:items="processItems(filteredItems.length > 0 ? filteredItems : createEmptyItemWithStructure())"
+			:items="processItems(filteredItems)"
 			:density="props.density"
 			:show-select="props.showSelect"
 			:item-selectable="(item) => true"
@@ -268,7 +253,9 @@
 							v-for="column in slotProps.columns"
 							:key="column.key"
 						>
-							<th>
+							<th
+								class="checkbox-column"
+							>
 								<template v-if="column.key === 'data-table-select' && props.showSelect">
 									<SyCheckbox
 										:model-value="slotProps.allSelected"
@@ -345,13 +332,6 @@
 							</VBtn>
 						</td>
 					</tr>
-					<tr v-if="filteredItems.length === 0">
-						<td colspan="100%">
-							<div class="text-center text-grey">
-								{{ locales.noData }}
-							</div>
-						</td>
-					</tr>
 				</template>
 				<!-- Repli lorsque les colonnes ne sont pas définies -->
 				<template v-else>
@@ -389,13 +369,6 @@
 							</SyTableFilter>
 						</th>
 					</tr>
-					<tr v-if="filteredItems.length === 0">
-						<td colspan="100%">
-							<div class="text-center text-grey">
-								{{ locales.noData }}
-							</div>
-						</td>
-					</tr>
 				</template>
 			</template>
 
@@ -449,4 +422,9 @@
 .sy-table--striped :deep() {
 	@include striped-rows;
 }
+
+.checkbox-column {
+	max-width: fit-content;
+}
+
 </style>

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

@@ -153,12 +153,14 @@ describe('SyTable', () => {
 		expect(setItemMock).toHaveBeenCalledWith(
 			'table-test-storage',
 			expect.objectContaining({
-				sortBy: [
-					{
-						key: 'name',
-						order: 'desc',
-					},
-				],
+				options: expect.objectContaining({
+					sortBy: [
+						{
+							key: 'name',
+							order: 'desc',
+						},
+					],
+				}),
 			}),
 		)
 	})
@@ -367,7 +369,7 @@ describe('SyTable', () => {
 		})
 
 		await wrapper.vm.$nextTick()
-		expect(wrapper.text()).toContain('Aucune donnée disponible')
+		expect(wrapper.text()).toContain('No data available')
 	})
 
 	it('enables selection when showSelect is true', async () => {

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

@@ -0,0 +1,53 @@
+import { computed, ref, watch, type Ref } from 'vue'
+import type { DataOptions } from './types'
+
+export function useTableProps({
+	componentAttributes,
+	serverItemsLength,
+	options,
+	storedOptions,
+}: {
+	componentAttributes: Record<string, unknown>
+	serverItemsLength?: number
+	options: Ref<Partial<DataOptions>>
+	storedOptions?: Partial<DataOptions>
+}): {
+		propsFacade: Ref<Record<string, unknown>>
+		updateOptions: (tableOptions: Partial<DataOptions>) => void
+	} {
+	const localOptions = ref<Partial<DataOptions>>(storedOptions || options.value || {})
+
+	const propsFacade = computed(() => {
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		const { 'onUpdate:options': _, ...attrs } = componentAttributes
+
+		const props = {
+			...attrs,
+			...localOptions.value,
+			...(serverItemsLength !== undefined ? { itemsLength: serverItemsLength } : {}),
+		}
+
+		return props
+	})
+
+	// When the table options are updated, merge them into localOptions
+	function updateOptions(tableOptions: Partial<DataOptions>): void {
+		options.value = {
+			...options.value,
+			...tableOptions,
+		}
+	}
+
+	// Watch for external changes to options and update localOptions accordingly
+	watch(options, (newOptions) => {
+		localOptions.value = {
+			...localOptions.value,
+			...newOptions,
+		}
+	})
+
+	return {
+		propsFacade,
+		updateOptions,
+	}
+}

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

@@ -77,4 +77,8 @@
 	.v-checkbox-btn .v-selection-control__input::before {
 		border-color: rgb(var(--v-theme-primary)) !important;
 	}
+
+	.v-data-table-rows-no-data {
+		color: tokens.$grey-base;
+	}
 }

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

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest'
 import { ref } from 'vue'
-import { useTableUtils } from '../tableUtils'
+import { useTableProps } from '../tableProps'
 import { LocalStorageUtility } from '@/utils/localStorageUtility'
 import type { DataOptions } from '../types'
 
@@ -21,75 +21,6 @@ describe('tableUtils', () => {
 		vi.resetAllMocks()
 	})
 
-	it('should create storage key correctly with suffix', () => {
-		const options = ref<Partial<DataOptions>>({})
-		const { storageKey } = useTableUtils({
-			tableId: 'test-table',
-			prefix: 'table',
-			suffix: 'test-suffix',
-			caption: 'Test Table',
-			componentAttributes: {},
-			options,
-		})
-
-		expect(storageKey.value).toBe('table-test-suffix')
-	})
-
-	it('should create storage key correctly without suffix', () => {
-		const options = ref<Partial<DataOptions>>({})
-		const { storageKey } = useTableUtils({
-			tableId: 'test-table',
-			prefix: 'table',
-			caption: 'Test Table',
-			componentAttributes: {},
-			options,
-		})
-
-		expect(storageKey.value).toBe('table')
-	})
-
-	it('should handle undefined headers', () => {
-		const options = ref<Partial<DataOptions>>({})
-		const componentAttributes = {}
-
-		const { headers } = useTableUtils({
-			tableId: 'test-table',
-			prefix: 'table',
-			caption: 'Test Table',
-			componentAttributes,
-			options,
-		})
-
-		expect(headers.value).toBeUndefined()
-	})
-
-	it('should create optionsFacade correctly', () => {
-		const options = ref<Partial<DataOptions>>({
-			page: 2,
-			sortBy: [{ key: 'name', order: 'asc' }],
-		})
-		const componentAttributes = {
-			page: 1,
-		}
-
-		const { optionsFacade } = useTableUtils({
-			tableId: 'test-table',
-			prefix: 'table',
-			caption: 'Test Table',
-			componentAttributes,
-			options,
-		})
-
-		expect(optionsFacade.value).toEqual({
-			page: 2,
-			sortBy: [{ key: 'name', order: 'asc' }],
-			itemsPerPage: 10,
-			groupBy: undefined,
-			multiSort: undefined,
-			mustSort: undefined,
-		})
-	})
-
 	it('should create propsFacade correctly for client table', () => {
 		const options = ref<Partial<DataOptions>>({})
 		const componentAttributes = {
@@ -97,10 +28,7 @@ describe('tableUtils', () => {
 			'onUpdate:options': vi.fn(),
 		}
 
-		const { propsFacade } = useTableUtils({
-			tableId: 'test-table',
-			prefix: 'table',
-			caption: 'Test Table',
+		const { propsFacade } = useTableProps({
 			componentAttributes,
 			options,
 		})
@@ -117,10 +45,7 @@ describe('tableUtils', () => {
 			items: [{ id: 1 }],
 		}
 
-		const { propsFacade } = useTableUtils({
-			tableId: 'test-table',
-			prefix: 'table',
-			caption: 'Test Table',
+		const { propsFacade } = useTableProps({
 			serverItemsLength: 100,
 			componentAttributes,
 			options,
@@ -139,10 +64,7 @@ describe('tableUtils', () => {
 		})
 		const componentAttributes = {}
 
-		const { updateOptions } = useTableUtils({
-			tableId: 'test-table',
-			prefix: 'table',
-			caption: 'Test Table',
+		const { updateOptions } = useTableProps({
 			componentAttributes,
 			options,
 		})
@@ -156,73 +78,4 @@ describe('tableUtils', () => {
 			sortBy: [{ key: 'name', order: 'desc' }],
 		})
 	})
-
-	it('should setup local storage correctly', () => {
-		mockLocalStorageUtility.getItem.mockReturnValue({
-			page: 2,
-			options: {
-				itemsPerPage: 20,
-			},
-		})
-
-		const options = ref<Partial<DataOptions>>({})
-		const componentAttributes = {}
-
-		const { localOptions, setupLocalStorage } = useTableUtils({
-			tableId: 'test-table',
-			prefix: 'table',
-			suffix: 'test',
-			caption: 'Test Table',
-			componentAttributes,
-			options,
-		})
-
-		const { watchOptions } = setupLocalStorage()
-
-		expect(mockLocalStorageUtility.getItem).toHaveBeenCalledWith('table-test')
-		expect(localOptions.value).toEqual({
-			page: 2,
-			options: {
-				itemsPerPage: 20,
-			},
-		})
-
-		// Test watchOptions
-		options.value = {
-			page: 3,
-			sortBy: [{ key: 'name', order: 'asc' }],
-		}
-		watchOptions()
-
-		expect(mockLocalStorageUtility.setItem).toHaveBeenCalledWith('table-test', expect.objectContaining({
-			page: 3,
-			sortBy: [{ key: 'name', order: 'asc' }],
-		}))
-	})
-
-	it('should handle server table local storage correctly', () => {
-		mockLocalStorageUtility.getItem.mockReturnValue(null)
-
-		const options = ref<Partial<DataOptions>>({
-			page: 1,
-		})
-		const componentAttributes = {}
-
-		const { setupLocalStorage } = useTableUtils({
-			tableId: 'test-table',
-			prefix: 'server-table',
-			caption: 'Test Table',
-			serverItemsLength: 100,
-			componentAttributes,
-			options,
-		})
-
-		const { watchOptions } = setupLocalStorage()
-		watchOptions()
-
-		expect(mockLocalStorageUtility.setItem).toHaveBeenCalledWith('server-table', expect.objectContaining({
-			page: 1,
-			itemsLength: 100,
-		}))
-	})
 })

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

@@ -4,12 +4,20 @@ export type SortOptions = {
 }
 
 export type FilterType = 'text' | 'number' | 'date' | 'period' | 'select' | 'custom'
-
+type FilterValue =
+	| string
+	| number
+	| Date
+	| Array<string | number | Date>
+	| { from: string | null, to: string | null }
+	| Record<string, unknown>
+	| null
+	| undefined
 export type TableDensityType = 'default' | 'comfortable' | 'compact'
 
 export interface FilterOption {
 	key: string
-	value: string | number | Date | Array<string | number | Date> | { from: string | null, to: string | null } | Record<string, unknown> | null | undefined
+	value: FilterValue
 	type: FilterType
 }
 
@@ -65,6 +73,7 @@ export type TableColumnHeader = {
 export type SyTableProps = {
 	items?: Record<string, unknown>[]
 	suffix: string
+	saveState?: boolean
 	caption?: string
 	showFilters?: boolean
 	filterInputConfig?: Record<string, unknown>
@@ -83,6 +92,7 @@ export type SyServerTableProps = {
 	serverItemsLength: number
 	items?: Record<string, unknown>[]
 	suffix: string
+	saveState?: boolean
 	caption?: string
 	showFilters?: boolean
 	resizableColumns?: boolean

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

@@ -0,0 +1,36 @@
+import { toValue, type Ref } from 'vue'
+import type { DataOptions, DataTableHeaders } from './types'
+import { LocalStorageUtility } from '@/utils'
+
+export type TableOptions = {
+	options?: Partial<DataOptions>
+	headers?: DataTableHeaders[]
+	columnWidths?: Record<string, number | string>
+}
+
+export default function useStoredOptions({
+	key,
+	saveState,
+}: {
+	key: Ref<string>
+	saveState: Ref<boolean>
+}): {
+		storedOptions: TableOptions
+		storeOptions: (options: TableOptions) => void
+	} {
+	const localStorageUtility = new LocalStorageUtility()
+
+	const storedOptions: TableOptions
+		= (saveState.value ? localStorageUtility.getItem(toValue(key)) : {}) || {}
+
+	function storeOptions(options: TableOptions): void {
+		if (saveState.value) {
+			localStorageUtility.setItem(toValue(key), options)
+		}
+	}
+
+	return {
+		storedOptions,
+		storeOptions,
+	}
+}

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

@@ -11,17 +11,20 @@ import { sortHeaders } from './organizeColumns/sortHeaders'
  */
 export function useTableHeaders({
 	headersProp,
+	storedHeaders,
 	filterInputConfig = {},
 }: {
-	headersProp: Ref<DataTableHeaders[] | undefined>
+	headersProp: Readonly<Ref<DataTableHeaders[] | undefined>>
+	storedHeaders?: DataTableHeaders[]
 	filterInputConfig?: Record<string, unknown>
 }) {
 	// Process headers to ensure they have title property
 	const normalizedHeaders = computed(() => {
-		if (!Array.isArray(headersProp?.value)) {
+		const headers = storedHeaders ?? headersProp?.value
+		if (!Array.isArray(headers)) {
 			return undefined
 		}
-		return headersProp.value.map(header => ({
+		return headers.map(header => ({
 			...header,
 			title: header.title ?? header.text,
 		}))
@@ -34,8 +37,8 @@ export function useTableHeaders({
 	})
 
 	/**
-   * Enhance header with filter type and configuration
-   */
+	 * Enhance header with filter type and configuration
+	 */
 	function getEnhancedHeader(column: TableColumnHeader): TableColumnHeader {
 		// If column is not filterable, return as is
 		if (!column.filterable) return column
@@ -63,8 +66,8 @@ export function useTableHeaders({
 	}, { immediate: true, deep: true })
 
 	/**
-   * Get header by key
-   */
+	 * Get header by key
+	 */
 	function getHeaderByKey(key: string): TableColumnHeader | undefined {
 		return normalizedHeaders.value?.find(header => header.key === key)
 	}

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

@@ -59,29 +59,9 @@ export function useTableItems({
 		return filteredItems.value.slice(start, end)
 	})
 
-	/**
-   * Create an empty item that maintains the structure of columns
-   * Useful for displaying empty state with correct column structure
-   */
-	function createEmptyItemWithStructure(): Record<string, unknown>[] {
-		if (!headers.value || !headers.value.length) return []
-
-		const emptyItem: Record<string, unknown> = {}
-
-		// Create an empty object with all header keys
-		headers.value.forEach((header) => {
-			if (header.key) {
-				emptyItem[header.key] = ''
-			}
-		})
-
-		return [emptyItem]
-	}
-
 	return {
 		processedItems,
 		filteredItems,
 		paginatedItems,
-		createEmptyItemWithStructure,
 	}
 }

package/src/components/ToolbarContainer/ToolbarContainer.mdx

@@ -1,4 +1,5 @@
 import {Controls, Canvas, Meta, Source} from '@storybook/blocks';
+import '../../stories/styles/shared.css';
 
 import * as ToolbarContainerStories from './ToolbarContainer.stories';
 

package/src/components/UploadWorkflow/Accessibilite.mdx

@@ -1,10 +1,14 @@
 import { Meta, Story } from '@storybook/addon-docs';
 import * as AccessStories from './Accessibilite.stories.ts';
+import '../../stories/styles/shared.css';
 
 <Meta of={AccessStories} />
 
-Accessibilité
-=============
+<div className="header">
+  <h1>Accessibilité</h1>
+  <p>Informations sur l'accessibilité du composant</p>
+</div>
+
 <Story of={AccessStories.Legende} />
 <br />