@cnamts/synapse 0.0.12-alpha → 0.0.14-alpha

package/src/components/DatePicker/DateTextInput.vue

@@ -2,8 +2,10 @@
 	import { ref, computed, watch, onMounted } from 'vue'
 	import { nextTick } from 'vue'
 	import SyTextField from '@/components/Customs/SyTextField/SyTextField.vue'
-	import { useFieldValidation } from '@/composables/rules/useFieldValidation'
-	import type { RuleOptions } from '@/composables/rules/useFieldValidation'
+	import { useDateFormat } from '@/composables/date/useDateFormat'
+	import { useValidation, type ValidationRule } from '@/composables/validation/useValidation'
+
+	const { parseDate } = useDateFormat()
 
 	type DateValue = string | null
 
@@ -14,15 +16,17 @@
 		dateFormatReturn?: string
 		label?: string
 		required?: boolean
-		isDisabled?: boolean
-		isReadOnly?: boolean
+		disabled?: boolean
+		readOnly?: boolean
 		isOutlined?: boolean
 		displayIcon?: boolean
 		displayAppendIcon?: boolean
 		noIcon?: boolean
-		customRules?: { type: string, options: RuleOptions }[]
-		customWarningRules?: { type: string, options: RuleOptions }[]
+		customRules?: ValidationRule[]
+		customWarningRules?: ValidationRule[]
 		displayPrependIcon?: boolean
+		disableErrorHandling?: boolean
+		showSuccessMessages?: boolean
 	}>(), {
 		modelValue: null,
 		placeholder: 'Sélectionner une date',
@@ -30,8 +34,8 @@
 		dateFormatReturn: undefined,
 		label: undefined,
 		required: false,
-		isDisabled: false,
-		isReadOnly: false,
+		disabled: false,
+		readOnly: false,
 		isOutlined: true,
 		displayIcon: true,
 		displayAppendIcon: false,
@@ -39,6 +43,8 @@
 		customRules: () => [],
 		customWarningRules: () => [],
 		displayPrependIcon: true,
+		disableErrorHandling: false,
+		showSuccessMessages: true,
 	})
 
 	const emit = defineEmits<{
@@ -47,63 +53,27 @@
 		(e: 'blur'): void
 	}>()
 
+	const {
+		errors,
+		warnings,
+		successes,
+		hasError,
+		clearValidation,
+		validateField,
+	} = useValidation({
+		showSuccessMessages: props.showSuccessMessages,
+		fieldIdentifier: props.label || props.placeholder,
+		disableErrorHandling: props.disableErrorHandling,
+	})
+
+	const errorMessages = errors
+	const warningMessages = warnings
+	const successMessages = successes
+
 	const inputValue = ref<string>('')
 	const isFocused = ref(false)
 	const hasInteracted = ref(false)
-	const errorMessages = ref<string[]>([])
-	const warningMessages = ref<string[]>([])
-	const successMessages = ref<string[]>([])
-
-	// Fonction pour parser une date selon le format spécifié
-	const parseDate = (dateStr: string, format: string = props.format): Date | null => {
-		const parts = dateStr.split(/[-/.]/)
-		const formatParts = format.split(/[-/.]/)
-
-		if (parts.length !== formatParts.length) {
-			return null
-		}
-
-		let day = 1, month = 0, year = 1970
-
-		// Mapper les parties selon le format
-		for (let i = 0; i < formatParts.length; i++) {
-			const value = parseInt(parts[i], 10)
-			if (isNaN(value)) {
-				return null
-			}
-
-			switch (formatParts[i].toUpperCase()) {
-			case 'DD':
-				day = value
-				break
-			case 'MM':
-				month = value - 1 // JavaScript months are 0-based
-				break
-			case 'YY':
-				year = value + 2000 // Assuming 20xx for YY format
-				break
-			case 'YYYY':
-				year = value
-				break
-			}
-		}
-
-		// Valider les limites
-		if (month < 0 || month > 11) return null
-		if (day < 1 || day > 31) return null
-		if (year < 1000 || year > 9999) return null // Accepter une plage d'années plus large
-
-		const date = new Date(year, month, day)
-
-		// Vérifier si la date est valide (ex: 31/04 n'existe pas)
-		if (date.getFullYear() !== year || date.getMonth() !== month || date.getDate() !== day) {
-			return null
-		}
-
-		return date
-	}
 
