Skip to content

Commit

Permalink
fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@VachetVirginie
VachetVirginie committed Aug 7, 2024
1 parent 3a27183 commit ef084ad
Showing 1 changed file with 133 additions and 89 deletions.
222 changes: 133 additions & 89 deletions packages/synapse-bridge/src/patterns/DatePicker/DatePicker.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,80 +223,68 @@ export default defineComponent({
},
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 formattedDate = dateToFormat.toDate()
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(newVal) // Add validate call
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)
)
})
this.validate(newVal) // Add validate call
} 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;
}
});
this.validate(newVal) // Add validate call
} 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.warningErrorMessages = [];
this.errorMessages = [];
// update date
this.clearErrors();
this.date = null;
this.$emit('update:model-value', null)
this.$emit('update:model-value', null);
}
this.lastTypeAddedDate = 'inputValue'
this.lastTypeAddedDate = 'inputValue';
},
},
created() {
Expand All @@ -307,15 +295,24 @@ export default defineComponent({
}
},
methods: {
resetErrorMessages() {
clearErrors() {
this.errorMessages = [];
this.warningErrorMessages = [];
},
resetErrorMessages() {
this.clearErrors();
this.isNotValid = false;
},
emitUpdateEvent() {
if (this.date) {
this.resetErrorMessages();
this.$emit('update:model-value', this.formatDate(this.date))
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 @@ -417,50 +414,97 @@ export default defineComponent({
return new RegExp(regexString)
},
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);
this.removeLastCharacter(historyKey);
return;
}
if (this.indexedThis[historyKey].length >= 10) {
// Limiter la longueur de l'input à 10 caractères
if (this.isMaxLength(historyKey, 10)) {
return;
}
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 (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 (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 (this.dateFormatReturn !== 'DD/MM/YY' && this.dateFormatReturn !== 'DD-MM-YY') {
let dateRegEx = this.createDateRegEx(this.dateFormat);
const isValidFormat = dateRegEx.test(this.inputValue);
removeLastCharacter(historyKey: string) {
console.log(this.indexedThis[historyKey])
this.indexedThis[historyKey] = this.indexedThis[historyKey].slice(0, -1);
},
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"
);
}
} else {
this.validate(this.indexedThis[historyKey]);
this.$emit('update:model-value', formattedDateReturn);
}
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, formattedDateReturn);
} else {
this.validateShortDate(historyKey, formattedDateReturn);
}
},
isShortDateFormat() {
return this.dateFormatReturn === 'DD/MM/YY' || this.dateFormatReturn === 'DD-MM-YY';
},
validateFullDate(historyKey: string, formattedDateReturn: 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 Down

0 comments on commit ef084ad

Please sign in to comment.