@cnamts/synapse 1.0.0 → 1.0.2

package/src/components/DatePicker/composables/useDateValidation.ts

@@ -0,0 +1,225 @@
+import { type Ref } from 'vue'
+import { type ValidationResult } from '@/composables/validation/useValidation'
+import { type DateObjectValue } from '../types'
+import { DATE_PICKER_MESSAGES } from '../constants/messages'
+
+/**
+ * Composable pour la validation des dates
+ *
+ * @param options - Options de configuration
+ * @returns Fonctions pour la validation des dates
+ */
+export const useDateValidation = (options: {
+	// Propriétés de configuration
+	noCalendar?: boolean
+	required?: boolean
+	displayRange?: boolean
+	disableErrorHandling?: boolean
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Règles personnalisées
+	customRules?: { type: string, options: any }[]
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Règles d'avertissement personnalisées
+	customWarningRules?: { type: string, options: any }[]
+
+	// Références réactives
+	selectedDates: Ref<DateObjectValue>
+	isUpdatingFromInternal: Ref<boolean>
+	currentRangeIsValid: Ref<boolean>
+	getRangeValidationError: Ref<string>
+
+	// Fonctions de validation
+	clearValidation: () => void
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Règles personnalisées
+	validateField: (value: any, rules?: any[], warningRules?: any[]) => ValidationResult
+
+	// Références aux messages
+	errors: Ref<string[]>
+	warnings: Ref<string[]>
+	successes: Ref<string[]>
+}) => {
+	const {
+		noCalendar = false,
+		required = false,
+		displayRange = false,
+		disableErrorHandling = false,
+		customRules = [],
+		customWarningRules = [],
+		selectedDates,
+		isUpdatingFromInternal,
+		currentRangeIsValid,
+		getRangeValidationError,
+		clearValidation,
+		validateField,
+		errors,
+		warnings,
+		successes,
+	} = options
+
+	/**
+   * Valide les dates sélectionnées
+   *
+   * @param forceValidation - Force la validation même si isUpdatingFromInternal est vrai
+   * @returns Résultat de la validation
+   */
+	const validateDates = (forceValidation = false): ValidationResult => {
+		if (noCalendar) {
+			// En mode no-calendar, on délègue la validation au DateTextInput
+			return {
+				hasError: false,
+				hasWarning: false,
+				hasSuccess: false,
+				state: {
+					errors: [],
+					warnings: [],
+					successes: [],
+				},
+			}
+		}
+
+		// Réinitialiser la validation
+		clearValidation()
+
+		// 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 = !disableErrorHandling
+
+		// Vérifier si le champ est requis et vide
+		if ((forceValidation || !isUpdatingFromInternal.value) && required && (!selectedDates.value || (Array.isArray(selectedDates.value) && selectedDates.value.length === 0))) {
+			if (shouldDisplayErrors) {
+				// Ajouter le message d'erreur dans le tableau errors.value
+				errors.value.push(DATE_PICKER_MESSAGES.ERROR_REQUIRED)
+				return {
+					hasError: true,
+					hasWarning: false,
+					hasSuccess: false,
+					state: {
+						errors: [DATE_PICKER_MESSAGES.ERROR_REQUIRED],
+						warnings: [],
+						successes: [],
+					},
+				}
+			}
+			else {
+				return {
+					hasError: true,
+					hasWarning: false,
+					hasSuccess: false,
+					state: {
+						errors: [],
+						warnings: [],
+						successes: [],
+					},
+				}
+			}
+		}
+
+		if (!selectedDates.value) {
+			return {
+				hasError: false,
+				hasWarning: false,
+				hasSuccess: true,
+				state: {
+					errors: [],
+					warnings: [],
+					successes: [],
+				},
+			}
+		}
+
+		// Détecter si nous sommes en train de saisir une plage incomplète
+		// (mode plage activé, avec une seule date sélectionnée)
+		if (displayRange && Array.isArray(selectedDates.value)
+			&& selectedDates.value.length === 2 && selectedDates.value[0] && !selectedDates.value[1]
+			&& !forceValidation) {
+			// Si nous sommes en train de saisir la première date d'une plage,
+			// ne pas appliquer les règles de validation pour éviter le message "Date invalide"
+			return {
+				hasError: false,
+				hasWarning: false,
+				hasSuccess: false,
+				state: {
+					errors: [],
+					warnings: [],
+					successes: [],
+				},
+			}
+		}
+
+		// Préparer les dates à valider
+		const datesToValidate = Array.isArray(selectedDates.value)
+			? selectedDates.value.filter(Boolean) // Filtrer les valeurs null
+			: [selectedDates.value]
+
+		let isValid = true
+
+		// Valider chaque date
+		if (shouldDisplayErrors) {
+			datesToValidate.forEach((date) => {
+				if (!date) return // Ignorer les dates null
+
+				const result = validateField(
+					date,
+					customRules,
+					customWarningRules,
+				)
+				if (result.hasError) {
+					isValid = false
+				}
+			})
+
+			// Vérifier la validité de la plage de dates si en mode plage
+			if (displayRange && Array.isArray(selectedDates.value) && selectedDates.value.length >= 2) {
+				// Récupérer les dates de début et de fin
+				const startDate = selectedDates.value[0]
+				const endDate = selectedDates.value[selectedDates.value.length - 1]
+
+				// Vérifier si les deux dates sont présentes et si la plage est valide
+				if (startDate && endDate && startDate.getTime() > endDate.getTime()) {
+					// La date de fin est antérieure à la date de début
+					const rangeError = DATE_PICKER_MESSAGES.ERROR_END_BEFORE_START
+					if (!errors.value.includes(rangeError)) {
+						errors.value.push(rangeError)
+						isValid = false
+					}
+				}
+				// Utiliser également la validation du composable useDateRangeValidation
+				else if (!currentRangeIsValid.value) {
+					const rangeError = getRangeValidationError.value
+					if (rangeError && !errors.value.includes(rangeError)) {
+						errors.value.push(rangeError)
+						isValid = false
+					}
+				}
+			}
+
+			// 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)]
+		}
+
+		return {
+			hasError: !isValid,
+			hasWarning: warnings.value.length > 0,
+			hasSuccess: successes.value.length > 0 && isValid && warnings.value.length === 0,
+			state: {
+				errors: errors.value,
+				warnings: warnings.value,
+				successes: successes.value,
+			},
+		}
+	}
+
+	/**
+   * Valide les dates pour la soumission d'un formulaire
+   *
+   * @returns Résultat de la validation
+   */
+	const validateOnSubmit = (): ValidationResult => {
+		return validateDates(true)
+	}
+
+	return {
+		validateDates,
+		validateOnSubmit,
+	}
+}

