From 26576d77ba30f95a28763f618041c4bf975b695b Mon Sep 17 00:00:00 2001 From: oliver Date: Thu, 3 Oct 2024 00:10:39 +0200 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20use=20new=20defineField=20?= =?UTF-8?q?api?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/player/ViewPlayerForm.vue | 75 ++++++----- .../views/tournaments/FormTournament.vue | 123 +++++++++--------- 2 files changed, 104 insertions(+), 94 deletions(-) diff --git a/frontend/app/src/components/views/player/ViewPlayerForm.vue b/frontend/app/src/components/views/player/ViewPlayerForm.vue index c5fbfe56..f354272c 100644 --- a/frontend/app/src/components/views/player/ViewPlayerForm.vue +++ b/frontend/app/src/components/views/player/ViewPlayerForm.vue @@ -8,7 +8,8 @@ id="first_name" :disabled="disabled" type="text" - v-bind="firstName" + v-model="firstName" + v-bind="firstNameAttrs" maxlength="40" class="w-full" :class="{ 'p-invalid': errors.firstName }" @@ -25,7 +26,8 @@ id="name" :disabled="disabled" type="text" - v-bind="lastName" + v-model="lastName" + v-bind="lastNameAttrs" maxlength="40" class="w-full" :class="{ 'p-invalid': errors.lastName }" @@ -42,7 +44,8 @@ show-icon :disabled="disabled" class="w-full" - v-bind="birthday" + v-model="birthday" + v-bind="birthdayAttrs" :manual-input="false" :date-format="t('date_format')" :class="{ 'p-invalid': errors.birthday }" @@ -54,7 +57,8 @@
({ - validationSchema: toTypedSchema( - object({ - firstName: string().min(4).max(40).required(), - lastName: string().min(4).max(40).required(), - sex: mixed().oneOf(Object.values(Sex)).required(), - birthday: date().required(), - email: string().max(100).email().required(), - phone: string() - .matches(phoneRegExp, t("ViewPlayerRegistration.phone.correct")) - .required(), - }), - ), - initialValues: { - firstName: props.player.firstName, - lastName: props.player.lastName, - sex: props.player.sex, - birthday: props.player.birthday, - email: props.player.email, - phone: props.player.phone, - }, - }) +const { defineField, errors, handleSubmit } = useForm({ + validationSchema: toTypedSchema( + object({ + firstName: string().min(4).max(40).required(), + lastName: string().min(4).max(40).required(), + sex: mixed().oneOf(Object.values(Sex)).required(), + birthday: date().required(), + email: string().max(100).email().required(), + phone: string() + .matches(phoneRegExp, t("ViewPlayerRegistration.phone.correct")) + .required(), + }), + ), + initialValues: { + firstName: props.player.firstName, + lastName: props.player.lastName, + sex: props.player.sex, + birthday: props.player.birthday, + email: props.player.email, + phone: props.player.phone, + }, +}) -const firstName = defineInputBinds("firstName") -const lastName = defineInputBinds("lastName") -const sex = defineComponentBinds("sex") -const birthday = defineComponentBinds("birthday") -const email = defineInputBinds("email") -const phone = defineInputBinds("phone") +const [firstName, firstNameAttrs] = defineField("firstName") +const [lastName, lastNameAttrs] = defineField("lastName") +const [sex, sexAttrs] = defineField("sex") +const [birthday, birthdayAttrs] = defineField("birthday") +const [email, emailAttrs] = defineField("email") +const [phone, phoneAttrs] = defineField("phone") const onSubmit = handleSubmit((values) => { emit("submit", (values)) diff --git a/frontend/app/src/components/views/tournaments/FormTournament.vue b/frontend/app/src/components/views/tournaments/FormTournament.vue index 7957c020..461cf065 100644 --- a/frontend/app/src/components/views/tournaments/FormTournament.vue +++ b/frontend/app/src/components/views/tournaments/FormTournament.vue @@ -10,7 +10,8 @@
@@ -55,7 +58,8 @@ }} ({ - validationSchema: toTypedSchema( - object({ - name: string().required().min(4), - visible: boolean(), - description: string().max(255), - registration_phase: array() - .length(2, "validation.date_missing") - .of(mixed().nonNullable()) - .of(date()) - .test( - "correctDates", - "TournamentSettings.wrong_dates", - (arr, context) => { - if (!context.parent.game_phase?.[0]) return true - return ( - context.parent.registration_phase[1] < - context.parent.game_phase[0] - ) - }, - ) - .required("validation.date_missing"), - game_phase: array() - .length(2, "validation.date_missing") - .of(mixed().nonNullable()) - .of(date()) - .test( - "correctDates", - "TournamentSettings.wrong_dates", - (arr, context) => { - if (!context.parent.registration_phase?.[1]) return true - return ( - context.parent.registration_phase[1] < - context.parent.game_phase[0] - ) - }, - ) - .required("validation.date_missing"), - }), - ), - initialValues: { - name: data.name, - visible: data.visible, - description: data.description, - registration_phase: data.registration_phase, - game_phase: data.game_phase, - }, - }) +const { defineField, errors, handleSubmit } = useForm({ + validationSchema: toTypedSchema( + object({ + name: string().required().min(4), + visible: boolean(), + description: string().max(255), + registration_phase: array() + .length(2, "validation.date_missing") + .of(mixed().nonNullable()) + .of(date()) + .test( + "correctDates", + "TournamentSettings.wrong_dates", + (arr, context) => { + if (!context.parent.game_phase?.[0]) return true + return ( + context.parent.registration_phase[1] < + context.parent.game_phase[0] + ) + }, + ) + .required("validation.date_missing"), + game_phase: array() + .length(2, "validation.date_missing") + .of(mixed().nonNullable()) + .of(date()) + .test( + "correctDates", + "TournamentSettings.wrong_dates", + (arr, context) => { + if (!context.parent.registration_phase?.[1]) return true + return ( + context.parent.registration_phase[1] < + context.parent.game_phase[0] + ) + }, + ) + .required("validation.date_missing"), + }), + ), + initialValues: { + name: data.name, + visible: data.visible, + description: data.description, + registration_phase: data.registration_phase, + game_phase: data.game_phase, + }, +}) -const name = defineInputBinds("name") -const visible = defineComponentBinds("visible") -const description = defineInputBinds("description") +const [name, nameAttrs] = defineField("name") +const [visible, visibleAttrs] = defineField("visible") +const [description, descriptionAttrs] = defineField("description") -const registration_phase = defineComponentBinds("registration_phase") -const game_phase = defineComponentBinds("game_phase") +const [registrationPhase, registrationPhaseAttrs] = + defineField("registration_phase") +const [gamePhase, gamePhaseAttrs] = defineField("game_phase") const emit = defineEmits(["submit"])