@cnamts/synapse 0.0.11-alpha → 0.0.13-alpha

package/src/components/DatePicker/DatePicker.vue

@@ -3,11 +3,14 @@
 	import SyTextField from '@/components/Customs/SyTextField/SyTextField.vue'
 	import DateTextInput from './DateTextInput.vue'
 	import { VDatePicker } from 'vuetify/components'
-	import { useFieldValidation } from '@/composables/rules/useFieldValidation'
-	import type { RuleOptions } from '@/composables/rules/useFieldValidation'
+	import { useValidation } from '@/composables/validation/useValidation'
+	import { useDateFormat } from '@/composables/date/useDateFormat'
+	import { useDateInitialization, type DateValue, type DateInput } from '@/composables/date/useDateInitialization'
+	import { useDatePickerAccessibility } from '@/composables/date/useDatePickerAccessibility'
 
-	type DateValue = string | [string, string] | null
-	type DateInput = string | string[] | null | object
+	const { parseDate, formatDate } = useDateFormat()
+	const { initializeSelectedDates } = useDateInitialization()
+	const { updateAccessibility } = useDatePickerAccessibility()
 
 	const props = withDefaults(defineProps<{
 		modelValue?: DateInput
@@ -21,14 +24,18 @@
 		displayIcon?: boolean
 		displayAppendIcon?: boolean
 		displayPrependIcon?: boolean
-		customRules?: { type: string, options: RuleOptions }[]
-		customWarningRules?: { type: string, options: RuleOptions }[]
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- mock Axios headers
+		customRules?: { type: string, options: any }[]
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- mock Axios headers
+		customWarningRules?: { type: string, options: any }[]
 		isDisabled?: boolean
 		noIcon?: boolean
 		noCalendar?: boolean
 		isOutlined?: boolean
 		isReadOnly?: boolean
 		width?: string
+		disableErrorHandling?: boolean
+		showSuccessMessages?: boolean
 	}>(), {
 		modelValue: undefined,
 		placeholder: 'Sélectionner une date',
@@ -49,6 +56,8 @@
 		isOutlined: true,
 		isReadOnly: false,
 		width: '100%',
+		disableErrorHandling: false,
+		showSuccessMessages: true,
 	})
 
 	const emit = defineEmits<{
@@ -58,94 +67,126 @@
 		(e: 'blur'): void
 	}>()
 
