@cnamts/synapse 0.0.14-alpha → 0.0.16-alpha

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

@@ -0,0 +1,535 @@
+<script setup>
+	import { ref } from 'vue'
+	import DatePicker from '@/components/DatePicker/DatePicker.vue'
+
+	// Exemple 1: Validation de base (required)
+	const date1 = ref('')
+
+	// Exemple 2: notWeekend
+	const date2 = ref('')
+
+	// Exemple 3: notAfterToday
+	const date3 = ref('')
+
+	// Exemple 4: notBeforeToday
+	const date4 = ref('')
+
+	// Exemple 5: notBeforeDate
+	const date5 = ref('')
+
+	// Exemple 6: notAfterDate
+	const date6 = ref('')
+
+	// Exemple 7: dateExact
+	const date7 = ref('')
+
+	// Exemple 8: customRules (règle personnalisée)
+	const date8 = ref('')
+
+	// Exemple 9: customWarningRules
+	const date9 = ref('')
+
+	// Exemple 10: Combinaison de plusieurs règles
+	const date10 = ref('')
+
+	const today = new Date().toLocaleDateString('fr-FR', {
+		day: '2-digit',
+		month: '2-digit',
+		year: 'numeric',
+	})
+	const tomorrow = new Date(Date.now() + 86400000).toLocaleDateString('fr-FR', {
+		day: '2-digit',
+		month: '2-digit',
+		year: 'numeric',
+	})
+	const yesterday = new Date(Date.now() - 86400000).toLocaleDateString('fr-FR', {
+		day: '2-digit',
+		month: '2-digit',
+		year: 'numeric',
+	})
+	const nextYear = new Date(Date.now() + 31536000000).toLocaleDateString('fr-FR', {
+		day: '2-digit',
+		month: '2-digit',
+		year: 'numeric',
+	})
+</script>
+
+<template>
+	<div class="date-picker-validation-examples">
+		<h1 class="text-h5 mb-6">
+			Exemples de validation du DatePicker
+		</h1>
+
+		<!-- Exemple 1: Validation de base (required) -->
+		<section class="mb-10">
+			<h2 class="text-h6 mb-3">
+				Validation de base (required)
+			</h2>
+			<div class="mb-2">
+				<DatePicker
+					v-model="date1"
+					placeholder="Date requise"
+					required
+				/>
+			</div>
+			<v-btn
+				size="small"
+				color="primary"
+				@click="date1 = ''"
+			>
+				Vider le champ
+			</v-btn>
+			<v-btn
+				size="small"
+				class="ml-2"
+				@click="date1 = today"
+			>
+				Remplir le champ
+			</v-btn>
+			<div class="mt-2">
+				Valeur actuelle: {{ date1 }}
+			</div>
+		</section>
+
+		<!-- Exemple 2: notWeekend -->
+		<section class="mb-10">
+			<h2 class="text-h6 mb-3">
+				Validation notWeekend
+			</h2>
+			<p class="text-body-2 mb-2">
+				Cette règle vérifie que la date n'est pas un weekend
+			</p>
+			<div class="mb-2">
+				<DatePicker
+					v-model="date2"
+					placeholder="Jour de semaine uniquement"
+					:custom-rules="[{
+						type: 'notWeekend',
+						options: {
+							message: 'La date ne peut pas être un weekend',
+							successMessage: 'Jour de semaine valide'
+						}
+					}]"
+					:show-success-messages="true"
+				/>
+			</div>
+			<v-btn
+				size="small"
+				color="primary"
+				@click="date2 = '13/04/2025'"
+			>
+				Samedi (13/04/2025)
+			</v-btn>
+			<v-btn
+				size="small"
+				class="ml-2"
+				@click="date2 = '15/04/2025'"
+			>
+				Mardi (15/04/2025)
+			</v-btn>
+			<div class="mt-2">
+				Valeur actuelle: {{ date2 }}
+			</div>
+		</section>
+
+		<!-- Exemple 3: notAfterToday -->
+		<section class="mb-10">
+			<h2 class="text-h6 mb-3">
+				Validation notAfterToday
+			</h2>
+			<p class="text-body-2 mb-2">
+				Cette règle vérifie que la date n'est pas postérieure à aujourd'hui
+			</p>
+			<div class="mb-2">
+				<DatePicker
+					v-model="date3"
+					placeholder="Date passée ou aujourd'hui"
+					:custom-rules="[{
+						type: 'notAfterToday',
+						options: {
+							message: 'La date ne peut pas être dans le futur',
+							successMessage: 'Date passée ou aujourd\'hui valide'
+						}
+					}]"
+					:show-success-messages="true"
+				/>
+			</div>
+			<v-btn
+				size="small"
+				color="primary"
+				@click="date3 = today"
+			>
+				Aujourd'hui
+			</v-btn>
+			<v-btn
+				size="small"
+				class="ml-2"
+				@click="date3 = tomorrow"
+			>
+				Demain
+			</v-btn>
+			<v-btn
+				size="small"
+				class="ml-2"
+				@click="date3 = yesterday"
+			>
+				Hier
+			</v-btn>
+			<div class="mt-2">
+				Valeur actuelle: {{ date3 }}
+			</div>
+		</section>
+
+		<!-- Exemple 4: notBeforeToday -->
+		<section class="mb-10">
+			<h2 class="text-h6 mb-3">
+				Validation notBeforeToday
+			</h2>
+			<p class="text-body-2 mb-2">
+				Cette règle vérifie que la date n'est pas antérieure à aujourd'hui
+			</p>
+			<div class="mb-2">
+				<DatePicker
+					v-model="date4"
+					placeholder="Date future ou aujourd'hui"
+					:custom-rules="[{
+						type: 'notBeforeToday',
+						options: {
+							message: 'La date ne peut pas être dans le passé',
+							successMessage: 'Date future ou aujourd\'hui valide'
+						}
+					}]"
+					:show-success-messages="true"
+				/>
+			</div>
+			<v-btn
+				size="small"
+				color="primary"
+				@click="date4 = today"
+			>
+				Aujourd'hui
+			</v-btn>
+			<v-btn
+				size="small"
+				class="ml-2"
+				@click="date4 = tomorrow"
+			>
+				Demain
+			</v-btn>
+			<v-btn
+				size="small"
+				class="ml-2"
+				@click="date4 = yesterday"
+			>
+				Hier
+			</v-btn>
+			<div class="mt-2">
+				Valeur actuelle: {{ date4 }}
+			</div>
+		</section>
+
+		<!-- Exemple 5: notBeforeDate -->
+		<section class="mb-10">
+			<h2 class="text-h6 mb-3">
+				Validation notBeforeDate
+			</h2>
+			<p class="text-body-2 mb-2">
+				Cette règle vérifie que la date n'est pas antérieure à une date de référence
+			</p>
+			<div class="mb-2">
+				<DatePicker
+					v-model="date5"
+					placeholder="Date après le 01/01/2025"
+					:custom-rules="[{
+						type: 'notBeforeDate',
+						options: {
+							message: 'La date ne peut pas être antérieure au 01/01/2025',
+							successMessage: 'Date valide (après le 01/01/2025)',
+							date: '01/01/2025'
+						}
+					}]"
+					:show-success-messages="true"
+				/>
+			</div>
+			<v-btn
+				size="small"
+				color="primary"
+				@click="date5 = '15/04/2025'"
+			>
+				15/04/2025
+			</v-btn>
+			<v-btn
+				size="small"
+				class="ml-2"
+				@click="date5 = '31/12/2024'"
+			>
+				31/12/2024
+			</v-btn>
+			<div class="mt-2">
+				Valeur actuelle: {{ date5 }}
+			</div>
+		</section>
+
+		<!-- Exemple 6: notAfterDate -->
+		<section class="mb-10">
+			<h2 class="text-h6 mb-3">
+				Validation notAfterDate
+			</h2>
+			<p class="text-body-2 mb-2">
+				Cette règle vérifie que la date n'est pas postérieure à une date de référence
+			</p>
+			<div class="mb-2">
+				<DatePicker
+					v-model="date6"
+					placeholder="Date avant le 31/12/2025"
+					:custom-rules="[{
+						type: 'notAfterDate',
+						options: {
+							message: 'La date ne peut pas être postérieure au 31/12/2025',
+							successMessage: 'Date valide (avant le 31/12/2025)',
+							date: '31/12/2025'
+						}
+					}]"
+					:show-success-messages="true"
+				/>
+			</div>
+			<v-btn
+				size="small"
+				color="primary"
+				@click="date6 = '15/04/2025'"
+			>
+				15/04/2025
+			</v-btn>
+			<v-btn
+				size="small"
+				class="ml-2"
+				@click="date6 = '01/01/2026'"
+			>
+				01/01/2026
+			</v-btn>
+			<div class="mt-2">
+				Valeur actuelle: {{ date6 }}
+			</div>
+		</section>
+
+		<!-- Exemple 7: dateExact -->
+		<section class="mb-10">
+			<h2 class="text-h6 mb-3">
+				Validation dateExact
+			</h2>
+			<p class="text-body-2 mb-2">
+				Cette règle vérifie que la date est exactement égale à une date de référence
+			</p>
+			<div class="mb-2">
+				<DatePicker
+					v-model="date7"
+					placeholder="Date exacte: 25/12/2025"
+					:custom-rules="[{
+						type: 'dateExact',
+						options: {
+							message: 'La date doit être le 25/12/2025',
+							successMessage: 'Date correcte (25/12/2025)',
+							date: '25/12/2025'
+						}
+					}]"
+					:show-success-messages="true"
+				/>
+			</div>
+			<v-btn
+				size="small"
+				color="primary"
+				@click="date7 = '25/12/2025'"
+			>
+				25/12/2025
+			</v-btn>
+			<v-btn
+				size="small"
+				class="ml-2"
+				@click="date7 = '26/12/2025'"
+			>
+				26/12/2025
+			</v-btn>
+			<div class="mt-2">
+				Valeur actuelle: {{ date7 }}
+			</div>
+		</section>
+
+		<!-- Exemple 8: customRules (règle personnalisée) -->
+		<section class="mb-10">
+			<h2 class="text-h6 mb-3">
+				Règle personnalisée (custom)
+			</h2>
+			<p class="text-body-2 mb-2">
+				Cette règle vérifie que la date n'est pas en 2024
+			</p>
+			<div class="mb-2">
+				<DatePicker
+					v-model="date8"
+					placeholder="Date hors 2024"
+					:custom-rules="[{
+						type: 'custom',
+						options: {
+							validate: (value) => {
+								// Si pas de valeur, c'est valide
+								if (!value) return true
+								// Convertir en chaîne si ce n'est pas déjà le cas
+								const dateStr = value.toString()
+								// Vérifier si c'est une Date et extraire l'année
+								if (value instanceof Date) {
+									return value.getFullYear() !== 2024
+								}
+								// Fallback sur la vérification de chaîne
+								return !dateStr.includes('2024')
+							},
+							message: 'Les dates en 2024 ne sont pas autorisées',
+							successMessage: 'Date valide (hors 2024)',
+							fieldIdentifier: 'date'
+						}
+					}]"
+					:show-success-messages="true"
+				/>
+			</div>
+			<v-btn
+				size="small"
+				color="primary"
+				@click="date8 = '15/04/2025'"
+			>
+				15/04/2025
+			</v-btn>
+			<v-btn
+				size="small"
+				class="ml-2"
+				@click="date8 = '15/12/2024'"
+			>
+				15/12/2024
+			</v-btn>
+			<div class="mt-2">
+				Valeur actuelle: {{ date8 }}
+			</div>
+		</section>
+
+		<!-- Exemple 9: customWarningRules -->
+		<section class="mb-10">
+			<h2 class="text-h6 mb-3">
+				Règle d'avertissement
+			</h2>
+			<p class="text-body-2 mb-2">
+				Cette règle affiche un avertissement si la date est en 2025
+			</p>
+			<div class="mb-2">
+				<DatePicker
+					v-model="date9"
+					placeholder="Date (avertissement pour 2025)"
+					:custom-warning-rules="[{
+						type: 'custom',
+						options: {
+							validate: (value) => {
+								// Si pas de valeur, c'est valide
+								if (!value) return true
+
+								// Convertir en chaîne si ce n'est pas déjà le cas
+								const dateStr = value.toString()
+
+								// Vérifier si c'est une Date et extraire l'année
+								if (value instanceof Date) {
+									return value.getFullYear() !== 2025
+								}
+
+								// Fallback sur la vérification de chaîne
+								return !dateStr.includes('2025')
+							},
+							warningMessage: 'Attention : les dates en 2025 génèrent un avertissement',
+							successMessage: 'Date hors 2025',
+							fieldIdentifier: 'date',
+							isWarning: true
+						}
+					}]"
+					:show-success-messages="true"
+				/>
+			</div>
+			<v-btn
+				size="small"
+				color="primary"
+				@click="date9 = '15/04/2025'"
+			>
+				15/04/2025
+			</v-btn>
+			<v-btn
+				size="small"
+				class="ml-2"
+				@click="date9 = '15/12/2026'"
+			>
+				15/12/2026
+			</v-btn>
+			<div class="mt-2">
+				Valeur actuelle: {{ date9 }}
+			</div>
+		</section>
+
+		<!-- Exemple 10: Combinaison de plusieurs règles -->
+		<section class="mb-10">
+			<h2 class="text-h6 mb-3">
+				Combinaison de plusieurs règles
+			</h2>
+			<p class="text-body-2 mb-2">
+				Exemple de DatePicker avec plusieurs règles de validation
+			</p>
+			<div class="mb-2">
+				<DatePicker
+					v-model="date10"
+					placeholder="Date de travail"
+					required
+					:custom-rules="[
+						{
+							type: 'notWeekend',
+							options: { message: 'La date ne peut pas être un weekend' }
+						},
+						{
+							type: 'notAfterToday',
+							options: { message: 'La date ne peut pas être dans le futur' }
+						}
+					]"
+					:show-success-messages="true"
+				/>
+			</div>
+			<v-btn
+				size="small"
+				color="primary"
+				@click="date10 = today"
+			>
+				Aujourd'hui
+			</v-btn>
+			<v-btn
+				size="small"
+				class="ml-2"
+				@click="date10 = '13/04/2025'"
+			>
+				Weekend
+			</v-btn>
+			<v-btn
+				size="small"
+				class="ml-2"
+				@click="date10 = nextYear"
+			>
+				Futur
+			</v-btn>
+			<div class="mt-2">
+				Valeur actuelle: {{ date10 }}
+			</div>
+		</section>
+	</div>
+</template>
+
+<style scoped>
+.date-picker-validation-examples {
+	padding: 20px;
+	max-width: 800px;
+	margin: 0 auto;
+}
+
+section {
+	padding: 20px;
+	border: 1px solid #e0e0e0;
+	border-radius: 4px;
+}
+</style>

