@cnamts/synapse 1.0.14 → 1.0.16

package/src/components/LunarCalendar/LunarCalendar.stories.ts

@@ -0,0 +1,232 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import LunarCalendar from './LunarCalendar.vue'
+
+const meta = {
+	title: 'Composants/Formulaires/LunarCalendar',
+	component: LunarCalendar,
+	argTypes: {
+		modelValue: {
+			description: 'La valeur du calendrier lunaire au format DD/MM/YYYY',
+			control: { type: 'text' },
+			table: {
+				type: { summary: 'string' },
+				category: 'props',
+			},
+		},
+		successMessages: {
+			description: 'Messages de succès à afficher sous le champ',
+			control: { type: 'text' },
+		},
+		minYear: {
+			description: 'Année minimale autorisée',
+			control: { type: 'number' },
+		},
+		maxYear: {
+			description: 'Année maximale autorisée',
+			control: { type: 'number' },
+		},
+		required: {
+			description: 'Indique si le champ est requis',
+			control: { type: 'boolean' },
+		},
+		placeholder: {
+			description: 'Texte affiché lorsque le champ est vide',
+			control: { type: 'text' },
+		},
+		isClearable: {
+			description: 'Indique si le champ peut être effacé',
+			control: { type: 'boolean' },
+		},
+		displayPrependIcon: {
+			description: 'Affiche une icône au début du champ',
+			control: { type: 'boolean' },
+		},
+		displayAppendIcon: {
+			description: 'Affiche une icône à la fin du champ',
+			control: { type: 'boolean' },
+		},
+	},
+	args: {
+		label: 'Date de naissance',
+		modelValue: '',
+	},
+} satisfies Meta<typeof LunarCalendar>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		modelValue: '',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<LunarCalendar
+						label="Date de naissance"
+						v-model="dateValue"
+					/>
+				</template>
+
+				<script setup lang="ts">
+				import { ref } from 'vue'
+
+				const dateValue = ref('')
+				</script>
+				`,
+			},
+		],
+	},
+}
+
+export const WithYearConstraints: Story = {
+	args: {
+		modelValue: '16/08/1550',
+		minYear: 1400,
+		maxYear: 1500,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<LunarCalendar
+						label="Date de naissance"
+						v-model="dateValue"
+						:min-year="1400"
+						:max-year="1500"
+					/>
+				</template>
+
+				<script setup lang="ts">
+				import { ref } from 'vue'
+
+				const dateValue = ref('16/08/1550')
+				</script>
+				`,
+			},
+		],
+	},
+}
+
+export const WithMinYearOnly: Story = {
+	args: {
+		modelValue: '12/12/1445',
+		minYear: 1420,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<LunarCalendar
+						label="Date de naissance"
+						v-model="dateValue"
+						:min-year="1420"
+					/>
+				</template>
+
+				<script setup lang="ts">
+				import { ref } from 'vue'
+
+				const dateValue = ref('12/12/1445')
+				</script>
+				`,
+			},
+		],
+	},
+}
+
+export const WithMaxYearOnly: Story = {
+	args: {
+		modelValue: '12/12/1445',
+		maxYear: 1450,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<LunarCalendar
+						label="Date de naissance"
+						v-model="dateValue"
+						:max-year="1450"
+					/>
+				</template>
+
+				<script setup lang="ts">
+				import { ref } from 'vue'
+
+				const dateValue = ref('12/12/1445')
+				</script>
+				`,
+			},
+		],
+	},
+}
+
+export const required: Story = {
+	args: {
+		modelValue: '',
+		required: true,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<LunarCalendar
+						label="Date de naissance"
+						v-model="dateValue"
+						required
+					/>
+				</template>
+
+				<script setup lang="ts">
+				import { ref } from 'vue'
+
+				const dateValue = ref('')
+				</script>
+				`,
+			},
+		],
+	},
+}
+
+export const WithClearable: Story = {
+	args: {
+		modelValue: '12/13/1564',
+		placeholder: '21/13/1442',
+		isClearable: true,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<LunarCalendar
+						label="Date de naissance"
+						v-model="dateValue"
+						:placeholder="'21/13/1442'"
+						:is-clearable="true"
+					/>
+				</template>
+
+				<script setup lang="ts">
+				import { ref } from 'vue'
+
+				const dateValue = ref('12/13/1564')
+				</script>
+				`,
+			},
+		],
+	},
+}

