mirror of
https://github.com/danbulant/Portfolio
synced 2026-05-24 12:35:31 +00:00
feat: bigger register views
This commit is contained in:
Sebastian Pravda
parent
13c4210f06
commit
d1fc6374b1
4 changed files with 190 additions and 178 deletions
|
|
@ -49,8 +49,8 @@
|
|||
}
|
||||
.view {
|
||||
@apply z-10;
|
||||
@apply absolute top-0 right-0 bottom-0 left-0 m-auto md:top-auto md:bottom-auto md:left-auto md:m-0;
|
||||
@apply md:h-screen md:w-[50vw];
|
||||
@apply absolute top-0 right-0 bottom-0 m-auto md:top-auto md:bottom-auto md:left-auto md:m-0;
|
||||
@apply md:h-screen md:w-[75vw];
|
||||
@apply md:my-auto;
|
||||
@apply bg-white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,9 +5,11 @@ export interface CandidateData {
|
|||
candidate: {
|
||||
name: string;
|
||||
surname: string;
|
||||
birthSurname: string;
|
||||
birthplace: string;
|
||||
birthdate: string;
|
||||
address: string;
|
||||
letterAddress: string;
|
||||
telephone: string;
|
||||
citizenship: string;
|
||||
email: string;
|
||||
|
|
@ -16,6 +18,8 @@ export interface CandidateData {
|
|||
schoolName: string;
|
||||
healthInsurance: string;
|
||||
grades: Array<GradeBackend>;
|
||||
firstSchool: string;
|
||||
secondSchool: string;
|
||||
testLanguage: string;
|
||||
};
|
||||
parents: Array<{
|
||||
|
|
@ -66,9 +70,11 @@ export const candidateData = writable<CandidateData>({
|
|||
candidate: {
|
||||
name: '',
|
||||
surname: '',
|
||||
birthSurname: '',
|
||||
birthplace: '',
|
||||
birthdate: '',
|
||||
address: '',
|
||||
letterAddress: '',
|
||||
telephone: '',
|
||||
citizenship: '',
|
||||
email: '',
|
||||
|
|
@ -77,6 +83,8 @@ export const candidateData = writable<CandidateData>({
|
|||
schoolName: '',
|
||||
healthInsurance: '',
|
||||
grades: [],
|
||||
firstSchool: '',
|
||||
secondSchool: '',
|
||||
testLanguage: ''
|
||||
},
|
||||
parents: []
|
||||
|
|
|
|||
|
|
@ -10,9 +10,11 @@ export const load: PageServerLoad = async ({ fetch, params }) => {
|
|||
candidate: {
|
||||
name: '',
|
||||
surname: '',
|
||||
birthSurname: '',
|
||||
birthplace: '',
|
||||
birthdate: '',
|
||||
address: '',
|
||||
letterAddress: '',
|
||||
telephone: '',
|
||||
citizenship: '',
|
||||
email: '',
|
||||
|
|
@ -21,6 +23,8 @@ export const load: PageServerLoad = async ({ fetch, params }) => {
|
|||
schoolName: '',
|
||||
healthInsurance: '',
|
||||
grades: [],
|
||||
firstSchool: '',
|
||||
secondSchool: '',
|
||||
testLanguage: ''
|
||||
},
|
||||
parents: []
|
||||
|
|
|
|||
|
|
@ -23,9 +23,9 @@
|
|||
import AccountLinkCheckBox from '$lib/components/checkbox/AccountLinkCheckBox.svelte';
|
||||
import GradesTable from '$lib/components/grades/GradesTable.svelte';
|
||||
|
||||
const pageCount = 7;
|
||||
let pageIndex = 0;
|
||||
let pagesFilled = [false, false, false, false, false, false, false];
|
||||
let pagesFilled = [false, false, false, false, false, false];
|
||||
const pageCount = pagesFilled.length;
|
||||
let pageTexts = [
|
||||
'Zpracování osobních údajů',
|
||||
'Registrace',
|
||||
|
|
@ -39,6 +39,7 @@
|
|||
let details = data.candidate;
|
||||
let baseCandidateDetails = data.whoami;
|
||||
|
||||
let personalIdBirthdateMatch = true;
|
||||
const formInitialValues = {
|
||||
gdpr: false,
|
||||
linkOk: false,
|
||||
|
|
@ -46,12 +47,14 @@
|
|||
candidate: {
|
||||
name: '',
|
||||
surname: '',
|
||||
birthSurname: '',
|
||||
email: '',
|
||||
telephone: '',
|
||||
birthplace: '',
|
||||
birthdate: '',
|
||||
sex: '',
|
||||
address: '',
|
||||
letterAddress: '',
|
||||
street: '',
|
||||
houseNumber: '',
|
||||
city: '',
|
||||
|
|
@ -61,6 +64,8 @@
|
|||
schoolName: '',
|
||||
healthInsurance: '',
|
||||
grades: [],
|
||||
firstSchool: '',
|
||||
secondSchool: '',
|
||||
testLanguage: '',
|
||||
},
|
||||
parents: [
|
||||
|
|
@ -225,28 +230,31 @@
|
|||
};
|
||||
|
||||
const onSubmit = async (values: CandidateData) => {
|
||||
if (pageIndex === 3) {
|
||||
if (values.candidate.citizenship === 'Česká republika') {
|
||||
if (
|
||||
!isPersonalIdNumberWithBirthdateValid(
|
||||
values.candidate.personalIdNumber,
|
||||
values.candidate.birthdate
|
||||
)
|
||||
) {
|
||||
toast.push('Rodné číslo neodpovídá oficiální specifikaci či datumu narození', {
|
||||
theme: {
|
||||
'--toastColor': 'mintcream',
|
||||
'--toastBackground': '#b91c1c',
|
||||
'--toastBarBackground': '#7f1d1d'
|
||||
}
|
||||
});
|
||||
personalIdBirthdateMatch = false;
|
||||
throw new Error('Rodné číslo neodpovídá datumu narození');
|
||||
}
|
||||
}
|
||||
personalIdBirthdateMatch = true;
|
||||
}
|
||||
if (pageIndex === pageCount) {
|
||||
// clone values to oldValues
|
||||
let oldValues = JSON.parse(JSON.stringify(values));
|
||||
try {
|
||||
if (values.candidate.citizenship === 'Česká republika') {
|
||||
if (
|
||||
!isPersonalIdNumberWithBirthdateValid(
|
||||
values.candidate.personalIdNumber,
|
||||
values.candidate.birthdate
|
||||
)
|
||||
) {
|
||||
// alert('Rodné číslo neodpovídá oficiální specifikaci či datumu narození'); // TODO: alerts
|
||||
toast.push('Rodné číslo neodpovídá oficiální specifikaci či datumu narození', {
|
||||
theme: {
|
||||
'--toastColor': 'mintcream',
|
||||
'--toastBackground': '#b91c1c',
|
||||
'--toastBarBackground': '#7f1d1d'
|
||||
}
|
||||
});
|
||||
throw new Error('Rodné číslo neodpovídá datumu narození');
|
||||
}
|
||||
}
|
||||
// @ts-ignore // love javascript
|
||||
delete values.undefined;
|
||||
// convert birthdate from dd.mm.yyyy to yyyy-mm-dd
|
||||
|
|
@ -314,7 +322,11 @@
|
|||
$typedErrors['candidate']['name'] ||
|
||||
$typedErrors['candidate']['surname'] ||
|
||||
$typedErrors['candidate']['email'] ||
|
||||
$typedErrors['candidate']['telephone']
|
||||
$typedErrors['candidate']['telephone'] ||
|
||||
$typedErrors['candidate']['city'] ||
|
||||
$typedErrors['candidate']['street'] ||
|
||||
$typedErrors['candidate']['houseNumber'] ||
|
||||
$typedErrors['candidate']['zip']
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
|
|
@ -322,13 +334,15 @@
|
|||
|
||||
case 3:
|
||||
if (
|
||||
$typedErrors['candidate']['birthplace'] ||
|
||||
$typedErrors['candidate']['citizenship'] ||
|
||||
$typedErrors['candidate']['personalIdNumber'] ||
|
||||
$typedErrors['candidate']['schoolName'] ||
|
||||
$typedErrors['candidate']['healthInsurance'] ||
|
||||
$typedErrors['candidate']['birthdate'] ||
|
||||
$typedErrors['candidate']['street'] ||
|
||||
$typedErrors['candidate']['houseNumber'] ||
|
||||
$typedErrors['candidate']['city'] ||
|
||||
$typedErrors['candidate']['zip']
|
||||
// $typedErrors['candidate']['address']
|
||||
$typedErrors['candidate']['birthplace'] ||
|
||||
$typedErrors['candidate']['personalIdNumber'] ||
|
||||
$typedErrors['candidate']['testLanguage'] ||
|
||||
!personalIdBirthdateMatch
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
|
|
@ -354,16 +368,6 @@
|
|||
}
|
||||
break;
|
||||
case 6:
|
||||
if (
|
||||
$typedErrors['candidate']['citizenship'] ||
|
||||
$typedErrors['candidate']['personalIdNumber'] ||
|
||||
$typedErrors['candidate']['schoolName'] ||
|
||||
$typedErrors['candidate']['healthInsurance']
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
break;
|
||||
case 7:
|
||||
if ($typedErrors["candidate"]["grades"].length > 0) return true;
|
||||
break;
|
||||
default:
|
||||
|
|
@ -417,11 +421,11 @@
|
|||
|
||||
<SplitLayout>
|
||||
<SvelteToast />
|
||||
<div class="form relative">
|
||||
<div class="bottom-3/12 absolute flex w-full flex-col md:h-auto">
|
||||
<div class="form relative bg-center">
|
||||
<div class="bottom-5/24 absolute flex w-full flex-col md:h-auto">
|
||||
<!-- TODO: Find different way how to display SchoolBadge -->
|
||||
{#if pageIndex !== 0 && pageIndex !== 7}
|
||||
<div class="<md:h-24 <md:w-24 mb-4 h-32 w-32 self-center">
|
||||
<div class="<md:h-24 <md:w-24 h-32 w-32 self-center">
|
||||
<SchoolBadge />
|
||||
</div>
|
||||
{/if}
|
||||
|
|
@ -465,29 +469,72 @@
|
|||
V rámci usnadnění přijímacího řízení jsme připravili online formulář, který Vám pomůže s
|
||||
vyplněním potřebných údajů.
|
||||
</p>
|
||||
<div class="flex flex-col">
|
||||
<span class="field">
|
||||
<NameField
|
||||
error={$typedErrors['candidate']['name'] || $typedErrors['candidate']['surname']}
|
||||
bind:valueName={$form.candidate.name}
|
||||
bind:valueSurname={$form.candidate.surname}
|
||||
placeholder="Jméno a příjmení"
|
||||
/>
|
||||
</span>
|
||||
<span class="field">
|
||||
<EmailField
|
||||
error={$typedErrors['candidate']['email']}
|
||||
bind:value={$form.candidate.email}
|
||||
placeholder="E-mail"
|
||||
/>
|
||||
</span>
|
||||
<span class="field">
|
||||
<TelephoneField
|
||||
error={$typedErrors['candidate']['telephone']}
|
||||
bind:value={$form.candidate.telephone}
|
||||
placeholder="Telefon"
|
||||
/>
|
||||
</span>
|
||||
<div class="w-full">
|
||||
<div class="flex flex-col">
|
||||
<div class="field flex">
|
||||
<span class="w-[50%]">
|
||||
<NameField
|
||||
error={$typedErrors['candidate']['name'] || $typedErrors['candidate']['surname']}
|
||||
bind:valueName={$form.candidate.name}
|
||||
bind:valueSurname={$form.candidate.surname}
|
||||
placeholder="Jméno a příjmení"
|
||||
/>
|
||||
</span>
|
||||
<span class="w-[50%] ml-2">
|
||||
<TextField
|
||||
error={$typedErrors['candidate']['birthSurname']}
|
||||
bind:value={$form.candidate.birthSurname}
|
||||
placeholder="Rodné příjmení (pokud odlišné)"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="field flex">
|
||||
<span class="w-[50%]">
|
||||
<EmailField
|
||||
error={$typedErrors['candidate']['email']}
|
||||
bind:value={$form.candidate.email}
|
||||
placeholder="E-mail"
|
||||
/>
|
||||
</span>
|
||||
<span class="w-[50%] ml-2">
|
||||
<TelephoneField
|
||||
error={$typedErrors['candidate']['telephone']}
|
||||
bind:value={$form.candidate.telephone}
|
||||
placeholder="Telefon"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<span class="field">
|
||||
<TextField
|
||||
error={$typedErrors['candidate']['city']}
|
||||
bind:value={$form.candidate.city}
|
||||
type="text"
|
||||
placeholder="Město"
|
||||
helperText="Uveďte poštovní směrovací číslo. (např. 602 00)"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="field flex">
|
||||
<span class="w-[66%]">
|
||||
<NameField
|
||||
error={$typedErrors['candidate']['street'] ||
|
||||
$typedErrors['candidate']['houseNumber']}
|
||||
bind:valueName={$form.candidate.street}
|
||||
bind:valueSurname={$form.candidate.houseNumber}
|
||||
placeholder="Ulice a č. p."
|
||||
helperText="Uveďte ulici a číslo popisné (např. Preslova 72)."
|
||||
/>
|
||||
</span>
|
||||
<span class="ml-2 w-[33%]">
|
||||
<TextField
|
||||
error={$typedErrors['candidate']['zip']}
|
||||
bind:value={$form.candidate.zip}
|
||||
type="number"
|
||||
placeholder="PSČ"
|
||||
helperText="Uveďte poštovní směrovací číslo. (např. 602 00)"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{:else if pageIndex === 3}
|
||||
|
|
@ -496,53 +543,24 @@
|
|||
Pro registraci je potřeba vyplnit několik údajů o Vás. Tyto údaje budou použity pro
|
||||
přijímací řízení. Všechny údaje jsou důležité.
|
||||
</p>
|
||||
<div class="field flex">
|
||||
<span class="w-[66%]">
|
||||
<NameField
|
||||
error={$typedErrors['candidate']['street'] ||
|
||||
$typedErrors['candidate']['houseNumber']}
|
||||
bind:valueName={$form.candidate.street}
|
||||
bind:valueSurname={$form.candidate.houseNumber}
|
||||
placeholder="Ulice a č. p."
|
||||
helperText="Uveďte ulici a číslo popisné (např. Preslova 72)."
|
||||
<div class="field flex w-full">
|
||||
<span class="w-[50%]">
|
||||
<SelectField
|
||||
error={$typedErrors['candidate']['citizenship']}
|
||||
bind:value={$form.candidate.citizenship}
|
||||
placeholder="Občanství"
|
||||
options={['Česká republika', 'Slovenská republika', 'Ukrajina', 'Jiné']}
|
||||
/>
|
||||
</span>
|
||||
<span class="ml-2 w-[33%]">
|
||||
<TextField
|
||||
error={$typedErrors['candidate']['zip']}
|
||||
bind:value={$form.candidate.zip}
|
||||
type="number"
|
||||
placeholder="PSČ"
|
||||
helperText="Uveďte poštovní směrovací číslo. (např. 602 00)"
|
||||
<span class="w-[50%] ml-2">
|
||||
<SelectField
|
||||
error={$typedErrors['candidate']['testLanguage']}
|
||||
bind:value={$form.candidate.testLanguage}
|
||||
placeholder="Jazyk odborných testů"
|
||||
options={['Čeština', 'Angličtina']}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="field flex">
|
||||
<span>
|
||||
<TextField
|
||||
error={$typedErrors['candidate']['city']}
|
||||
bind:value={$form.candidate.city}
|
||||
type="text"
|
||||
placeholder="Město"
|
||||
helperText="Uveďte město"
|
||||
/>
|
||||
</span>
|
||||
<span class="ml-2">
|
||||
<TextField
|
||||
error={$typedErrors['candidate']['birthplace']}
|
||||
bind:value={$form.candidate.birthplace}
|
||||
type="text"
|
||||
placeholder="Místo narození"
|
||||
helperText="Uveďte město"
|
||||
icon
|
||||
>
|
||||
<div slot="icon" class="text-sspsBlue flex items-center justify-center">
|
||||
<Home />
|
||||
</div>
|
||||
</TextField>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="field flex items-center">
|
||||
<TextField
|
||||
error={$typedErrors['candidate']['birthdate']}
|
||||
|
|
@ -551,6 +569,28 @@
|
|||
placeholder="Datum narození"
|
||||
helperText="TODO: (Uveďte ve formátu DD.MM.RRRR)"
|
||||
/>
|
||||
<TextField
|
||||
error={$typedErrors['candidate']['birthplace']}
|
||||
bind:value={$form.candidate.birthplace}
|
||||
type="text"
|
||||
placeholder="Místo narození"
|
||||
helperText="TODO: (Místo narození)"
|
||||
/>
|
||||
</div>
|
||||
<div class="field flex items-center justify-center">
|
||||
{#if $form.candidate.citizenship === 'Česká republika' || !$form.candidate.citizenship}
|
||||
<IdField
|
||||
error={$typedErrors['candidate']['personalIdNumber']}
|
||||
bind:value={$form.candidate.personalIdNumber}
|
||||
placeholder="Rodné číslo"
|
||||
/>
|
||||
{:else}
|
||||
<TextField
|
||||
error={$typedErrors['candidate']['personalIdNumber']}
|
||||
bind:value={$form.candidate.personalIdNumber}
|
||||
placeholder="Rodné číslo"
|
||||
/>
|
||||
{/if}
|
||||
<div class="ml-2">
|
||||
<SelectField
|
||||
error={$typedErrors['candidate']['sex']}
|
||||
|
|
@ -560,6 +600,35 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field flex flex-row">
|
||||
<span>
|
||||
{#if $form.candidate.citizenship === 'Česká republika' || !$form.candidate.citizenship}
|
||||
<TextField
|
||||
error={$typedErrors['candidate']['schoolName']}
|
||||
type="number"
|
||||
bind:value={$form.candidate.schoolName}
|
||||
placeholder="IZO školy"
|
||||
/>
|
||||
{:else}
|
||||
<TextField
|
||||
error={$typedErrors['candidate']['schoolName']}
|
||||
type="text"
|
||||
bind:value={$form.candidate.schoolName}
|
||||
placeholder="Název školy"
|
||||
/>
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
<span class="ml-2">
|
||||
<TextField
|
||||
error={$typedErrors['candidate']['healthInsurance']}
|
||||
type="text"
|
||||
bind:value={$form.candidate.healthInsurance}
|
||||
placeholder="Číslo zdravotní pojišťovny"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{:else if pageIndex === 4}
|
||||
<h1 class="title mt-8">{pageTexts[3]}</h1>
|
||||
<p class="description mt-8 block text-center">
|
||||
|
|
@ -619,75 +688,6 @@
|
|||
</span>
|
||||
</div>
|
||||
{:else if pageIndex === 6}
|
||||
<h1 class="title mt-8">{pageTexts[5]}</h1>
|
||||
<p class="description mt-8 block text-center">
|
||||
Zadejte prosím své občanství, rodné číslo, či jeho alternativu Vaší země a obor na který
|
||||
se hlásíte.
|
||||
</p>
|
||||
<div class="flex w-full flex-col">
|
||||
<div class="field flex w-full">
|
||||
<span class="w-[50%]">
|
||||
<SelectField
|
||||
error={$typedErrors['candidate']['citizenship']}
|
||||
bind:value={$form.candidate.citizenship}
|
||||
placeholder="Občanství"
|
||||
options={['Česká republika', 'Slovenská republika', 'Ukrajina', 'Jiné']}
|
||||
/>
|
||||
</span>
|
||||
<span class="w-[50%] ml-2">
|
||||
<SelectField
|
||||
error={$typedErrors['candidate']['testLanguage']}
|
||||
bind:value={$form.candidate.testLanguage}
|
||||
placeholder="Jazyk odborných testů"
|
||||
options={['Čeština', 'Angličtina']}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="field flex flex-row">
|
||||
<span>
|
||||
{#if $form.candidate.citizenship === 'Česká republika' || !$form.candidate.citizenship}
|
||||
<TextField
|
||||
error={$typedErrors['candidate']['schoolName']}
|
||||
type="number"
|
||||
bind:value={$form.candidate.schoolName}
|
||||
placeholder="IZO školy"
|
||||
/>
|
||||
{:else}
|
||||
<TextField
|
||||
error={$typedErrors['candidate']['schoolName']}
|
||||
type="text"
|
||||
bind:value={$form.candidate.schoolName}
|
||||
placeholder="Název školy"
|
||||
/>
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
<span class="ml-2">
|
||||
<TextField
|
||||
error={$typedErrors['candidate']['healthInsurance']}
|
||||
type="text"
|
||||
bind:value={$form.candidate.healthInsurance}
|
||||
placeholder="Číslo zdravotní pojišťovny"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field flex items-center justify-center">
|
||||
{#if $form.candidate.citizenship === 'Česká republika' || !$form.candidate.citizenship}
|
||||
<IdField
|
||||
error={$typedErrors['candidate']['personalIdNumber']}
|
||||
bind:value={$form.candidate.personalIdNumber}
|
||||
placeholder="Rodné číslo"
|
||||
/>
|
||||
{:else}
|
||||
<TextField
|
||||
error={$typedErrors['candidate']['personalIdNumber']}
|
||||
bind:value={$form.candidate.personalIdNumber}
|
||||
placeholder="Rodné číslo"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{:else if pageIndex === 7}
|
||||
<h1 class="title mt-8">{pageTexts[5]}</h1>
|
||||
<p class="description mt-8 block text-center">
|
||||
Přidejte prosím přepis Vaších známek z posledních dvou let studia
|
||||
|
|
@ -698,7 +698,7 @@
|
|||
/>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="bottom-1/12 absolute w-full">
|
||||
<div class="bottom-1/24 absolute w-full">
|
||||
<div class="field">
|
||||
<Submit
|
||||
on:click={async (e) => {
|
||||
|
|
@ -716,7 +716,7 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex flex-row justify-center md:mt-8">
|
||||
<div class="mt-4 flex flex-row justify-center md:mt-6">
|
||||
{#each Array(pageCount + 1) as _, i}
|
||||
<button
|
||||
class:dotActive={i === pageIndex}
|
||||
|
|
|
|||
Loading…
Reference in a new issue