package/src/components/DatePicker/tests/DatePicker.spec.ts

@@ -60,12 +60,6 @@ describe('DatePicker.vue', () => {
 		expect(wrapper.emitted('update:modelValue')[0]).toEqual(['01/01/2023'])
 	})
 
-	it('toggles the date picker visibility on focus', async () => {
-		const input = wrapper.find('input')
-		await input.trigger('focus')
-		expect(wrapper.vm.isDatePickerVisible).toBe(true)
-	})
-
 	it('renders the date picker with proper structure', async () => {
 		// Ouvrir le DatePicker pour que les éléments soient dans le DOM
 		wrapper.vm.isDatePickerVisible = true
@@ -151,17 +145,15 @@ describe('DatePicker.vue', () => {
 				plugins: [vuetify],
 			},
 			props: {
-				required: true, // Le champ est requis
+				required: true,
 			},
 		})
 
-		// Simule une date valide
 		wrapper.vm.selectedDates = [new Date('2023-01-01')]
 		await nextTick()
 
 		const result = wrapper.vm.validateOnSubmit()
 
-		// Vérifie que validateOnSubmit retourne true et qu'il n'y a pas d'erreurs
 		expect(result).toBe(true)
 		expect(wrapper.vm.errorMessages).toEqual([])
 	})
