@cnamts/synapse 0.0.8-alpha → 0.0.9-alpha

package/src/components/DatePicker/DateTextInput.vue

@@ -0,0 +1,409 @@
+<script lang="ts" setup>
+	import { computed, ref, watch, onMounted } from 'vue'
+	import SyTextField from '../Customs/SyTextField/SyTextField.vue'
+	import { useFieldValidation } from '@/composables/rules/useFieldValidation'
+	import type { RuleOptions } from '@/composables/rules/useFieldValidation'
+
+	// Type pour les valeurs de date
+	type DateValue = string | [string, string]
+
+	const props = withDefaults(defineProps<{
+		modelValue?: DateValue
+		displayFormat?: string
+		returnFormat?: string
+		range?: boolean
+		placeholder?: string
+		rules?: { type: string, options: RuleOptions }[]
+		warningRules?: { type: string, options: RuleOptions }[]
+		required?: boolean
+	}>(), {
+		modelValue: undefined,
+		displayFormat: 'DD/MM/YYYY',
+		returnFormat: '',
+		range: false,
+		placeholder: '',
+		rules: () => [],
+		warningRules: () => [],
+		required: false,
+	})
+
+	const emit = defineEmits<{
+		(e: 'update:modelValue', value: DateValue): void
+	}>()
+
+	const inputValue = ref('')
+
+	const { generateRules } = useFieldValidation()
+
+	// Règles de validation
+	const validationRules = computed(() => generateRules(props.rules || []))
+	const warningValidationRules = computed(() => generateRules(props.warningRules || []))
+
+	// États de validation
+	const hasError = ref(false)
+	const hasWarning = ref(false)
+	const hasSuccess = ref(false)
+	const errorMessages = ref<string[]>([])
+	const warningMessages = ref<string[]>([])
+	const successMessages = ref<string[]>([])
+
+	// Valider le champ
+	const validateField = () => {
+		// Réinitialiser les états
+		errorMessages.value = []
+		warningMessages.value = []
+		successMessages.value = []
+
+		if (props.required && !inputValue.value) {
+			errorMessages.value.push('La date est requise.')
+			hasError.value = true
+			return
+		}
+
+		if (inputValue.value) {
+			if (props.range) {
+				// Pour une plage, valider chaque date séparément
+				const [start, end] = inputValue.value.split('-').map(d => d.trim())
+				if (start && isValidDate(start)) {
+					// Validation des erreurs et succès pour la date de début
+					addMessages(start, validationRules.value, 'error')
+					addMessages(start, validationRules.value, 'success')
+					// Validation des warnings pour la date de début
+					addMessages(start, warningValidationRules.value, 'warning')
+				}
+
+				if (end && isValidDate(end)) {
+					// Validation des erreurs et succès pour la date de fin
+					addMessages(end, validationRules.value, 'error')
+					addMessages(end, validationRules.value, 'success')
+					// Validation des warnings pour la date de fin
+					addMessages(end, warningValidationRules.value, 'warning')
+
+					// Valider que la date de fin est après la date de début
+					if (start && isValidDate(start)) {
+						const startDate = parseDate(start, props.displayFormat)
+						const endDate = parseDate(end, props.displayFormat)
+						if (startDate && endDate && endDate < startDate) {
+							errorMessages.value.push('La date de fin doit être après la date de début')
+						}
+					}
+				}
+			}
+			else {
+				// Validation pour une date simple
+				addMessages(inputValue.value, validationRules.value, 'error')
+				addMessages(inputValue.value, validationRules.value, 'success')
+				addMessages(inputValue.value, warningValidationRules.value, 'warning')
+			}
+		}
+
+		// Mettre à jour les états
+		hasError.value = errorMessages.value.length > 0
+		hasWarning.value = warningMessages.value.length > 0
+		hasSuccess.value = successMessages.value.length > 0 && !hasError.value && !hasWarning.value
+	}
+
+	// Fonction pour ajouter les messages
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+	const addMessages = (value: string, rules: any[], messageType: 'error' | 'warning' | 'success') => {
+		if (!value) return
+
+		// Convertir la date au format YYYY-MM-DD pour la validation
+		const validationValue = toValidationFormat(value)
+		if (!validationValue) return
+
+		rules.forEach((rule) => {
+			const result = rule(validationValue)
+			if (result) {
+				const targetMessages = messageType === 'error'
+					? errorMessages
+					: messageType === 'warning'
+						? warningMessages
+						: successMessages
+				if (result[messageType]) {
+					targetMessages.value.push(result[messageType])
+					targetMessages.value = [...new Set(targetMessages.value)]
+				}
+			}
+		})
+	}
+
+	// Convert a date string to YYYY-MM-DD format for validation
+	const toValidationFormat = (dateStr: string): string => {
+		if (!dateStr) return ''
+		const date = parseDate(dateStr, 'DD/MM/YYYY')
+		if (!date) return dateStr
+
+		// Formatter en YYYY-MM-DD
+		return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
+	}
+
+	// Fonction pour parser les dates selon le format spécifié
+	const parseDate = (dateStr: string, format: string): Date | null => {
+		const formatParts = format.split(/[^A-Z]/)
+		const dateParts = dateStr.split(/[^0-9]/)
+
+		if (dateParts.length !== formatParts.length) return null
+
+		let day = 1, month = 0, year = 2000
+
+		for (let i = 0; i < formatParts.length; i++) {
+			const value = parseInt(dateParts[i])
+			if (isNaN(value)) return null
+
+			switch (formatParts[i]) {
+			case 'DD':
+				day = value
+				break
+			case 'MM':
+				month = value - 1 // JavaScript months are 0-based
+				break
+			case 'YYYY':
+			case 'YY':
+				year = value
+				if (formatParts[i] === 'YY') {
+					const currentYear = new Date().getFullYear()
+					const currentCentury = Math.floor(currentYear / 100) * 100
+					year = currentCentury + value
+				}
+				break
+			}
+		}
+
+		const date = new Date(year, month, day)
+		return date.getFullYear() === year && date.getMonth() === month && date.getDate() === day ? date : null
+	}
+
+	// Convert between different date formats
+	const convertDateFormat = (dateStr: string, fromFormat: string, toFormat: string): string => {
+		if (!dateStr) return ''
+
+		const date = parseDate(dateStr, fromFormat)
+		if (!date) return dateStr
+
+		// Format the date according to the target format
+		let result = toFormat
+		result = result.replace('YYYY', String(date.getFullYear()))
+		result = result.replace('YY', String(date.getFullYear()).slice(-2))
+		result = result.replace('MM', String(date.getMonth() + 1).padStart(2, '0'))
+		result = result.replace('DD', String(date.getDate()).padStart(2, '0'))
+		return result
+	}
+
+	// Format a date input string (add slashes)
+	const formatDateInput = (value: string): string => {
+		const numbers = value.replace(/\D/g, '')
+		const chars = numbers.split('')
+
+		if (chars.length <= 2) return numbers
+		if (chars.length <= 4) return `${chars.slice(0, 2).join('')}/${chars.slice(2).join('')}`
+
+		// Permettre les années à 4 chiffres
+		const yearPart = chars.slice(4).join('')
+		return `${chars.slice(0, 2).join('')}/${chars.slice(2, 4).join('')}/${yearPart}`
+	}
+
+	// Initialisation au montage
+	onMounted(() => {
+		if (props.modelValue) {
+			if (Array.isArray(props.modelValue)) {
+				// Si on reçoit un tableau de dates, on les formate pour l'affichage
+				const [start, end] = props.modelValue
+				const formattedStart = convertDateFormat(start, props.returnFormat || 'YYYY-MM-DD', props.displayFormat)
+				const formattedEnd = convertDateFormat(end, props.returnFormat || 'YYYY-MM-DD', props.displayFormat)
+				inputValue.value = `${formattedStart} - ${formattedEnd}`
+			}
+			else if (typeof props.modelValue === 'string') {
+				// Si on reçoit une chaîne, on la convertit dans le format d'affichage
+				inputValue.value = convertDateFormat(props.modelValue, props.returnFormat || 'YYYY-MM-DD', props.displayFormat)
+			}
+			validateField()
+		}
+	})
+
+	// Mise à jour quand la valeur change
+	watch(() => props.modelValue, (newValue) => {
+		if (newValue) {
+			if (Array.isArray(newValue)) {
+				// Si on reçoit un tableau de dates, on les formate pour l'affichage
+				const [start, end] = newValue
+				const formattedStart = convertDateFormat(start, props.returnFormat || 'YYYY-MM-DD', props.displayFormat)
+				const formattedEnd = convertDateFormat(end, props.returnFormat || 'YYYY-MM-DD', props.displayFormat)
+				inputValue.value = `${formattedStart} - ${formattedEnd}`
+			}
+			else if (typeof newValue === 'string') {
+				// Si on reçoit une chaîne, on la convertit dans le format d'affichage
+				inputValue.value = convertDateFormat(newValue, props.returnFormat || 'YYYY-MM-DD', props.displayFormat)
+			}
+			validateField()
+		}
+		else {
+			inputValue.value = ''
+		}
+	})
+
+	// Émission de la valeur
+	const emitValue = (value: string) => {
+		if (!value) {
+			emit('update:modelValue', '')
+			return
+		}
+
+		const returnFormat = props.returnFormat || 'YYYY-MM-DD'
+
+		if (props.range) {
+			const [start, end] = value.split('-').map(d => d.trim())
+			if (start && end) {
+				// Pour les ranges, convertir les deux dates au format demandé
+				const formattedStart = convertDateFormat(start, props.displayFormat, returnFormat)
+				const formattedEnd = convertDateFormat(end, props.displayFormat, returnFormat)
+				emit('update:modelValue', [formattedStart, formattedEnd])
+			}
+		}
+		else {
+			// Pour une date simple, convertir au format demandé
+			const formattedValue = convertDateFormat(value, props.displayFormat, returnFormat)
+			emit('update:modelValue', formattedValue)
+		}
+	}
+
+	// Handle the input value formatting
+	const maxLength = computed(() => props.range ? 23 : 10) // 10 pour "DD/MM/YYYY", 23 pour "DD/MM/YYYY - DD/MM/YYYY"
+	const handleInput = (value: string) => {
+		// Limiter la longueur du texte
+		if (value.length > maxLength.value) {
+			value = value.slice(0, maxLength.value)
+		}
+
+		if (!value) {
+			inputValue.value = ''
+			emitValue('')
+			validateField()
+			return
+		}
+
+		// Garder uniquement les chiffres et le séparateur de plage
+		let formattedValue = value.replace(/[^\d-]/g, '')
+
+		if (props.range) {
+			const [start, end] = formattedValue.split('-').map(d => d.trim())
+			let result = ''
+
+			// Formater la première date
+			if (start) {
+				result = formatDateInput(start)
+
+				// Si la première date est complète, ajouter automatiquement le séparateur
+				const yearLength = props.displayFormat.includes('YYYY') ? 8 : 6
+				if (start.length === yearLength && !formattedValue.includes('-')) {
+					result += ' -'
+				}
+			}
+
+			// Ajouter le séparateur et la deuxième date si présente
+			if (formattedValue.includes('-')) {
+				if (!result.includes(' -')) {
+					result += ' -'
+				}
+				if (end) {
+					result += ' ' + formatDateInput(end)
+				}
+			}
+
+			formattedValue = result
+		}
+		else {
+			formattedValue = formatDateInput(formattedValue)
+		}
+
+		inputValue.value = formattedValue
+		emitValue(formattedValue)
+	}
+
+	// Handle blur event to format the final value
+	const handleBlur = () => {
+		if (!inputValue.value) {
+			emitValue('')
+			return
+		}
+
+		if (props.range) {
+			const [start, end] = inputValue.value.split('-').map(d => d.trim())
+			if (start && end) {
+				// Nettoyer et formater les dates
+				const cleanStart = start.replace(/\D/g, '')
+				const cleanEnd = end.replace(/\D/g, '')
+
+				// Extraire les parties des dates
+				const startDay = cleanStart.slice(0, 2)
+				const startMonth = cleanStart.slice(2, 4)
+				const startYear = cleanStart.slice(4)
+
+				const endDay = cleanEnd.slice(0, 2)
+				const endMonth = cleanEnd.slice(2, 4)
+				const endYear = cleanEnd.slice(4)
+
+				// Formater pour l'affichage
+				const formattedStart = `${startDay}/${startMonth}/${startYear}`
+				const formattedEnd = `${endDay}/${endMonth}/${endYear}`
+				inputValue.value = `${formattedStart} - ${formattedEnd}`
+
+				// Émettre les dates si elles sont valides
+				if (isValidDate(formattedStart) && isValidDate(formattedEnd)) {
+					emitValue(`${formattedStart} - ${formattedEnd}`)
+				}
+			}
+		}
+		else {
+			const cleanValue = inputValue.value.replace(/\D/g, '')
+
+			// Extraire les parties de la date
+			const day = cleanValue.slice(0, 2)
+			const month = cleanValue.slice(2, 4)
+			const year = cleanValue.slice(4)
+
+			// Formater pour l'affichage
+			const formattedValue = `${day}/${month}/${year}`
+			inputValue.value = formattedValue
+
+			if (isValidDate(formattedValue)) {
+				emitValue(formattedValue)
+			}
+		}
+
+		validateField()
+	}
+
+	// Validate single date
+	const isValidDate = (dateString: string): boolean => {
+		return parseDate(dateString, props.displayFormat) !== null
+	}
+
+	// Exposer la méthode de validation
+	const validateOnSubmit = () => {
+		validateField()
+		return errorMessages.value.length === 0
+	}
+
+	defineExpose({
+		validate: validateField,
+		validateOnSubmit,
+	})
+</script>
+
+<template>
+	<SyTextField
+		v-model="inputValue"
+		:error="hasError"
+		:error-messages="errorMessages"
+		:messages="successMessages"
+		:placeholder="placeholder"
+		:success="hasSuccess"
+		:warning="hasWarning"
+		:warning-messages="warningMessages"
+		:maxlength="maxLength"
+		v-bind="$attrs"
+		@blur="handleBlur"
+		@update:model-value="handleInput"
+	/>
+</template>

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