package/src/components/DatePicker/composables/useDisplayedDateString.ts

@@ -0,0 +1,70 @@
+import { computed, type ComputedRef } from 'vue'
+import dayjs from 'dayjs'
+import { type DateObjectValue } from '../types'
+
+export interface DisplayedDateStringProps {
+	selectedDates: { value: DateObjectValue }
+	rangeBoundaryDates?: { value: [Date | null, Date | null] | null }
+	todayInString: ComputedRef<string>
+}
+
+export interface DisplayedDateStringReturn {
+	displayedDateString: ComputedRef<string>
+}
+
+/**
+ * Composable pour formater l'affichage des dates sélectionnées
+ * Gère à la fois les dates uniques et les plages de dates
+ */
+export function useDisplayedDateString(props: DisplayedDateStringProps): DisplayedDateStringReturn {
+	// Computed pour formater l'affichage des dates sélectionnées
+	const displayedDateString = computed(() => {
+		// Si nous n'avons pas de date sélectionnée, afficher la date du jour
+		if (!props.selectedDates.value) return props.todayInString.value
+
+		// Priorité aux rangeBoundaryDates pour les plages
+		if (props.rangeBoundaryDates?.value && props.rangeBoundaryDates.value[0] && props.rangeBoundaryDates.value[1]) {
+			const startDate = dayjs(props.rangeBoundaryDates.value[0])
+			const endDate = dayjs(props.rangeBoundaryDates.value[1])
+
+			if (startDate.isValid() && endDate.isValid()) {
+				// Format court pour la date de début, format complet pour la date de fin
+				return `${startDate.format('D MMMM')} - ${endDate.format('D MMMM YYYY')}`
+			}
+		}
+
+		// Si nous avons une plage de dates dans selectedDates
+		if (Array.isArray(props.selectedDates.value)) {
+			// Si nous avons les deux dates de la plage
+			if (props.selectedDates.value.length >= 2) {
+				const startDate = dayjs(props.selectedDates.value[0])
+				const endDate = dayjs(props.selectedDates.value[props.selectedDates.value.length - 1])
+
+				if (startDate.isValid() && endDate.isValid()) {
+					// Format court pour la date de début, format complet pour la date de fin
+					return `${startDate.format('D MMMM')} - ${endDate.format('D MMMM YYYY')}`
+				}
+			}
+			// Si nous n'avons qu'une seule date dans le tableau
+			else if (props.selectedDates.value.length === 1) {
+				const date = dayjs(props.selectedDates.value[0])
+				if (date.isValid()) {
+					return date.format('dddd D MMMM YYYY')
+				}
+			}
+			return props.todayInString.value
+		}
+		// Si nous avons une seule date (pas dans un tableau)
+		else {
+			const date = dayjs(props.selectedDates.value)
+			if (date.isValid()) {
+				return date.format('dddd D MMMM YYYY')
+			}
+			return props.todayInString.value
+		}
+	})
+
+	return {
+		displayedDateString,
+	}
+}

