@cnamts/synapse 1.0.0 → 1.0.1

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

@@ -0,0 +1,121 @@
+import { ref } from 'vue'
+import type { Ref } from 'vue'
+
+/**
+ * Composable pour gérer la sélection de dates dans les composants DatePicker
+ * Gère les plages de dates et la génération des dates intermédiaires
+ */
+export function useDateSelection(
+	parseDate: (dateStr: string, format: string) => Date | null,
+	selectedDates: Ref<Date | (Date | null)[] | null>,
+	format: string,
+	displayRange: boolean,
+) {
+	// Stockage des dates de début et de fin pour les plages
+	const rangeBoundaryDates = ref<[Date | null, Date | null] | null>(null)
+
+	/**
+	 * Génère toutes les dates entre deux dates (incluses)
+	 */
+	const generateDateRange = (start: Date, end: Date): Date[] => {
+		const dateArray: Date[] = []
+		const currentDate = new Date(start)
+
+		// Ajouter la date de début
+		dateArray.push(new Date(currentDate))
+
+		// Ajouter toutes les dates intermédiaires jusqu'à la date de fin
+		while (currentDate < end) {
+			currentDate.setDate(currentDate.getDate() + 1)
+			dateArray.push(new Date(currentDate))
+		}
+
+		return dateArray
+	}
+
+	/**
+	 * Met à jour les dates sélectionnées en fonction de l'entrée
+	 */
+	const updateSelectedDates = (input: Date | Date[] | string | string[] | null | undefined) => {
+		// Cas 0: Input est null ou undefined (suppression de la sélection)
+		if (input === null || input === undefined) {
+			selectedDates.value = null
+			rangeBoundaryDates.value = null
+			return
+		}
+
+		// Cas 1: Input est un tableau de dates ou de chaînes (sélection depuis le calendrier)
+		if (Array.isArray(input)) {
+			const dates = input
+				.map((item) => {
+					if (item instanceof Date) return item
+					return item ? parseDate(item, format) : null
+				})
+				.filter((date): date is Date => date !== null)
+
+			if (dates.length === 0) {
+				selectedDates.value = null
+				rangeBoundaryDates.value = null
+				return
+			}
+
+			if (displayRange && dates.length >= 2) {
+				// Trier les dates pour s'assurer que nous avons la première et la dernière
+				dates.sort((a, b) => a.getTime() - b.getTime())
+
+				// Récupérer les dates de début et de fin
+				const startDate = dates[0]
+				const endDate = dates[dates.length - 1]
+
+				// Stocker les dates de début et de fin pour la plage, même si la plage est invalide
+				rangeBoundaryDates.value = [startDate, endDate]
+
+				// Pour l'affichage dans le calendrier, générer les dates intermédiaires si la plage est valide
+				if (startDate && endDate && startDate.getTime() <= endDate.getTime()) {
+					const allDates = generateDateRange(startDate, endDate)
+					selectedDates.value = allDates
+				}
+				else {
+					// Même si la plage est invalide, conserver les deux dates pour l'affichage
+					// Cela permettra à l'utilisateur de voir et corriger la plage invalide
+					selectedDates.value = [startDate, endDate]
+				}
+			}
+			else {
+				selectedDates.value = dates
+				rangeBoundaryDates.value = null
+			}
+			return
+		}
+
+		// Cas 2: Input est une chaîne de caractères (saisie manuelle)
+		if (!displayRange) {
+			// Mode date unique
+			const date = input && typeof input === 'string' ? parseDate(input, format) : null
+			selectedDates.value = date === null ? null : date
+			rangeBoundaryDates.value = null
+		}
+		else if (typeof input === 'string') {
+			// Mode plage de dates
+			const dates = input.split(' - ')
+			if (dates.length === 2) {
+				const startDate = parseDate(dates[0], format)
+				const endDate = parseDate(dates[1], format)
+				if (startDate && endDate) {
+					// Stocker les dates de début et de fin pour la plage
+					rangeBoundaryDates.value = [startDate, endDate]
+
+					// Générer toutes les dates intermédiaires pour l'affichage dans le calendrier
+					const allDates = generateDateRange(startDate, endDate)
+					selectedDates.value = allDates
+				}
+			}
+		}
+	}
+
+	return {
+		updateSelectedDates,
+		rangeBoundaryDates,
+		generateDateRange,
+	}
+}

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,58 @@
+import { computed, type ComputedRef } from 'vue'
+import dayjs from 'dayjs'
+import { type DateObjectValue } from '../types'
+
+export interface DisplayedDateStringProps {
+	selectedDates: { value: DateObjectValue }
+	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
+
+		// Si nous avons une plage de dates
+		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,101 @@
+import { type Ref } from 'vue'
+import { type DateValue } from '@/composables/date/useDateInitializationDayjs'
+import { type DateObjectValue } from '../types'
+
+/**
+ * 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>
+
+	// 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,
+		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) {
+			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)
+		validateManualInput(displayFormattedDate.value || '')
+	}
+
+	return {
+		handleInputBlur,
+	}
+}