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

feat: nested form

Browse source
This commit is contained in:
EETagent 2022-12-06 16:01:23 +01:00
parent bf3d6d4378
commit 047476af2a
2 changed files with 139 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
frontend/src/lib/stores/candidate.ts
View file

@ -1,21 +1,25 @@
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
export interface CandidateData { export interface CandidateData {
name?: string; candidate: {
surname?: string; name?: string;
birthplace?: string; surname?: string;
birthdate?: string; birthplace?: string;
address?: string; birthdate?: string;
telephone?: string; address?: string;
citizenship?: string; telephone?: string;
email?: string; citizenship?: string;
sex?: string; email?: string;
study?: string; sex?: string;
personalIdNumber?: string; study?: string;
parentName?: string; personalIdNumber?: string;
parentSurname?: string; };
parentTelephone?: string; parents: Array<{
parentEmail?: string; name?: string;
surname?: string;
telephone?: string;
email?: string;
}>;
} }
export interface CandidatePreview { export interface CandidatePreview {

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

@ -14,54 +14,96 @@
import TextField from '$lib/components/textfield/TextField.svelte'; import TextField from '$lib/components/textfield/TextField.svelte';
import { createForm } from 'svelte-forms-lib'; import { createForm } from 'svelte-forms-lib';
import type { Writable } from 'svelte/store';
import * as yup from 'yup'; import * as yup from 'yup';
const pageCount = 3; const pageCount = 3;
let pageIndex = 0; let pageIndex = 0;
let pagesFilled = 0; let pagesFilled = 0;
const formInitialValues = { interface FormInterface
name: '', {
surname: '', candidate: {
email: '', name: string;
telephone: '', surname: string;
birthplace: '', email: string;
birthdate: '', telephone: string;
sex: '', birthplace: string;
address: '', birthdate: string;
citizenship: '', sex: string;
personalIdNumber: '', address: string;
study: '', citizenship: string;
parentName: '', personalIdNumber: string;
parentSurname: '', study: string;
parentTelephone: '', }
parentEmail: '' parents: Array<{
name: string;
surname: string;
email: string;
telephone: string;
}>;
}
const formInitialValues: FormInterface = {
candidate: {
name: '',
surname: '',
email: '',
telephone: '',
birthplace: '',
birthdate: '',
sex: '',
address: '',
citizenship: '',
personalIdNumber: '',
study: ''
},
parents: [
{
name: '',
surname: '',
email: '',
telephone: ''
},
{
name: '',
surname: '',
email: '',
telephone: ''
}
]
}; };
const { form, errors, handleSubmit, handleChange } = createForm({ const { form, errors, handleSubmit, handleChange } = createForm({
initialValues: formInitialValues, initialValues: formInitialValues,
validationSchema: yup.object().shape({ validationSchema: yup.object().shape({
name: yup.string().required(), candidate: yup.object().shape({
surname: yup.string(), name: yup.string().required(),
email: yup.string().email().required(), surname: yup.string(),
telephone: yup email: yup.string().email().required(),
.string() telephone: yup
.required() .string()
.matches(/^\+\d{1,3} \d{3} \d{3} \d{3}$/), .required()
birthplace: yup.string().required(), .matches(/^\+\d{1,3} \d{3} \d{3} \d{3}$/),
birthdate: yup.string().required(), birthplace: yup.string().required(),
sex: yup.string(), birthdate: yup.string().required(),
address: yup.string().required(), sex: yup.string(),
citizenship: yup.string().required(), address: yup.string().required(),
personalIdNumber: yup.string().required(), citizenship: yup.string().required(),
study: yup.string().required(), personalIdNumber: yup.string().required(),
parentName: yup.string(), study: yup.string().required()
parentSurname: yup.string(), }).required(),
parentTelephone: yup parents: yup.array().of(
.string() yup.object().shape({
.required() name: yup.string().required(),
.matches(/^\+\d{1,3} \d{3} \d{3} \d{3}$/), surname: yup.string().required(),
parentEmail: yup.string().email().required() email: yup.string().email().required(),
telephone: yup
.string()
.required()
.matches(/^\+\d{1,3} \d{3} \d{3} \d{3}$/),
})
).required()
}), }),
onSubmit: async (values) => { onSubmit: async (values) => {
@ -70,7 +112,7 @@
console.log('submit'); console.log('submit');
// @ts-ignore // love javascript // @ts-ignore // love javascript
delete values.undefined; delete values.undefined;
values.birthdate = '2000-01-01'; // TODO: reformat user typed date values.candidate.birthdate = '2000-01-01'; // TODO: reformat user typed date
await apiFillDetails(values); await apiFillDetails(values);
goto('/dashboard'); goto('/dashboard');
} catch (e) { } catch (e) {
@ -80,35 +122,35 @@
} }
}); });
$: console.log($errors); $: typedErrors = errors as Writable<any>;
const isPageInvalid = (): boolean => { const isPageInvalid = (): boolean => {
switch (pageIndex) { switch (pageIndex) {
case 0: case 0:
if ($errors.name || $errors.email || $errors.telephone) { if ($typedErrors["candidate"]["name"] || $typedErrors["candidate"]["email"] || $typedErrors["candidate"]["telephone"]) {
return true; return true;
} }
break; break;
case 1: case 1:
if ( if (
/* $errors.birthdurname || */ $errors.birthplace || /* $typedErrors.birthdurname || */ $typedErrors["candidate"]["birthplace"] ||
$errors.birthdate /* || $errors.sex */ $typedErrors["candidate"]["birthdate"] /* || $typedErrors.sex */
) { ) {
return true; return true;
} }
break; break;
case 2: case 2:
if ($errors.address || $errors.parentEmail || $errors.parentTelephone) { if ($typedErrors["candidate"]["address"] || $typedErrors["parents"][0]["email"] || $typedErrors["parents"][0]["telephone"]) {
return true; return true;
} }
break; break;
case 3: case 3:
if ( if (
$errors.citizenship || $typedErrors["candidate"]["citizenship"] ||
$errors.personalIdNumber || $typedErrors["candidate"]["personalIdNumber"] ||
$errors.study //|| $typedErrors["candidate"]["study"] //||
// $errors.applicationId // $typedErrors.applicationId
) { ) {
return true; return true;
} }
@ -135,27 +177,27 @@
<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={$errors.name} error={$typedErrors["candidate"]["name"]}
on:change={handleChange} on:change={handleChange}
bind:valueName={$form.name} bind:valueName={$form.candidate.name}
bind:valueSurname={$form.surname} bind:valueSurname={$form.candidate.surname}
placeholder="Jméno a příjmení" placeholder="Jméno a příjmení"
/> />
</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={$errors.email} error={$typedErrors["candidate"]["email"]}
on:change={handleChange} on:change={handleChange}
bind:value={$form.email} bind:value={$form.candidate.email}
placeholder="E-mail" placeholder="E-mail"
/> />
</span> </span>
</div> </div>
<div class="mt-8 w-full"> <div class="mt-8 w-full">
<TelephoneField <TelephoneField
error={$errors.telephone} error={$typedErrors["candidate"]["telephone"]}
on:change={handleChange} on:change={handleChange}
bind:value={$form.telephone} bind:value={$form.candidate.telephone}
placeholder="Telefon" placeholder="Telefon"
/> />
</div> </div>
@ -169,23 +211,23 @@
<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={$errors.name} error={$typedErrors["parents"][0]["name"] || $typedErrors["parents"][0]["surname"]}
on:change={handleChange} on:change={handleChange}
bind:valueName={$form.parentName} bind:valueName={$form.parents[0].name}
bind:valueSurname={$form.parentSurname} bind:valueSurname={$form.parents[0].surname}
placeholder="Jméno a příjmení zákonného zástupce" placeholder="Jméno a příjmení zákonného zástupce"
/> />
</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={$errors.birthplace} error={$typedErrors["candidate"]["birthplace"]}
on:change={handleChange} on:change={handleChange}
bind:value={$form.birthplace} bind:value={$form.candidate.birthplace}
type="text" type="text"
placeholder="Místo narození" placeholder="Místo narození"
icon icon
> >
<div slot="icon" class="flex items-center justify-center text-sspsBlue"> <div slot="icon" class="text-sspsBlue flex items-center justify-center">
<Home /> <Home />
</div> </div>
</TextField> </TextField>
@ -194,17 +236,17 @@
<div class="mt-8 flex w-full items-center"> <div class="mt-8 flex w-full items-center">
<TextField <TextField
error={$errors.birthdate} error={$typedErrors["candidate"]["birthdate"]}
on:change={handleChange} on:change={handleChange}
bind:value={$form.birthdate} bind:value={$form.candidate.birthdate}
type="text" type="text"
placeholder="Datum narození" placeholder="Datum narození"
/> />
<div class="ml-2"> <div class="ml-2">
<SelectField <SelectField
error={$errors.sex} error={$typedErrors["candidate"]["sex"]}
on:change={handleChange} on:change={handleChange}
bind:value={$form.sex} bind:value={$form.candidate.sex}
options={['Žena', 'Muž']} options={['Žena', 'Muž']}
placeholder="Pohlaví" placeholder="Pohlaví"
/> />
@ -219,9 +261,9 @@
<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={$errors.address} error={$typedErrors["candidate"]["address"]}
on:change={handleChange} on:change={handleChange}
bind:value={$form.address} bind:value={$form.candidate.address}
type="text" type="text"
placeholder="Adresa trvalého bydliště" placeholder="Adresa trvalého bydliště"
/> />
@ -229,17 +271,17 @@
<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={$errors.parentEmail} error={$typedErrors["parents"][0]["email"]}
on:change={handleChange} on:change={handleChange}
bind:value={$form.parentEmail} bind:value={$form.parents[0].email}
placeholder="E-mail zákonného zástupce" placeholder="E-mail zákonného zástupce"
/> />
</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={$errors.parentTelephone} error={$typedErrors["parents"][0]["telephone"]}
on:change={handleChange} on:change={handleChange}
bind:value={$form.parentTelephone} bind:value={$form.parents[0].telephone}
placeholder="Telefon zákonného zástupce" placeholder="Telefon zákonného zástupce"
/> />
</span> </span>
@ -254,9 +296,9 @@
<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={$errors.citizenship} error={$typedErrors["candidate"]["citizenship"]}
on:change={handleChange} on:change={handleChange}
bind:value={$form.citizenship} bind:value={$form.candidate.citizenship}
type="text" type="text"
placeholder="Občanství" placeholder="Občanství"
/> />
@ -267,16 +309,16 @@
</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={$errors.personalIdNumber} error={$typedErrors["candidate"]["personalIdNumber"]}
on:change={handleChange} on:change={handleChange}
bind:value={$form.personalIdNumber} bind:value={$form.candidate.personalIdNumber}
placeholder="Rodné číslo" placeholder="Rodné číslo"
/> />
<span class="ml-2"> <span class="ml-2">
<SelectField <SelectField
error={$errors.study} error={$typedErrors["candidate"]["study"]}
on:change={handleChange} on:change={handleChange}
bind:value={$form.study} bind:value={$form.candidate.study}
placeholder="Obor" placeholder="Obor"
options={['KB', 'IT', 'G']} options={['KB', 'IT', 'G']}
/> />
@ -295,6 +337,7 @@
pagesFilled++; pagesFilled++;
pageIndex++; pageIndex++;
} }
// @ts-ignore
errors.set(formInitialValues); errors.set(formInitialValues);
}} }}
value={pageIndex === pageCount ? 'Odeslat' : 'Pokračovat'} value={pageIndex === pageCount ? 'Odeslat' : 'Pokračovat'}
@ -315,6 +358,7 @@
if (isPageInvalid()) return; if (isPageInvalid()) return;
pagesFilled++; pagesFilled++;
pageIndex++; pageIndex++;
// @ts-ignore
errors.set(formInitialValues); errors.set(formInitialValues);
} }
}} }}