Skip to content

Commit

Permalink
Merge pull request #70 from SecretJ12/refactor/form-api
Browse files Browse the repository at this point in the history 
♻️ use new defineField api
  • Loading branch information
@jonastahl
jonastahl authored Oct 3, 2024
2 parents 3566df5 + 26576d7 commit 9b27c31
Show file tree
Hide file tree
Showing 2 changed files with 104 additions and 94 deletions.
75 changes: 40 additions & 35 deletions frontend/app/src/components/views/player/ViewPlayerForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }"
Expand All @@ -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 }"
Expand All @@ -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 }"
Expand All @@ -54,7 +57,8 @@
<div class="field col-6">
<label for="sex">{{ t("ViewPlayerRegistration.sex.field") }}</label>
<Dropdown
v-bind="sex"
v-model="sex"
v-bind="sexAttrs"
:disabled="disabled"
:options="[
{ name: t('general.male'), value: Sex.MALE },
Expand Down Expand Up @@ -82,7 +86,8 @@
id="email"
:disabled="disabled"
type="text"
v-bind="email"
v-model="email"
v-bind="emailAttrs"
maxlength="100"
class="w-full"
:class="{ 'p-invalid': errors.email }"
Expand All @@ -97,7 +102,8 @@
id="phone"
:disabled="disabled"
type="text"
v-bind="phone"
v-model="phone"
v-bind="phoneAttrs"
maxlength="30"
class="w-full"
:class="{ 'p-invalid': errors.phone }"
Expand Down Expand Up @@ -132,36 +138,35 @@ const props = withDefaults(
const phoneRegExp =
/^(\+?\d{0,4})?\s?-?\s?(\(?\d{3}\)?)\s?-?\s?(\(?\d{3}\)?)\s?-?\s?(\(?\d{4}\)?)$/
const { defineInputBinds, errors, defineComponentBinds, handleSubmit } =
useForm<PlayerRegistration>({
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<PlayerRegistration>({
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", <PlayerRegistration>(<unknown>values))
Expand Down
123 changes: 64 additions & 59 deletions frontend/app/src/components/views/tournaments/FormTournament.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@
<InputText
id="name"
type="text"
v-bind="name"
v-model="name"
v-bind="nameAttrs"
maxlength="30"
class="w-full"
:class="{ 'p-invalid': errors.name }"
Expand All @@ -25,7 +26,8 @@
t("TournamentSettings.visible")
}}</label>
<SelectButton
v-bind="visible"
v-model="visible"
v-bind="visibleAttrs"
:unselectable="false"
:options="[
{ name: t('no'), value: false },
Expand All @@ -45,7 +47,8 @@
rows="4"
maxlength="255"
class="w-full"
v-bind="description"
v-model="description"
v-bind="descriptionAttrs"
:disabled="disabled"
></Textarea>
</div>
Expand All @@ -55,7 +58,8 @@
}}</label>
<Calendar
id="registration"
v-bind="registration_phase"
v-model="registrationPhase"
v-bind="registrationPhaseAttrs"
selection-mode="range"
:manual-input="false"
class="w-full"
Expand All @@ -75,7 +79,8 @@
}}</label>
<Calendar
id="game_phase"
v-bind="game_phase"
v-model="gamePhase"
v-bind="gamePhaseAttrs"
selection-mode="range"
:manual-input="false"
class="w-full"
Expand Down Expand Up @@ -150,62 +155,62 @@ setLocale({
},
})
const { defineInputBinds, errors, defineComponentBinds, handleSubmit } =
useForm<TournamentForm>({
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<TournamentForm>({
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"])
Expand Down

0 comments on commit 9b27c31

Please sign in to comment.