Skip to content

Commit

Permalink
fix datePicker issues 3684-3682
Browse files Browse the repository at this point in the history
  • Loading branch information
@VachetVirginie
VachetVirginie committed Aug 7, 2024
1 parent 9b0987e commit 584fc25
Show file tree
Hide file tree
Showing 3 changed files with 263 additions and 141 deletions.
1 change: 0 additions & 1 deletion packages/synapse-bridge/src/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ export * from './templates'
export * from './constants'
export * from './rules/email'
export * from './rules/exactLength'
export * from './rules/isDateValid'
export * from './rules/matchPattern'
export * from './rules/maxLength'
export * from './rules/minLength'
Expand Down
282 changes: 158 additions & 124 deletions packages/synapse-bridge/src/patterns/DatePicker/DatePicker.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import { customizable } from '@/mixins/customizable/index.ts'
import { config } from '@/patterns/DatePicker/config.ts'
import { ruleMessage } from '../../helpers/ruleMessage'
type DatePickerFlow = (
| 'calendar'
| 'month'
Expand Down Expand Up @@ -86,7 +85,7 @@ export default defineComponent({
default: false,
},
modelValue: {
type: [String, Number, Boolean, Array, Object, null] as PropType<
type: [String, Number, Boolean, Array, Object] as PropType<
| string
| number
| boolean
Expand Down Expand Up @@ -218,84 +217,74 @@ export default defineComponent({
this.$emit('change', newVal)
if (typeof newVal === 'string' && newVal.length === 10) {
this.$emit('update:model-value', this.formatDate(newVal))
}
if (Array.isArray(newVal) && newVal.length === 2) {
// TODO : add returnFormat for range
this.validate(newVal) // Add validate call
}
}
},
modelValue(newVal, oldVal) {
if (newVal === oldVal) {
return
return;
}
if (
typeof newVal === 'string' &&
this.dateFormatReturn === 'DD/MM/YYYY'
) {
const [day, month, year] = newVal.split(/[-/]/)
this.date = new Date(
Number(year),
Number(month) - 1,
Number(day)
)
if (newVal.length === 10) {
this.validate(newVal)
this.inputValue = newVal
}
} else if (
typeof newVal === 'string' &&
this.dateFormatReturn !== 'DD/MM/YYYY'
) {
const dateToFormat = dayjs(newVal, 'DD/MM/YYYY')
const formatedDate = dateToFormat.toDate()
if (formatedDate.toString() !== 'Invalid Date') {
this.date = formatedDate
const parseDate = (dateStr: string) => {
const [day, month, year] = dateStr.split(/[-/]/);
return new Date(Number(year), Number(month) - 1, Number(day));
};
const formatAndValidateDate = (dateStr: string) => {
const dateToFormat = dayjs(dateStr, 'DD/MM/YYYY');
const formattedDate = dateToFormat.toDate();
if (formattedDate.toString() !== 'Invalid Date') {
this.date = formattedDate;
this.validate(dateStr);
}
} else if (
Array.isArray(newVal) &&
this.dateFormatReturn === 'DD/MM/YYYY'
) {
this.date = newVal.map((date: any) => {
const [day, month, year] = date.split(/[-/]/)
return new Date(
Number(year),
Number(month) - 1,
Number(day)
)
})
} else if (
Array.isArray(newVal) &&
this.dateFormatReturn !== 'DD/MM/YYYY'
) {
this.date = newVal.map((date: any) => {
const dateToFormat = dayjs(date, 'DD/MM/YYYY').format(
this.dateFormatReturn
)
if (dateToFormat.toString() !== 'Invalid Date') {
return dateToFormat
};
if (typeof newVal === 'string') {
if (this.dateFormatReturn === 'DD/MM/YYYY') {
this.date = parseDate(newVal);
if (newVal.length === 10) {
this.validate(newVal);
this.inputValue = newVal;
}
})
} else {
formatAndValidateDate(newVal);
}
} else if (Array.isArray(newVal)) {
if (this.dateFormatReturn === 'DD/MM/YYYY') {
this.date = newVal.map(date => parseDate(date));
} else {
this.date = newVal.map(date => {
const formattedDate = dayjs(date, 'DD/MM/YYYY').format(this.dateFormatReturn);
return formattedDate.toString() !== 'Invalid Date' ? formattedDate : null;
}).filter(date => date !== null);
}
this.validate(newVal);
}
},
inputValue(newVal, oldVal) {
if (newVal === oldVal) {
return
return;
}
if (!/^[\d/-]+$/.test(newVal)) {
this.inputValue = newVal.slice(0, -1)
const isValidInput = (value: string) => /^[\d/-]+$/.test(value);
const truncateInput = (value: string, maxLength: number) => value.slice(0, maxLength);
if (!isValidInput(newVal)) {
this.inputValue = truncateInput(newVal, newVal.length - 1);
}
if (newVal.length > 10) {
this.inputValue = newVal.slice(0, 10)
this.inputValue = truncateInput(newVal, 10);
}
// if (newVal.length === 0) {
// this.$emit('update:model-value', null);
// }
if (newVal.length === 0) {
this.warningErrorMessages = [];
this.errorMessages = [];
this.clearErrors();
this.date = null;
this.$emit('update:model-value', null);
}
this.lastTypeAddedDate = 'inputValue'
this.lastTypeAddedDate = 'inputValue';
},
},
created() {
Expand All @@ -306,9 +295,24 @@ export default defineComponent({
}
},
methods: {
clearErrors() {
this.errorMessages = [];
this.warningErrorMessages = [];
},
resetErrorMessages() {
this.clearErrors();
this.isNotValid = false;
},
emitUpdateEvent() {
if (this.date) {
this.$emit('update:model-value', this.formatDate(this.date))
this.resetErrorMessages();
const formattedDate = this.formatDate(this.date);
this.$emit('update:model-value', formattedDate);
// Mise à jour explicite de indexedThis[historyKey] si le format de retour est différent de DD/MM/YYYY
if (this.dateFormatReturn !== 'DD/MM/YYYY') {
this.indexedThis['inputValue'] = formattedDate;
}
}
},
isWeekend(date: any) {
Expand Down Expand Up @@ -409,76 +413,97 @@ export default defineComponent({
return new RegExp(regexString)
},
updateInputValue(
value: { data: string | null },
historyKey: string
): void {
// If the input is cleared, remove the last character from the current value
updateInputValue(value: { data: string | null }, historyKey: string): void {
// Gérer la suppression de caractères
if (value.data === null) {
this.indexedThis[historyKey] = this.indexedThis[
historyKey
].slice(0, -1)
return
this.removeLastCharacter(historyKey);
return;
}
// If the current value is already 10 characters long, don't add more
if (this.indexedThis[historyKey].length >= 10) {
return
// Limiter la longueur de l'input à 10 caractères
if (this.isMaxLength(historyKey, 10)) {
return;
}
// If the current value is at 2 or 5 characters, add a separator (slash or dash)
if (
this.indexedThis[historyKey].length === 2 ||
this.indexedThis[historyKey].length === 5
) {
const separator = this.dateFormat.includes('/') ? '/' : '-'
this.indexedThis[historyKey] += separator
// Ajouter un séparateur après le deuxième et cinquième caractère
if (this.shouldAddSeparator(historyKey)) {
this.addSeparator(historyKey);
}
// If the input is a slash or dash, don't add it to the current value
if (value.data !== '/' && value.data !== '-') {
this.indexedThis[historyKey] += value.data
// Ajouter le caractère saisi si ce n'est pas un séparateur
if (this.isNotSeparator(value.data)) {
this.appendCharacter(historyKey, value.data);
}
// If the current value is 10 characters long, validate and format the date
if (this.indexedThis[historyKey].length === 10) {
const date = dayjs(
this.indexedThis[historyKey],
this.dateFormat
)
const formattedDateReturn = dayjs(date).format(
this.dateFormatReturn
)
// Valider et formater la date lorsque la longueur atteint 10 caractères
if (this.isMaxLength(historyKey, 10)) {
this.validateAndFormatDate(historyKey);
}
},
// If the date format is not 'DD/MM/YY', validate the date format and the date itself
if (this.dateFormatReturn !== 'DD/MM/YY') {
let dateRegEx = this.createDateRegEx(this.dateFormat)
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 && 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[0]
: "La date saisie n'est pas valide"
)
}
} else {
// If the date format is 'DD/MM/YY', emit an update event with the formatted date
this.$emit('update:model-value', formattedDateReturn)
this.$emit('input', formattedDateReturn)
}
removeLastCharacter(historyKey: string) {
this.indexedThis[historyKey] = this.indexedThis[historyKey].slice(0, -1);
},
isMaxLength(historyKey: string, maxLength: number) {
return this.indexedThis[historyKey].length >= maxLength;
},
shouldAddSeparator(historyKey: string) {
const length = this.indexedThis[historyKey].length;
return length === 2 || length === 5;
},
addSeparator(historyKey: string) {
const separator = this.dateFormat.includes('/') ? '/' : '-';
this.indexedThis[historyKey] += separator;
},
isNotSeparator(char: string | null) {
return char !== '/' && char !== '-';
},
appendCharacter(historyKey: string, char: string) {
this.indexedThis[historyKey] += char;
},
validateAndFormatDate(historyKey: string) {
const date = dayjs(this.indexedThis[historyKey], this.dateFormat);
const formattedDateReturn = dayjs(date).format(this.dateFormatReturn);
if (!this.isShortDateFormat()) {
this.validateFullDate(historyKey);
} else {
this.validateShortDate(historyKey, formattedDateReturn);
}
},
isShortDateFormat() {
return this.dateFormatReturn === 'DD/MM/YY' || this.dateFormatReturn === 'DD-MM-YY';
},
validateFullDate(historyKey: string) {
const dateRegEx = this.createDateRegEx(this.dateFormat);
const isValidFormat = dateRegEx.test(this.inputValue);
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;
this.errorMessages.push(
this.customErrorMessages.length > 0
? this.customErrorMessages[0]
: "La date saisie n'est pas valide"
);
}
},
validateShortDate(historyKey: string, formattedDateReturn: string) {
this.validate(this.indexedThis[historyKey]);
this.$emit('update:model-value', formattedDateReturn);
},
validateDateFormat(): boolean | string {
if (this.isNotValid) {
return ruleMessage(this.errorMessages, 'default') || "La date saisie n'est pas valide";
Expand All @@ -500,12 +525,21 @@ export default defineComponent({
const applyRules = (rules: any[]) =>
rules.map(rule => rule(value)).filter(result => result !== true);
this.errorMessages = applyRules(this.rules || []);
this.warningErrorMessages = applyRules(this.warningRules || []);
this.errorMessages = this.rules ? applyRules(this.rules) : [];
this.warningErrorMessages = this.warningRules ? applyRules(this.warningRules) : [];
if (this.error) {
this.errorMessages.push('Une erreur est survenue');
}
if (this.dateFormatReturn !== 'DD/MM/YYYY') {
const dateToFormat = dayjs(value, 'DD/MM/YYYY');
const formattedDate = dateToFormat.toDate();
if (formattedDate.toString() !== 'Invalid Date') {
this.date = formattedDate;
this.$emit('update:model-value', dayjs(formattedDate).format(this.dateFormatReturn));
}
}
},
buildTextFieldClasses() {
const textFieldClasses = []
Expand Down Expand Up @@ -555,6 +589,7 @@ export default defineComponent({
const isValidFormat = this.createDateRegEx(this.dateFormat).test(this.inputValue);
if (isValidFormat && dayjs(this.inputValue, this.dateFormat, true).isValid()) {
this.resetErrorMessages();
this.$emit('update:model-value', this.inputValue);
this.date = this.inputValue;
this.isNotValid = false
Expand All @@ -571,7 +606,6 @@ export default defineComponent({
},
})
</script>

<template>
<div class="vd-date-picker">
<!-- doc: https://vue3datepicker.com-->
Expand Down
Loading

0 comments on commit 584fc25

Please sign in to comment.