-	// Fonction pour parser les dates selon le format spécifié
-	const parseDate = (dateString: string, format: string = props.format): Date | null => {
-		if (!dateString) return null
+	const selectedDates = ref<Date | Date[] | null>(
+		initializeSelectedDates(props.modelValue as DateInput | null, props.format, props.dateFormatReturn),
+	)
 
-		// Créer un mapping des positions des éléments de date selon le format
-		const separator = format.includes('/') ? '/' : format.includes('-') ? '-' : '.'
-		const parts = format.split(separator)
-		const dateParts = dateString.split(separator)
+	const isDatePickerVisible = ref(false)
+	const validation = useValidation({
+		showSuccessMessages: props.showSuccessMessages,
+		fieldIdentifier: 'Date',
+		customRules: props.customRules,
+		warningRules: props.customWarningRules,
+		disableErrorHandling: props.disableErrorHandling,
+	})
+	const { errors, warnings, successes, validateField, clearValidation } = validation
 
-		if (parts.length !== dateParts.length) return null
+	const errorMessages = errors
+	const warningMessages = warnings
+	const successMessages = successes
+	const displayFormattedDate = ref('')
 
-		let day = '', month = '', year = ''
+	const textInputValue = ref<string>('')
 
-		// Extraire les valeurs selon leur position dans le format
-		parts.forEach((part, index) => {
-			const value = dateParts[index]
-			if (part.includes('DD')) day = value
-			else if (part.includes('MM')) month = value
-			else if (part.includes('YYYY')) year = value
-			else if (part.includes('YY')) year = '20' + value // Assumons que nous sommes au 21ème siècle
-		})
+	// Variable pour éviter les mises à jour récursives
+	const isUpdatingFromInternal = ref(false)
 
-		// Vérifier que nous avons toutes les parties nécessaires
-		if (!day || !month || !year) return null
+	// Déclaration de la fonction validateDates avant son utilisation
+	const validateDates = (forceValidation = false) => {
+		if (props.noCalendar) {
+			// En mode no-calendar, on délègue la validation au DateTextInput
+			return
+		}
 
-		const date = new Date(`${year}-${month}-${day}`)
-		return isNaN(date.getTime()) ? null : date
-	}
+		// Réinitialiser la validation
+		clearValidation()
 
-	function initializeSelectedDates(
-		modelValue: DateInput | null,
-	): Date | Date[] | null {
-		if (!modelValue) return null
-
-		if (Array.isArray(modelValue)) {
-			if (modelValue.length >= 2) {
-				const dates = [parseDate(modelValue[0]), parseDate(modelValue[1])]
-				// Vérifie si l'une des dates est invalide
-				if (dates.some(date => date === null)) {
-					return []
-				}
-				// Vérifie si la première date est après la seconde
-				if (dates[0] && dates[1] && dates[0] > dates[1]) {
-					return []
-				}
-				// Filtrer les dates nulles et convertir en tableau de Date
-				return dates.filter((date): date is Date => date !== null)
-			}
-			if (modelValue.length === 1) {
-				const date = parseDate(modelValue[0])
-				return date === null ? [] : [date]
+		// Si la gestion des erreurs est désactivée, on effectue la validation interne
+		// mais on n'ajoute pas les messages d'erreur
+		const shouldDisplayErrors = !props.disableErrorHandling
+
+		// Vérifier si le champ est requis et vide
+		if ((forceValidation || !isUpdatingFromInternal.value) && props.required && (!selectedDates.value || (Array.isArray(selectedDates.value) && selectedDates.value.length === 0))) {
+			if (shouldDisplayErrors) {
+				errors.value.push('La date est requise.')
 			}
-			return []
+			return
 		}
 
-		// Si modelValue est un objet, on le convertit en chaîne
-		if (typeof modelValue === 'object') {
-			return null
-		}
+		if (!selectedDates.value) return
+
+		// Préparer les dates à valider
+		const datesToValidate = Array.isArray(selectedDates.value)
+			? selectedDates.value
+			: [selectedDates.value]
+
+		// Valider chaque date
+		if (shouldDisplayErrors) {
+			datesToValidate.forEach((date) => {
+				validateField(
+					date,
+					props.customRules,
+					props.customWarningRules,
+				)
+			})
 
-		const date = parseDate(modelValue)
-		return date === null ? null : date
+			// Dédoublonner les messages (au cas où plusieurs dates auraient les mêmes messages)
+			errors.value = [...new Set(errors.value)]
+			warnings.value = [...new Set(warnings.value)]
+			successes.value = [...new Set(successes.value)]
+		}
 	}
 
-	// Utilisation de la fonction pour initialiser `selectedDates`
-	const selectedDates = ref<Date | Date[] | null>(
-		initializeSelectedDates(props.modelValue as DateInput | null),
-	)
-
-	const isDatePickerVisible = ref(false)
-	const errorMessages = ref<string[]>([])
-	const successMessages = ref<string[]>([])
-	const warningMessages = ref<string[]>([])
-	const displayFormattedDate = ref('')
+	// Fonction centralisée pour mettre à jour le modèle
+	const updateModel = (value: DateValue) => {
+		// Éviter les mises à jour inutiles
+		if (JSON.stringify(value) === JSON.stringify(props.modelValue)) return
 
-	const textInputValue = ref<string>('')
+		try {
+			isUpdatingFromInternal.value = true
+			emit('update:modelValue', value)
+		}
+		finally {
+			// S'assurer que le flag est toujours réinitialisé
+			setTimeout(() => {
+				isUpdatingFromInternal.value = false
+			}, 0)
+		}
+	}
 
+	// Watcher pour mettre à jour le modèle lorsque les dates sélectionnées changent
 	watch(selectedDates, (newValue) => {
+		// Valider les dates
 		validateDates()
-		if (props.displayRange) {
-			if (Array.isArray(newValue) && newValue.length >= 2) {
-				isDatePickerVisible.value = false
-				emit('closed')
+
+		// Mettre à jour le modèle si nécessaire
+		if (newValue !== null) {
+			updateModel(formattedDate.value)
+
+			// Mettre à jour textInputValue pour le DateTextInput
+			try {
+				isUpdatingFromInternal.value = true
+				if (Array.isArray(newValue)) {
+					// Pour les plages de dates, utiliser la première date
+					if (newValue.length > 0) {
+						textInputValue.value = formatDate(newValue[0], props.format)
+					}
+				}
+				else {
+					// Pour une date unique
+					textInputValue.value = formatDate(newValue, props.format)
+				}
+			}
+			finally {
+				setTimeout(() => {
+					isUpdatingFromInternal.value = false
+				}, 0)
 			}
 		}
 		else {
-			isDatePickerVisible.value = false
-			emit('closed')
+			updateModel(null)
+			// Réinitialiser textInputValue
+			textInputValue.value = ''
 		}
 	})
 
@@ -160,16 +201,6 @@
 		'min-width': '100%',
 	}))
 
-	// Formate une date unique au format spécifié
-	const formatDate = (date: Date, format: string): string => {
-		if (!date) return ''
-		const day = date.getDate().toString().padStart(2, '0')
-		const month = (date.getMonth() + 1).toString().padStart(2, '0')
-		const year = date.getFullYear().toString()
-		const shortYear = year.slice(-2)
-		return format.replace('YYYY', year).replace('YY', shortYear).replace('MM', month).replace('DD', day)
-	}
-
 	// Date(s) formatée(s) en chaîne de caractères pour la valeur de retour
 	const formattedDate = computed<DateValue>(() => {
 		if (!selectedDates.value) return ''
@@ -208,6 +239,9 @@
 	}, { immediate: true })
 
 	watch(textInputValue, (newValue) => {
+		// Éviter les mises à jour récursives
+		if (isUpdatingFromInternal.value) return
+
 		// Parse la date avec le format d'affichage
 		const date = parseDate(newValue, props.format)
 		if (date) {
@@ -215,12 +249,50 @@
 			const formattedValue = props.dateFormatReturn
 				? formatDate(date, props.dateFormatReturn)
 				: formatDate(date, props.format)
-			emit('update:modelValue', formattedValue)
+			updateModel(formattedValue)
+
+			// Mettre à jour selectedDates sans déclencher de watchers supplémentaires
+			try {
+				isUpdatingFromInternal.value = true
+				selectedDates.value = date
+				// Mettre à jour l'affichage formaté
+				displayFormattedDate.value = formatDate(date, props.format)
+			}
+			finally {
+				setTimeout(() => {
+					isUpdatingFromInternal.value = false
+				}, 0)
+			}
+		}
+		else if (newValue) {
+			// Même si la date n'est pas valide, conserver la valeur saisie
+			// pour éviter que la date ne disparaisse
+			updateModel(newValue)
+			// Mettre à jour l'affichage formaté pour qu'il corresponde à ce qui est saisi
+			try {
+				isUpdatingFromInternal.value = true
+				displayFormattedDate.value = newValue
+			}
+			finally {
+				setTimeout(() => {
+					isUpdatingFromInternal.value = false
+				}, 0)
+			}
 		}
 		else {
-			emit('update:modelValue', newValue || null)
+			updateModel(null)
+			// Réinitialiser l'affichage formaté
+			try {
+				isUpdatingFromInternal.value = true
+				displayFormattedDate.value = ''
+				selectedDates.value = null
+			}
+			finally {
+				setTimeout(() => {
+					isUpdatingFromInternal.value = false
+				}, 0)
+			}
 		}
-		updateSelectedDates(newValue)
 	})
 
 	// Date(s) formatée(s) en chaîne de caractères pour l'affichage
@@ -240,16 +312,6 @@
 		return formatDate(selectedDates.value, props.format)
 	})
 
