@cnamts/synapse 0.0.9-alpha → 0.0.11-alpha

package/src/components/PeriodField/PeriodField.vue

@@ -0,0 +1,340 @@
+<script lang="ts" setup>
+	import { ref, watch, computed } from 'vue'
+	import DatePicker from '@/components/DatePicker/DatePicker.vue'
+	import { type RuleOptions, useFieldValidation } from '@/composables'
+
+	const { parseDate } = useFieldValidation()
+
+	type DateInput = string | null
+	type PeriodValue = { from: DateInput, to: DateInput }
+
+	const props = withDefaults(defineProps<{
+		modelValue?: PeriodValue
+		placeholderFrom?: string
+		placeholderTo?: string
+		format?: string
+		dateFormatReturn?: string
+		showWeekNumber?: boolean
+		required?: boolean
+		displayIcon?: boolean
+		displayAppendIcon?: boolean
+		isDisabled?: boolean
+		noIcon?: boolean
+		noCalendar?: boolean
+		isOutlined?: boolean
+		showSuccessMessages?: boolean
+		customRules?: { type: string, options: RuleOptions }[]
+		customWarningRules?: { type: string, options: RuleOptions }[]
+	}>(), {
+		modelValue: () => ({ from: null, to: null }),
+		placeholderFrom: 'Début',
+		placeholderTo: 'Fin',
+		format: 'DD/MM/YYYY',
+		dateFormatReturn: '',
+		showWeekNumber: false,
+		required: false,
+		displayIcon: true,
+		displayAppendIcon: false,
+		isDisabled: false,
+		noIcon: false,
+		noCalendar: false,
+		isOutlined: true,
+		showSuccessMessages: false,
+		customRules: () => [],
+		customWarningRules: () => [],
+	})
+
+	const emit = defineEmits(['update:modelValue'])
+
+	const internalFromDate = ref<string | null>(null)
+	const internalToDate = ref<string | null>(null)
+
+	// Règles de validation pour la date de début
+	const fromDateRules = [
+		{
+			type: 'custom',
+			options: {
+				validate: (value: Date | null) => {
+					if (value === null) return true
+					if (tempToDate.value === undefined || tempToDate.value === null) return true
+					return value <= tempToDate.value
+				},
+				message: 'La date de début ne peut pas être supérieure à la date de fin.',
+				successMessage: 'La date de début est valide.',
+				fieldIdentifier: 'fromDateRef',
+			},
+		},
+		...(props.required
+			? [{
+				type: 'required',
+				options: {
+					validate: (value: Date | null) => {
+						// Si les deux champs sont vides, on affiche l'erreur sur les deux
+						if (!value && !tempToDate.value) {
+							return false
+						}
+						// Si l'autre champ est rempli, on force la validation de celui-ci
+						if (!value && tempToDate.value) {
+							return false
+						}
+						return true
+					},
+					message: 'La date de début est requise.',
+					successMessage: 'La date de début est renseignée.',
+					fieldIdentifier: 'fromDateRef',
+				},
+			}]
+			: []),
+		...props.customRules,
+	]
+
+	// Règles de validation pour la date de fin
+	const toDateRules = [
+		{
+			type: 'custom',
+			options: {
+				validate: (value: Date | null) => {
+					if (value === null) return true
+					if (tempFromDate.value === undefined || tempFromDate.value === null) return true
+					return value >= tempFromDate.value
+				},
+				message: 'La date de fin ne peut pas être inférieure à la date de début.',
+				successMessage: 'La date de fin est valide.',
+				fieldIdentifier: 'toDate',
+			},
+		},
+		...(props.required
+			? [{
+				type: 'required',
+				options: {
+					validate: (value: Date | null) => {
+						// Si les deux champs sont vides, on affiche l'erreur sur les deux
+						if (!value && !tempFromDate.value) {
+							return false
+						}
+						// Si l'autre champ est rempli, on force la validation de celui-ci
+						if (!value && tempFromDate.value) {
+							return false
+						}
+						return true
+					},
+					message: 'La date de fin est requise.',
+					successMessage: 'La date de fin est renseignée.',
+					fieldIdentifier: 'toDate',
+				},
+			}]
+			: []),
+		...props.customRules,
+	]
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+	function formatDateValue(value: any): string | null {
+		if (!value) return null
+		if (typeof value === 'string') return value
+		if (value.selectedDates) {
+			const date = new Date(value.selectedDates)
+			const day = date.getDate().toString().padStart(2, '0')
+			const month = (date.getMonth() + 1).toString().padStart(2, '0')
+			const year = date.getFullYear()
+			return `${day}/${month}/${year}`
+		}
+		return null
+	}
+
+	// Computed properties pour les dates formatées
+	const formattedFromDate = computed(() => formatDateValue(internalFromDate.value))
+	const formattedToDate = computed(() => formatDateValue(internalToDate.value))
+
+	// Computed properties pour les dates temporaires
+	const tempFromDate = computed(() => formattedFromDate.value ? parseDate(formattedFromDate.value, props.format) : undefined)
+	const tempToDate = computed(() => formattedToDate.value ? parseDate(formattedToDate.value, props.format) : undefined)
+
+	// Sets pour optimiser la recherche des erreurs et succès
+	const fromDateErrorsSet = computed(() => new Set(errors.value.filter(error => error.includes('fromDate'))))
+	const toDateErrorsSet = computed(() => new Set(errors.value.filter(error => error.includes('toDate'))))
+	const fromDateSuccessesSet = computed(() => new Set(successes.value.filter(success => success.includes('fromDate'))))
+	const toDateSuccessesSet = computed(() => new Set(successes.value.filter(success => success.includes('toDate'))))
+
+	const hasFromDateErrors = computed(() => fromDateErrorsSet.value.size > 0)
+	const hasToDateErrors = computed(() => toDateErrorsSet.value.size > 0)
+	const hasFromDateSuccesses = computed(() => fromDateSuccessesSet.value.size > 0)
+	const hasToDateSuccesses = computed(() => toDateSuccessesSet.value.size > 0)
+
+	const errors = ref<string[]>([])
+	const successes = ref<string[]>([])
+
+	// Computed property pour vérifier si le formulaire est valide
+	const isValid = computed(() => {
+		// Si aucune date n'est renseignée et que ce n'est pas required, c'est valide
+		if (!props.required && !formattedFromDate.value && !formattedToDate.value) {
+			return true
+		}
+
+		// Si c'est required, les deux dates doivent être renseignées
+		if (props.required && (!formattedFromDate.value || !formattedToDate.value)) {
+			return false
+		}
+
+		// Si une seule date est renseignée et que ce n'est pas required
+		if (!props.required && (formattedFromDate.value || formattedToDate.value)) {
+			// Les deux dates doivent être renseignées ensemble
+			if ((formattedFromDate.value && !formattedToDate.value) || (!formattedFromDate.value && formattedToDate.value)) {
+				return false
+			}
+		}
+
+		// Si les deux dates sont renseignées, vérifier qu'elles sont cohérentes
+		if (formattedFromDate.value && formattedToDate.value) {
+			const fromDate = parseDate(formattedFromDate.value, props.format)
+			const toDate = parseDate(formattedToDate.value, props.format)
+			if (!fromDate || !toDate || fromDate > toDate) {
+				return false
+			}
+		}
+
+		// Vérifier qu'il n'y a pas d'erreurs
+		return errors.value.length === 0
+	})
+
+	// Watch pour les changements de la date de début
+	watch(formattedFromDate, () => {
+		// Si la date de fin existe, on revalide
+		if (formattedToDate.value && toDateRef.value) {
+			toDateRef.value.validateOnSubmit()
+		}
+	})
+
+	// Watch pour les changements de la date de fin
+	watch(formattedToDate, () => {
+		// Si la date de début existe, on revalide
+		if (formattedFromDate.value && fromDateRef.value) {
+			fromDateRef.value.validateOnSubmit()
+		}
+	})
+
+	// Watch pour les changements internes
+	watch([internalFromDate, internalToDate], () => {
+		emit('update:modelValue', {
+			from: formattedFromDate.value,
+			to: formattedToDate.value,
+		})
+	})
+
+	// Watch pour les changements externes avec immediate pour synchroniser l'état initial
+	watch(() => props.modelValue, (newValue) => {
+		if (!newValue) return
+
+		const newFromDate = formatDateValue(newValue.from)
+		const newToDate = formatDateValue(newValue.to)
+
+		if (internalFromDate.value !== newFromDate) {
+			internalFromDate.value = newFromDate
+		}
+		if (internalToDate.value !== newToDate) {
+			internalToDate.value = newToDate
+		}
+	}, { deep: true, immediate: true })
+
+	// Initialisation
+	internalFromDate.value = formatDateValue(props.modelValue?.from)
+	internalToDate.value = formatDateValue(props.modelValue?.to)
+
+	const fromDateRef = ref()
+	const toDateRef = ref()
+
+	// Gestionnaires d'événements closed
+	const handleFromDateClosed = () => {
+		if (fromDateRef.value) {
+			fromDateRef.value.validateOnSubmit()
+		}
+	}
+
+	const handleToDateClosed = () => {
+		if (toDateRef.value) {
+			toDateRef.value.validateOnSubmit()
+		}
+	}
+
+	const validateOnSubmit = (): boolean => {
+		// Valider les deux DatePicker
+		const fromDateValid = fromDateRef.value?.validateOnSubmit() ?? true
+		const toDateValid = toDateRef.value?.validateOnSubmit() ?? true
+
+		// Retourner true seulement si tout est valide
+		const result = fromDateValid && toDateValid && isValid.value
+
+		return result
+	}
+
+	defineExpose({
+		validateOnSubmit,
+		errors,
+		successes,
+		isValid,
+	})
+</script>
+
+<template>
+	<div class="period-field">
+		<v-row>
+			<v-col
+				cols="12"
+				sm="6"
+			>
+				<DatePicker
+					ref="fromDateRef"
+					v-model="internalFromDate"
+					:custom-rules="fromDateRules"
+					:custom-warning-rules="props.customWarningRules"
+					:date-format-return="props.dateFormatReturn"
+					:display-append-icon="props.displayAppendIcon"
+					:display-icon="props.displayIcon"
+					:error-message="hasFromDateErrors"
+					:format="props.format"
+					:is-disabled="props.isDisabled"
+					:is-outlined="props.isOutlined"
+					:no-calendar="props.noCalendar"
+					:no-icon="props.noIcon"
+					:placeholder="props.placeholderFrom"
+					:required="props.required"
+					:show-week-number="props.showWeekNumber"
+					:success-message="hasFromDateSuccesses"
+					class="mr-2"
+					@closed="handleFromDateClosed"
+				/>
+			</v-col>
+			<v-col
+				cols="12"
+				sm="6"
+			>
+				<DatePicker
+					ref="toDateRef"
+					v-model="internalToDate"
+					:custom-rules="toDateRules"
+					:custom-warning-rules="props.customWarningRules"
+					:date-format-return="props.dateFormatReturn"
+					:display-append-icon="props.displayAppendIcon"
+					:display-icon="props.displayIcon"
+					:error-message="hasToDateErrors"
+					:format="props.format"
+					:is-disabled="props.isDisabled"
+					:is-outlined="props.isOutlined"
+					:no-calendar="props.noCalendar"
+					:no-icon="props.noIcon"
+					:placeholder="props.placeholderTo"
+					:required="props.required"
+					:show-week-number="props.showWeekNumber"
+					:success-message="hasToDateSuccesses"
+					@closed="handleToDateClosed"
+				/>
+			</v-col>
+		</v-row>
+	</div>
+</template>
+
+<style scoped>
+.period-field {
+	display: flex;
+	gap: 10px;
+}
+</style>

