From 9b0987e7db8e1c828d0aecf2191240a75d3371a2 Mon Sep 17 00:00:00 2001 From: VachetVirginie Date: Fri, 2 Aug 2024 17:03:19 +0200 Subject: [PATCH] improve validDate rule ans set it by default (#3681) Co-authored-by: David FYON --- .../src/patterns/DatePicker/DatePicker.vue | 36 ++++++++++++++----- .../DatePicker/tests/DatePicker.spec.ts | 2 +- .../src/rules/notAfterToday/index.ts | 4 +-- .../notAfterToday/tests/notAfterToday.spec.ts | 6 ++++ .../src/rules/notBeforeToday/index.ts | 2 +- .../tests/notBeforeToday.spec.ts | 7 +++- 6 files changed, 43 insertions(+), 14 deletions(-) diff --git a/packages/synapse-bridge/src/patterns/DatePicker/DatePicker.vue b/packages/synapse-bridge/src/patterns/DatePicker/DatePicker.vue index 83325bc7aa..31cbae83d0 100644 --- a/packages/synapse-bridge/src/patterns/DatePicker/DatePicker.vue +++ b/packages/synapse-bridge/src/patterns/DatePicker/DatePicker.vue @@ -9,6 +9,8 @@ import { WarningRules } from '@/mixins/warningRules/index.ts' import { ErrorProp } from './mixins/errorProp' import { customizable } from '@/mixins/customizable/index.ts' import { config } from '@/patterns/DatePicker/config.ts' +import { ruleMessage } from '../../helpers/ruleMessage' + type DatePickerFlow = ( | 'calendar' @@ -18,7 +20,7 @@ type DatePickerFlow = ( | 'minutes' | 'hours' | 'seconds' -)[] + )[] interface DatePickerData { date: Date | null | any[] | string @@ -33,6 +35,7 @@ interface DatePickerData { isCalOpen: boolean lastTypeAddedDate: string dayNames: string[] + isNotValid: boolean } export default defineComponent({ @@ -140,6 +143,7 @@ export default defineComponent({ isCalOpen: false, lastTypeAddedDate: '', dayNames: ['L', 'M', 'M', 'J', 'V', 'S', 'D'], + isNotValid: false } }, computed: { @@ -161,7 +165,7 @@ export default defineComponent({ disabled: this.disabled, hint: this.hint, persistentHint: true, - rules: this.rules, + rules: [this.validateDateFormat, ...this.rules], errorMessages: errorMessages || [], } }, @@ -170,7 +174,7 @@ export default defineComponent({ return ( this.errorMessages.includes("La date saisie n'est pas valide") || this.errorMessages.includes('Une erreur est survenue') || - this.errorMessages.includes(this.customErrorMessages) + this.customErrorMessages.some(msg => this.errorMessages.includes(msg)) ) }, textFieldClasses() { @@ -287,6 +291,10 @@ export default defineComponent({ // if (newVal.length === 0) { // this.$emit('update:model-value', null); // } + if (newVal.length === 0) { + this.warningErrorMessages = []; + this.errorMessages = []; + } this.lastTypeAddedDate = 'inputValue' }, }, @@ -409,7 +417,7 @@ export default defineComponent({ if (value.data === null) { this.indexedThis[historyKey] = this.indexedThis[ historyKey - ].slice(0, -1) + ].slice(0, -1) return } @@ -448,17 +456,19 @@ export default defineComponent({ const isValidFormat = dateRegEx.test(this.inputValue) // If the date format and the date are valid, update the date and emit an update event - if (isValidFormat) { + if (isValidFormat && dayjs(this.inputValue, this.dateFormat, true).isValid()) { this.date = this.inputValue + this.isNotValid = false this.$emit( 'update:model-value', this.indexedThis[historyKey] ) } else { + this.isNotValid = true // If the date format or the date is not valid, add an error message this.errorMessages.push( this.customErrorMessages.length > 0 - ? this.customErrorMessages + ? this.customErrorMessages[0] : "La date saisie n'est pas valide" ) } @@ -469,6 +479,12 @@ export default defineComponent({ } } }, + validateDateFormat(): boolean | string { + if (this.isNotValid) { + return ruleMessage(this.errorMessages, 'default') || "La date saisie n'est pas valide"; + } + return true; + }, getInput(value: any) { this.updateInputValue(value, 'inputValue') }, @@ -538,13 +554,15 @@ export default defineComponent({ this.inputValue = event.clipboardData.getData('text');; const isValidFormat = this.createDateRegEx(this.dateFormat).test(this.inputValue); - if (isValidFormat) { + if (isValidFormat && dayjs(this.inputValue, this.dateFormat, true).isValid()) { this.$emit('update:model-value', this.inputValue); this.date = this.inputValue; + this.isNotValid = false } else { + this.isNotValid = true this.errorMessages.push( this.customErrorMessages.length > 0 - ? this.customErrorMessages + ? this.customErrorMessages[0] : "La date saisie n'est pas valide" ); } @@ -605,7 +623,7 @@ export default defineComponent({ :hint="hint" :label="label" :persistent-hint="true" - :rules="rules" + :rules="[validateDateFormat, ...rules]" :readonly="range" :value=" lastTypeAddedDate === 'date' diff --git a/packages/synapse-bridge/src/patterns/DatePicker/tests/DatePicker.spec.ts b/packages/synapse-bridge/src/patterns/DatePicker/tests/DatePicker.spec.ts index daf6bfa0ec..73fa1dc81a 100644 --- a/packages/synapse-bridge/src/patterns/DatePicker/tests/DatePicker.spec.ts +++ b/packages/synapse-bridge/src/patterns/DatePicker/tests/DatePicker.spec.ts @@ -157,7 +157,7 @@ describe('Computed', () => { disabled: false, hint: wrapper.vm.hint, persistentHint: true, - rules: [], + rules: [wrapper.vm.validateDateFormat, ...wrapper.vm.rules], errorMessages: [], } diff --git a/packages/synapse-bridge/src/rules/notAfterToday/index.ts b/packages/synapse-bridge/src/rules/notAfterToday/index.ts index 417e1b2d03..06d83c9798 100644 --- a/packages/synapse-bridge/src/rules/notAfterToday/index.ts +++ b/packages/synapse-bridge/src/rules/notAfterToday/index.ts @@ -4,7 +4,7 @@ import { ValidationRule, ValidationResult, ErrorMessages, Value } from '../types import { defaultErrorMessages } from './locales'; import { TODAY } from '../../constants'; -function formatDateToDDMMYYYY(date: Date): string { +export function formatDateToDDMMYYYYFn(date: Date): string { const day = String(date.getDate()).padStart(2, '0'); const month = String(date.getMonth() + 1).padStart(2, '0'); const year = date.getFullYear(); @@ -17,7 +17,7 @@ export function notAfterTodayFn(errorMessages: ErrorMessages = defaultErrorMessa if (!value) { return true; } - const formattedValue = typeof value === 'object' ? formatDateToDDMMYYYY(value) : value; + const formattedValue = typeof value === 'object' ? formatDateToDDMMYYYYFn(value) : value; if (isDateAfter(TODAY, formattedValue)) { return ruleMessage(errorMessages, 'default'); } diff --git a/packages/synapse-bridge/src/rules/notAfterToday/tests/notAfterToday.spec.ts b/packages/synapse-bridge/src/rules/notAfterToday/tests/notAfterToday.spec.ts index bc38689c78..c010f7c3dc 100644 --- a/packages/synapse-bridge/src/rules/notAfterToday/tests/notAfterToday.spec.ts +++ b/packages/synapse-bridge/src/rules/notAfterToday/tests/notAfterToday.spec.ts @@ -2,6 +2,7 @@ import { notAfterTodayFn } from '@/rules/notAfterToday/index.ts' import dayjs from 'dayjs' import { defaultErrorMessages } from '@/rules/notAfterToday/locales' import { it, describe, expect } from 'vitest' +import {formatDateToDDMMYYYYFn} from '../' const DATE_FORMAT = 'DD/MM/YYYY' @@ -27,4 +28,9 @@ describe('notAfterTodayFn', () => { it('returns true when value is today', () => { expect(notAfterToday(today)).toBe(true) }) + + it('returns date in DD/MM/YYYY format', () => { + const date = new Date('2021-01-01') + expect(formatDateToDDMMYYYYFn(date)).toBe('01/01/2021') + }) }) diff --git a/packages/synapse-bridge/src/rules/notBeforeToday/index.ts b/packages/synapse-bridge/src/rules/notBeforeToday/index.ts index 3f56bdee38..bf6c94e063 100644 --- a/packages/synapse-bridge/src/rules/notBeforeToday/index.ts +++ b/packages/synapse-bridge/src/rules/notBeforeToday/index.ts @@ -11,7 +11,7 @@ import { defaultErrorMessages } from './locales' import { isDateBefore } from '../../functions/validation/isDateBefore' import { TODAY } from '../../constants' -function formatDateToDDMMYYYY(date: Date): string { +export function formatDateToDDMMYYYY(date: Date): string { const day = String(date.getDate()).padStart(2, '0'); const month = String(date.getMonth() + 1).padStart(2, '0'); const year = date.getFullYear(); diff --git a/packages/synapse-bridge/src/rules/notBeforeToday/tests/notBeforeToday.spec.ts b/packages/synapse-bridge/src/rules/notBeforeToday/tests/notBeforeToday.spec.ts index 4eb355f0fa..99f7bb35d4 100644 --- a/packages/synapse-bridge/src/rules/notBeforeToday/tests/notBeforeToday.spec.ts +++ b/packages/synapse-bridge/src/rules/notBeforeToday/tests/notBeforeToday.spec.ts @@ -1,6 +1,6 @@ import dayjs from 'dayjs' -import { notBeforeToday, notBeforeTodayFn } from '../' +import { notBeforeToday, notBeforeTodayFn, formatDateToDDMMYYYY } from '../' import { describe, it, expect } from 'vitest' const DATE_FORMAT = 'DD/MM/YYYY' @@ -33,4 +33,9 @@ describe('notBeforeToday', () => { it('returns true when value is today', () => { expect(notBeforeToday(today)).toBe(true) }) + + it('returns date in DD/MM/YYYY format', () => { + const date = new Date('2021-01-01') + expect(formatDateToDDMMYYYY(date)).toBe('01/01/2021') + }) })