@@ -0,0 +1,266 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { vuetify } from '@tests/unit/setup'
+import { nextTick } from 'vue'
+import DatePicker from '../DatePicker.vue'
+
+describe('DatePicker.vue', () => {
+	let wrapper
+
+	beforeEach(() => {
+		wrapper = mount(DatePicker, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: '',
+				required: true,
+			},
+		})
+	})
+
+	it('displays the placeholder text', () => {
+		const placeholder = 'Sélectionner une date'
+		const wrapper = mount(DatePicker, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: { placeholder },
+		})
+		expect(wrapper.find('input').attributes('placeholder')).toBe(undefined)
+	})
+
+	it('emits update:model-value event on date selection', async () => {
+		const wrapper = mount(DatePicker, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		const input = wrapper.find('input')
+		await input.setValue('01/01/2023')
+		expect(wrapper.emitted('update:model-value')).toBeTruthy()
+	})
+
+	it('renders the component', () => {
+		const wrapper = mount(DatePicker, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.exists()).toBe(true)
+	})
+
+	it('emits the correct formatted date on date selection', async () => {
+		const input = wrapper.find('input')
+		await input.setValue('01/01/2023')
+		expect(wrapper.emitted('update:model-value')).toBeTruthy()
+		expect(wrapper.emitted('update:model-value')[0]).toEqual(['01/01/2023'])
+	})
+
+	it('toggles the date picker visibility on focus', async () => {
+		const input = wrapper.find('input')
+		await input.trigger('focus')
+		expect(wrapper.vm.isDatePickerVisible).toBe(true)
+	})
+
+	it('hides the date picker on outside click', async () => {
+		const input = wrapper.find('input')
+		await input.trigger('focus')
+		expect(wrapper.vm.isDatePickerVisible).toBe(true)
+
+		document.body.click()
+		await nextTick()
+		expect(wrapper.vm.isDatePickerVisible).toBe(false)
+	})
+
+	it('updates aria-labels for date picker navigation buttons', async () => {
+		wrapper.vm.isDatePickerVisible = true
+		await nextTick()
+
+		const arrowDown = document.querySelector(
+			'.v-btn.v-btn--icon.v-theme--light.v-btn--density-comfortable.v-btn--size-default.v-btn--variant-text.v-date-picker-controls__mode-btn',
+		)
+		const arrowLeftButtons = document.querySelectorAll(
+			'.v-btn.v-btn--icon.v-theme--light.v-btn--density-default.v-btn--size-default.v-btn--variant-text',
+		)
+
+		if (arrowDown) {
+			expect(arrowDown.getAttribute('aria-label')).toBe('Fleche vers le bas')
+		}
+		arrowLeftButtons.forEach((button, index) => {
+			if (index === 0) {
+				expect(button.getAttribute('aria-label')).toBe('Fleche vers la gauche')
+			}
+			else if (index === 1) {
+				expect(button.getAttribute('aria-label')).toBe('Fleche vers la droite')
+			}
+		})
+	})
+
+	it('handles invalid date input gracefully', async () => {
+		const input = wrapper.find('input')
+		await input.setValue('invalid date')
+		expect(wrapper.vm.selectedDates).toBeNull()
+		expect(wrapper.emitted('update:model-value')).toBeFalsy()
+	})
+
+	it('hides the date picker when at least two dates are selected in range mode', async () => {
+		const wrapper = mount(DatePicker, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				displayRange: true, // Activer le mode plage
+			},
+		})
+
+		// Simule la visibilité initiale du date picker
+		wrapper.vm.isDatePickerVisible = true
+
+		// Simule la sélection de deux dates via la propriété `selectedDates`
+		wrapper.vm.selectedDates = [new Date('2023-01-01'), new Date('2023-01-05')]
+		await nextTick()
+
+		// Vérifie que le date picker est masqué
+		expect(wrapper.vm.isDatePickerVisible).toBe(false)
+	})
+
+	it('removes the click event listener on unmount', async () => {
+		const removeEventListenerSpy = vi.spyOn(document, 'removeEventListener')
+
+		// Monte le composant
+		const wrapper = mount(DatePicker, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		// Démonte le composant
+		wrapper.unmount()
+
+		// Vérifie que removeEventListener a été appelé avec les bons arguments
+		expect(removeEventListenerSpy).toHaveBeenCalledWith('click', wrapper.vm.handleClickOutside)
+
+		// Nettoie le spy
+		removeEventListenerSpy.mockRestore()
+	})
+
+	it('returns an array of all dates between two valid dates', () => {
+		const datesArray = ['01/01/2023', '05/01/2023']
+		const result = wrapper.vm.initializeSelectedDates(datesArray)
+
+		expect(Array.isArray(result)).toBe(true)
+		expect(result.length).toBe(2)
+		expect(result[0]).toBeInstanceOf(Date)
+		expect(result[1]).toBeInstanceOf(Date)
+		expect(result[0].toISOString().split('T')[0]).toBe('2023-01-01')
+		expect(result[1].toISOString().split('T')[0]).toBe('2023-01-05')
+	})
+
+	it('handles invalid date inputs gracefully', () => {
+		const datesArray = ['invalid date', '05/01/2023']
+		const result = wrapper.vm.initializeSelectedDates(datesArray)
+
+		expect(result).toEqual([])
+	})
+
+	it('handles a single date correctly', () => {
+		const singleDate = '01/01/2023'
+		const result = wrapper.vm.initializeSelectedDates(singleDate)
+
+		expect(result).toBeInstanceOf(Date)
+		expect(result.toISOString().split('T')[0]).toBe('2023-01-01')
+	})
+
+	it('returns an empty array if start date is after end date', () => {
+		const datesArray = ['05/01/2023', '01/01/2023']
+		const result = wrapper.vm.initializeSelectedDates(datesArray)
+
+		expect(result).toEqual([])
+	})
+
+	it('returns true when there are no validation errors', async () => {
+		const wrapper = mount(DatePicker, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				required: true, // Le champ est requis
+			},
+		})
+
+		// Simule une date valide
+		wrapper.vm.selectedDates = [new Date('2023-01-01')]
+		await nextTick()
+
+		const result = wrapper.vm.validateOnSubmit()
+
+		// Vérifie que validateOnSubmit retourne true et qu'il n'y a pas d'erreurs
+		expect(result).toBe(true)
+		expect(wrapper.vm.errorMessages).toEqual([])
+	})
+
+	it('returns false when there are validation errors', async () => {
+		const wrapper = mount(DatePicker, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				required: true, // Le champ est requis
+			},
+		})
+
+		// Simule l'absence de date sélectionnée
+		wrapper.vm.selectedDates = null
+		await nextTick()
+
+		const result = wrapper.vm.validateOnSubmit()
+
+		// Vérifie que validateOnSubmit retourne false et qu'il y a des erreurs
+		expect(result).toBe(false)
+		expect(wrapper.vm.errorMessages).toContain('La date est requise.')
+	})
+
+	it('parses a valid date string into a Date instance', () => {
+		const modelValue = '15/01/2023' // Chaîne valide
+		const result = wrapper.vm.initializeSelectedDates(modelValue)
+
+		expect(result).toBeInstanceOf(Date) // Doit retourner une instance de Date
+		expect(result.toISOString().split('T')[0]).toBe('2023-01-15') // Correspond à la date attendue
+	})
+
+	it('returns null if modelValue is null or undefined', () => {
+		const modelValue = null
+		const result = wrapper.vm.initializeSelectedDates(modelValue)
+
+		expect(result).toBeNull() // Doit retourner null
+	})
+
+	it('handles an invalid date string gracefully', () => {
+		const modelValue = 'invalid date'
+		const result = wrapper.vm.initializeSelectedDates(modelValue)
+
+		expect(result).toBeNull()
+	})
+
+	it('sets selectedDates to null when input is empty', () => {
+		wrapper.vm.updateSelectedDates('') // Simule un input vide
+
+		expect(wrapper.vm.selectedDates).toBeNull() // Vérifie que selectedDates est null
+	})
+
+	it('parses a valid date string and updates selectedDates', () => {
+		const validInput = '15/01/2023'
+		wrapper.vm.updateSelectedDates(validInput) // Simule un input valide
+
+		expect(wrapper.vm.selectedDates).toBeInstanceOf(Date) // Vérifie que selectedDates est une instance de Date
+		expect(wrapper.vm.selectedDates.toISOString().split('T')[0]).toBe('2023-01-15') // Vérifie la date exacte
+	})
+
+	it('does not update selectedDates for invalid date string', () => {
+		const invalidInput = 'invalid-date'
+		wrapper.vm.updateSelectedDates(invalidInput) // Simule un input invalide
+
+		expect(wrapper.vm.selectedDates).toBeNull() // Vérifie que selectedDates reste null
+	})
+})

package/src/components/DialogBox/DialogBox.stories.ts

@@ -3,7 +3,7 @@ import { VBtn } from 'vuetify/components'
 import DialogBox from './DialogBox.vue'
 import { fn } from '@storybook/test'
 
-const meta = {
+const meta: Meta<typeof DialogBox> = {
 	title: 'Composants/Feedback/DialogBox',
 	component: DialogBox,
 	parameters: {

package/src/components/ExternalLinks/Accessibilite.mdx

@@ -0,0 +1,14 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as AccessStories from './Accessibilite.stories.ts';
+
+<Meta of={AccessStories} />
+
+Accessibilité
+=============
+<Story of={AccessStories.Legende} />
+<br />
+
+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+<Story of={AccessStories.AccessibilitePanel} />
+<br />