package/src/components/DatePicker/composables/useIconState.ts

@@ -0,0 +1,53 @@
+import { computed, type Ref } from 'vue'
+
+/**
+ * Composable pour déterminer l'icône à afficher en fonction de l'état de validation
+ *
+ * @param options - Options de configuration
+ * @returns Fonction pour obtenir l'icône appropriée
+ */
+export const useIconState = (options: {
+	noCalendar?: boolean
+	disableErrorHandling?: boolean
+	errorMessages: Ref<string[]>
+	warningMessages: Ref<string[]>
+	successMessages: Ref<string[]>
+}) => {
+	const {
+		noCalendar = false,
+		disableErrorHandling = false,
+		errorMessages,
+		warningMessages,
+		successMessages,
+	} = options
+
+	/**
+	 * Détermine l'icône à afficher en fonction de l'état de validation
+	 *
+	 * @returns Le type d'icône à afficher ('error', 'warning', 'success' ou undefined)
+	 */
+	const getIconValue = computed(() => {
+		if (noCalendar || disableErrorHandling) {
+			return undefined
+		}
+
+		switch (true) {
+			case errorMessages.value.length > 0:
+				return 'error'
+			case warningMessages.value.length > 0:
+				return 'warning'
+			case successMessages.value.length > 0:
+				return 'success'
+			default:
+				return undefined
+		}
+	})
+
+	// Propriété exposée pour être utilisée dans le template
+	const getIcon = getIconValue
+
+	return {
+		getIcon,
+		getIconValue,
+	}
+}

package/src/components/DatePicker/composables/useInputBlurHandler.ts