package/src/components/PeriodField/constants/ExpertiseLevelEnum.ts

@@ -0,0 +1,4 @@
+export enum ExpertiseLevelEnum {
+	DEV = 'dev',
+	DESIGN = 'design',
+}

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

@@ -0,0 +1,340 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect, beforeEach } from 'vitest'
+import { createVuetify } from 'vuetify'
+
+import PeriodField from '../PeriodField.vue'
+
+describe('PeriodField.vue', () => {
+	let vuetify
+
+	beforeEach(() => {
+		vuetify = createVuetify()
+	})
+
+	describe('Rendering', () => {
+		it('displays 2 fields with correct labels', () => {
+			const wrapper = mount(PeriodField, {
+				global: {
+					plugins: [vuetify],
+				},
+				props: {
+					placeholderFrom: 'From',
+					placeholderTo: 'To',
+				},
+			})
+
+			const inputs = wrapper.findAll('input')
+			expect(inputs).toHaveLength(2)
+			expect(inputs[0].attributes('aria-label')).toBe('From')
+			expect(inputs[1].attributes('aria-label')).toBe('To')
+		})
+
+		it('renders with initial values', async () => {
+			const wrapper = mount(PeriodField, {
+				global: {
+					plugins: [vuetify],
+				},
+				props: {
+					modelValue: {
+						from: '14/11/2005',
+						to: '23/12/2005',
+					},
+				},
+			})
+
+			const inputs = wrapper.findAll('input')
+			await wrapper.vm.$nextTick()
+
+			expect(inputs[0].element.value).toBe('14/11/2005')
+			expect(inputs[1].element.value).toBe('23/12/2005')
+		})
+	})
+
+	describe('Events', () => {
+		it('emits update events when fields are changed', async () => {
+			const wrapper = mount(PeriodField, {
+				global: {
+					plugins: [vuetify],
+				},
+				props: {
+					modelValue: {
+						from: null,
+						to: null,
+					},
+				},
+			})
+
+			const [startField, endField] = wrapper.findAll('input')
+
+			// Test start date change
+			await startField.trigger('focus')
+			await startField.setValue('12/12/1995')
+			await startField.trigger('blur')
+			await wrapper.vm.$nextTick()
+
+			const emittedEvents = wrapper.emitted('update:modelValue')
+			expect(emittedEvents?.[0]).toEqual([
+				{
+					from: '12/12/1995',
+					to: null,
+				},
+			])
+
+			// Test end date change
+			await endField.trigger('focus')
+			await endField.setValue('20/12/1995')
+			await endField.trigger('blur')
+			await wrapper.vm.$nextTick()
+
+			expect(emittedEvents?.[1]).toEqual([
+				{
+					from: '12/12/1995',
+					to: '20/12/1995',
+				},
+			])
+		})
+	})
+
+	describe('Validation', () => {
+		it('shows error when start date is after end date', async () => {
+			const wrapper = mount(PeriodField, {
+				props: {
+					modelValue: {
+						from: '01/01/2025',
+						to: '01/01/2024',
+					},
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			await wrapper.vm.$nextTick()
+
+			expect(wrapper.text()).toContain('La date de fin ne peut pas être inférieure à la date de début')
+			expect(wrapper.vm.isValid).toBe(false)
+		})
+
+		it('shows error when end date is before start date', async () => {
+			const wrapper = mount(PeriodField, {
+				props: {
+					modelValue: {
+						from: '01/01/2025',
+						to: '01/01/2024',
+					},
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			await wrapper.vm.$nextTick()
+
+			expect(wrapper.text()).toContain('La date de fin ne peut pas être inférieure à la date de début')
+			expect(wrapper.vm.isValid).toBe(false)
+		})
+
+		it('validates when required and both dates are missing', async () => {
+			const wrapper = mount(PeriodField, {
+				global: {
+					plugins: [vuetify],
+				},
+				props: {
+					required: true,
+					modelValue: {
+						from: null,
+						to: null,
+					},
+				},
+			})
+
+			// Trigger validation manually
+			await wrapper.vm.validateOnSubmit()
+			await wrapper.vm.$nextTick()
+
+			const datePickers = wrapper.findAllComponents({ name: 'DatePicker' })
+			expect(wrapper.vm.isValid).toBe(false)
+			expect(datePickers[0].props('customRules')).toContainEqual(expect.objectContaining({
+				type: 'required',
+				options: expect.objectContaining({
+					message: 'La date de début est requise.',
+				}),
+			}))
+			expect(datePickers[1].props('customRules')).toContainEqual(expect.objectContaining({
+				type: 'required',
+				options: expect.objectContaining({
+					message: 'La date de fin est requise.',
+				}),
+			}))
+		})
+
+		it('validates when required and only one date is provided', async () => {
+			const wrapper = mount(PeriodField, {
+				global: {
+					plugins: [vuetify],
+				},
+				props: {
+					required: true,
+					modelValue: {
+						from: '12/12/1995',
+						to: null,
+					},
+				},
+			})
+
+			// Trigger validation manually
+			await wrapper.vm.validateOnSubmit()
+			await wrapper.vm.$nextTick()
+
+			const datePickers = wrapper.findAllComponents({ name: 'DatePicker' })
+			expect(wrapper.vm.isValid).toBe(false)
+			expect(datePickers[1].props('customRules')).toContainEqual(expect.objectContaining({
+				type: 'required',
+				options: expect.objectContaining({
+					message: 'La date de fin est requise.',
+				}),
+			}))
+		})
+
+		it('validates when not required and no dates are provided', async () => {
+			const wrapper = mount(PeriodField, {
+				global: {
+					plugins: [vuetify],
+				},
+				props: {
+					required: false,
+					modelValue: {
+						from: null,
+						to: null,
+					},
+				},
+			})
+
+			// Trigger validation manually
+			await wrapper.vm.validateOnSubmit()
+			await wrapper.vm.$nextTick()
+			expect(wrapper.vm.isValid).toBe(true)
+		})
+
+		it('validates when not required and only one date is provided', async () => {
+			const wrapper = mount(PeriodField, {
+				global: {
+					plugins: [vuetify],
+				},
+				props: {
+					required: false,
+					modelValue: {
+						from: '12/12/1995',
+						to: null,
+					},
+				},
+			})
+
+			// Trigger validation manually
+			await wrapper.vm.validateOnSubmit()
+			await wrapper.vm.$nextTick()
+			expect(wrapper.vm.isValid).toBe(false)
+		})
+
+		it('validates when both dates are valid', async () => {
+			const wrapper = mount(PeriodField, {
+				global: {
+					plugins: [vuetify],
+				},
+				props: {
+					modelValue: {
+						from: '12/12/1995',
+						to: '20/12/1995',
+					},
+				},
+			})
+
+			// Trigger validation manually
+			await wrapper.vm.validateOnSubmit()
+			await wrapper.vm.$nextTick()
+			expect(wrapper.vm.isValid).toBe(true)
+		})
+	})
+
+	describe('Utils', () => {
+		it('formats date from selectedDates correctly', async () => {
+			const wrapper = mount(PeriodField, {
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			const input = {
+				selectedDates: new Date('2025-02-07T15:42:00.000Z'),
+			}
+
+			// @ts-expect-error: accès à une méthode privée pour le test
+			const result = wrapper.vm.formatDateValue(input)
+			expect(result).toBe('07/02/2025')
+		})
+
+		it('returns null for invalid inputs', async () => {
+			const wrapper = mount(PeriodField, {
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// @ts-expect-error: accès à une méthode privée pour le test
+			expect(wrapper.vm.formatDateValue(null)).toBe(null)
+			// @ts-expect-error: accès à une méthode privée pour le test
+			expect(wrapper.vm.formatDateValue(undefined)).toBe(null)
+			// @ts-expect-error: accès à une méthode privée pour le test
+			expect(wrapper.vm.formatDateValue({ selectedDates: null })).toBe(null)
+		})
+
+		it('returns string value directly', async () => {
+			const wrapper = mount(PeriodField, {
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// @ts-expect-error: accès à une méthode privée pour le test
+			expect(wrapper.vm.formatDateValue('07/02/2025')).toBe('07/02/2025')
+		})
+	})
+
+	describe('Custom Rules', () => {
+		it('applies custom validation rules', async () => {
+			const wrapper = mount(PeriodField, {
+				global: {
+					plugins: [vuetify],
+				},
+				props: {
+					modelValue: {
+						from: '12/12/1995',
+						to: '20/12/1995',
+					},
+					customRules: [{
+						type: 'custom',
+						options: {
+							validate: () => false,
+							message: 'Custom validation failed',
+							fieldIdentifier: 'fromDate',
+						},
+					}],
+				},
+			})
+
+			// Trigger validation manually
+			await wrapper.vm.validateOnSubmit()
+			await wrapper.vm.$nextTick()
+
+			const datePickers = wrapper.findAllComponents({ name: 'DatePicker' })
+			const fromDatePicker = datePickers[0]
+			expect(fromDatePicker.vm.errorMessages).toContainEqual('Custom validation failed')
+			expect(datePickers[0].props('customRules')).toContainEqual(expect.objectContaining({
+				type: 'custom',
+				options: expect.objectContaining({
+					message: 'Custom validation failed',
+				}),
+			}))
+		})
+	})
+})

package/src/components/PhoneField/PhoneField.mdx

@@ -6,7 +6,7 @@ import PhoneField from './PhoneField.vue'
 
 # PhoneField
 
-The `PhoneField` component is used to input phone numbers with various formatting options.
+Le composant`PhoneField`  est utilisé pour saisir des numéros de téléphone avec différentes options de formatage.
 
 <Canvas of={PhoneFieldStories.Default} />
 

package/src/components/PhoneField/Usages.mdx

@@ -0,0 +1,9 @@
+import { Meta, Story} from "@storybook/blocks";
+import * as stories from "./Usages.stories.ts";
+
+<Meta of={stories} />
+
+# Usages
+
+<Story of={stories.UsagePage} />
+<br />