@cnamts/synapse 1.0.13 → 1.0.15

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

@@ -660,6 +660,73 @@ describe('SyServerTable', () => {
 			const dataTable = wrapper.findComponent({ name: 'VDataTableServer' })
 			expect(dataTable.props('showSelect')).toBe(true)
 		})
+
+		it('hides header checkbox when showSelectSingle is true', () => {
+			const wrapper = mount(SyServerTable, {
+				props: {
+					headers,
+					items: fakeItems,
+					serverItemsLength: fakeItems.length,
+					showSelectSingle: true,
+					suffix: 'single-select',
+				},
+			})
+
+			const dataTable = wrapper.findComponent({ name: 'VDataTableServer' })
+			expect(dataTable.exists()).toBe(true)
+
+			// show-select is enabled
+			expect(dataTable.props('showSelect')).toBe(true)
+
+			// In single-select mode, the header "select all" checkbox should not be rendered
+			const headerCheckbox = wrapper.find('th.checkbox-column .v-selection-control input[type="checkbox"]')
+			expect(headerCheckbox.exists()).toBe(false)
+		})
+
+		it('shows header checkbox when showSelect is true and showSelectSingle is false', () => {
+			const wrapper = mount(SyServerTable, {
+				props: {
+					headers,
+					items: fakeItems,
+					serverItemsLength: fakeItems.length,
+					showSelect: true,
+					showSelectSingle: false,
+					suffix: 'multi-select',
+				},
+			})
+
+			const dataTable = wrapper.findComponent({ name: 'VDataTableServer' })
+			expect(dataTable.exists()).toBe(true)
+
+			// Multi-select mode
+			expect(dataTable.props('showSelect')).toBe(true)
+
+			// Header "select all" checkbox should be present
+			const headerCheckbox = wrapper.find('th.checkbox-column .v-selection-control input[type="checkbox"]')
+			expect(headerCheckbox.exists()).toBe(true)
+		})
+	})
+
+	it('properly binds the v-model for single selection', async () => {
+		const selectedItems = [fakeItems[0].id]
+		const wrapper = mount(SyServerTable, {
+			props: {
+				headers,
+				items: fakeItems,
+				serverItemsLength: fakeItems.length,
+				showSelect: false,
+				showSelectSingle: true,
+				modelValue: selectedItems,
+				suffix: 'single-select',
+			},
+		})
+
+		// select the second item
+		await wrapper.setProps({ modelValue: [fakeItems[1].id] })
+
+		// Check that the VDataTable has the correct model value
+		const dataTable = wrapper.findComponent({ name: 'VDataTableServer' })
+		expect(dataTable.props('modelValue')).toEqual([2])
 	})
 
 	describe('SyServerTable Checkbox selectionKey', () => {

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

@@ -148,6 +148,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' },
@@ -2877,6 +2885,184 @@ export const RowSelection: Story = {
 	},
 }
 
+export const SingleRowSelection: Story = {
+	name: 'Single Row Selection',
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyTable
+						v-model:options="options"
+						v-model="selection"
+						:headers="headers"
+						:items="items"
+						show-select-single
+						show-filters
+						suffix="selection-table"
+					/>
+					<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 : items.find(i => JSON.stringify(i) === item)?.lastname }}</div>
+							<div><strong>Prénom:</strong> {{ typeof item === 'object' ? item.firstname : items.find(i => JSON.stringify(i) === item)?.firstname }}</div>
+							<div><strong>Email:</strong> {{ typeof item === 'object' ? item.email : items.find(i => JSON.stringify(i) === item)?.email }}</div>
+						</div>
+					</div>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { SyTable } from '@cnamts/synapse'
+					
+					const options = ref({
+						itemsPerPage: 4,
+					})
+					
+					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'
+						}
+					])
+				</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,
+		},
+		caption: '',
+		suffix: 'selection-table',
+		density: 'default',
+		striped: false,
+		showSelectSingle: true,
+		showFilters: true,
+	},
+	render(args) {
+		return {
+			components: { SyTable },
+			setup() {
+				const items = ref(args.items)
+				const selection = ref([])
+				return { args, selection, items }
+			},
+			template: `
+				<div>
+					<SyTable
+						v-model:options="args.options"
+						v-model="selection"
+						v-bind="args"
+						suffix="selection-table"
+					/>
+					<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 : args.items.find(i => JSON.stringify(i) === item)?.lastname }}</div>
+							<div><strong>Prénom:</strong> {{ typeof item === 'object' ? item.firstname : args.items.find(i => JSON.stringify(i) === item)?.firstname }}</div>
+							<div><strong>Email:</strong> {{ typeof item === 'object' ? item.email : args.items.find(i => JSON.stringify(i) === item)?.email }}</div>
+						</div>
+					</div>
+				</div>
+			`,
+		}
+	},
+}
+
 export const ColumnControls: Story = {
 	parameters: {
 		sourceCode: [

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

@@ -30,6 +30,7 @@
 		density: 'default',
 		striped: false,
 		showSelect: false,
+		showSelectSingle: false,
 		multiSort: false,
 		mustSort: false,
 		itemsPerPageOptions: undefined,
@@ -123,7 +124,13 @@
 		items: filteredItems,
 		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'),
 	})
@@ -240,7 +247,8 @@
 			v-bind="propsFacade"
 			:items="processItems(filteredItems)"
 			: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"
@@ -272,7 +280,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"
@@ -305,7 +313,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"

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

@@ -435,7 +435,71 @@ describe('SyTable', () => {
 		expect(dataTable.props('showSelect')).toBe(true)
 	})
 
-	it('shoulds hide a column when hideColumn is called', async () => {
+	it('hides header checkbox when showSelectSingle is true', () => {
+		const wrapper = mount(SyTable, {
+			props: {
+				headers,
+				items: fakeItems,
+				showSelectSingle: true,
+				suffix: 'single-select',
+			},
+		})
+
+		const dataTable = wrapper.findComponent({ name: 'VDataTable' })
+		expect(dataTable.exists()).toBe(true)
+
+		// show-select is enabled
+		expect(dataTable.props('showSelect')).toBe(true)
+
+		// In single-select mode, the header "select all" checkbox should not be rendered
+		const headerCheckbox = wrapper.find('th.checkbox-column .v-selection-control input[type="checkbox"]')
+		expect(headerCheckbox.exists()).toBe(false)
+	})
+
+	it('shows header checkbox when showSelect is true and showSelectSingle is false', () => {
+		const wrapper = mount(SyTable, {
+			props: {
+				headers,
+				items: fakeItems,
+				showSelect: true,
+				showSelectSingle: false,
+				suffix: 'multi-select',
+			},
+		})
+
+		const dataTable = wrapper.findComponent({ name: 'VDataTable' })
+		expect(dataTable.exists()).toBe(true)
+
+		// Multi-select mode keeps page strategy
+		expect(dataTable.props('showSelect')).toBe(true)
+
+		// Header "select all" checkbox should be present
+		const headerCheckbox = wrapper.find('th.checkbox-column .v-selection-control input[type="checkbox"]')
+		expect(headerCheckbox.exists()).toBe(true)
+	})
+
+	it('properly binds the v-model for single selection', async () => {
+		const selectedItems = [fakeItems[0].id]
+		const wrapper = mount(SyTable, {
+			props: {
+				headers,
+				items: fakeItems,
+				showSelect: false,
+				showSelectSingle: true,
+				modelValue: selectedItems,
+				suffix: 'single-select',
+			},
+		})
+
+		// select the second item
+		await wrapper.setProps({ modelValue: [fakeItems[1].id] })
+
+		// Check that the VDataTable has the correct model value
+		const dataTable = wrapper.findComponent({ name: 'VDataTable' })
+		expect(dataTable.props('modelValue')).toEqual([2])
+	})
+
+	it('should hide a column when hideColumn is called', async () => {
 		// Create a mock for OrganizeColumns component
 		const mockOrganizeColumns = {
 			name: 'OrganizeColumns',

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

@@ -90,6 +90,7 @@ export type SyTableProps = {
 	enableColumnControls?: boolean
 	headers?: DataTableHeaders[]
 	showSelect?: boolean
+	showSelectSingle?: boolean
 	showExpand?: boolean
 	selectionKey?: string
 	multiSort?: boolean
@@ -111,6 +112,7 @@ export type SyServerTableProps = {
 	enableColumnControls?: boolean
 	headers?: DataTableHeaders[]
 	showSelect?: boolean
+	showSelectSingle?: boolean
 	showExpand?: boolean
 	selectionKey?: string
 	multiSort?: boolean

package/src/composables/rules/useFieldValidation.ts

@@ -171,7 +171,15 @@ export function useFieldValidation() {
 					)
 
 				case 'notWeekend': {
-					const dateValue = new Date(value)
+					if (value === null || value === undefined || value === '') {
+						return {}
+					}
+
+					const dateValue = parseDate(value)
+					if (!dateValue) {
+						return { error: 'Date invalide' }
+					}
+
 					return createValidationResult(
 						!(dateValue.getDay() === 0 || dateValue.getDay() === 6),
 						options.message || options.warningMessage || `${identifier} ne peut pas être un jour de weekend.`,
@@ -179,7 +187,15 @@ export function useFieldValidation() {
 				}
 
 				case 'notBeforeToday': {
-					const dateValue = new Date(value)
+					if (value === null || value === undefined || value === '') {
+						return {}
+					}
+
+					const dateValue = parseDate(value)
+					if (!dateValue) {
+						return { error: 'Date invalide' }
+					}
+
 					// Réinitialiser l'heure à minuit pour ne comparer que les dates
 					dateValue.setHours(0, 0, 0, 0)
 
@@ -194,7 +210,15 @@ export function useFieldValidation() {
 				}
 
 				case 'notAfterToday': {
-					const dateValue = new Date(value)
+					if (value === null || value === undefined || value === '') {
+						return {}
+					}
+
+					const dateValue = parseDate(value)
+					if (!dateValue) {
+						return { error: 'Date invalide' }
+					}
+
 					// Réinitialiser l'heure à minuit pour ne comparer que les dates
 					dateValue.setHours(0, 0, 0, 0)
 
@@ -209,13 +233,16 @@ export function useFieldValidation() {
 				}
 
 				case 'notBeforeDate': {
-					if (!options.date) {
+					if (typeof options.date === 'undefined') {
 						return { error: 'Configuration de la règle invalide' }
 					}
 					// Si la valeur est null ou vide, ne pas valider (champ vide autorisé)
 					if (value === null || value === undefined || value === '') {
 						return {}
 					}
+					if (options.date === null || (typeof options.date === 'string' && options.date.trim() === '')) {
+						return {}
+					}
 					const dateValue = parseDate(value)
 					if (!dateValue) {
 						return { error: 'Date invalide' }
@@ -242,13 +269,16 @@ export function useFieldValidation() {
 				}
 
 				case 'notAfterDate': {
-					if (!options.date) {
+					if (typeof options.date === 'undefined') {
 						return { error: 'Configuration de la règle invalide' }
 					}
 					// Si la valeur est null ou vide, ne pas valider (champ vide autorisé)
 					if (value === null || value === undefined || value === '') {
 						return {}
 					}
+					if (options.date === null || (typeof options.date === 'string' && options.date.trim() === '')) {
+						return {}
+					}
 					const dateValue = parseDate(value)
 					if (!dateValue) {
 						return { error: 'Date invalide' }
@@ -275,13 +305,16 @@ export function useFieldValidation() {
 				}
 
 				case 'dateExact': {
-					if (!options.date) {
+					if (typeof options.date === 'undefined') {
 						return { error: 'Configuration de la règle invalide' }
 					}
 					// Si la valeur est null ou vide, ne pas valider (champ vide autorisé)
 					if (value === null || value === undefined || value === '') {
 						return {}
 					}
+					if (options.date === null || (typeof options.date === 'string' && options.date.trim() === '')) {
+						return {}
+					}
 					const dateValue = parseDate(value)
 					if (!dateValue) {
 						return { error: 'Date invalide' }
@@ -313,7 +346,14 @@ export function useFieldValidation() {
 
 				case 'isHolidayDay': {
 					const { isHolidayDay } = useHolidayDay()
-					const dateValue = new Date(value)
+					if (value === null || value === undefined || value === '') {
+						return {}
+					}
+
+					const dateValue = parseDate(value)
+					if (!dateValue) {
+						return { error: 'Date invalide' }
+					}
 
 					return createValidationResult(
 						!isHolidayDay(dateValue),

package/src/components/Amelipro/AmeliproHeader/AmeliproHeaderBar/AmeliproLogoAm/tests/AmeliproLogoAm.spec.ts

@@ -1,15 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { expect, describe, it } from 'vitest'
-import AmeliproLogoAm from '../AmeliproLogoAm.vue'
-
-describe('AmeliproLogoAm', () => {
-	it('render correctly', async () => {
-		const wrapper = mount(AmeliproLogoAm, {
-			props: {
-				uniqueId: 'amelipro-logo-id',
-			},
-		})
-
-		expect(wrapper.html()).toMatchSnapshot()
-	})
-})

package/src/components/Amelipro/AmeliproIcon/tests/AmeliproIcon.spec.ts

@@ -1,19 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { expect, describe, it } from 'vitest'
-import AmeliproIcon from '../AmeliproIcon.vue'
-
-describe('AmeliproIcon', () => {
-	it('render correctly', async () => {
-		const wrapper = mount(AmeliproIcon, {
-			props: {
-				icon: 'utilisateur',
-				iconBgColor: 'ap-blue-darken-1',
-				iconColor: 'ap-white',
-				uniqueId: 'amelipro-icon-id',
-				xLarge: true,
-			},
-		})
-
-		expect(wrapper.html()).toMatchSnapshot()
-	})
-})

package/src/components/Amelipro/AmeliproIconBtn/tests/AmeliproIconBtn.spec.ts

@@ -1,22 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { expect, describe, it } from 'vitest'
-import AmeliproIconBtn from '../AmeliproIconBtn.vue'
-
-describe('AmeliproIconBtn', () => {
-	it('render correctly', async () => {
-		const wrapper = mount(AmeliproIconBtn, {
-			props: {
-				btnLabel: 'Libellé du bouton',
-				icon: 'utilisateur',
-				iconBgColor: 'ap-blue-darken-1',
-				iconColor: 'ap-white',
-				iconHoverBgColor: 'ap-blue-darken-2',
-				iconHoverColor: 'ap-white',
-				uniqueId: 'amelipro-icon-id',
-				xLarge: true,
-			},
-		})
-
-		expect(wrapper.html()).toMatchSnapshot()
-	})
-})

package/src/components/Amelipro/AmeliproIconBtn/tests/__snapshots__/AmeliproIconBtn.spec.ts.snap

@@ -1,87 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`AmeliproIconBtn > render correctly 1`] = `
-<button
-  class="
-    btn--icon
-    elevation-0
-    rounded-0
-    v-btn
-    v-btn--density-default
-    v-btn--elevated
-    v-btn--icon
-    v-btn--size-default
-    v-btn--variant-elevated
-    v-theme--light
-  "
-  id="amelipro-icon-id"
-  plain=""
-  style="
-    height: auto;
-    width: auto;
-  "
-  type="button"
->
-  <span class="v-btn__overlay"></span>
-  <span class="v-btn__underlay"></span>
-  <!---->
-  <span
-    class="v-btn__content"
-    data-no-activator=""
-  >
-    <span
-      class="d-sr-only"
-      id="amelipro-icon-id-btn-label"
-    >
-      Libellé du bouton
-    </span>
-    <span
-      class="
-        amelipro-icon
-        icon-custom
-      "
-      id="amelipro-icon-id-icon"
-    >
-      <span
-        aria-hidden="true"
-        class="
-          amelipro-custom-icon
-          custom-color
-          x-large
-        "
-        focusable="false"
-        role="img"
-        style="color: #FFFFFF;"
-      >
-        <span>
-          <svg
-            aria-hidden="true"
-            clip-rule="evenodd"
-            fill-rule="evenodd"
-            height="34"
-            image-rendering="optimizeQuality"
-            shape-rendering="geometricPrecision"
-            text-rendering="geometricPrecision"
-            viewBox="0 0 1823 1823"
-            width="34"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <circle
-              class="circle-color"
-              cx="912"
-              cy="912"
-              r="912"
-            />
-            <path
-              class="shape-color"
-              d="M962 454c117 0 125 154 125 154v145s1 111-73 152c-2 10-3 20-1 30 4-2-21 146 106 165 92 15 178 57 247 120 23 23 40 186 40 186H418s-2-132 40-186c73-62 162-104 257-120 128-19 85-160 89-158 2-10 1-21-1-31 0 0-69-89-68-169 1-81 0-134 0-134s-4-190 126-190l101 36z"
-            />
-          </svg>
-        </span>
-      </span>
-    </span>
-  </span>
-  <!---->
-  <!---->
-</button>
-`;