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

feat: add second parent, validate only first one

Browse source
This commit is contained in:
EETagent 2022-12-15 14:10:29 +01:00
parent fb541bfe56
commit ee4f5743ff
1 changed files with 97 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -18,7 +18,7 @@
import type { Writable } from 'svelte/store'; import type { Writable } from 'svelte/store';
import * as yup from 'yup'; import * as yup from 'yup';
const pageCount = 3; const pageCount = 4;
let pageIndex = 0; let pageIndex = 0;
let pagesFilled = 0; let pagesFilled = 0;
@ -34,9 +34,15 @@
address: '', address: '',
citizenship: '', citizenship: '',
personalIdNumber: '', personalIdNumber: '',
study: '', study: ''
}, },
parents: [ parents: [
{
name: '',
surname: '',
email: '',
telephone: ''
},
{ {
name: '', name: '',
surname: '', surname: '',
@ -66,20 +72,37 @@
personalIdNumber: yup.string().required(), personalIdNumber: yup.string().required(),
study: yup.string().required() study: yup.string().required()
}), }),
parents: yup parents: yup.array().of(
.array() yup.object().shape({
.of( name: yup.string().test((_val, context) => {
yup.object().shape({ if (context.path.includes('parents[1]')) {
name: yup.string().required(), return true;
surname: yup.string().required(), }
email: yup.string().email().required(), return _val !== '';
telephone: yup }),
.string() surname: yup.string().test((_val, context) => {
.required() if (context.path.includes('parents[1]')) {
.matches(/^\+\d{1,3} \d{3} \d{3} \d{3}$/) return true;
}
return _val !== '';
}),
email: yup
.string()
.email()
.test((_val, context) => {
if (context.path.includes('parents[1]')) {
return true;
}
return _val !== '';
}),
telephone: yup.string().test((_val, context) => {
if (context.path.includes('parents[1]')) {
return true;
}
return _val?.match(/^\+\d{1,3} \d{3} \d{3} \d{3}$/) !== null;
}) })
) })
.required() )
}); });
const { form, errors, handleSubmit, handleChange } = createForm({ const { form, errors, handleSubmit, handleChange } = createForm({
@ -145,14 +168,16 @@
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['candidate']['address'] /* || $typedErrors.sex */
) { ) {
return true; return true;
} }
break; break;
case 2: case 2:
if ( if (
$typedErrors['candidate']['address'] || $typedErrors['parents'][0]['name'] ||
$typedErrors['parents'][0]['surname'] ||
$typedErrors['parents'][0]['email'] || $typedErrors['parents'][0]['email'] ||
$typedErrors['parents'][0]['telephone'] $typedErrors['parents'][0]['telephone']
) { ) {
@ -160,6 +185,16 @@
} }
break; break;
case 3: case 3:
if (
$typedErrors['parents'][1]['name'] ||
$typedErrors['parents'][1]['surname'] ||
$typedErrors['parents'][1]['email'] ||
$typedErrors['parents'][1]['telephone']
) {
return true;
}
break;
case 4:
if ( if (
$typedErrors['candidate']['citizenship'] || $typedErrors['candidate']['citizenship'] ||
$typedErrors['candidate']['personalIdNumber'] || $typedErrors['candidate']['personalIdNumber'] ||
@ -224,12 +259,12 @@
</p> </p>
<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 <TextField
error={$typedErrors['parents'][0]['name'] || $typedErrors['parents'][0]['surname']} error={$typedErrors['candidate']['address']}
on:change={handleChange} on:change={handleChange}
bind:valueName={$form.parents[0].name} bind:value={$form.candidate.address}
bind:valueSurname={$form.parents[0].surname} type="text"
placeholder="Jméno a příjmení zákonného zástupce" placeholder="Adresa trvalého bydliště"
/> />
</span> </span>
<span class="mt-8 ml-2 w-full md:ml-0"> <span class="mt-8 ml-2 w-full md:ml-0">
@ -274,12 +309,12 @@
</p> </p>
<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 <NameField
error={$typedErrors['candidate']['address']} error={$typedErrors['parents'][0]['name'] || $typedErrors['parents'][0]['surname']}
on:change={handleChange} on:change={handleChange}
bind:value={$form.candidate.address} bind:valueName={$form.parents[0].name}
type="text" bind:valueSurname={$form.parents[0].surname}
placeholder="Adresa trvalého bydliště" placeholder="Jméno a příjmení zákonného zástupce"
/> />
</span> </span>
<div class="mt-8 flex flex-row items-center md:flex-col"> <div class="mt-8 flex flex-row items-center md:flex-col">
@ -303,6 +338,41 @@
</div> </div>
{/if} {/if}
{#if pageIndex === 3} {#if pageIndex === 3}
<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Dobrovolné!</h1>
<p class="text-sspsGray mt-8 block text-center font-light">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
</p>
<div class="flex w-full flex-col">
<span class="mt-8 w-full">
<NameField
error={$typedErrors['parents'][1]['name'] || $typedErrors['parents'][1]['surname']}
on:change={handleChange}
bind:valueName={$form.parents[1].name}
bind:valueSurname={$form.parents[1].surname}
placeholder="Jméno a příjmení zákonného zástupce"
/>
</span>
<div class="mt-8 flex flex-row items-center md:flex-col">
<span class="w-full">
<EmailField
error={$typedErrors['parents'][1]['email']}
on:change={handleChange}
bind:value={$form.parents[1].email}
placeholder="E-mail zákonného zástupce"
/>
</span>
<span class="ml-2 w-full md:ml-0 md:mt-8">
<TelephoneField
error={$typedErrors['parents'][1]['telephone']}
on:change={handleChange}
bind:value={$form.parents[1].telephone}
placeholder="Telefon zákonného zástupce"
/>
</span>
</div>
</div>
{/if}
{#if pageIndex === 4}
<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Poslední krok</h1> <h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Poslední krok</h1>
<p class="text-sspsGray mt-8 block text-center font-light"> <p class="text-sspsGray mt-8 block text-center font-light">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.