@@ -0,0 +1,165 @@
+import { type Ref, ref } from 'vue'
+import { type DateValue } from '@/composables/date/useDateInitializationDayjs'
+import { type DateObjectValue } from '../types'
+import { DATE_PICKER_MESSAGES } from '../constants/messages'
+
+/**
+ * Composable pour gérer le comportement lors de la perte de focus d'un champ de date
+ *
+ * @param options - Options de configuration
+ * @returns Fonction pour gérer la perte de focus
+ */
+export const useInputBlurHandler = (options: {
+	// Propriétés de configuration
+	format: string
+	dateFormatReturn?: string
+	required?: boolean
+
+	// Références réactives
+	displayFormattedDate: Ref<string>
+	hasInteracted: Ref<boolean>
+	isManualInputActive: Ref<boolean>
+	isUpdatingFromInternal: Ref<boolean>
+	selectedDates: Ref<DateObjectValue>
+	errors?: Ref<string[]>
+
+	// Fonctions
+	validateDateFormat: (dateStr: string) => { isValid: boolean, message: string }
+	parseDate: (dateStr: string, format: string) => Date | null
+	formatDate: (date: Date, format: string) => string
+	updateModel: (value: DateValue) => void
+	validateManualInput: (value: string) => boolean
+
+	// Émetteurs d'événements
+	emitBlur: () => void
+}) => {
+	const {
+		format,
+		dateFormatReturn = '',
+		required = false,
+		displayFormattedDate,
+		hasInteracted,
+		isManualInputActive,
+		isUpdatingFromInternal,
+		selectedDates,
+		errors = ref([]),
+		validateDateFormat,
+		parseDate,
+		formatDate,
+		updateModel,
+		validateManualInput,
+		emitBlur,
+	} = options
+
+	/**
+	 * Gère la perte de focus du champ de saisie de date
+	 */
+	const handleInputBlur = () => {
+		// Émettre l'événement blur
+		emitBlur()
+
+		// Marquer que l'utilisateur a interagi avec le champ
+		hasInteracted.value = true
+
+		// Désactiver le mode de saisie manuelle
+		isManualInputActive.value = false
+
+		// Gérer la mise à jour du modèle en fonction de la validité de la date
+		if (displayFormattedDate.value) {
+			// S'assurer que displayFormattedDate.value est une chaîne de caractères
+			if (typeof displayFormattedDate.value !== 'string') {
+				return
+			}
+
+			// Vérifier si c'est une plage de dates (contient un séparateur)
+			if (displayFormattedDate.value.includes(' - ')) {
+				const parts = displayFormattedDate.value.split(' - ')
+				const startDateStr = parts[0]?.trim() || ''
+				const endDateStr = parts[1]?.trim() || ''
+
+				// Si les deux dates sont présentes, valider et mettre à jour
+				if (startDateStr && endDateStr) {
+					const startValidation = validateDateFormat(startDateStr)
+					const endValidation = validateDateFormat(endDateStr)
+
+					if (startValidation.isValid && endValidation.isValid) {
+						const startDate = parseDate(startDateStr, format)
+						const endDate = parseDate(endDateStr, format)
+
+						if (startDate && endDate) {
+							// Vérifier que la date de fin est postérieure ou égale à la date de début
+							if (startDate.getTime() <= endDate.getTime()) {
+								try {
+									isUpdatingFromInternal.value = true
+									selectedDates.value = [startDate, endDate]
+
+									// Formater les dates selon le format de retour
+									const formattedStartDate = dateFormatReturn
+										? formatDate(startDate, dateFormatReturn)
+										: formatDate(startDate, format)
+									const formattedEndDate = dateFormatReturn
+										? formatDate(endDate, dateFormatReturn)
+										: formatDate(endDate, format)
+
+									// Mettre à jour le modèle avec un tableau de dates formatées
+									updateModel([formattedStartDate, formattedEndDate])
+								}
+								finally {
+									setTimeout(() => {
+										isUpdatingFromInternal.value = false
+									}, 0)
+								}
+							}
+							else {
+								// Ajouter un message d'erreur si la date de fin est antérieure à la date de début
+								if (errors && errors.value) {
+									errors.value = [DATE_PICKER_MESSAGES.ERROR_END_BEFORE_START]
+								}
+							}
+						}
+					}
+				}
+			}
+			else {
+				// Traitement pour une date unique
+				const validation = validateDateFormat(displayFormattedDate.value)
+				if (validation.isValid) {
+					const date = parseDate(displayFormattedDate.value, format)
+					if (date) {
+						// Si la date est valide, mettre à jour selectedDates et le modèle
+						try {
+							isUpdatingFromInternal.value = true
+							selectedDates.value = date
+
+							// Si on a un format de retour, formater la date dans ce format
+							const formattedValue = dateFormatReturn
+								? formatDate(date, dateFormatReturn)
+								: formatDate(date, format)
+							updateModel(formattedValue)
+						}
+						finally {
+							setTimeout(() => {
+								isUpdatingFromInternal.value = false
+							}, 0)
+						}
+					}
+				}
+			}
+		}
+		else if (!required) {
+			// Si le champ est vide et non requis, réinitialiser le modèle
+			updateModel(null)
+		}
+
+		// Valider la saisie manuelle (affiche les messages d'erreur)
+		// Note: La vérification du type string a déjà été faite plus haut
+		// et on retourne si ce n'est pas une chaîne, donc ici displayFormattedDate.value est forcément une chaîne
+		if (displayFormattedDate.value) {
+			validateManualInput(displayFormattedDate.value || '')
+		}
+	}
+
+	return {
+		handleInputBlur,
+	}
+}