-	// Fonction pour formater une date en chaîne selon le format spécifié
 	const formatDateToString = (date: Date, format: string): string => {
 		const day = date.getDate().toString().padStart(2, '0')
 		const month = (date.getMonth() + 1).toString().padStart(2, '0')
@@ -133,28 +103,23 @@
 		return parts.join(separator)
 	}
 
-	// Fonction pour formater la date pendant la saisie
 	const formatDateInput = (input: string, cursorPosition?: number): { formatted: string, cursorPos: number } => {
 		const separator = props.format.includes('/') ? '/' : props.format.includes('-') ? '-' : '.'
 
-		// Déterminer l'ordre des composants (jour, mois, année) en fonction du format
 		const formatParts = props.format.split(/[/.-]/)
 		const dayIndex = formatParts.findIndex(part => part.toUpperCase().includes('D'))
 		const monthIndex = formatParts.findIndex(part => part.toUpperCase().includes('M'))
 		const yearIndex = formatParts.findIndex(part => part.toUpperCase().includes('Y'))
 
-		// Créer le masque en fonction du format
 		const parts = Array(3).fill('__')
-		parts[yearIndex] = '____' // L'année a toujours 4 caractères
+		parts[yearIndex] = '____'
 		const mask = parts.join(separator)
 
 		let result = mask
 		let pos = cursorPosition || 0
 
-		// Nettoyer l'entrée pour ne garder que les chiffres et les séparateurs
 		let cleanInput = input
 
-		// Si l'entrée contient déjà des séparateurs, on les garde pour préserver l'ordre
 		if (input.includes(separator)) {
 			const parts = input.split(separator)
 			cleanInput = parts.map(part => part.replace(/\D/g, '')).join(separator)
@@ -163,7 +128,6 @@
 			cleanInput = input.replace(/\D/g, '')
 		}
 
-		// Si l'entrée contient des séparateurs, on traite chaque partie séparément
 		if (cleanInput.includes(separator)) {
 			const parts = cleanInput.split(separator)
 			const formattedParts = Array(3).fill('__')
@@ -174,7 +138,6 @@
 			result = formattedParts.join(separator)
 		}
 		else {
-			// Distribution des chiffres selon le format
 			const formatOrder = [dayIndex, monthIndex, yearIndex]
 			let currentDigit = 0
 
@@ -182,9 +145,8 @@
 				const formatPartIndex = formatOrder[partIndex % 3]
 				const isYear = formatParts[formatPartIndex].toUpperCase().includes('Y')
 				const partLength = isYear ? 4 : 2
-				const targetStartPos = formatPartIndex * 3 // Chaque partie a 2 caractères + 1 séparateur
+				const targetStartPos = formatPartIndex * 3
 
-				// Insérer les chiffres pour cette partie
 				for (let j = 0; j < partLength && currentDigit < cleanInput.length; j++) {
 					const digit = cleanInput[currentDigit]
 					const targetPos = targetStartPos + j
@@ -194,10 +156,8 @@
 			}
 		}
 
-		// Calculer la nouvelle position du curseur
 		if (cursorPosition !== undefined) {
 			pos = cursorPosition
-			// Si on est sur un séparateur, avancer d'une position
 			if (mask[pos] === separator) {
 				pos++
 			}
@@ -209,160 +169,77 @@
 		}
 	}
 
-	// Fonction pour nettoyer une chaîne de date
 	const cleanDateString = (input: string): string => {
-		// Conserver uniquement les chiffres et les séparateurs valides
 		return input.replace(/[^\d/.-]/g, '')
 	}
 
-	// Fonction pour valider le format de la date
 	const validateDateFormat = (dateStr: string): { isValid: boolean, message: string } => {
 		if (!dateStr) {
-			return { isValid: !props.required || !hasInteracted.value, message: (props.required && hasInteracted.value) ? 'La date est requise' : '' }
+			return {
+				isValid: !props.required || !hasInteracted.value || props.disableErrorHandling,
+				message: (props.required && hasInteracted.value && !props.disableErrorHandling) ? 'La date est requise' : '',
+			}
 		}
 
-		// Vérifier que la chaîne ne contient que des chiffres et des séparateurs
 		if (!/^[\d/.-]*$/.test(dateStr)) {
-			return { isValid: false, message: 'Format de date invalide' }
+			return {
+				isValid: props.disableErrorHandling,
+				message: props.disableErrorHandling ? '' : 'Format de date invalide',
+			}
 		}
 
-		// Essayer de parser avec le format d'entrée
 		let date = parseDate(dateStr, props.format)
 
-		// Si ça échoue et qu'on a un format de retour, essayer avec celui-ci
 		if (!date && props.dateFormatReturn) {
 			date = parseDate(dateStr, props.dateFormatReturn)
 		}
 
 		if (!date) {
-			return { isValid: false, message: 'Format de date invalide' }
+			return {
+				isValid: props.disableErrorHandling,
+				message: props.disableErrorHandling ? '' : 'Format de date invalide',
+			}
 		}
 
 		return { isValid: true, message: '' }
 	}
 
