@cnamts/synapse 1.0.13 → 1.0.15

package/src/components/SearchListField/tests/SearchListField.spec.ts

@@ -1,11 +1,22 @@
 import { mount } from '@vue/test-utils'
 import SearchListField from '../SearchListField.vue'
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, beforeEach } from 'vitest'
+import { createVuetify } from 'vuetify'
 
 describe('SearchListField.vue', () => {
+	let vuetify
+
+	beforeEach(() => {
+		vuetify = createVuetify()
+	})
+
 	it('renders the password field', () => {
 		const wrapper = mount(SearchListField, {
-			propsData: {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				label: 'Filtrer la liste des Items',
 				items: [
 					{
 						label: 'Item 1',
@@ -24,7 +35,11 @@ describe('SearchListField.vue', () => {
 
 	it('initial state', () => {
 		const wrapper = mount(SearchListField, {
-			propsData: {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				label: 'Filtrer la liste des Items',
 				items: [
 					{
 						label: 'Item 1',
@@ -46,7 +61,11 @@ describe('SearchListField.vue', () => {
 
 	it('initial state with empty value prop', () => {
 		const wrapper = mount(SearchListField, {
-			propsData: {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				label: 'Filtrer la liste des Items',
 				items: [
 					{
 						label: 'Item 1',
@@ -68,7 +87,11 @@ describe('SearchListField.vue', () => {
 
 	it('selects an item', async () => {
 		const wrapper = mount(SearchListField, {
-			propsData: {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				label: 'Filtrer la liste des Items',
 				items: [
 					{
 						label: 'Item 1',
@@ -82,17 +105,21 @@ describe('SearchListField.vue', () => {
 			},
 		})
 
-		const listItem = wrapper.find('.vd-search-list .v-list-item')
-		await listItem.trigger('click')
+		const listItem = wrapper.find('[data-test-id="suggestions-list"] li')
+		await listItem.find('input[type="checkbox"]').trigger('click')
 		await wrapper.vm.$nextTick()
 
 		expect(wrapper.emitted('update:modelValue')).toEqual([[[1]]])
-		expect(listItem.classes()).toContain('v-list-item--active')
+		expect(listItem.classes()).toContain('suggestion-item--selected')
 	})
 
 	it('filters items based on search input', async () => {
 		const wrapper = mount(SearchListField, {
-			propsData: {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				label: 'Filtrer la liste des fruits',
 				items: [
 					{
 						label: 'Apple',
@@ -120,7 +147,11 @@ describe('SearchListField.vue', () => {
 
 	it('clears the search field', async () => {
 		const wrapper = mount(SearchListField, {
-			propsData: {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				label: 'Filtrer la liste des Items',
 				items: [
 					{
 						label: 'Item 1',
@@ -144,7 +175,11 @@ describe('SearchListField.vue', () => {
 
 	it('filteredItems computed property', async () => {
 		const wrapper = mount(SearchListField, {
-			propsData: {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				label: 'Filtrer la liste des Items',
 				items: [
 					{
 						label: 'Item 1',
@@ -167,7 +202,11 @@ describe('SearchListField.vue', () => {
 
 	it('filteredItems computed property with null search', async () => {
 		const wrapper = mount(SearchListField, {
-			propsData: {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				label: 'Filtrer la liste des Items',
 				items: [
 					{
 						label: 'Item 1',
@@ -190,7 +229,11 @@ describe('SearchListField.vue', () => {
 
 	it('filteredItems computed property with multiple matching items', async () => {
 		const wrapper = mount(SearchListField, {
-			propsData: {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				label: 'Filtrer la liste des Items',
 				items: [
 					{
 						label: 'Item 1',
@@ -215,7 +258,11 @@ describe('SearchListField.vue', () => {
 
 	it('emitChangeEvent method', async () => {
 		const wrapper = mount(SearchListField, {
-			propsData: {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				label: 'Filtrer la liste des Items',
 				items: [
 					{
 						label: 'Item 1',
@@ -236,7 +283,11 @@ describe('SearchListField.vue', () => {
 
 	it('emits the update:modelValue event when an item is selected', async () => {
 		const wrapper = mount(SearchListField, {
-			propsData: {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				label: 'Filtrer la liste des Items',
 				items: [
 					{
 						label: 'Item 1',
@@ -250,7 +301,7 @@ describe('SearchListField.vue', () => {
 			},
 		})
 
-		const listItem = wrapper.find('.vd-search-list .v-list-item')
+		const listItem = wrapper.find('[data-test-id="suggestions-list"] input')
 		listItem.trigger('click')
 		await wrapper.vm.$nextTick()
 
@@ -260,7 +311,11 @@ describe('SearchListField.vue', () => {
 
 	it('renders the password field without outlined prop', () => {
 		const wrapper = mount(SearchListField, {
-			propsData: {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				label: 'Filtrer la liste des Items',
 				items: [
 					{
 						label: 'Item 1',
@@ -292,14 +347,18 @@ describe('SearchListField.vue', () => {
 			]
 
 			const wrapper = mount(SearchListField, {
-				propsData: {
+				global: {
+					plugins: [vuetify],
+				},
+				props: {
+					label: 'Filtrer la liste des Items',
 					items,
 					modelValue: [],
 					returnObject: false,
 				},
 			})
 
-			wrapper.vm.toggleSelection(items[0])
+			wrapper.find('input[type="checkbox"]').trigger('click')
 			await wrapper.vm.$nextTick()
 
 			const emittedEvents = wrapper.emitted('update:modelValue')
@@ -320,14 +379,18 @@ describe('SearchListField.vue', () => {
 			]
 
 			const wrapper = mount(SearchListField, {
-				propsData: {
+				global: {
+					plugins: [vuetify],
+				},
+				props: {
+					label: 'Filtrer la liste des Items',
 					items,
 					modelValue: [],
 					returnObject: true,
 				},
 			})
 
-			wrapper.vm.toggleSelection(items[0])
+			wrapper.find('input[type="checkbox"]').trigger('click')
 			await wrapper.vm.$nextTick()
 
 			const emittedEvents = wrapper.emitted('update:modelValue')
@@ -348,15 +411,18 @@ describe('SearchListField.vue', () => {
 			]
 
 			const wrapper = mount(SearchListField, {
-				propsData: {
+				global: {
+					plugins: [vuetify],
+				},
+				props: {
+					label: 'Filtrer la liste des Items',
 					items,
 					modelValue: [],
 					returnObject: true,
 				},
 			})
 
-			// Select first item
-			wrapper.vm.toggleSelection(items[0])
+			wrapper.find('input[type="checkbox"]').trigger('click')
 			await wrapper.vm.$nextTick()
 
 			const emittedEvents = wrapper.emitted('update:modelValue')
@@ -368,7 +434,7 @@ describe('SearchListField.vue', () => {
 			await wrapper.vm.$nextTick()
 
 			// Deselect first item
-			wrapper.vm.toggleSelection(items[0])
+			wrapper.find('input[type="checkbox"]').trigger('click')
 			await wrapper.vm.$nextTick()
 
 			expect(emittedEvents![1]).toEqual([[]])

package/src/components/SyAlert/SyAlert.vue

@@ -10,6 +10,9 @@
 	} from '@mdi/js'
 	import type { VIcon } from 'vuetify/components'
 
+	defineOptions({
+		inheritAttrs: false,
+	})
 	const show = defineModel<boolean>({
 		default: true,
 	})
@@ -60,6 +63,7 @@
 	>
 		<VAlert
 			v-model="show"
+			:role="undefined"
 			v-bind="attrs"
 			:type="props.type"
 			:closable="props.closable"
@@ -117,6 +121,10 @@
 @use '@/assets/tokens';
 @use 'sass:map';
 
+.sy-alert {
+	display: contents;
+}
+
 .alert {
 	padding: tokens.$padding-4;
 }

package/src/components/SyAlert/tests/SyAlert.spec.ts

@@ -16,7 +16,7 @@ describe('Alert', () => {
 			},
 		})
 
-		expect(wrapper.html()).toMatchSnapshot()
+		expect(wrapper.classes()).toContain('sy-alert')
 	})
 
 	it('show and hide correctly when modelValue is updated', async () => {
@@ -38,17 +38,6 @@ describe('Alert', () => {
 			modelValue: false,
 		})
 
-		expect(wrapper.html()).toMatchInlineSnapshot(`
-			<div
-			  class="sy-alert"
-			  message="message"
-			  role="alert"
-			  title="title"
-			>
-			  <!---->
-			</div>
-		`)
-
 		await wrapper.setProps({
 			modelValue: true,
 		})
@@ -77,16 +66,6 @@ describe('Alert', () => {
 
 		await closeBtn.element.click()
 
-		expect(wrapper.html()).toMatchInlineSnapshot(`
-			<div
-			  class="sy-alert"
-			  message="message"
-			  role="alert"
-			  title="title"
-			>
-			  <!---->
-			</div>
-		`)
 		expect(wrapper.emitted('update:modelValue')![0]![0]).toBe(false)
 	})
 

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

@@ -162,6 +162,14 @@ const meta = {
 				type: { summary: 'boolean' },
 			},
 		},
+		showSelectSingle: {
+			description: 'Affiche des cases à cocher pour sélectionner une seule ligne à la fois',
+			control: { type: 'boolean' },
+			table: {
+				category: 'props',
+				type: { summary: 'boolean' },
+			},
+		},
 		selectionKey: {
 			description: 'Clé utilisée pour identifier chaque ligne lors de la sélection. Par défaut, utilise "id" si présent, sinon l\'objet complet.',
 			control: { type: 'text' },
@@ -4246,6 +4254,7 @@ export const RowSelection: Story = {
     :items="users"
     :server-items-length="totalUsers"
     :loading="state === StateEnum.PENDING"
+    show-select
     suffix="selection-server-table"
     @update:options="fetchData"
   />
@@ -4526,6 +4535,301 @@ fetchData()
 	},
 }
 
+export const SingleRowSelection: Story = {
+	name: 'Single Row Selection',
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+  <SyServerTable
+    v-model:options="options"
+    v-model="selection"
+    :items="users"
+    :server-items-length="totalUsers"
+    :loading="state === StateEnum.PENDING"
+    show-select-single
+    suffix="selection-server-table"
+    @update:options="fetchData"
+  />
+  <div v-if="selection.length" class="mt-4 pa-4 bg-grey-lighten-4">
+    <h3 class="text-h6 mb-3">Item(s) sélectionné(s) ({{ selection.length }})</h3>
+    <div v-for="(item, index) in selection" :key="index" class="mb-2 pa-2 bg-grey-lighten-3">
+      <div><strong>Nom:</strong> {{ typeof item === 'object' ? item.lastname : allUsers.find(i => JSON.stringify(i) === item)?.lastname }}</div>
+      <div><strong>Prénom:</strong> {{ typeof item === 'object' ? item.firstname : allUsers.find(i => JSON.stringify(i) === item)?.firstname }}</div>
+      <div><strong>Email:</strong> {{ typeof item === 'object' ? item.email : allUsers.find(i => JSON.stringify(i) === item)?.email }}</div>
+    </div>
+  </div>
+</template>
+      `,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { ref } from 'vue'
+import { SyServerTable } from '@cnamts/synapse'
+import { StateEnum } from '@cnamts/synapse/src/components/Tables/common/constants/StateEnum'
+import type { DataOptions } from '@cnamts/synapse/src/components/Tables/common/types'
+
+interface User {
+  firstname: string
+  lastname: string
+  email: string
+}
+
+interface DataObj {
+  items: User[]
+  total: number
+}
+
+const selection = ref([])
+const totalUsers = ref(0)
+const users = ref<User[]>([])
+const state = ref(StateEnum.IDLE)
+
+const getUsers = (): User[] => [
+  { 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' },
+]
+
+const allUsers = ref<User[]>(getUsers())
+
+const fetchData = async (): Promise<void> => {
+  const defaultOptions: DataOptions = {
+    page: 1,
+    itemsPerPage: 10,
+    sortBy: [],
+    multiSort: false,
+  }
+  const options = args.options ? { ...defaultOptions, ...args.options } : defaultOptions
+  const { items, total } = await getDataFromApi(options)
+  users.value = items
+  totalUsers.value = total
+}
+
+const wait = async (ms: number) => {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+const getDataFromApi = async ({ sortBy, page, itemsPerPage, filters }: DataOptions): Promise<DataObj> => {
+  state.value = StateEnum.PENDING
+  await wait(1000)
+  return new Promise((resolve) => {
+    let items: User[] = getUsers()
+    let total = items.length
+    // Ajout du filtrage si besoin
+    if (filters && filters.length > 0) {
+      filters.forEach((filter) => {
+        // Ajoutez ici la logique de filtrage
+      })
+      total = items.length
+    }
+    if (sortBy && sortBy.length > 0) {
+      items = items.sort((a, b) => {
+        // Ajoutez ici la logique de tri
+        return 0
+      })
+    }
+    if (itemsPerPage > 0) {
+      items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
+    }
+    resolve({ items, total })
+    state.value = StateEnum.RESOLVED
+  })
+}
+
+// Chargement initial
+fetchData()
+</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',
+			},
+		],
+		'options': {
+			itemsPerPage: 4,
+			page: 1,
+			filters: [],
+		},
+		'caption': '',
+		'suffix': 'selection-server-table',
+		'density': 'default',
+		'striped': false,
+		'showSelectSingle': true,
+		'showFilters': true,
+		'serverItemsLength': 6,
+		'onUpdate:options': fn(),
+	},
+	render(args) {
+		return {
+			components: { SyServerTable },
+			setup() {
+				const totalUsers = ref(0)
+				const users = ref<User[]>([])
+				const selection = ref([])
+				const state = ref(StateEnum.IDLE)
+
+				const fetchData = async (): Promise<void> => {
+					// Create a complete DataOptions object with all required properties
+					const defaultOptions: DataOptions = {
+						page: 1,
+						itemsPerPage: 10,
+						sortBy: [],
+						multiSort: false,
+					}
+					const options = args.options ? { ...defaultOptions, ...args.options } : defaultOptions
+					const { items, total } = await getDataFromApi(options)
+					users.value = items
+					totalUsers.value = total
+				}
+
+				const wait = async (ms: number) => {
+					return new Promise(resolve => setTimeout(resolve, ms))
+				}
+
+				const getDataFromApi = async ({ sortBy, page, itemsPerPage, filters }: DataOptions): Promise<DataObj> => {
+					state.value = StateEnum.PENDING
+					await wait(1000)
+
+					return new Promise((resolve) => {
+						let items: User[] = getUsers()
+						let total = items.length // Changed from const to let
+
+						// Add filtering logic here
+						if (filters && filters.length > 0) {
+							filters.forEach((filter) => {
+								const { key, value } = filter
+
+								items = items.filter((item) => {
+									const itemValue = item[key]
+									return String(itemValue).toLowerCase().includes(String(value).toLowerCase())
+								})
+							})
+							// Update total after filtering
+							total = items.length
+						}
+
+						if (sortBy && sortBy.length > 0) {
+							items = items.sort((a, b) => {
+								const key = sortBy[0].key
+								const order = sortBy[0].order === 'asc' ? 1 : -1
+
+								return a[key] > b[key] ? order : -order
+							})
+						}
+
+						if (itemsPerPage > 0) {
+							items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
+						}
+
+						resolve({ items, total })
+						state.value = StateEnum.RESOLVED
+					})
+				}
+
+				const getUsers = (): User[] => {
+					return [
+						{ 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: 'Louis', lastname: 'Denis', email: 'louis.denis@example.com' },
+						{ firstname: 'Édith', lastname: 'Cartier', email: 'edith.cartier@example.com' },
+						{ firstname: 'Alphonse', lastname: 'Bouvier', email: 'alphonse.bouvier@example.com' },
+						{ firstname: 'Eustache', lastname: 'Dubois', email: 'eustache.dubois@example.com' },
+						{ firstname: 'Rosemarie', lastname: 'Quessy', email: 'rosemarie.quessy@example.com' },
+						{ firstname: 'Serge', lastname: 'Rivard', email: 'serge.rivard@example.com' },
+					]
+				}
+
+				// Keep a full copy of all users for selection display across pages
+				const allUsers = ref<User[]>(getUsers())
+
+				// Call fetchData on mount
+				fetchData()
+
+				return { args, users, allUsers, state, fetchData, totalUsers, selection, StateEnum }
+			},
+			template: `
+				<div>
+					<SyServerTable
+						v-bind="args"
+						v-model:options="args.options"
+						v-model="selection"
+						:items="users"
+						:server-items-length="totalUsers"
+						:loading="state === StateEnum.PENDING"
+						suffix="selection-server-table"
+						@update:options="fetchData"
+					/>
+					<div v-if="selection.length" class="mt-4 pa-4 bg-grey-lighten-4">
+						<h3 class="text-h6 mb-3">Item(s) sélectionné(s) ({{ selection.length }})</h3>
+						<div v-for="(item, index) in selection" :key="index" class="mb-2 pa-2 bg-grey-lighten-3">
+							<div><strong>Nom:</strong> {{ typeof item === 'object' ? item.lastname : allUsers.find(i => JSON.stringify(i) === item)?.lastname }}</div>
+							<div><strong>Prénom:</strong> {{ typeof item === 'object' ? item.firstname : allUsers.find(i => JSON.stringify(i) === item)?.firstname }}</div>
+							<div><strong>Email:</strong> {{ typeof item === 'object' ? item.email : allUsers.find(i => JSON.stringify(i) === item)?.email }}</div>
+						</div>
+					</div>
+				</div>
+			`,
+		}
+	},
+}
+
 export const ColumnControls: StoryObj<typeof SyServerTable> = {
 	parameters: {
 		sourceCode: [

package/src/components/Tables/SyServerTable/SyServerTable.vue

@@ -31,6 +31,7 @@
 		density: 'default',
 		striped: false,
 		showSelect: false,
+		showSelectSingle: false,
 		multiSort: false,
 		mustSort: false,
 		itemsPerPageOptions: undefined,
@@ -202,7 +203,13 @@
 		items: tableItems,
 		modelValue: model,
 		updateModelValue: (value) => {
-			model.value = value
+			if (props.showSelectSingle && Array.isArray(value)) {
+				// In single-select mode, always keep at most one selected value
+				model.value = value.length > 0 ? [value[0]] : []
+			}
+			else {
+				model.value = value
+			}
 		},
 		selectionKey: toRef(props, 'selectionKey'),
 	})
@@ -276,7 +283,8 @@
 			:items="processItems(displayedItems)"
 			:items-length="displayedItemsLength || 0"
 			:density="props.density"
-			:show-select="props.showSelect"
+			:show-select="props.showSelect || props.showSelectSingle"
+			:select-strategy="props.showSelectSingle ? 'single' : 'page'"
 			:item-selectable="(item) => true"
 			:item-value="getItemValue"
 			:multi-sort="props.multiSort"
@@ -308,7 +316,7 @@
 									...(getHeaderForColumn(column)?.width ? { width: getHeaderForColumn(column)?.width as any } : {}),
 								}"
 							>
-								<template v-if="column.key === 'data-table-select' && props.showSelect">
+								<template v-if="column.key === 'data-table-select' && props.showSelect && !props.showSelectSingle">
 									<SyCheckbox
 										:model-value="slotProps.allSelected"
 										:indeterminate="slotProps.someSelected && !slotProps.allSelected"
@@ -341,7 +349,7 @@
 						v-if="props.showFilters"
 						class="filters"
 					>
-						<th v-if="props.showSelect" />
+						<th v-if="props.showSelect || props.showSelectSingle" />
 						<template
 							v-for="column in slotProps.columns.filter(c => c.key !== 'data-table-select')"
 							:key="column.key"