@@ -172,34 +164,32 @@ describe('DatePicker.vue', () => {
 				plugins: [vuetify],
 			},
 			props: {
-				required: true, // Le champ est requis
+				required: true,
 			},
 		})
 
-		// Simule l'absence de date sélectionnée
 		wrapper.vm.selectedDates = null
 		await nextTick()
 
 		const result = wrapper.vm.validateOnSubmit()
 
-		// Vérifie que validateOnSubmit retourne false et qu'il y a des erreurs
 		expect(result).toBe(false)
 		expect(wrapper.vm.errorMessages).toContain('La date est requise.')
 	})
 
 	it('parses a valid date string into a Date instance', () => {
-		const modelValue = '15/01/2023' // Chaîne valide
+		const modelValue = '15/01/2023'
 		const result = wrapper.vm.initializeSelectedDates(modelValue, 'DD/MM/YYYY')
 
-		expect(result).toBeInstanceOf(Date) // Doit retourner une instance de Date
-		expect(result.toISOString().split('T')[0]).toBe('2023-01-15') // Correspond à la date attendue
+		expect(result).toBeInstanceOf(Date)
+		expect(result.toISOString().split('T')[0]).toBe('2023-01-15')
 	})
 
 	it('returns null if modelValue is null or undefined', () => {
 		const modelValue = null
 		const result = wrapper.vm.initializeSelectedDates(modelValue, 'DD/MM/YYYY')
 
-		expect(result).toBeNull() // Doit retourner null
+		expect(result).toBeNull()
 	})
 
 	it('handles an invalid date string gracefully', () => {
@@ -210,24 +200,23 @@ describe('DatePicker.vue', () => {
 	})
 
 	it('sets selectedDates to null when input is empty', () => {
-		wrapper.vm.updateSelectedDates('') // Simule un input vide
+		wrapper.vm.updateSelectedDates('')
 
-		expect(wrapper.vm.selectedDates).toBeNull() // Vérifie que selectedDates est null
+		expect(wrapper.vm.selectedDates).toBeNull()
 	})
 
 	it('parses a valid date string and updates selectedDates', () => {
 		const validInput = '15/01/2023'
-		wrapper.vm.updateSelectedDates(validInput) // Simule un input valide
+		wrapper.vm.updateSelectedDates(validInput)
 
-		expect(wrapper.vm.selectedDates).toBeInstanceOf(Date) // Vérifie que selectedDates est une instance de Date
-		expect(wrapper.vm.selectedDates.toISOString().split('T')[0]).toBe('2023-01-15') // Vérifie la date exacte
+		expect(wrapper.vm.selectedDates).toBeInstanceOf(Date)
+		expect(wrapper.vm.selectedDates.toISOString().split('T')[0]).toBe('2023-01-15')
 	})
 
 	it('does not update selectedDates for invalid date string', () => {
 		const invalidInput = 'invalid-date'
-		wrapper.vm.updateSelectedDates(invalidInput) // Simule un input invalide
-
-		expect(wrapper.vm.selectedDates).toBeNull() // Vérifie que selectedDates reste null
+		wrapper.vm.updateSelectedDates(invalidInput)
+		expect(wrapper.vm.selectedDates).toBeNull()
 	})
 
 	it('toggles date picker visibility correctly', async () => {
@@ -235,15 +224,12 @@ describe('DatePicker.vue', () => {
 			global: { plugins: [vuetify] },
 		})
 
-		// État initial : le date picker est caché
 		expect(wrapper.vm.isDatePickerVisible).toBe(false)
 
-		// Ouvrir le date picker
 		wrapper.vm.openDatePicker()
 		await nextTick()
 		expect(wrapper.vm.isDatePickerVisible).toBe(true)
 
-		// Fermer le date picker
 		wrapper.vm.isDatePickerVisible = false
 		await nextTick()
 		expect(wrapper.vm.isDatePickerVisible).toBe(false)
@@ -257,7 +243,6 @@ describe('DatePicker.vue', () => {
 			},
 		})
 
-		// Valider sans date (devrait échouer)
 		const result = await wrapper.vm.validateOnSubmit()
 		expect(result).toBe(false)
 		expect(wrapper.vm.errorMessages.length).toBeGreaterThan(0)
@@ -299,11 +284,9 @@ describe('DatePicker.vue', () => {
 			},
 		})
 
-		// Valider sans date pour générer une erreur
 		await wrapper.vm.validateOnSubmit()
 		await nextTick()
 
-		// Vérifier que l'erreur est ajoutée à errorMessages
 		expect(wrapper.vm.errorMessages.length).toBeGreaterThan(0)
 		const errorMessage = wrapper.find('.v-messages__message')
 		expect(errorMessage.exists()).toBe(true)
@@ -318,12 +301,30 @@ describe('DatePicker.vue', () => {
 			},
 		})
 
-		// Vérifier que le mode birth date est appliqué
 		expect(wrapper.props('isBirthDate')).toBe(true)
 
-		// Ouvrir le picker et vérifier qu'il est visible
 		wrapper.vm.openDatePicker()
 		await nextTick()
 		expect(wrapper.vm.isDatePickerVisible).toBe(true)
 	})
+
+	it('takes into account disabled and readonly limitations', async () => {
+		const wrapper = mount(DatePicker, {
+			global: { plugins: [vuetify] },
+			props: {
+				disabled: true,
+			},
+		})
+
+		wrapper.vm.openDatePicker()
+		await nextTick()
+
+		expect(wrapper.vm.isDatePickerVisible).toBe(false)
+
+		await wrapper.setProps({ disabled: false, readonly: true })
+		wrapper.vm.openDatePicker()
+		await nextTick()
+
+		expect(wrapper.vm.isDatePickerVisible).toBe(false)
+	})
 })