@cnamts/synapse 1.0.23 → 1.0.24

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

@@ -5,6 +5,12 @@ import SelectFilter from '../SelectFilter.vue'
 import SySelect from '@/components/Customs/Selects/SySelect/SySelect.vue'
 import type { FilterType } from '../../types'
 
+const sySelectStub = {
+	template: '<div class="sy-select-stub" data-testid="sy-select" :label="label" :items="items" :clearable="clearable" :density="density" :hideDetails="hideDetails" :multiple="multiple"></div>',
+	props: ['modelValue', 'label', 'items', 'clearable', 'density', 'hideDetails', 'hideMessages', 'disableErrorHandling', 'variant', 'multiple', 'chips'],
+	emits: ['update:modelValue', 'click:clear'],
+}
+
 describe('SelectFilter.vue', () => {
 	let wrapper: ReturnType<typeof mount<typeof SelectFilter>>
 	const header = {
@@ -21,10 +27,7 @@ describe('SelectFilter.vue', () => {
 		wrapper = mount(SelectFilter, {
 			global: {
 				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'],
-					},
+					SySelect: sySelectStub,
 				},
 			},
 			props: {
@@ -139,12 +142,7 @@ describe('SelectFilter.vue', () => {
 		}
 		const newWrapper = mount(SelectFilter, {
 			global: {
-				stubs: {
-					SySelect: {
-						template: '<div class="sy-select-stub" data-testid="sy-select"></div>',
-						props: ['modelValue', 'label', 'items', 'clearable', 'density', 'hideDetails'],
-					},
-				},
+				stubs: { SySelect: sySelectStub },
 			},
 			props: {
 				header: headerWithoutKey,
@@ -181,12 +179,7 @@ describe('SelectFilter.vue', () => {
 		}
 		const newWrapper = mount(SelectFilter, {
 			global: {
-				stubs: {
-					SySelect: {
-						template: '<div class="sy-select-stub" data-testid="sy-select"></div>',
-						props: ['modelValue', 'label', 'items', 'clearable', 'density', 'hideDetails'],
-					},
-				},
+				stubs: { SySelect: sySelectStub },
 			},
 			props: {
 				header: emptyHeader,
@@ -209,4 +202,147 @@ describe('SelectFilter.vue', () => {
 		// Restaurer Date.now
 		global.Date.now = originalDateNow
 	})
+
+	describe('filterOptions – removed default option', () => {
+		it('returns empty array when header has no filterOptions', () => {
+			const newWrapper = mount(SelectFilter, {
+				global: { stubs: { SySelect: sySelectStub } },
+				props: {
+					header: { title: 'Test', key: 'test' },
+					filters: [],
+					filterValue: undefined,
+				},
+			})
+
+			// SySelect receives items=[] — no "- choisir -" option injected
+			const sySelect = newWrapper.findComponent(SySelect)
+			expect(sySelect.props('items')).toEqual([])
+		})
+
+		it('does not prepend a default "- choisir -" option to filterOptions', () => {
+			const sySelect = wrapper.findComponent(SySelect)
+			const items = sySelect.props('items') as Array<{ text: string, value: unknown }>
+			const hasDefaultOption = items.some(i => i.text === '- choisir -')
+			expect(hasDefaultOption).toBe(false)
+		})
+
+		it('replaces empty-string option text with "(vide)"', () => {
+			const newWrapper = mount(SelectFilter, {
+				global: { stubs: { SySelect: sySelectStub } },
+				props: {
+					header: {
+						title: 'Test',
+						key: 'test',
+						filterOptions: [{ text: '', value: '' }],
+					},
+					filters: [],
+					filterValue: undefined,
+				},
+			})
+
+			const sySelect = newWrapper.findComponent(SySelect)
+			const items = sySelect.props('items') as Array<{ text: string, value: unknown }>
+			expect(items[0]?.text).toBe('(vide)')
+		})
+	})
+
+	describe('modelValue – null-based empty state (no defaultOption)', () => {
+		it('passes null to SySelect when filterValue is null', () => {
+			const newWrapper = mount(SelectFilter, {
+				global: { stubs: { SySelect: sySelectStub } },
+				props: { header, filters: [], filterValue: null },
+			})
+
+			const sySelect = newWrapper.findComponent(SySelect)
+			expect(sySelect.props('modelValue')).toBeNull()
+		})
+
+		it('passes null to SySelect when filterValue is undefined', () => {
+			const sySelect = wrapper.findComponent(SySelect)
+			expect(sySelect.props('modelValue')).toBeNull()
+		})
+
+		it('passes empty array to SySelect when filterValue is null and multiple=true', () => {
+			const newWrapper = mount(SelectFilter, {
+				global: { stubs: { SySelect: sySelectStub } },
+				props: {
+					header: { ...header, multiple: true },
+					filters: [],
+					filterValue: null,
+				},
+			})
+
+			const sySelect = newWrapper.findComponent(SySelect)
+			expect(sySelect.props('modelValue')).toEqual([])
+		})
+	})
+
+	describe('multiple prop – strict equality', () => {
+		it('does not enable multiple when header.multiple is undefined', () => {
+			const sySelect = wrapper.findComponent(SySelect)
+			expect(sySelect.props('multiple')).toBe(false)
+		})
+
+		it('does not enable multiple when header.multiple is a truthy non-boolean (e.g. string)', () => {
+			const newWrapper = mount(SelectFilter, {
+				global: { stubs: { SySelect: sySelectStub } },
+				props: {
+					header: { ...header, multiple: 'true' as unknown as boolean },
+					filters: [],
+					filterValue: undefined,
+				},
+			})
+
+			const sySelect = newWrapper.findComponent(SySelect)
+			expect(sySelect.props('multiple')).toBe(false)
+		})
+
+		it('enables multiple when header.multiple === true', () => {
+			const newWrapper = mount(SelectFilter, {
+				global: { stubs: { SySelect: sySelectStub } },
+				props: {
+					header: { ...header, multiple: true },
+					filters: [],
+					filterValue: undefined,
+				},
+			})
+
+			const sySelect = newWrapper.findComponent(SySelect)
+			expect(sySelect.props('multiple')).toBe(true)
+		})
+
+		it('emits array value when multiple=true and items are selected', async () => {
+			const newWrapper = mount(SelectFilter, {
+				global: { stubs: { SySelect: sySelectStub } },
+				props: {
+					header: { ...header, multiple: true },
+					filters: [],
+					filterValue: undefined,
+				},
+			})
+
+			const sySelect = newWrapper.findComponent(SySelect)
+			sySelect.vm.$emit('update:modelValue', ['option1', 'option2'])
+
+			expect(newWrapper.emitted('update:filters')![0]?.[0]).toEqual([
+				{ key: 'test', value: ['option1', 'option2'], type: 'select' as FilterType },
+			])
+		})
+
+		it('removes filter when multiple=true selection is cleared to empty array', async () => {
+			const newWrapper = mount(SelectFilter, {
+				global: { stubs: { SySelect: sySelectStub } },
+				props: {
+					header: { ...header, multiple: true },
+					filters: [{ key: 'test', value: ['option1'], type: 'select' as FilterType }],
+					filterValue: ['option1'],
+				},
+			})
+
+			const sySelect = newWrapper.findComponent(SySelect)
+			sySelect.vm.$emit('update:modelValue', [])
+
+			expect(newWrapper.emitted('update:filters')![0]?.[0]).toEqual([])
+		})
+	})
 })

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

@@ -32,6 +32,9 @@ function applyFilter<T extends Items[0]>(item: T, filter: FilterOption): boolean
 		case 'select': {
 			return filterBySelect(itemValue, filterValue)
 		}
+		case 'autocomplete': {
+			return filterBySelect(itemValue, filterValue)
+		}
 		case 'custom': {
 			// Traiter les filtres personnalisés comme des filtres de sélection
 			return filterBySelect(itemValue, filterValue)

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

@@ -1,8 +1,17 @@
+@use 'sass:color';
 @use '@/assets/tokens';
 
 @mixin tablestyles {
 	.v-table {
 		border: 1px solid tokens.$grey-lighten-80;
+
+		--sy-table-header-bg-pinned: #{color.mix(tokens.$blue-lighten-80, #fff, 20%)};
+
+		// Standardisation des z-index pour les tableaux
+		--sy-table-z-base: 1;
+		--sy-table-z-pinned-cell: calc(var(--sy-table-z-base) + 2);
+		--sy-table-z-pinned-header: calc(var(--sy-table-z-base) + 4);
+		--sy-table-z-progress: calc(var(--sy-table-z-base) + 5);
 	}
 
 	table thead tr {
@@ -20,10 +29,6 @@
 		background-color: rgba(tokens.$blue-lighten-80, 0.2);
 	}
 
-	&.row-clickable table tbody tr {
-		cursor: pointer;
-	}
-
 	&.fixed-min-height {
 		.v-data-table__wrapper {
 			min-height: 540px;
@@ -81,4 +86,43 @@
 	.v-data-table-rows-no-data {
 		color: tokens.$grey-base;
 	}
+
+	// Ensure loading progress bar appears above sticky/pinned header cells
+	.v-data-table-progress th {
+		position: sticky;
+		top: 0;
+		z-index: var(--sy-table-z-progress);
+	}
+}
+
+@mixin clickable-row-styles {
+	.v-table tbody > tr.sy-table__clickable-row,
+	.v-data-table__tbody > tr.sy-table__clickable-row {
+		cursor: pointer !important;
+		outline-offset: -2px;
+	}
+
+	.v-table tbody > tr.sy-table__clickable-row:focus-visible,
+	.v-data-table__tbody > tr.sy-table__clickable-row:focus-visible {
+		outline: 2px solid tokens.$primary-base;
+	}
+
+	.v-table tbody > tr.sy-table__clickable-row > td,
+	.v-table tbody > tr.sy-table__clickable-row > .v-data-table__td,
+	.v-data-table__tbody > tr.sy-table__clickable-row > td,
+	.v-data-table__tbody > tr.sy-table__clickable-row > .v-data-table__td {
+		cursor: pointer !important;
+		transition: background-color 0.15s ease;
+	}
+
+	.v-table tbody > tr.sy-table__clickable-row:hover > td,
+	.v-table tbody > tr.sy-table__clickable-row:hover > .v-data-table__td,
+	.v-table tbody > tr.sy-table__clickable-row:focus-visible > td,
+	.v-table tbody > tr.sy-table__clickable-row:focus-visible > .v-data-table__td,
+	.v-data-table__tbody > tr.sy-table__clickable-row:hover > td,
+	.v-data-table__tbody > tr.sy-table__clickable-row:hover > .v-data-table__td,
+	.v-data-table__tbody > tr.sy-table__clickable-row:focus-visible > td,
+	.v-data-table__tbody > tr.sy-table__clickable-row:focus-visible > .v-data-table__td {
+		background-color: rgba(tokens.$primary-base, 0.08) !important;
+	}
 }

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

@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils'
+import { flushPromises, 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'
@@ -189,6 +189,7 @@ describe('SyTable - filterByRange', () => {
 		})
 
 		await endDate.setValue('01/01/1995')
+		await flushPromises()
 
 		filteredNames = ['Alice']
 		filteredNames.forEach((element) => {

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

@@ -3,12 +3,12 @@ export type SortOptions = {
 	order: 'desc' | 'asc'
 }
 
-export type FilterType = 'text' | 'number' | 'date' | 'period' | 'select' | 'custom'
+export type FilterType = 'text' | 'number' | 'date' | 'period' | 'select' | 'autocomplete' | 'custom'
 type FilterValue =
 	| string
 	| number
 	| Date
-	| Array<string | number | Date>
+	| Array<string | number | Date | Record<string, unknown>>
 	| { from: string | null, to: string | null }
 	| Record<string, unknown>
 	| null
@@ -53,6 +53,7 @@ export type DataTableHeaders = {
 	maxWidth?: string | number
 	minWidth?: string | number
 	headerProps?: Record<string, unknown>
+	cellProps?: Record<string, unknown>
 }
 
 // Type to handle both Vuetify internal headers and our custom headers
@@ -74,7 +75,8 @@ export type TableColumnHeader = {
 	children?: unknown[]
 	maxWidth?: string | number
 	minWidth?: string | number
-	headerProps?: Record<string, unknown>
+	headerProps?: unknown
+	cellProps?: unknown
 	[key: string]: unknown // Allow for any additional properties from Vuetify
 }
 
@@ -93,12 +95,16 @@ export type SyTableProps = {
 	headers?: DataTableHeaders[]
 	showSelect?: boolean
 	showSelectSingle?: boolean
+	stickySelect?: boolean
 	showExpand?: boolean
 	selectionKey?: string
 	multiSort?: boolean
 	mustSort?: boolean
 	itemsPerPageOptions?: number[]
 	headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
+	pinnedColumns?: Array<string | { key: string, side?: 'left' | 'right' }>
+	pinnedColumnKey?: string
+	clickableRow?: boolean
 }
 
 export type SyServerTableProps = {
@@ -116,11 +122,14 @@ export type SyServerTableProps = {
 	headers?: DataTableHeaders[]
 	showSelect?: boolean
 	showSelectSingle?: boolean
+	stickySelect?: boolean
 	showExpand?: boolean
 	selectionKey?: string
 	multiSort?: boolean
 	mustSort?: boolean
 	itemsPerPageOptions?: number[]
 	headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
-
+	pinnedColumns?: Array<string | { key: string, side?: 'left' | 'right' }>
+	pinnedColumnKey?: string
+	clickableRow?: boolean
 }

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

@@ -0,0 +1,103 @@
+import { computed, type ComputedRef, type Ref } from 'vue'
+
+type ClickableTableItem = Record<string, unknown>
+
+type TableRowData = {
+	index: number
+	item: ClickableTableItem
+	internalItem: unknown
+}
+
+type TableRowEventHandler<TEvent extends Event> = ((event: TEvent) => void) | Array<(event: TEvent) => void>
+type TableRowProps = Record<string, unknown>
+export type ClickableTableRowPropsInput = TableRowProps | ((data: TableRowData) => TableRowProps) | undefined
+
+function callEventHandler<TEvent extends Event>(handler: TableRowEventHandler<TEvent> | unknown, event: TEvent): void {
+	if (Array.isArray(handler)) {
+		handler.forEach((currentHandler) => {
+			currentHandler(event)
+		})
+		return
+	}
+
+	if (typeof handler === 'function') {
+		handler(event)
+	}
+}
+
+function resolveRowProps(rowProps: ClickableTableRowPropsInput, data: TableRowData): TableRowProps {
+	if (typeof rowProps === 'function') {
+		return rowProps(data)
+	}
+
+	return rowProps ?? {}
+}
+
+function isElementInteractive(element: HTMLElement | null): boolean {
+	if (!element) {
+		return false
+	}
+
+	return Boolean(element.closest('a, button, input, select, textarea, summary, [role="button"], [role="link"], [role="checkbox"], [role="menuitem"], [contenteditable="true"], [data-sy-row-click-ignore]'))
+}
+
+function isFromNestedInteractiveElement(event: Event): boolean {
+	const target = event.target as HTMLElement | null
+	const currentTarget = event.currentTarget as HTMLElement | null
+
+	if (!target || !currentTarget || target === currentTarget) {
+		return false
+	}
+
+	return isElementInteractive(target)
+}
+
+export function useClickableTableRow({
+	clickableRow,
+	rowProps,
+	onRowClick,
+}: {
+	clickableRow: Ref<boolean>
+	rowProps: ComputedRef<ClickableTableRowPropsInput>
+	onRowClick: (item: ClickableTableItem) => void
+}) {
+	const clickableRowProps = computed<ClickableTableRowPropsInput>(() => {
+		if (!clickableRow.value) {
+			return rowProps.value
+		}
+
+		return (data: TableRowData) => {
+			const baseRowProps = resolveRowProps(rowProps.value, data)
+
+			return {
+				...baseRowProps,
+				'class': ['sy-table__clickable-row', baseRowProps.class].filter(Boolean),
+				'data-clickable-row': true,
+				'tabindex': baseRowProps.tabindex ?? 0,
+				'onClick': (event: MouseEvent) => {
+					callEventHandler(baseRowProps.onClick as TableRowEventHandler<MouseEvent> | unknown, event)
+
+					if (!event.defaultPrevented && !isFromNestedInteractiveElement(event)) {
+						onRowClick(data.item)
+					}
+				},
+				'onKeydown': (event: KeyboardEvent) => {
+					callEventHandler(baseRowProps.onKeydown as TableRowEventHandler<KeyboardEvent> | unknown, event)
+
+					if (event.defaultPrevented || isFromNestedInteractiveElement(event)) {
+						return
+					}
+
+					if (event.key === 'Enter' || event.key === ' ') {
+						event.preventDefault()
+						onRowClick(data.item)
+					}
+				},
+			}
+		}
+	})
+
+	return {
+		clickableRowProps,
+	}
+}

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

@@ -11,9 +11,11 @@ import type { DataOptions } from './types'
 export function usePagination({
 	options,
 	itemsLength,
+	updateOptions,
 }: {
 	options: Ref<Partial<DataOptions>>
 	itemsLength: Ref<number>
+	updateOptions: (opts: Partial<DataOptions>) => void
 }) {
 	// Flag to indicate an ongoing items-per-page update cycle
 	const isUpdatingItemsPerPage = ref(false)
@@ -58,11 +60,22 @@ export function usePagination({
 		isUpdatingItemsPerPage.value = false
 	}
 
+	function onUpdateOptions(newOptions: Partial<DataOptions>) {
+		if (isUpdatingItemsPerPage.value && typeof newOptions.itemsPerPage !== 'undefined') {
+			const rest = { ...newOptions }
+			delete (rest as Record<string, unknown>).itemsPerPage
+			updateOptions(rest)
+			return
+		}
+		updateOptions(newOptions)
+	}
+
 	return {
 		page,
 		pageCount,
 		itemsPerPageValue,
 		updateItemsPerPage,
 		isUpdatingItemsPerPage,
+		onUpdateOptions,
 	}
 }