@cnamts/synapse 0.0.14-alpha → 0.0.16-alpha

package/src/components/DatePicker/DateTextInput.vue

@@ -2,10 +2,12 @@
 	import { ref, computed, watch, onMounted } from 'vue'
 	import { nextTick } from 'vue'
 	import SyTextField from '@/components/Customs/SyTextField/SyTextField.vue'
-	import { useDateFormat } from '@/composables/date/useDateFormat'
 	import { useValidation, type ValidationRule } from '@/composables/validation/useValidation'
+	import dayjs from 'dayjs'
+	import customParseFormat from 'dayjs/plugin/customParseFormat'
 
-	const { parseDate } = useDateFormat()
+	// Initialiser les plugins dayjs
+	dayjs.extend(customParseFormat)
 
 	type DateValue = string | null
 
@@ -17,7 +19,7 @@
 		label?: string
 		required?: boolean
 		disabled?: boolean
-		readOnly?: boolean
+		readonly?: boolean
 		isOutlined?: boolean
 		displayIcon?: boolean
 		displayAppendIcon?: boolean
@@ -27,6 +29,7 @@
 		displayPrependIcon?: boolean
 		disableErrorHandling?: boolean
 		showSuccessMessages?: boolean
+		bgColor?: string
 	}>(), {
 		modelValue: null,
 		placeholder: 'Sélectionner une date',
@@ -35,7 +38,7 @@
 		label: undefined,
 		required: false,
 		disabled: false,
-		readOnly: false,
+		readonly: false,
 		isOutlined: true,
 		displayIcon: true,
 		displayAppendIcon: false,
@@ -45,6 +48,7 @@
 		displayPrependIcon: true,
 		disableErrorHandling: false,
 		showSuccessMessages: true,
+		bgColor: undefined,
 	})
 
 	const emit = defineEmits<{
@@ -74,101 +78,37 @@
 	const isFocused = ref(false)
 	const hasInteracted = ref(false)
 
-	const formatDateToString = (date: Date, format: string): string => {
-		const day = date.getDate().toString().padStart(2, '0')
-		const month = (date.getMonth() + 1).toString().padStart(2, '0')
-		const year = date.getFullYear()
-		const shortYear = (year % 100).toString().padStart(2, '0')
-
-		const separator = format.includes('/') ? '/' : format.includes('-') ? '-' : '.'
-		const parts: string[] = []
-
-		format.split(/[-/.]/).forEach((part) => {
-			switch (part.toUpperCase()) {
-			case 'DD':
-				parts.push(day)
-				break
-			case 'MM':
-				parts.push(month)
-				break
-			case 'YY':
-				parts.push(shortYear)
-				break
-			case 'YYYY':
-				parts.push(year.toString())
-				break
-			}
-		})
-
-		return parts.join(separator)
-	}
-
 	const formatDateInput = (input: string, cursorPosition?: number): { formatted: string, cursorPos: number } => {
-		const separator = props.format.includes('/') ? '/' : props.format.includes('-') ? '-' : '.'
-
-		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'))
-
-		const parts = Array(3).fill('__')
-		parts[yearIndex] = '____'
-		const mask = parts.join(separator)
-
-		let result = mask
-		let pos = cursorPosition || 0
-
-		let cleanInput = input
-
-		if (input.includes(separator)) {
-			const parts = input.split(separator)
-			cleanInput = parts.map(part => part.replace(/\D/g, '')).join(separator)
-		}
-		else {
-			cleanInput = input.replace(/\D/g, '')
-		}
-
-		if (cleanInput.includes(separator)) {
-			const parts = cleanInput.split(separator)
-			const formattedParts = Array(3).fill('__')
-			formattedParts[yearIndex] = (parts[yearIndex] || '').padEnd(4, '_')
-			formattedParts[monthIndex] = (parts[monthIndex] || '').padEnd(2, '_')
-			formattedParts[dayIndex] = (parts[dayIndex] || '').padEnd(2, '_')
-
-			result = formattedParts.join(separator)
-		}
-		else {
-			const formatOrder = [dayIndex, monthIndex, yearIndex]
-			let currentDigit = 0
-
-			for (let partIndex = 0; currentDigit < Math.min(cleanInput.length, 8); partIndex++) {
-				const formatPartIndex = formatOrder[partIndex % 3]
-				const isYear = formatParts[formatPartIndex].toUpperCase().includes('Y')
-				const partLength = isYear ? 4 : 2
-				const targetStartPos = formatPartIndex * 3
-
-				for (let j = 0; j < partLength && currentDigit < cleanInput.length; j++) {
-					const digit = cleanInput[currentDigit]
-					const targetPos = targetStartPos + j
-					result = result.substring(0, targetPos) + digit + result.substring(targetPos + 1)
-					currentDigit++
+		const cleanedInput = input.replace(/[^\d]/g, '')
+		let cursor = cursorPosition || 0
+		let result = ''
+
+		let i = 0
+		for (const char of props.format) {
+			if (['D', 'M', 'Y'].includes(char.toUpperCase())) {
+				if (cleanedInput[i]) {
+					result += cleanedInput[i]
+					i++
+				}
+				else {
+					result += '_'
 				}
 			}
+			else {
+				result += char
+			}
 		}
 
-		if (cursorPosition !== undefined) {
-			pos = cursorPosition
-			if (mask[pos] === separator) {
-				pos++
-			}
+		const nextChartIsSeparator = props.format[cursor] === result[cursor]
+		if (nextChartIsSeparator) {
+			cursor++
 		}
 
 		return {
 			formatted: result,
-			cursorPos: pos,
+			cursorPos: cursor,
 		}
 	}
-
 	const cleanDateString = (input: string): string => {
 		return input.replace(/[^\d/.-]/g, '')
 	}
@@ -184,20 +124,17 @@
 		if (!/^[\d/.-]*$/.test(dateStr)) {
 			return {
 				isValid: props.disableErrorHandling,
-				message: props.disableErrorHandling ? '' : 'Format de date invalide',
+				message: props.disableErrorHandling ? '' : `Format de date invalide (${props.format})`,
 			}
 		}
 
-		let date = parseDate(dateStr, props.format)
+		const isValid = dayjs(dateStr, props.format, true).isValid()
+			|| (props.dateFormatReturn ? dayjs(dateStr, props.dateFormatReturn, true).isValid() : false)
 
-		if (!date && props.dateFormatReturn) {
-			date = parseDate(dateStr, props.dateFormatReturn)
-		}
-
-		if (!date) {
+		if (!isValid) {
 			return {
 				isValid: props.disableErrorHandling,
-				message: props.disableErrorHandling ? '' : 'Format de date invalide',
+				message: props.disableErrorHandling ? '' : `Format de date invalide (${props.format})`,
 			}
 		}
 
@@ -253,9 +190,17 @@
 		return undefined
 	})
 
-	const handleKeydown = (event: KeyboardEvent) => {
-		if (event.ctrlKey || event.metaKey) {
-			return
+	const handleKeydown = (event: KeyboardEvent & { target: HTMLInputElement }) => {
+		// the cursor have to be set to the previous character if the user delete a non digit character
+		if (event.key === 'Backspace') {
+			const input = event.target
+			if (!input.selectionStart || input.selectionStart !== input.selectionEnd) {
+				return
+			}
+			const charBeforeCursor = input.value[input.selectionStart - 1]
+			if (!/\d/.test(charBeforeCursor)) {
+				input.setSelectionRange(input.selectionStart - 1, input.selectionStart - 1)
+			}
 		}
 	}
 
@@ -305,10 +250,13 @@
 			if (isDateComplete) {
 				const validation = validateDateFormat(formatted)
 				if (validation.isValid) {
-					const date = parseDate(formatted, props.format)
+					const date = dayjs(formatted, props.format, true).isValid()
+						? dayjs(formatted, props.format).toDate()
+						: null
+
 					if (date) {
 						const formattedDate = props.dateFormatReturn
-							? formatDateToString(date, props.dateFormatReturn)
+							? dayjs(date).format(props.dateFormatReturn)
 							: formatted
 						await nextTick()
 						emit('update:model-value', formattedDate)
@@ -334,14 +282,17 @@
 			return
 		}
 
-		const date = parseDate(newValue, props.format)
+		const date = dayjs(newValue, props.format, true).isValid()
+			? dayjs(newValue, props.format).toDate()
+			: null
+
 		if (date) {
 			if (props.dateFormatReturn && props.dateFormatReturn !== props.format) {
-				const formattedForReturn = formatDateToString(date, props.dateFormatReturn)
+				const formattedForReturn = dayjs(date).format(props.dateFormatReturn)
 				emit('update:model-value', formattedForReturn)
 			}
 
-			inputValue.value = formatDateToString(date, props.format)
+			inputValue.value = dayjs(date).format(props.format)
 			validateRules(inputValue.value)
 		}
 		else {
@@ -363,10 +314,13 @@
 		if (inputValue.value) {
 			const validation = validateDateFormat(inputValue.value)
 			if (validation.isValid) {
-				const date = parseDate(inputValue.value, props.format)
+				const date = dayjs(inputValue.value, props.format, true).isValid()
+					? dayjs(inputValue.value, props.format).toDate()
+					: null
+
 				if (date) {
 					const formattedDate = props.dateFormatReturn
-						? formatDateToString(date, props.dateFormatReturn)
+						? dayjs(date).format(props.dateFormatReturn)
 						: inputValue.value
 					emit('update:model-value', formattedDate)
 				}
@@ -407,14 +361,17 @@
 
 	defineExpose({
 		validateOnSubmit,
-		focus: () => {
-			const input = document.querySelector('input')
+		focus() {
+			// Utiliser un sélecteur plus spécifique pour cibler l'input principal
+			// SyTextField peut contenir plusieurs inputs, donc on cible le premier qui n'est pas caché
+			const input = inputRef.value?.$el.querySelector('input:not([type="hidden"])')
 			if (input) {
 				input.focus()
 			}
 		},
-		blur: () => {
-			const input = document.querySelector('input')
+		blur() {
+			// Utiliser un sélecteur plus spécifique pour cibler l'input principal
+			const input = inputRef.value?.$el.querySelector('input:not([type="hidden"])')
 			if (input) {
 				input.blur()
 			}
@@ -426,51 +383,46 @@
 			return
 		}
 
-		const date = parseDate(props.modelValue, props.format)
-		if (date) {
-			if (props.dateFormatReturn && props.dateFormatReturn !== props.format) {
-				const formattedForReturn = formatDateToString(date, props.dateFormatReturn)
-				emit('update:model-value', formattedForReturn)
-			}
+		const date = dayjs(props.modelValue, props.format, true).isValid()
+			? dayjs(props.modelValue, props.format).toDate()
+			: null
 
-			inputValue.value = formatDateToString(date, props.format)
-			validateRules(inputValue.value)
+		if (date) {
+			inputValue.value = dayjs(date).format(props.format)
 		}
 		else {
 			inputValue.value = props.modelValue
-			validateRules(props.modelValue)
 		}
 	})
-
 </script>
 
 <template>
 	<SyTextField
 		ref="inputRef"
 		v-model="inputValue"
-		:placeholder="placeholder"
-		:label="label"
-		:error-messages="errorMessages"
-		:warning-messages="warningMessages"
-		:success-messages="showSuccessMessages ? successMessages : []"
-		:is-on-error="isOnError"
-		:disabled="disabled"
-		:read-only="readOnly"
-		:display-icon="displayIcon"
-		:display-append-icon="displayAppendIcon"
-		:no-icon="noIcon"
-		:prepend-icon="props.displayPrependIcon && !props.displayAppendIcon ? 'calendar' : undefined"
-		:append-icon="props.displayAppendIcon ? 'calendar' : undefined"
+		:append-icon="displayIcon && displayAppendIcon ? 'calendar' : undefined"
 		:append-inner-icon="getIcon"
-		:variant-style="isOutlined ? 'outlined' : 'filled'"
 		:class="{
 			'error-field': isOnError,
 			'warning-field': isOnWarning,
 			'success-field': isOnSuccess
 		}"
-		@keydown="handleKeydown"
+		:disabled="props.disabled"
+		:error-messages="errorMessages"
+		:label="props.label || props.placeholder"
+		:no-icon="props.noIcon"
+		:prepend-icon="displayIcon && displayPrependIcon ? 'calendar' : undefined"
+		:readonly="props.readonly"
+		:variant-style="props.isOutlined ? 'outlined' : 'underlined'"
+		:warning-messages="warningMessages"
+		:success-messages="props.showSuccessMessages ? successMessages : []"
+		:bg-color="props.bgColor"
+		color="primary"
+		is-clearable
+		title="Date text input"
 		@focus="handleFocus"
 		@blur="handleBlur"
+		@keydown="handleKeydown"
 		@paste="handlePaste"
 	/>
 </template>

package/src/components/DatePicker/docExamples/DatePickerBidirectionalValidation.vue

@@ -0,0 +1,282 @@
+<script lang="ts" setup>
+	import { ref, computed, watch } from 'vue'
+	import DatePicker from '@/components/DatePicker/DatePicker.vue'
+	import { useDateFormat } from '@/composables/date/useDateFormat'
+
+	const { parseDate } = useDateFormat()
+
+	// État des dates
+	const startDate = ref<string | null>(null)
+	const endDate = ref<string | null>(null)
+
+	// Références aux composants DatePicker pour accéder à leurs méthodes
+	const startDatePickerRef = ref<InstanceType<typeof DatePicker> | null>(null)
+	const endDatePickerRef = ref<InstanceType<typeof DatePicker> | null>(null)
+
+	// Règle de validation pour vérifier que la date de fin n'est pas avant la date de début
+	const createEndDateValidationRule = () => ({
+		type: 'custom',
+		options: {
+			validate: (value: string) => {
+				// Si pas de valeur pour la date de fin, pas besoin de validation
+				if (!value) return true
+
+				// Si pas de date de début mais une date de fin, afficher l'erreur
+				if (!startDate.value) return 'Veuillez d\'abord sélectionner une date de début'
+
+				const start = parseDate(startDate.value, 'DD/MM/YYYY')
+				const end = parseDate(value, 'DD/MM/YYYY')
+
+				if (!start || !end) return true
+
+				return end >= start || 'La date de fin ne peut pas être antérieure à la date de début'
+			},
+			message: 'La date de fin ne peut pas être antérieure à la date de début',
+		},
+	})
+
+	// Règle de validation pour vérifier que la date de début n'est pas après la date de fin
+	const createStartDateValidationRule = () => ({
+		type: 'custom',
+		options: {
+			validate: (value: string) => {
+				// Si pas de valeur pour la date de début ou pas de date de fin, pas besoin de validation
+				if (!value || !endDate.value) return true
+
+				const start = parseDate(value, 'DD/MM/YYYY')
+				const end = parseDate(endDate.value, 'DD/MM/YYYY')
+
+				if (!start || !end) return true
+
+				return start <= end || 'La date de début ne peut pas être postérieure à la date de fin'
+			},
+			message: 'La date de début ne peut pas être postérieure à la date de fin',
+		},
+	})
+
+	// Règles de validation pour la date de début
+	const startDateRules = computed(() => [
+		{
+			type: 'required',
+			options: {
+				message: 'La date de début est requise.',
+			},
+		},
+		createStartDateValidationRule(),
+	])
+
+	// Règles de validation pour la date de fin
+	const endDateRules = computed(() => [
+		{
+			type: 'required',
+			options: {
+				message: 'La date de fin est requise.',
+			},
+		},
+		createEndDateValidationRule(),
+	])
+
+	// Fonction pour forcer la validation de la date de fin quand la date de début change
+	const validateEndDate = () => {
+		if (endDatePickerRef.value && endDate.value) {
+			// On utilise validateOnSubmit pour forcer la validation complète
+			endDatePickerRef.value.validateOnSubmit()
+		}
+	}
+
+	// Fonction pour forcer la validation de la date de début quand la date de fin change
+	const validateStartDate = () => {
+		if (startDatePickerRef.value && startDate.value) {
+			// On utilise validateOnSubmit pour forcer la validation complète
+			startDatePickerRef.value.validateOnSubmit()
+		}
+	}
+
+	// Watcher pour la date de début qui force la revalidation de la date de fin
+	watch(startDate, () => {
+		// Laisser le temps au système de mettre à jour les valeurs
+		setTimeout(() => {
+			validateEndDate()
+		}, 0)
+	})
+
+	// Watcher pour la date de fin qui force la revalidation de la date de début
+	watch(endDate, () => {
+		// Laisser le temps au système de mettre à jour les valeurs
+		setTimeout(() => {
+			validateStartDate()
+		}, 0)
+	})
+
+	// Fonction pour définir des dates de test
+	const setTestDates = () => {
+		// Définir une date de début (aujourd'hui)
+		const today = new Date()
+		const day = String(today.getDate()).padStart(2, '0')
+		const month = String(today.getMonth() + 1).padStart(2, '0')
+		const year = today.getFullYear()
+		startDate.value = `${day}/${month}/${year}`
+
+		// Définir une date de fin (demain) - pour démontrer une validation valide
+		const tomorrow = new Date(today)
+		tomorrow.setDate(today.getDate() + 1)
+		const tomorrowDay = String(tomorrow.getDate()).padStart(2, '0')
+		const tomorrowMonth = String(tomorrow.getMonth() + 1).padStart(2, '0')
+		const tomorrowYear = tomorrow.getFullYear()
+		endDate.value = `${tomorrowDay}/${tomorrowMonth}/${tomorrowYear}`
+	}
+
+	// Fonction pour définir des dates invalides (date de fin avant date de début)
+	const setInvalidDates = () => {
+		// Définir une date de début (aujourd'hui)
+		const today = new Date()
+		const day = String(today.getDate()).padStart(2, '0')
+		const month = String(today.getMonth() + 1).padStart(2, '0')
+		const year = today.getFullYear()
+		startDate.value = `${day}/${month}/${year}`
+
+		// Définir une date de fin (hier) - pour démontrer une validation invalide
+		const yesterday = new Date(today)
+		yesterday.setDate(today.getDate() - 1)
+		const yesterdayDay = String(yesterday.getDate()).padStart(2, '0')
+		const yesterdayMonth = String(yesterday.getMonth() + 1).padStart(2, '0')
+		const yesterdayYear = yesterday.getFullYear()
+		endDate.value = `${yesterdayDay}/${yesterdayMonth}/${yesterdayYear}`
+	}
+
+	// Fonction pour réinitialiser les dates
+	const resetDates = () => {
+		startDate.value = null
+		endDate.value = null
+	}
+</script>
+
+<template>
+	<div class="date-picker-bidirectional-validation">
+		<h1 class="text-h5 mb-6">
+			Validation bidirectionnelle entre deux DatePickers
+		</h1>
+
+		<p class="text-body-2 mb-4">
+			Ce composant démontre la validation bidirectionnelle entre deux DatePickers. Les règles de validation sont appliquées dans les deux sens :
+			<ul>
+				<li>La date de fin doit être postérieure ou égale à la date de début</li>
+				<li>La date de début doit être antérieure ou égale à la date de fin</li>
+				<li>Lorsque la date de début change, la validation de la date de fin est mise à jour</li>
+				<li>Lorsque la date de fin change, la validation de la date de début est mise à jour</li>
+			</ul>
+		</p>
+
+		<div class="date-range-container mb-6">
+			<div class="date-picker-wrapper">
+				<h3 class="text-subtitle-1 mb-2">
+					Date de début
+				</h3>
+				<DatePicker
+					ref="startDatePickerRef"
+					v-model="startDate"
+					placeholder="Date de début"
+					:custom-rules="startDateRules"
+					required
+					@update:model-value="validateEndDate"
+				/>
+			</div>
+			<div class="date-picker-wrapper">
+				<h3 class="text-subtitle-1 mb-2">
+					Date de fin
+				</h3>
+				<DatePicker
+					ref="endDatePickerRef"
+					v-model="endDate"
+					placeholder="Date de fin"
+					:custom-rules="endDateRules"
+					required
+					@update:model-value="validateStartDate"
+				/>
+			</div>
+		</div>
+
+		<div class="actions mb-4">
+			<v-btn
+				size="small"
+				color="primary"
+				class="mr-2"
+				@click="resetDates"
+			>
+				Réinitialiser
+			</v-btn>
+
+			<v-btn
+				size="small"
+				color="success"
+				class="mr-2"
+				@click="setTestDates"
+			>
+				Dates valides
+			</v-btn>
+
+			<v-btn
+				size="small"
+				color="error"
+				@click="setInvalidDates"
+			>
+				Dates invalides
+			</v-btn>
+		</div>
+
+		<div class="current-values mt-4">
+			<p><strong>Date de début :</strong> {{ startDate || 'Non sélectionnée' }}</p>
+			<p><strong>Date de fin :</strong> {{ endDate || 'Non sélectionnée' }}</p>
+		</div>
+
+		<div class="mt-6 pa-4 bg-grey-lighten-4 rounded">
+			<h3 class="text-subtitle-1 mb-2">
+				Comment fonctionne la validation bidirectionnelle
+			</h3>
+			<p class="text-body-2">
+				La validation bidirectionnelle entre les DatePickers est implémentée grâce à des règles de validation personnalisées
+				qui vérifient la relation entre les deux dates. Chaque DatePicker a sa propre règle qui vérifie sa valeur par rapport à l'autre.
+			</p>
+			<p class="text-body-2 mt-2">
+				Lorsqu'une date change, un watcher déclenche la validation de l'autre DatePicker. Cela garantit que les messages d'erreur
+				sont toujours à jour, même lorsque les dates sont modifiées dans n'importe quel ordre.
+			</p>
+			<p class="text-body-2 mt-2">
+				Les messages d'erreur apparaissent directement dans les composants DatePicker, ce qui améliore l'expérience utilisateur
+				en fournissant un retour immédiat sur la validité des dates sélectionnées.
+			</p>
+			<p class="text-body-2 mt-2">
+				Vous trouverez le code source dans la story Bidirectional Validation.
+			</p>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.date-picker-bidirectional-validation {
+	padding: 20px;
+	max-width: 800px;
+	margin: 0 auto;
+}
+
+.date-range-container {
+	display: flex;
+	gap: 20px;
+}
+
+.date-picker-wrapper {
+	flex: 1;
+}
+
+.actions {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+}
+
+.current-values {
+	padding: 15px;
+	background-color: #f5f5f5;
+	border-radius: 4px;
+}
+</style>