-	// Fonction pour valider les règles et mettre à jour les messages
 	const validateRules = (value: string) => {
-		errorMessages.value = []
-		warningMessages.value = []
-		successMessages.value = []
+		clearValidation()
 
-		if (!value) {
-			if (props.required && hasInteracted.value) {
-				errorMessages.value.push('La date est requise')
+		if (!value && props.required && hasInteracted.value) {
+			if (!props.disableErrorHandling) {
+				errors.value.push('La date est requise')
 			}
-			return
-		}
-
-		// Validation du format
-		const validation = validateDateFormat(value)
-		if (!validation.isValid) {
-			errorMessages.value.push(validation.message)
-			return
+			return false
 		}
 
-		// Validation des règles
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
-		const validateErrorRules = (rules: any[]) => {
-			let allValid = true
-			const successMsgs: string[] = []
-
-			rules.forEach((rule) => {
-				const result = rule(value)
-				if (result?.error) {
-					errorMessages.value.push(result.error)
-					allValid = false
-				}
-				else if (!result?.warning && !result?.error) {
-					successMsgs.push(result?.success || 'Date valide')
-				}
-			})
-
-			// N'ajouter les messages de succès que si toutes les règles sont validées
-			if (allValid && successMsgs.length > 0) {
-				successMessages.value.push(...successMsgs)
-			}
+		if (!value && !props.required) {
+			return true
 		}
 
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
-		const validateWarningRules = (rules: any[]) => {
-			let allValid = true
-			const successMsgs: string[] = []
-
-			rules.forEach((rule) => {
-				const result = rule(value)
-				if (result?.warning) {
-					warningMessages.value.push(result.warning)
-					allValid = false
-				}
-				else if (result?.success) {
-					successMsgs.push(result.success)
-				}
-			})
-
-			// N'ajouter les messages de succès que si toutes les règles sont validées
-			if (allValid && successMsgs.length > 0) {
-				successMessages.value.push(...successMsgs)
+		const formatValidation = validateDateFormat(value)
+		if (!formatValidation.isValid) {
+			if (!props.disableErrorHandling && formatValidation.message) {
+				errors.value.push(formatValidation.message)
 			}
+			return false
 		}
 
-		// Appliquer les règles
-		validateErrorRules(validationRules)
-		validateWarningRules(warningValidationRules)
+		validateField(
+			value,
+			props.customRules,
+			props.customWarningRules,
+			[],
+		)
 
-		// Supprimer les doublons
-		errorMessages.value = [...new Set(errorMessages.value)]
-		warningMessages.value = [...new Set(warningMessages.value)]
-		successMessages.value = [...new Set(successMessages.value)]
+		return !hasError.value
 	}
 
-	const { generateRules } = useFieldValidation()
-
-	// Générer les règles de validation
-	const generateCustomRules = (rules: { type: string, options: RuleOptions }[]) => {
-		return rules.map((rule) => {
-			return (value: string) => {
-				if (rule.type === 'custom') {
-					const { validate, message, warningMessage, successMessage, isWarning } = rule.options
-
-					if (typeof validate !== 'function') {
-						return true
-					}
-
-					const isValid = validate(value)
-
-					if (isWarning) {
-						// Pour les règles de warning, on inverse la logique :
-						return !isValid
-							? { warning: warningMessage || message }
-							: { success: successMessage }
-					}
-
-					// Pour les règles normales
-					return !isValid
-						? { error: message }
-						: { success: successMessage }
-				}
-				return null
-			}
-		})
-	}
+	const isOnError = computed(() => warningMessages.value.length === 0 && successMessages.value.length === 0 && errorMessages.value.length > 0)
+	const isOnWarning = computed(() => errorMessages.value.length === 0 && successMessages.value.length === 0 && warningMessages.value.length > 0)
+	const isOnSuccess = computed(() => errorMessages.value.length === 0 && warningMessages.value.length === 0 && successMessages.value.length > 0)
 
-	const validationRules = [
-		...generateCustomRules(props.customRules?.filter(r => r.type === 'custom' && !r.options.isWarning) || []),
-		...generateRules(props.customRules?.filter(r => r.type !== 'custom') || []),
-	]
-	const warningValidationRules = [
-		...generateCustomRules(props.customWarningRules || []),
-		...generateCustomRules(props.customRules?.filter(r => r.type === 'custom' && r.options.isWarning) || []),
-	]
-
-	// Déterminer si le champ est en erreur
-	const isOnError = computed(() => errorMessages.value.length > 0)
-	const isOnWarning = computed(() => warningMessages.value.length > 0)
-	const isOnSuccess = computed(() => successMessages.value.length > 0)
-
-	// Déterminer l'icône à afficher
 	const getIcon = computed(() => {
 		if (errorMessages.value.length > 0) {
 			return 'error'
@@ -376,15 +253,12 @@
 		return undefined
 	})
 
-	// Gestionnaire de touches pour permettre le copier-coller
 	const handleKeydown = (event: KeyboardEvent) => {
-		// Autoriser les touches de contrôle (Ctrl+C, Ctrl+V, etc.)
 		if (event.ctrlKey || event.metaKey) {
 			return
 		}
 	}
 
-	// Gestionnaire de l'événement paste
 	const handlePaste = (event: ClipboardEvent) => {
 		event.preventDefault()
 		const pastedText = event.clipboardData?.getData('text')
@@ -393,23 +267,18 @@
 			return
 		}
 
-		// Nettoyer et formater la valeur collée
 		const cleanedText = cleanDateString(pastedText)
 		const formattedText = formatDateInput(cleanedText).formatted
 
-		// Mettre à jour la valeur
 		inputValue.value = formattedText
 	}
 
-	// Référence vers l'élément input
 	const inputRef = ref<InstanceType<typeof SyTextField> | null>(null)
 
-	// Flag pour éviter le formatage récursif
 	const isFormatting = ref(false)
 
-	// Watch sur inputValue pour gérer le formatage et la validation
 	watch(inputValue, async (newValue, oldValue) => {
-		if (isFormatting.value || newValue === oldValue) return // Éviter la récursion pendant le formatage
+		if (isFormatting.value || newValue === oldValue) return
 
 		try {
 			isFormatting.value = true
@@ -420,89 +289,81 @@
 				return
 			}
 
-			// Récupérer la position du curseur avant le formatage
 			const input = inputRef.value?.$el.querySelector('input')
 			const cursorPos = input?.selectionStart || 0
 
-			// Formater la valeur
 			const { formatted, cursorPos: newPos } = formatDateInput(newValue, cursorPos)
 
-			// Mettre à jour la valeur si nécessaire
 			if (formatted !== newValue) {
 				inputValue.value = formatted
-				// Rétablir la position du curseur après le formatage
 				await nextTick()
 				input?.setSelectionRange(newPos, newPos)
 			}
 
-			// Vérifier si la date est complète
 			const isDateComplete = !formatted.includes('_')
 
 			if (isDateComplete) {
-				// Valider le format si la date est complète
 				const validation = validateDateFormat(formatted)
 				if (validation.isValid) {
-					const date = parseDate(formatted)
+					const date = parseDate(formatted, props.format)
 					if (date) {
 						const formattedDate = props.dateFormatReturn
 							? formatDateToString(date, props.dateFormatReturn)
 							: formatted
-						await nextTick() // Attendre le prochain tick avant d'émettre
+						await nextTick()
 						emit('update:model-value', formattedDate)
 					}
 				}
 				validateRules(formatted)
 			}
 			else {
-				// Réinitialiser les messages d'erreur pendant la saisie
-				errorMessages.value = []
-				warningMessages.value = []
-				successMessages.value = []
+				clearValidation()
 			}
 		}
 		finally {
-			await nextTick() // Attendre le prochain tick avant de réinitialiser le flag
+			await nextTick()
 			isFormatting.value = false
 		}
 	})
 
-	// Watch pour mettre à jour l'input quand modelValue change
 	watch(() => props.modelValue, (newValue) => {
-		if (isFormatting.value) return // Ne pas mettre à jour si on est en train de formater
+		if (isFormatting.value) return
 
 		if (!newValue) {
 			inputValue.value = ''
 			return
 		}
 
-		// Formater la valeur selon le format d'affichage
-		const date = parseDate(newValue, props.dateFormatReturn)
+		const date = parseDate(newValue, props.format)
 		if (date) {
-			const formatted = formatDateToString(date, props.format)
-			inputValue.value = formatted
+			if (props.dateFormatReturn && props.dateFormatReturn !== props.format) {
+				const formattedForReturn = formatDateToString(date, props.dateFormatReturn)
+				emit('update:model-value', formattedForReturn)
+			}
+
+			inputValue.value = formatDateToString(date, props.format)
+			validateRules(inputValue.value)
 		}
 		else {
 			inputValue.value = newValue
+			validateRules(newValue)
 		}
 	})
 
-	// Gestionnaire de focus
 	const handleFocus = () => {
 		isFocused.value = true
 		emit('focus')
 	}
 
-	// Gestionnaire de blur
 	const handleBlur = () => {
 		isFocused.value = false
 		hasInteracted.value = true
 		emit('blur')
 
-		// Valider le format complet lors du blur
 		if (inputValue.value) {
 			const validation = validateDateFormat(inputValue.value)
 			if (validation.isValid) {
-				const date = parseDate(inputValue.value)
+				const date = parseDate(inputValue.value, props.format)
 				if (date) {
 					const formattedDate = props.dateFormatReturn
 						? formatDateToString(date, props.dateFormatReturn)
@@ -511,57 +372,39 @@
 				}
 			}
 			else {
-				// Même si la validation échoue, conserver la valeur actuelle
-				// pour éviter que la date ne disparaisse
 				emit('update:model-value', props.modelValue)
 			}
 		}
 		else if (props.required) {
-			// Si le champ est vide mais requis, émettre quand même la valeur actuelle
-			// pour éviter que la date ne disparaisse
 			emit('update:model-value', props.modelValue)
 		}
 		else {
-			// Si le champ est vide et non requis, émettre null
 			emit('update:model-value', null)
 		}
 
-		// Toujours valider les règles, même si le champ est vide
 		validateRules(inputValue.value || '')
 	}
 
-	// Fonction de validation lors de la soumission
 	const isValidating = ref(false)
 
-	const validateOnSubmit = (): boolean => {
+	const validateOnSubmit = async (): Promise<boolean> => {
 		isValidating.value = true
+		hasInteracted.value = true
 
-		// Vérifier si le champ est requis et vide
-		if (props.required && !inputValue.value) {
-			errorMessages.value = ['Ce champ est requis']
-			return false
-		}
+		try {
+			const isFormatValid = validateRules(inputValue.value)
 
-		// Si le champ n'est pas requis et est vide, c'est valide
-		if (!inputValue.value) {
-			return true
-		}
+			if (!isFormatValid) {
+				return false
+			}
 
-		// Valider le format de la date
-		const { isValid, message } = validateDateFormat(inputValue.value)
-		if (!isValid) {
-			errorMessages.value = [message]
-			return false
+			return !hasError.value
+		}
+		finally {
+			isValidating.value = false
 		}
-
-		// Valider les règles personnalisées
-		validateRules(inputValue.value)
-
-		// Retourner true seulement si pas d'erreurs
-		return errorMessages.value.length === 0
 	}
 
-	// Exposer les méthodes et propriétés nécessaires
 	defineExpose({
 		validateOnSubmit,
 		focus: () => {
@@ -583,16 +426,13 @@
 			return
 		}
 
-		// Parser la date avec le format d'entrée
 		const date = parseDate(props.modelValue, props.format)
 		if (date) {
-			// Si un format de retour est spécifié, l'utiliser pour la valeur émise
 			if (props.dateFormatReturn && props.dateFormatReturn !== props.format) {
 				const formattedForReturn = formatDateToString(date, props.dateFormatReturn)
 				emit('update:model-value', formattedForReturn)
 			}
 
-			// Toujours afficher dans le format d'entrée
 			inputValue.value = formatDateToString(date, props.format)
 			validateRules(inputValue.value)
 		}
@@ -612,10 +452,10 @@
 		:label="label"
 		:error-messages="errorMessages"
 		:warning-messages="warningMessages"
-		:success-messages="successMessages"
+		:success-messages="showSuccessMessages ? successMessages : []"
 		:is-on-error="isOnError"
-		:is-disabled="isDisabled"
-		:is-read-only="isReadOnly"
+		:disabled="disabled"
+		:read-only="readOnly"
 		:display-icon="displayIcon"
 		:display-append-icon="displayAppendIcon"
 		:no-icon="noIcon"