dan/Portfolio
1
0
Fork 0
mirror of https://github.com/danbulant/Portfolio synced 2026-07-05 11:00:56 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add types for form errors

Browse source
This commit is contained in:
EETagent 2022-12-06 19:09:42 +01:00
parent a5331adfca
commit 391a48a45e
1 changed files with 86 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

143
frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte
View file

@ -34,7 +34,7 @@
address: '', address: '',
citizenship: '', citizenship: '',
personalIdNumber: '', personalIdNumber: '',
study: '' study: '',
}, },
parents: [ parents: [
{ {
@ -42,47 +42,52 @@
surname: '', surname: '',
email: '', email: '',
telephone: '' telephone: ''
}, }
] ]
}; };
const formValidationSchema = yup.object().shape({
candidate: yup.object().shape({
name: yup.string().required(),
surname: yup.string(),
email: yup.string().email().required(),
telephone: yup
.string()
.required()
.matches(/^\+\d{1,3} \d{3} \d{3} \d{3}$/),
birthplace: yup.string().required(),
birthdate: yup
.string()
.required()
.matches(/^([0-3]?[0-9])\.([1-9]|1[0-2])\.[0-9]{4}$/),
sex: yup.string(),
address: yup.string().required(),
citizenship: yup.string().required(),
personalIdNumber: yup.string().required(),
study: yup.string().required()
}),
parents: yup
.array()
.of(
yup.object().shape({
name: yup.string().required(),
surname: yup.string().required(),
email: yup.string().email().required(),
telephone: yup
.string()
.required()
.matches(/^\+\d{1,3} \d{3} \d{3} \d{3}$/)
})
)
.required()
});
const { form, errors, handleSubmit, handleChange } = createForm({ const { form, errors, handleSubmit, handleChange } = createForm({
initialValues: formInitialValues, initialValues: formInitialValues,
validationSchema: yup.object().shape({ validationSchema: formValidationSchema,
candidate: yup.object().shape({
name: yup.string().required(),
surname: yup.string(),
email: yup.string().email().required(),
telephone: yup
.string()
.required()
.matches(/^\+\d{1,3} \d{3} \d{3} \d{3}$/),
birthplace: yup.string().required(),
birthdate: yup
.string()
.required()
.matches(/^([0-3]?[0-9])\.([1-9]|1[0-2])\.[0-9]{4}$/),
sex: yup.string(),
address: yup.string().required(),
citizenship: yup.string().required(),
personalIdNumber: yup.string().required(),
study: yup.string().required()
}).required(),
parents: yup.array().of(
yup.object().shape({
name: yup.string().required(),
surname: yup.string().required(),
email: yup.string().email().required(),
telephone: yup
.string()
.required()
.matches(/^\+\d{1,3} \d{3} \d{3} \d{3}$/),
})
).required()
}),
onSubmit: async (values: CandidateData) => { onSubmit: async (values: CandidateData) => {
console.log("page count: " + pageIndex); console.log('page count: ' + pageIndex);
console.log(values.candidate); console.log(values.candidate);
console.log(values.parents); console.log(values.parents);
console.log(values); console.log(values);
@ -92,8 +97,8 @@
// @ts-ignore // love javascript // @ts-ignore // love javascript
delete values.undefined; delete values.undefined;
// convert birthdate from dd.mm.yyyy to yyyy-mm-dd // convert birthdate from dd.mm.yyyy to yyyy-mm-dd
let birthdate_formttted = values.candidate.birthdate! let birthdate_formttted = values.candidate
.split('.') .birthdate!.split('.')
.map((x) => x.padStart(2, '0')) .map((x) => x.padStart(2, '0'))
.reverse() .reverse()
.join('-'); .join('-');
@ -109,34 +114,56 @@
} }
}); });
$: typedErrors = errors as Writable<any>; type FormErrorType = {
[K in keyof typeof formInitialValues]: typeof formInitialValues[K] extends Record<
string,
unknown
>
? {
[K2 in keyof typeof formInitialValues[K]]: string;
}
: typeof formInitialValues[K] extends Array<Record<string, unknown>>
? Array<{ [K3 in keyof typeof formInitialValues[K][number]]: string }>
: string;
};
// TODO: https://github.com/tjinauyeung/svelte-forms-lib/issues/171!! (Zatím tenhle mega typ)
$: typedErrors = errors as unknown as Writable<FormErrorType>;
const isPageInvalid = (): boolean => { const isPageInvalid = (): boolean => {
switch (pageIndex) { switch (pageIndex) {
case 0: case 0:
if ($typedErrors["candidate"]["name"] || $typedErrors["candidate"]["email"] || $typedErrors["candidate"]["telephone"]) { if (
$typedErrors['candidate']['name'] ||
$typedErrors['candidate']['email'] ||
$typedErrors['candidate']['telephone']
) {
return true; return true;
} }
break; break;
case 1: case 1:
if ( if (
/* $typedErrors.birthdurname || */ $typedErrors["candidate"]["birthplace"] || /* $typedErrors.birthdurname || */ $typedErrors['candidate']['birthplace'] ||
$typedErrors["candidate"]["birthdate"] /* || $typedErrors.sex */ $typedErrors['candidate']['birthdate'] /* || $typedErrors.sex */
) { ) {
return true; return true;
} }
break; break;
case 2: case 2:
if ($typedErrors["candidate"]["address"] || $typedErrors["parents"][0]["email"] || $typedErrors["parents"][0]["telephone"]) { if (
$typedErrors['candidate']['address'] ||
$typedErrors['parents'][0]['email'] ||
$typedErrors['parents'][0]['telephone']
) {
return true; return true;
} }
break; break;
case 3: case 3:
if ( if (
$typedErrors["candidate"]["citizenship"] || $typedErrors['candidate']['citizenship'] ||
$typedErrors["candidate"]["personalIdNumber"] || $typedErrors['candidate']['personalIdNumber'] ||
$typedErrors["candidate"]["study"] //|| $typedErrors['candidate']['study'] //||
// $typedErrors.applicationId // $typedErrors.applicationId
) { ) {
return true; return true;
@ -164,7 +191,7 @@
<div class="flex w-full items-center justify-center md:flex-col"> <div class="flex w-full items-center justify-center md:flex-col">
<span class="mt-8 w-full"> <span class="mt-8 w-full">
<NameField <NameField
error={$typedErrors["candidate"]["name"]} error={$typedErrors['candidate']['name']}
on:change={handleChange} on:change={handleChange}
bind:valueName={$form.candidate.name} bind:valueName={$form.candidate.name}
bind:valueSurname={$form.candidate.surname} bind:valueSurname={$form.candidate.surname}
@ -173,7 +200,7 @@
</span> </span>
<span class="mt-8 ml-2 w-full md:ml-0"> <span class="mt-8 ml-2 w-full md:ml-0">
<EmailField <EmailField
error={$typedErrors["candidate"]["email"]} error={$typedErrors['candidate']['email']}
on:change={handleChange} on:change={handleChange}
bind:value={$form.candidate.email} bind:value={$form.candidate.email}
placeholder="E-mail" placeholder="E-mail"
@ -182,7 +209,7 @@
</div> </div>
<div class="mt-8 w-full"> <div class="mt-8 w-full">
<TelephoneField <TelephoneField
error={$typedErrors["candidate"]["telephone"]} error={$typedErrors['candidate']['telephone']}
on:change={handleChange} on:change={handleChange}
bind:value={$form.candidate.telephone} bind:value={$form.candidate.telephone}
placeholder="Telefon" placeholder="Telefon"
@ -198,7 +225,7 @@
<div class="flex w-full flex-row md:flex-col"> <div class="flex w-full flex-row md:flex-col">
<span class="mt-8 w-full"> <span class="mt-8 w-full">
<NameField <NameField
error={$typedErrors["parents"][0]["name"] || $typedErrors["parents"][0]["surname"]} error={$typedErrors['parents'][0]['name'] || $typedErrors['parents'][0]['surname']}
on:change={handleChange} on:change={handleChange}
bind:valueName={$form.parents[0].name} bind:valueName={$form.parents[0].name}
bind:valueSurname={$form.parents[0].surname} bind:valueSurname={$form.parents[0].surname}
@ -207,7 +234,7 @@
</span> </span>
<span class="mt-8 ml-2 w-full md:ml-0"> <span class="mt-8 ml-2 w-full md:ml-0">
<TextField <TextField
error={$typedErrors["candidate"]["birthplace"]} error={$typedErrors['candidate']['birthplace']}
on:change={handleChange} on:change={handleChange}
bind:value={$form.candidate.birthplace} bind:value={$form.candidate.birthplace}
type="text" type="text"
@ -223,7 +250,7 @@
<div class="mt-8 flex w-full items-center"> <div class="mt-8 flex w-full items-center">
<TextField <TextField
error={$typedErrors["candidate"]["birthdate"]} error={$typedErrors['candidate']['birthdate']}
on:change={handleChange} on:change={handleChange}
bind:value={$form.candidate.birthdate} bind:value={$form.candidate.birthdate}
type="text" type="text"
@ -231,7 +258,7 @@
/> />
<div class="ml-2"> <div class="ml-2">
<SelectField <SelectField
error={$typedErrors["candidate"]["sex"]} error={$typedErrors['candidate']['sex']}
on:change={handleChange} on:change={handleChange}
bind:value={$form.candidate.sex} bind:value={$form.candidate.sex}
options={['Žena', 'Muž']} options={['Žena', 'Muž']}
@ -248,7 +275,7 @@
<div class="flex w-full flex-col"> <div class="flex w-full flex-col">
<span class="mt-8 w-full"> <span class="mt-8 w-full">
<TextField <TextField
error={$typedErrors["candidate"]["address"]} error={$typedErrors['candidate']['address']}
on:change={handleChange} on:change={handleChange}
bind:value={$form.candidate.address} bind:value={$form.candidate.address}
type="text" type="text"
@ -258,7 +285,7 @@
<div class="mt-8 flex flex-row items-center md:flex-col"> <div class="mt-8 flex flex-row items-center md:flex-col">
<span class="w-full"> <span class="w-full">
<EmailField <EmailField
error={$typedErrors["parents"][0]["email"]} error={$typedErrors['parents'][0]['email']}
on:change={handleChange} on:change={handleChange}
bind:value={$form.parents[0].email} bind:value={$form.parents[0].email}
placeholder="E-mail zákonného zástupce" placeholder="E-mail zákonného zástupce"
@ -266,7 +293,7 @@
</span> </span>
<span class="ml-2 w-full md:ml-0 md:mt-8"> <span class="ml-2 w-full md:ml-0 md:mt-8">
<TelephoneField <TelephoneField
error={$typedErrors["parents"][0]["telephone"]} error={$typedErrors['parents'][0]['telephone']}
on:change={handleChange} on:change={handleChange}
bind:value={$form.parents[0].telephone} bind:value={$form.parents[0].telephone}
placeholder="Telefon zákonného zástupce" placeholder="Telefon zákonného zástupce"
@ -283,7 +310,7 @@
<div class="flex w-full flex-row md:flex-col"> <div class="flex w-full flex-row md:flex-col">
<span class="mt-8 w-full"> <span class="mt-8 w-full">
<TextField <TextField
error={$typedErrors["candidate"]["citizenship"]} error={$typedErrors['candidate']['citizenship']}
on:change={handleChange} on:change={handleChange}
bind:value={$form.candidate.citizenship} bind:value={$form.candidate.citizenship}
type="text" type="text"
@ -296,14 +323,14 @@
</div> </div>
<div class="mt-8 flex w-full items-center justify-center"> <div class="mt-8 flex w-full items-center justify-center">
<IdField <IdField
error={$typedErrors["candidate"]["personalIdNumber"]} error={$typedErrors['candidate']['personalIdNumber']}
on:change={handleChange} on:change={handleChange}
bind:value={$form.candidate.personalIdNumber} bind:value={$form.candidate.personalIdNumber}
placeholder="Rodné číslo" placeholder="Rodné číslo"
/> />
<span class="ml-2"> <span class="ml-2">
<SelectField <SelectField
error={$typedErrors["candidate"]["study"]} error={$typedErrors['candidate']['study']}
on:change={handleChange} on:change={handleChange}
bind:value={$form.candidate.study} bind:value={$form.candidate.study}
placeholder="Obor" placeholder="Obor"