package/src/components/LunarCalendar/LunarCalendar.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+	import { vMaska } from 'maska/vue'
+	import { computed } from 'vue'
+	import SyTextField from '../Customs/SyTextField/SyTextField.vue'
+	import { useLunarCalendarValidation } from './useLunarCalendarValidation'
+
+	const model = defineModel<string>()
+	const mask = '##/##/####'
+
+	const props = withDefaults(defineProps<{
+		label: string
+		successMessages?: string
+		required?: boolean
+		maxYear?: number
+		minYear?: number
+		placeholder?: string
+		isClearable?: boolean
+		displayPrependIcon?: boolean
+		displayAppendIcon?: boolean
+	}>(), {
+		successMessages: undefined,
+		required: false,
+		maxYear: undefined,
+		minYear: undefined,
+		placeholder: undefined,
+		isClearable: false,
+		displayAppendIcon: false,
+		displayPrependIcon: true,
+	})
+
+	const validation = useLunarCalendarValidation(
+		computed(() => model.value),
+		computed(() => props.label),
+		computed(() => props.successMessages),
+		computed(() => props.required),
+		computed(() => props.minYear),
+		computed(() => props.maxYear),
+	)
+
+</script>
+
+<template>
+	<SyTextField
+		v-model="model"
+		v-maska="mask"
+		:label="props.label"
+		:error-messages="validation.errors.value"
+		:show-success-messages="props.successMessages !== undefined"
+		:success-messages="validation.successes.value"
+		:has-success="validation.successes.value.length > 0"
+		:placeholder
+		:is-clearable
+		:append-icon="props.displayAppendIcon ? 'calendar' : undefined"
+		:prepend-icon="props.displayPrependIcon ? 'calendar' : undefined"
+		@blur="validation.validate()"
+	/>
+</template>

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

@@ -0,0 +1,79 @@
+import { describe, expect, it } from 'vitest'
+import LunarCalendar from '../LunarCalendar.vue'
+import { mount } from '@vue/test-utils'
+
+describe('LunarCalendar', () => {
+	it('renders correctly', () => {
+		const wrapper = mount(LunarCalendar, {
+			props: {
+				label: 'Date de naissance',
+				modelValue: '10/19/1995',
+			},
+		})
+
+		expect(wrapper.exists()).toBe(true)
+		expect(wrapper.html()).toContain('10/19/1995')
+	})
+
+	it('emits update:modelValue on date change', async () => {
+		const wrapper = mount(LunarCalendar, {
+			props: {
+				label: 'Date de naissance',
+				modelValue: '10/19/1995',
+			},
+		})
+
+		wrapper.find('input').setValue('11/20/1995')
+
+		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+		expect(wrapper.emitted('update:modelValue')![0]).toEqual(['11/20/1995'])
+	})
+
+	it('autoformats date input', async () => {
+		const wrapper = mount(LunarCalendar, {
+			props: {
+				label: 'Date de naissance',
+				modelValue: '',
+			},
+		})
+
+		const input = wrapper.find('input')
+		await input.setValue('11201995')
+
+		expect(input.element.value).toBe('11/20/1995')
+	})
+
+	describe('rules', () => {
+		it('validates minDate rule', async () => {
+			const wrapper = mount(LunarCalendar, {
+				props: {
+					modelValue: '10/19/1995',
+					minYear: 1996,
+					label: 'Date de naissance',
+				},
+			})
+
+			const input = wrapper.find('input')
+			await input.setValue('10/19/1995')
+			await input.trigger('blur')
+
+			expect(wrapper.html()).toContain('L\'année doit être supérieure ou égale à 1996.')
+		})
+
+		it('validates maxDate rule', async () => {
+			const wrapper = mount(LunarCalendar, {
+				props: {
+					label: 'Date de naissance',
+					modelValue: '10/19/1995',
+					maxYear: 1994,
+				},
+			})
+
+			const input = wrapper.find('input')
+			await input.setValue('10/19/1995')
+			await input.trigger('blur')
+
+			expect(wrapper.html()).toContain('L\'année doit être inférieure ou égale à 1994.')
+		})
+	})
+})