-	// const validateDateValue = (value: DateValue): DateValue => {
-	// 	if (Array.isArray(value)) {
-	// 		if (value.length >= 2) {
-	// 			return [value[0], value[1]] as [string, string]
-	// 		}
-	// 		return value[0] || ''
-	// 	}
-	// 	return value
-	// }
-
 	watch(displayFormattedDateComputed, (newValue) => {
 		if (!props.noCalendar && newValue) {
 			displayFormattedDate.value = newValue
@@ -259,7 +321,7 @@
 	const updateSelectedDates = (input: DateValue) => {
 		if (Array.isArray(input)) {
 			const dates = input
-				.map(date => (date ? parseDate(date) : null))
+				.map(date => (date ? parseDate(date, props.format) : null))
 				.filter((date): date is Date => date !== null)
 
 			if (dates.length === 0) {
@@ -271,7 +333,7 @@
 			return
 		}
 
-		const date = input ? parseDate(input) : null
+		const date = input ? parseDate(input, props.format) : null
 		selectedDates.value = date === null ? null : date
 	}
 
@@ -284,8 +346,6 @@
 
 		// Si on clique dans le conteneur du DatePicker, on ne fait rien
 		if (container) return
-
-		isDatePickerVisible.value = false
 		emit('closed')
 		// Déclencher la validation à la fermeture
 		validateDates()
@@ -301,17 +361,14 @@
 
 	onMounted(() => {
 		document.addEventListener('click', handleClickOutside)
-		if (props.modelValue) {
-			validateDates()
-		}
-		if (selectedDates.value !== null) {
-			validateDates()
-			// Force format application on mount
-			emit('update:modelValue', formattedDate.value)
-		}
+
+		// Initialiser l'affichage formaté
 		if (displayFormattedDateComputed.value) {
 			displayFormattedDate.value = displayFormattedDateComputed.value
 		}
+
+		// Valider les dates au montage
+		validateDates()
 	})
 
 	onBeforeUnmount(() => {
@@ -324,117 +381,62 @@
 		if (props.noCalendar) {
 			return dateTextInputRef.value?.validateOnSubmit()
 		}
-		validateDates()
-		return errorMessages.value.length === 0
+		// Forcer la validation pour ignorer les conditions de validation interactive
+		validateDates(true)
+		// Retourner directement un booléen pour maintenir la compatibilité avec les tests existants
+		return errors.value.length === 0
 	}
 
-	defineExpose({
-		validateOnSubmit,
-		isDatePickerVisible,
-		selectedDates,
-		errorMessages,
-		handleClickOutside,
-		initializeSelectedDates,
-	})
+	const showDatePicker = () => {
+		if (props.isDisabled || props.isReadOnly) return
 
-	// les btns du date picker ne sont pas accessibles, on les rend accessibles
-	watch(isDatePickerVisible, async (newValue) => {
-		if (newValue) {
-			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) {
-				arrowDown.setAttribute('aria-label', 'Fleche vers le bas')
-			}
-
-			arrowLeftButtons.forEach((button, index) => {
-				if (index === 0) {
-					button.setAttribute('aria-label', 'Fleche vers la gauche')
-				}
-				else if (index === 1) {
-					button.setAttribute('aria-label', 'Fleche vers la droite')
-				}
-			})
-		}
-	})
-
-	const handlePrependIconClick = () => {
 		isDatePickerVisible.value = true
-	}
 
-	const handleAppendIconClick = () => {
-		isDatePickerVisible.value = true
+		// Mettre à jour l'accessibilité après l'ouverture du DatePicker
+		nextTick(() => {
+			updateAccessibility()
+		})
 	}
 
-	type Rule = { type: string, options: RuleOptions }
-
-	const customRules = ref<Rule[]>(props.customRules || [])
-	const customWarningRules = ref<Rule[]>(props.customWarningRules || [])
+	const openDatePicker = () => {
+		showDatePicker()
+	}
 
-	const { generateRules } = useFieldValidation()
-	const validationRules = generateRules(customRules.value)
-	const warningValidationRules = generateRules(customWarningRules.value)
+	type ViewMode = 'month' | 'year' | 'months' | undefined
 
-	const validateDates = () => {
-		errorMessages.value = []
-		successMessages.value = []
-		warningMessages.value = []
+	// Variable pour suivre le mode d'affichage actuel du DatePicker
+	const currentViewMode = ref<ViewMode>(props.isBirthDate ? 'year' : 'month')
 
-		if (props.noCalendar) {
-			// En mode no-calendar, on délègue la validation au DateTextInput
-			return
-		}
+	// Fonction pour gérer le changement de mode d'affichage
+	const handleViewModeUpdate = (newMode: ViewMode) => {
+		currentViewMode.value = newMode
+	}
 
-		const addMessages = (dates, rules) => {
-			dates.forEach((date) => {
-				rules.forEach((rule) => {
-					const result = rule(date)
-					if (result?.error) {
-						errorMessages.value.push(result.error)
-						errorMessages.value = [...new Set(errorMessages.value)]
-					}
-					else if (result?.warning) {
-						warningMessages.value.push(result.warning)
-						warningMessages.value = [...new Set(warningMessages.value)]
-					}
-					else if (result?.success) {
-						successMessages.value.push(result.success)
-						successMessages.value = [...new Set(successMessages.value)]
-					}
-				})
-			})
+	// Fonction pour gérer la sélection de l'année quand isBirthDate est true
+	const handleYearUpdate = () => {
+		if (props.isBirthDate) {
+			// Après la sélection de l'année, passer automatiquement à la sélection du mois
+			currentViewMode.value = 'months'
 		}
+	}
 
-		const handleValidation = (dates) => {
-			if (Array.isArray(dates) && dates.length > 1) {
-				// Pour une plage, on ne vérifie que le premier et le dernier jour
-				const [firstDate, ...rest] = dates
-				const lastDate = rest[rest.length - 1]
-				const datesToValidate = [firstDate, lastDate]
-
-				// Validation des règles
-				addMessages(datesToValidate, validationRules)
-				addMessages(datesToValidate, warningValidationRules)
-			}
-			else {
-				// Pour une date unique, on valide normalement
-				const datesToValidate = Array.isArray(dates) ? dates : [dates]
-				addMessages(datesToValidate, validationRules)
-				addMessages(datesToValidate, warningValidationRules)
-			}
+	// Fonction pour gérer la sélection du mois quand isBirthDate est true
+	const handleMonthUpdate = () => {
+		if (props.isBirthDate) {
+			// Après la sélection du mois, passer automatiquement à la sélection du jour
+			currentViewMode.value = undefined
 		}
+	}
 
-		if (props.required && (!selectedDates.value || (Array.isArray(selectedDates.value) && selectedDates.value.length === 0))) {
-			errorMessages.value.push('La date est requise.')
+	watch(isDatePickerVisible, (isVisible) => {
+		if (!isVisible && props.isBirthDate) {
+			// Réinitialiser le mode d'affichage au type birthdate
+			currentViewMode.value = 'year'
 		}
-		else if (selectedDates.value) {
-			handleValidation(Array.isArray(selectedDates.value) ? selectedDates.value : [selectedDates.value])
-		}
-	}
+	})
 
 	const getIcon = () => {
-		if (props.noCalendar) {
+		if (props.noCalendar || props.disableErrorHandling) {
 			return
 		}
 		switch (true) {
@@ -449,17 +451,65 @@
 		}
 	}
 
-	// Watch sur modelValue pour gérer les changements externes
-	watch(() => props.modelValue, (newValue) => {
+	const syncFromModelValue = (newValue: DateInput | undefined) => {
 		if (!newValue || newValue === '') {
 			selectedDates.value = null
 			textInputValue.value = ''
 			displayFormattedDate.value = ''
+			validateDates()
+			return
 		}
-		else {
-			selectedDates.value = initializeSelectedDates(newValue)
+
+		selectedDates.value = initializeSelectedDates(newValue, props.format, props.dateFormatReturn)
+
+		if (selectedDates.value) {
+			const firstDate = Array.isArray(selectedDates.value)
+				? selectedDates.value[0]
+				: selectedDates.value
+
+			textInputValue.value = formatDate(firstDate, props.format)
+			displayFormattedDate.value = displayFormattedDateComputed.value || ''
+		}
+
+		validateDates()
+	}
+
+	watch(() => props.modelValue, (newValue) => {
+		if (isUpdatingFromInternal.value) {
+			if (props.displayRange) {
+				if (Array.isArray(newValue) && newValue.length >= 2) {
+					isDatePickerVisible.value = false
+					emit('closed')
+				}
+			}
+			else {
+				isDatePickerVisible.value = false
+				emit('closed')
+			}
+			return
+		}
+
+		try {
+			isUpdatingFromInternal.value = true
+			syncFromModelValue(newValue)
+		}
+		finally {
+			setTimeout(() => {
+				isUpdatingFromInternal.value = false
+			}, 0)
 		}
 	}, { immediate: true })
+
+	defineExpose({
+		validateOnSubmit,
+		isDatePickerVisible,
+		selectedDates,
+		errorMessages,
+		handleClickOutside,
+		initializeSelectedDates,
+		updateAccessibility,
+		openDatePicker,
+	})
 </script>
 
 <template>
@@ -486,6 +536,8 @@
 				:display-append-icon="props.displayAppendIcon"
 				:display-prepend-icon="props.displayPrependIcon"
 				:no-icon="props.noIcon"
+				:disable-error-handling="props.disableErrorHandling"
+				:show-success-messages="props.showSuccessMessages"
 				title="Date text input"
 				@focus="emit('focus')"
 				@blur="emit('blur')"
@@ -499,7 +551,7 @@
 				:class="[getMessageClasses(), 'label-hidden-on-focus']"
 				:error-messages="errorMessages"
 				:warning-messages="warningMessages"
-				:success-messages="successMessages"
+				:success-messages="props.showSuccessMessages ? successMessages : []"
 				:is-disabled="props.isDisabled"
 				:is-read-only="true"
 				:label="props.placeholder"
@@ -507,37 +559,54 @@
 				:prepend-icon="displayIcon && !displayAppendIcon ? 'calendar' : undefined"
 				:variant-style="props.isOutlined ? 'outlined' : 'underlined'"
 				color="primary"
+				:show-success-messages="props.showSuccessMessages"
 				is-clearable
 				title="Date Picker"
-				@focus="isDatePickerVisible = true"
+				@focus="openDatePicker"
 				@update:model-value="updateSelectedDates"
-				@prepend-icon-click="handlePrependIconClick"
-				@append-icon-click="handleAppendIconClick"
+				@prepend-icon-click="openDatePicker"
+				@append-icon-click="openDatePicker"
 			/>
 		</template>
-		<transition name="fade">
-			<v-locale-provider locale="fr">
-				<VDatePicker
-					v-if="isDatePickerVisible && !props.noCalendar"
-					v-model="selectedDates"
-					:first-day-of-week="1"
-					:multiple="props.displayRange ? 'range' : false"
-					:show-adjacent-months="true"
-					:show-week="props.showWeekNumber"
-					:view-mode="props.isBirthDate ? 'year' : 'month'"
-					color="primary"
-				>
-					<template #title>
-						Sélectionnez une date
-					</template>
-					<template #header>
-						<h3 class="mx-auto my-auto ml-5 mb-4">
-							{{ todayInString }}
-						</h3>
-					</template>
-				</VDatePicker>
-			</v-locale-provider>
-		</transition>
+		<div>
+			<VMenu
+				v-if="!props.noCalendar"
+				v-model="isDatePickerVisible"
+				activator="parent"
+				:min-width="0"
+				location="bottom"
+				:close-on-content-click="false"
+				:open-on-click="false"
+				transition="fade-transition"
+				attach="body"
+				:offset="[-20, 5]"
+			>
+				<transition name="fade">
+					<VDatePicker
+						v-if="isDatePickerVisible && !props.noCalendar"
+						v-model="selectedDates"
+						color="primary"
+						:first-day-of-week="1"
+						:multiple="props.displayRange ? 'range' : false"
+						:show-adjacent-months="true"
+						:show-week="props.showWeekNumber"
+						:view-mode="currentViewMode"
+						@update:view-mode="handleViewModeUpdate"
+						@update:year="handleYearUpdate"
+						@update:month="handleMonthUpdate"
+					>
+						<template #title>
+							Sélectionnez une date
+						</template>
+						<template #header>
+							<h3 class="mx-auto my-auto ml-5 mb-4">
+								{{ todayInString }}
+							</h3>
+						</template>
+					</VDatePicker>
+				</transition>
+			</VMenu>
+		</div>
 	</div>
 </template>