package/src/components/LunarCalendar/useLunarCalendarRules.ts

@@ -0,0 +1,96 @@
+import type { ValidationRule } from '@/composables/validation/useValidation'
+import { computed, toValue, type ComputedRef, type MaybeRefOrGetter } from 'vue'
+
+export function useLunarCalendarRules(
+	successMessage: MaybeRefOrGetter<string | undefined>,
+	required: MaybeRefOrGetter<boolean | undefined>,
+	minYear: MaybeRefOrGetter<number | undefined>,
+	maxYear: MaybeRefOrGetter<number | undefined>,
+): { rules: ComputedRef<ValidationRule[]> } {
+	const rules = computed(() => {
+		const rules: ValidationRule[] = []
+		if (toValue(required)) {
+			const requiredRule: ValidationRule = {
+				type: 'required',
+				options: {
+					message: 'Ce champ est requis.',
+					successMessage: toValue(successMessage),
+				},
+			}
+			rules.push(requiredRule)
+		}
+		rules.push({
+			type: 'custom',
+			options: {
+				validate: (value: string) => {
+					// Validate format DD/MM/YYYY
+					const regex = /^\d{2}\/\d{2}\/\d{4}$/
+					return regex.test(value)
+				},
+				message: 'La date est invalide.',
+				successMessage: toValue(successMessage),
+			},
+		})
+		if (toValue(minYear) && toValue(maxYear)) {
+			const rule: ValidationRule = {
+				type: 'custom',
+				options: {
+					validate: (value: string) => {
+						const year = getYearFromModel(value)
+						if (year === null) {
+							return true
+						}
+						return year >= toValue(minYear as number) && year <= toValue(maxYear as number)
+					},
+					message: `L'année doit être comprise entre ${toValue(minYear)} et ${toValue(maxYear)}.`,
+					successMessage: toValue(successMessage),
+				},
+			}
+			rules.push(rule)
+		}
+		else if (toValue(minYear)) {
+			const rule: ValidationRule = {
+				type: 'custom',
+				options: {
+					validate: (value: string) => {
+						const year = getYearFromModel(value)
+						if (year === null) {
+							return true
+						}
+						return year >= toValue(minYear as number)
+					},
+					message: `L'année doit être supérieure ou égale à ${toValue(minYear)}.`,
+					successMessage: toValue(successMessage),
+				},
+			}
+			rules.push(rule)
+		}
+		else if (toValue(maxYear)) {
+			const rule: ValidationRule = {
+				type: 'custom',
+				options: {
+					validate: (value: string) => {
+						const year = getYearFromModel(value)
+						if (year === null) {
+							return true
+						}
+						return year <= toValue(maxYear as number)
+					},
+					message: `L'année doit être inférieure ou égale à ${toValue(maxYear)}.`,
+					successMessage: toValue(successMessage),
+				},
+			}
+			rules.push(rule)
+		}
+		return rules
+	})
+	return { rules: rules }
+}
+
+function getYearFromModel(model: string): number | null {
+	const parts = model.split('/')
+	if (parts.length !== 3 || parts[2].length !== 4 || isNaN(Number(parts[2]))) {
+		return null
+	}
+	return Number(parts[2])
+}

package/src/components/LunarCalendar/useLunarCalendarValidation.ts

@@ -0,0 +1,47 @@
+import { useValidatable } from '@/composables/validation/useValidatable'
+import { useValidation } from '@/composables/validation/useValidation'
+import type { MaybeRefOrGetter } from 'vue'
+import { toValue, type ComputedRef } from 'vue'
+import { useLunarCalendarRules } from './useLunarCalendarRules'
+
+export function useLunarCalendarValidation(
+	modelValue: ComputedRef<string | undefined>,
+	label: MaybeRefOrGetter<string | undefined>,
+	successMessage: MaybeRefOrGetter<string | undefined>,
+	required: MaybeRefOrGetter<boolean | undefined>,
+	minYear: MaybeRefOrGetter<number | undefined>,
+	maxYear: MaybeRefOrGetter<number | undefined>,
+) {
+	const { rules } = useLunarCalendarRules(
+		successMessage,
+		required,
+		minYear,
+		maxYear,
+	)
+
+	const validation = useValidation({
+		customRules: rules.value,
+		showSuccessMessages: successMessage !== undefined,
+		fieldIdentifier: toValue(label),
+	})
+
+	function validateOnSubmit() {
+		const result = validation.validateField(
+			modelValue.value,
+			rules.value,
+		)
+
+		return !result.hasError
+	}
+
+	useValidatable(validateOnSubmit, validation.clearValidation)
+
+	function validate() {
+		return validation.validateField(
+			modelValue.value,
+			rules.value,
+		)
+	}
+
+	return { ...validation, validate }
+}

package/src/components/NotificationBar/NotificationBar.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
 	import { useNotificationService } from '@/services/NotificationService'
-	import { mdiAlertCircleOutline, mdiAlertOctagonOutline, mdiCheckCircleOutline, mdiClose, mdiInformationOutline } from '@mdi/js'
+	import { mdiAlertOutline, mdiAlertOctagonOutline, mdiCheckCircleOutline, mdiClose, mdiInformationOutline } from '@mdi/js'
 	import { computed, getCurrentInstance, onMounted, onUnmounted, ref, useAttrs, watch } from 'vue'
 	import { useDisplay } from 'vuetify'
 	import defaultOptions from './config'
@@ -45,7 +45,7 @@
 	const iconMapping: Record<string, string> = {
 		info: mdiInformationOutline,
 		success: mdiCheckCircleOutline,
-		warning: mdiAlertCircleOutline,
+		warning: mdiAlertOutline,
 		error: mdiAlertOctagonOutline,
 	}
 

package/src/components/PaginatedTable/PaginatedTable.stories.ts

@@ -107,6 +107,7 @@ export const Default: Story = {
 						v-model:options="options"
 						:headers="headers"
 						:items="items"
+						caption="Liste des utilisateurs"
 					/>
 				</template>
 				`,
@@ -222,7 +223,7 @@ export const Default: Story = {
 				email: 'agate.roy@exemple.com',
 			},
 		],
-		caption: '',
+		caption: 'Liste des utilisateurs',
 		options: {
 			itemsPerPage: 4,
 		},
@@ -235,12 +236,12 @@ export const Default: Story = {
 			},
 			template: `
 				<div class="pa-4">
-				<PaginatedTable
-					v-model:options="args.options"
-					:items="args.items"
-					:headers="args.headers"
-					:caption="args.caption"
-				/>
+					<PaginatedTable
+						v-model:options="args.options"
+						:items="args.items"
+						:headers="args.headers"
+						:caption="args.caption"
+					/>
 				</div>
 			`,
 		}
@@ -258,6 +259,7 @@ export const SortBy: Story = {
 						v-model:options="options"
 						:headers="headers"
 						:items="items"
+						caption="Liste des utilisateurs"
 					/>
 				</template>
 				`,
@@ -373,7 +375,7 @@ export const SortBy: Story = {
 				email: 'agate.roy@exemple.com',
 			},
 		],
-		caption: '',
+		caption: 'Liste des utilisateurs',
 		options: {
 			sortBy: [{ key: 'lastname', order: 'desc' }],
 		},
@@ -412,6 +414,7 @@ export const TableServer: Story = {
 						:server-items-length="totalUsers"
 						:loading="state === StateEnum.PENDING"
 						suffix="api-example"
+						caption="Liste des utilisateurs"
 						@update:options="fetchData"
 					/>
 				</template>
@@ -521,7 +524,7 @@ export const TableServer: Story = {
 			sortBy: [{ key: 'lastname', order: 'asc' }],
 			page: 1,
 		},
-		caption: '',
+		caption: 'Liste des utilisateurs',
 	},
 	render: (args) => {
 		return {
@@ -633,11 +636,13 @@ export const ManyTables: Story = {
 						<PaginatedTable
 							suffix="table1"
 							:items="itemsTable1"
+							caption="Liste des utilisateurs"
 						/>
 						<hr class="my-4">
 						<PaginatedTable
 							suffix="table2"
 							:items="itemsTable2"
+							caption="Liste des utilisateurs"
 						/>
 					</div>
 				</template>
@@ -695,7 +700,7 @@ export const ManyTables: Story = {
 			itemsPerPage: 5,
 			page: 1,
 		},
-		caption: '',
+		caption: 'Liste des utilisateurs',
 	},
 	render: (args) => {
 		return {