mirror of
https://github.com/danbulant/Portfolio
synced 2026-05-24 12:35:31 +00:00
Merge pull request #109 from EETagent/feature_edit_details
(frontend) SSR Edit Details
This commit is contained in:
Vojtěch Jungmann
GitHub
commit
5c10d79be4
9 changed files with 397 additions and 235 deletions
|
|
@ -7,7 +7,8 @@
|
|||
import StatusNotificationBig from './StatusNotificationBig.svelte';
|
||||
import InfoButton from './InfoButton.svelte';
|
||||
import { candidateData } from '$lib/stores/candidate';
|
||||
import tippy from 'tippy.js';
|
||||
import tippy, {sticky} from 'tippy.js';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
export let title: string;
|
||||
export let status: Status;
|
||||
|
|
@ -58,6 +59,10 @@
|
|||
console.log(e);
|
||||
}
|
||||
};
|
||||
|
||||
const editDetails = async () => {
|
||||
goto('/register?edit=true')
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="card flex flex-col">
|
||||
|
|
@ -86,52 +91,65 @@
|
|||
</div>
|
||||
</div>
|
||||
{#if showDetails}
|
||||
<div class="overflow-scroll">
|
||||
<div
|
||||
<div class="overflow-scroll flex justify-between">
|
||||
<div>
|
||||
<div
|
||||
use:tippy={{
|
||||
content: '<span>Vámi vyplněné osobní údaje</span>',
|
||||
allowHTML: true,
|
||||
placement: 'top',
|
||||
showOnCreate: false,
|
||||
delay: 0
|
||||
}}
|
||||
class="mt-4 flex flex-col justify-between leading-10"
|
||||
>
|
||||
<span>Adresa: <span class="font-bold">{$candidateData.candidate.address}</span></span>
|
||||
<span
|
||||
>Datum narození: <span class="font-bold">{$candidateData.candidate.birthdate}</span
|
||||
></span
|
||||
>
|
||||
<span
|
||||
>Místo narození: <span class="font-bold">{$candidateData.candidate.birthplace}</span
|
||||
></span
|
||||
>
|
||||
<span
|
||||
>Rodné číslo: <span class="font-bold">{$candidateData.candidate.personalIdNumber}</span
|
||||
></span
|
||||
>
|
||||
<span>Telefon: <span class="font-bold">{$candidateData.candidate.telephone}</span></span>
|
||||
</div>
|
||||
<div
|
||||
use:tippy={{
|
||||
content: '<span>Vámi vyplněné osobní údaje</span>',
|
||||
allowHTML: true,
|
||||
placement: 'top',
|
||||
showOnCreate: false,
|
||||
delay: 0
|
||||
}}
|
||||
class="mt-4 flex flex-col leading-10"
|
||||
>
|
||||
{#each $candidateData.parents as parent}
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sspsBlue text-xl font-bold"
|
||||
>{parent.name + ' ' + parent.surname}</span
|
||||
>
|
||||
<span>Email: <span class="font-bold">{parent.email}</span></span>
|
||||
<span>Telefon: <span class="font-bold">{parent.telephone}</span></span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
use:tippy={{
|
||||
content: '<span>Vámi vyplněné osobní údaje</span>',
|
||||
allowHTML: true,
|
||||
content: 'Upravit osobní údaje',
|
||||
placement: 'top',
|
||||
showOnCreate: false,
|
||||
delay: 0
|
||||
sticky: true,
|
||||
plugins: [sticky]
|
||||
}}
|
||||
class="mt-4 flex flex-col justify-between leading-10"
|
||||
>
|
||||
<span>Adresa: <span class="font-bold">{$candidateData.candidate.address}</span></span>
|
||||
<span
|
||||
>Datum narození: <span class="font-bold">{$candidateData.candidate.birthdate}</span
|
||||
></span
|
||||
>
|
||||
<span
|
||||
>Místo narození: <span class="font-bold">{$candidateData.candidate.birthplace}</span
|
||||
></span
|
||||
>
|
||||
<span
|
||||
>Rodné číslo: <span class="font-bold">{$candidateData.candidate.personalIdNumber}</span
|
||||
></span
|
||||
>
|
||||
<span>Telefon: <span class="font-bold">{$candidateData.candidate.telephone}</span></span>
|
||||
</div>
|
||||
<div
|
||||
use:tippy={{
|
||||
content: '<span>Vámi vyplněné osobní údaje</span>',
|
||||
allowHTML: true,
|
||||
placement: 'top',
|
||||
showOnCreate: false,
|
||||
delay: 0
|
||||
}}
|
||||
class="mt-4 flex flex-col leading-10"
|
||||
>
|
||||
{#each $candidateData.parents as parent}
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sspsBlue text-xl font-bold"
|
||||
>{parent.name + ' ' + parent.surname}</span
|
||||
>
|
||||
<span>Email: <span class="font-bold">{parent.email}</span></span>
|
||||
<span>Telefon: <span class="font-bold">{parent.telephone}</span></span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
on:click={(_) => editDetails()} on:keydown={(_) => editDetails()} class="mt-4 hover:cursor-pointer">
|
||||
<svg class="w-10 h-10 stroke-sspsBlue" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -164,7 +164,7 @@
|
|||
class="drag group"
|
||||
on:mouseenter={dashAnimationStart}
|
||||
on:mouseleave={dashAnimationStop}
|
||||
style={`background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' rx='9' ry='9' stroke-opacity='50%' stroke='%23406280' stroke-width='4' stroke-dasharray='10' stroke-dashoffset='${dashAnimationProgress}' stroke-linecap='square'/%3e%3c/svg%3e");`}
|
||||
style={`background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' rx='9' ry='9' stroke-opacity='50%' stroke='%23406280' stroke-width='4' stroke-dasharray='10' stroke-dashoffset='${dashAnimationProgress}' stroke-linecap='square'/%3e%3c/svg%3e");`}
|
||||
>
|
||||
{#if error}
|
||||
<span class="font-semibold text-red-600">{error}</span>
|
||||
|
|
|
|||
|
|
@ -28,11 +28,11 @@
|
|||
<style lang="postcss">
|
||||
.bgImage {
|
||||
@apply -z-20;
|
||||
@apply min-w-screen absolute min-h-screen md:min-w-[50vw];
|
||||
@apply min-w-screen absolute min-h-full md:min-w-[50vw];
|
||||
@apply bg-cover bg-no-repeat;
|
||||
}
|
||||
.bgOverlay {
|
||||
@apply min-w-screen absolute -z-10 min-h-screen md:min-w-[50vw];
|
||||
@apply min-w-screen absolute -z-10 min-h-full md:min-w-[50vw];
|
||||
background: linear-gradient(45deg, rgba(18, 48, 75, 1), rgba(119, 173, 224, 0.443));
|
||||
@apply bg-cover;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,23 +2,23 @@ import { writable } from 'svelte/store';
|
|||
|
||||
export interface CandidateData {
|
||||
candidate: {
|
||||
name?: string;
|
||||
surname?: string;
|
||||
birthplace?: string;
|
||||
birthdate?: string;
|
||||
address?: string;
|
||||
telephone?: string;
|
||||
citizenship?: string;
|
||||
email?: string;
|
||||
sex?: string;
|
||||
study?: string;
|
||||
personalIdNumber?: string;
|
||||
name: string;
|
||||
surname: string;
|
||||
birthplace: string;
|
||||
birthdate: string;
|
||||
address: string;
|
||||
telephone: string;
|
||||
citizenship: string;
|
||||
email: string;
|
||||
sex: string;
|
||||
study: string;
|
||||
personalIdNumber: string;
|
||||
};
|
||||
parents: Array<{
|
||||
name?: string;
|
||||
surname?: string;
|
||||
telephone?: string;
|
||||
email?: string;
|
||||
name: string;
|
||||
surname: string;
|
||||
telephone: string;
|
||||
email: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
|
|
@ -44,6 +44,18 @@ export interface CreateCandidateLogin extends CreateCandidate {
|
|||
}
|
||||
|
||||
export const candidateData = writable<CandidateData>({
|
||||
candidate: {},
|
||||
candidate: {
|
||||
name: '',
|
||||
surname: '',
|
||||
birthplace: '',
|
||||
birthdate: '',
|
||||
address: '',
|
||||
telephone: '',
|
||||
citizenship: '',
|
||||
email: '',
|
||||
sex: '',
|
||||
study: '',
|
||||
personalIdNumber: ''
|
||||
},
|
||||
parents: []
|
||||
});
|
||||
|
|
|
|||
|
|
@ -7,7 +7,19 @@ export const load: PageServerLoad = async ({ fetch, params }) => {
|
|||
const codeNumber = Number(code);
|
||||
|
||||
let candidateData: CandidateData = {
|
||||
candidate: {},
|
||||
candidate: {
|
||||
name: '',
|
||||
surname: '',
|
||||
birthplace: '',
|
||||
birthdate: '',
|
||||
address: '',
|
||||
telephone: '',
|
||||
citizenship: '',
|
||||
email: '',
|
||||
sex: '',
|
||||
study: '',
|
||||
personalIdNumber: ''
|
||||
},
|
||||
parents: []
|
||||
};
|
||||
try {
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@
|
|||
{/each}
|
||||
</div>
|
||||
<div class="dashboard dashboardMobile">
|
||||
<div class="name my-10 mx-auto w-[90%]">
|
||||
<div class="name md:my-10 mx-auto w-[90%]">
|
||||
<DashboardInfoCard
|
||||
status={getUploadStatus($submissionProgress.status)}
|
||||
title={$candidateData.candidate.name + ' ' + $candidateData.candidate.surname ?? ''}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
import { apiFetchDetails, apiFetchSubmissionProgress } from '$lib/@api/candidate';
|
||||
import type { CandidateData } from '$lib/stores/candidate';
|
||||
import type { PageServerLoad } from './$types';
|
||||
|
||||
export const load: PageServerLoad = async ({ fetch }) => {
|
||||
const details: CandidateData | undefined = await apiFetchDetails(fetch).catch((e) => {
|
||||
console.error(e);
|
||||
return undefined;
|
||||
});
|
||||
|
||||
return {
|
||||
candidate: details,
|
||||
};
|
||||
};
|
||||
|
|
@ -13,15 +13,28 @@
|
|||
import NameField from '$lib/components/textfield/NameField.svelte';
|
||||
import TelephoneField from '$lib/components/textfield/TelephoneField.svelte';
|
||||
import TextField from '$lib/components/textfield/TextField.svelte';
|
||||
import type { CandidateData } from '$lib/stores/candidate';
|
||||
import type { PageData } from './$types';
|
||||
|
||||
import { createForm } from 'svelte-forms-lib';
|
||||
import type { Writable } from 'svelte/store';
|
||||
import * as yup from 'yup';
|
||||
import type { CandidateData } from '$lib/stores/candidate';
|
||||
|
||||
const pageCount = 5;
|
||||
let pageIndex = 0;
|
||||
let pagesFilled = [false, false, false, false, false];
|
||||
let pageTexts = [
|
||||
'Zpracování osobních údajů',
|
||||
'Registrace',
|
||||
'Něco o Vás',
|
||||
'Kontakt na zákonného zástupce',
|
||||
'Kontakt na druhého zákonného zástupce',
|
||||
'Poslední krok'
|
||||
];
|
||||
|
||||
export let data: PageData;
|
||||
let details = data.candidate;
|
||||
|
||||
|
||||
const formInitialValues = {
|
||||
gdpr: false,
|
||||
|
|
@ -58,7 +71,7 @@
|
|||
gdpr: yup.boolean().oneOf([true]),
|
||||
candidate: yup.object().shape({
|
||||
name: yup.string().required(),
|
||||
surname: yup.string(),
|
||||
surname: yup.string().required(),
|
||||
email: yup.string().email().required(),
|
||||
telephone: yup
|
||||
.string()
|
||||
|
|
@ -68,7 +81,7 @@
|
|||
birthdate: yup
|
||||
.string()
|
||||
.required()
|
||||
.matches(/^([0-3]?[0-9])\.([1-9]|1[0-2])\.[0-9]{4}$/),
|
||||
.matches(/^([0-3]?[0-9])\.(0?[1-9]|1[0-2])\.[0-9]{4}$/),
|
||||
sex: yup.string(),
|
||||
address: yup.string().required(),
|
||||
citizenship: yup.string().required(),
|
||||
|
|
@ -93,13 +106,13 @@
|
|||
.string()
|
||||
.email()
|
||||
.test((_val, context) => {
|
||||
if (context.path.includes('parents[1]')) {
|
||||
if (context.path.includes('parents[1]') && _val === '') {
|
||||
return true;
|
||||
}
|
||||
return _val !== '';
|
||||
}),
|
||||
telephone: yup.string().test((_val, context) => {
|
||||
if (context.path.includes('parents[1]')) {
|
||||
if (context.path.includes('parents[1]') && _val === '') {
|
||||
return true;
|
||||
}
|
||||
return _val?.match(/^\+\d{1,3} \d{3} \d{3} \d{3}$/) !== null;
|
||||
|
|
@ -108,45 +121,6 @@
|
|||
)
|
||||
});
|
||||
|
||||
const { form, errors, handleSubmit, handleChange } = createForm({
|
||||
initialValues: formInitialValues,
|
||||
validationSchema: formValidationSchema,
|
||||
|
||||
onSubmit: async (values: CandidateData) => {
|
||||
console.log('page count: ' + pageIndex);
|
||||
console.log(values.candidate);
|
||||
console.log(values.parents);
|
||||
console.log(values);
|
||||
if (pageIndex === pageCount) {
|
||||
// clone values to oldValues
|
||||
let oldValues = JSON.parse(JSON.stringify(values));
|
||||
try {
|
||||
console.log('submit');
|
||||
// @ts-ignore // love javascript
|
||||
delete values.undefined;
|
||||
// convert birthdate from dd.mm.yyyy to yyyy-mm-dd
|
||||
let birthdate_formttted = values.candidate
|
||||
.birthdate!.split('.')
|
||||
.map((x) => x.padStart(2, '0'))
|
||||
.reverse()
|
||||
.join('-');
|
||||
|
||||
values.candidate.birthdate = birthdate_formttted;
|
||||
|
||||
values.parents.filter(
|
||||
(x) => x.name !== '' && x.surname !== '' && x.email !== '' && x.telephone !== ''
|
||||
);
|
||||
|
||||
await apiFillDetails(values);
|
||||
goto('/dashboard');
|
||||
} catch (e) {
|
||||
values = oldValues;
|
||||
console.error('error while submitting data: ' + e);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
type FormErrorType = {
|
||||
[K in keyof typeof formInitialValues]: typeof formInitialValues[K] extends Record<
|
||||
string,
|
||||
|
|
@ -163,8 +137,100 @@
|
|||
// 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 => {
|
||||
switch (pageIndex) {
|
||||
// TODO: validate on admin dashboard, move somewhere
|
||||
// TODO: nefunguje pro lidi nar. pred 1.1.1954 :D
|
||||
const isPersonalIdNumberValid = (personalIdNumber: string): boolean => {
|
||||
const idFmt = personalIdNumber
|
||||
.split('/')
|
||||
.join('');
|
||||
|
||||
const lastDigitCheck = Number(idFmt.slice(0, 9)) % 11 === Number(idFmt.at(-1)) ||
|
||||
Number(idFmt.slice(0, 9)) % 11 === 10; // an edge case that could occur
|
||||
const divisibleBy11 = Number(idFmt) % 11 === 0;
|
||||
|
||||
if (lastDigitCheck && divisibleBy11) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
const isPersonalIdNumberWithBirthdateValid = (personalIdNumber: string, birthdate: string): boolean => {
|
||||
const dateFmt = birthdate
|
||||
.split('.')
|
||||
.map((x) => x.padStart(2, '0'))
|
||||
.reverse()
|
||||
.join('')
|
||||
.slice(2);
|
||||
const idFmt = personalIdNumber
|
||||
.split('/')
|
||||
.join('');
|
||||
|
||||
const divisionValid = isPersonalIdNumberValid(personalIdNumber);
|
||||
|
||||
const idMonth = Number(idFmt.slice(2, 4));
|
||||
const dateMonth = Number(dateFmt.slice(2, 4));
|
||||
const monthValid = idMonth === dateMonth || idMonth === dateMonth + 50 ||
|
||||
idMonth === dateMonth + 20 || idMonth === dateMonth + 70;
|
||||
|
||||
if (
|
||||
idFmt.slice(0, 2) === dateFmt.slice(0, 2) &&
|
||||
monthValid &&
|
||||
idFmt.slice(4, 6) === dateFmt.slice(4, 6) &&
|
||||
divisionValid
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
const onSubmit = async (values: CandidateData) => {
|
||||
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
|
||||
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
|
||||
let birthdate_formttted = values.candidate
|
||||
.birthdate!.split('.')
|
||||
.map((x) => x.padStart(2, '0'))
|
||||
.reverse()
|
||||
.join('-');
|
||||
|
||||
values.candidate.birthdate = birthdate_formttted;
|
||||
|
||||
values.parents = values.parents.filter(
|
||||
(x) => x.name !== '' && x.surname !== '' && x.email !== '' && x.telephone !== ''
|
||||
);
|
||||
|
||||
|
||||
await apiFillDetails(values);
|
||||
goto('/dashboard');
|
||||
} catch (e) {
|
||||
values = oldValues;
|
||||
console.error('error while submitting data: ' + e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const { form, errors, handleSubmit, handleChange } = createForm({
|
||||
initialValues: formInitialValues,
|
||||
validationSchema: formValidationSchema,
|
||||
|
||||
onSubmit: async (values: CandidateData) => onSubmit(values)
|
||||
});
|
||||
|
||||
const isPageInvalid = (index: number): boolean => {
|
||||
switch (index) {
|
||||
case 0:
|
||||
if ($typedErrors['gdpr']) {
|
||||
return true;
|
||||
|
|
@ -182,9 +248,9 @@
|
|||
|
||||
case 2:
|
||||
if (
|
||||
/* $typedErrors.birthdurname || */ $typedErrors['candidate']['birthplace'] ||
|
||||
$typedErrors['candidate']['birthplace'] ||
|
||||
$typedErrors['candidate']['birthdate'] ||
|
||||
$typedErrors['candidate']['address'] /* || $typedErrors.sex */
|
||||
$typedErrors['candidate']['address']
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
|
|
@ -213,8 +279,7 @@
|
|||
if (
|
||||
$typedErrors['candidate']['citizenship'] ||
|
||||
$typedErrors['candidate']['personalIdNumber'] ||
|
||||
$typedErrors['candidate']['study'] //||
|
||||
// $typedErrors.applicationId
|
||||
$typedErrors['candidate']['study']
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
|
|
@ -224,21 +289,62 @@
|
|||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const formatTelephone = (telephone: string) => {
|
||||
return '+' + telephone
|
||||
.match(/[0-9]{1,3}/g)!
|
||||
.join(' ');
|
||||
}
|
||||
|
||||
if (details !== undefined) {
|
||||
details.candidate.birthdate = details.candidate.birthdate
|
||||
.split('-')
|
||||
.reverse()
|
||||
.join('.');
|
||||
|
||||
details.candidate.telephone = formatTelephone(details.candidate.telephone);
|
||||
details.parents.map((x) => x.telephone = x.telephone != '' ? formatTelephone(x.telephone) : '');
|
||||
form.set({
|
||||
gdpr: true,
|
||||
candidate: {
|
||||
...details.candidate
|
||||
},
|
||||
parents: [
|
||||
{
|
||||
...details.parents[0]
|
||||
},
|
||||
{
|
||||
...details.parents[1] ?? {
|
||||
name: '',
|
||||
surname: '',
|
||||
email: '',
|
||||
telephone: ''
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
pageIndex = 1; // skip gdpr page
|
||||
pageTexts[1] = 'Úprava osobních údajů'
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<SplitLayout>
|
||||
<div class="form">
|
||||
<div class="h-24 w-24 md:h-auto md:w-auto">
|
||||
<SchoolBadge />
|
||||
</div>
|
||||
<div class="form relative">
|
||||
<div class="overflow-scroll h-[65%] md:h-auto absolute bottom-3/12 flex flex-col w-full">
|
||||
<div class="h-32 w-32 <md:hidden self-center mb-4">
|
||||
<SchoolBadge />
|
||||
</div>
|
||||
<form on:submit={handleSubmit} id="triggerForm" class="invisible hidden"></form>
|
||||
{#if pageIndex === 0}
|
||||
<form on:submit={handleSubmit}>
|
||||
<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Váš souhlas</h1>
|
||||
<p class="text-sspsGray mt-8 block text-center font-light">
|
||||
<h1 class="title mt-8">{pageTexts[0]}</h1>
|
||||
<p class="description mt-8 block text-center">
|
||||
V rámci portálu pro přijímací řízení zpracováváme mnoho osobních údajů. Proto je nutný Váš
|
||||
souhlas s jejich zpracováním.
|
||||
souhlas s jejich zpracováním. O bezpečnosti zpracování Vašich osobních údajů si můžete přečíst
|
||||
<a href="/bezpecnost" class="text-sspsBlue underline"> zde</a>.
|
||||
</p>
|
||||
<div class="mt-8 w-full">
|
||||
<div class="field">
|
||||
<GdprCheckBox
|
||||
on:change={handleChange}
|
||||
bind:value={$form.gdpr}
|
||||
|
|
@ -248,13 +354,13 @@
|
|||
</form>
|
||||
{:else if pageIndex === 1}
|
||||
<form on:submit={handleSubmit}>
|
||||
<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Registrace</h1>
|
||||
<p class="text-sspsGray mt-8 block text-center font-light">
|
||||
V rámci usnadnění přijímacího řízení jsme připravili online formulář, který vám pomůže s
|
||||
<h1 class="title mt-8">{pageTexts[1]}</h1>
|
||||
<p class="description mt-8 block text-center">
|
||||
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 w-full items-center justify-center md:flex-col">
|
||||
<span class="mt-8 w-full">
|
||||
<div class="flex flex-col">
|
||||
<span class="field">
|
||||
<NameField
|
||||
error={$typedErrors['candidate']['name']}
|
||||
on:change={handleChange}
|
||||
|
|
@ -263,7 +369,7 @@
|
|||
placeholder="Jméno a příjmení"
|
||||
/>
|
||||
</span>
|
||||
<span class="mt-8 ml-2 w-full md:ml-0">
|
||||
<span class="field">
|
||||
<EmailField
|
||||
error={$typedErrors['candidate']['email']}
|
||||
on:change={handleChange}
|
||||
|
|
@ -271,24 +377,24 @@
|
|||
placeholder="E-mail"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-8 w-full">
|
||||
<TelephoneField
|
||||
error={$typedErrors['candidate']['telephone']}
|
||||
on:change={handleChange}
|
||||
bind:value={$form.candidate.telephone}
|
||||
placeholder="Telefon"
|
||||
/>
|
||||
<span class="field">
|
||||
<TelephoneField
|
||||
error={$typedErrors['candidate']['telephone']}
|
||||
on:change={handleChange}
|
||||
bind:value={$form.candidate.telephone}
|
||||
placeholder="Telefon"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
{:else if pageIndex === 2}
|
||||
<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Něco o tobě</h1>
|
||||
<p class="text-sspsGray mt-8 block text-center font-light">
|
||||
Pro registraci je potřeba vyplnit několik údajů o tobě. Tyto údaje budou použity pro
|
||||
<h1 class="title mt-8">{pageTexts[2]}</h1>
|
||||
<p class="description mt-8 block text-center">
|
||||
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é a bez nich se registrace nezdaří.
|
||||
</p>
|
||||
<div class="flex w-full flex-row md:flex-col">
|
||||
<span class="mt-8 w-full">
|
||||
<div class="flex w-full flex-col">
|
||||
<span class="field">
|
||||
<TextField
|
||||
error={$typedErrors['candidate']['address']}
|
||||
on:change={handleChange}
|
||||
|
|
@ -298,7 +404,7 @@
|
|||
helperText="Uveďte ulici, č.p., město, PSČ"
|
||||
/>
|
||||
</span>
|
||||
<span class="mt-8 ml-2 w-full md:ml-0">
|
||||
<span class="field">
|
||||
<TextField
|
||||
error={$typedErrors['candidate']['birthplace']}
|
||||
on:change={handleChange}
|
||||
|
|
@ -315,7 +421,7 @@
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 flex w-full items-center">
|
||||
<div class="field flex items-center">
|
||||
<TextField
|
||||
error={$typedErrors['candidate']['birthdate']}
|
||||
on:change={handleChange}
|
||||
|
|
@ -335,80 +441,76 @@
|
|||
</div>
|
||||
</div>
|
||||
{:else if pageIndex === 3}
|
||||
<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Už jen kousek!</h1>
|
||||
<p class="text-sspsGray mt-8 block text-center font-light">
|
||||
<h1 class="title mt-8">{pageTexts[3]}</h1>
|
||||
<p class="description mt-8 block text-center">
|
||||
Sběr dat o zákonném zástupci je klíčový pro získání důležitých kontaktů a informací.
|
||||
</p>
|
||||
<div class="flex w-full flex-col">
|
||||
<span class="mt-8 w-full">
|
||||
<NameField
|
||||
<div class="flex w-full flex-col">
|
||||
<span class="field">
|
||||
<NameField
|
||||
error={$typedErrors['parents'][0]['name'] || $typedErrors['parents'][0]['surname']}
|
||||
on:change={handleChange}
|
||||
bind:valueName={$form.parents[0].name}
|
||||
bind:valueSurname={$form.parents[0].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'][0]['email']}
|
||||
on:change={handleChange}
|
||||
bind:value={$form.parents[0].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'][0]['telephone']}
|
||||
on:change={handleChange}
|
||||
bind:value={$form.parents[0].telephone}
|
||||
placeholder="Telefon zákonného zástupce"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
/>
|
||||
</span>
|
||||
<span class="field">
|
||||
<EmailField
|
||||
error={$typedErrors['parents'][0]['email']}
|
||||
on:change={handleChange}
|
||||
bind:value={$form.parents[0].email}
|
||||
placeholder="E-mail zákonného zástupce"
|
||||
/>
|
||||
</span>
|
||||
<span class="field">
|
||||
<TelephoneField
|
||||
error={$typedErrors['parents'][0]['telephone']}
|
||||
on:change={handleChange}
|
||||
bind:value={$form.parents[0].telephone}
|
||||
placeholder="Telefon zákonného zástupce"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
{:else if pageIndex === 4}
|
||||
<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Dobrovolné!</h1>
|
||||
<p class="text-sspsGray mt-8 block text-center font-light">
|
||||
V případě, že máte druhého zákonného zástupce (např. otec a matka), můžete jej zde zadat.
|
||||
<h1 class="title mt-8">{pageTexts[4]}</h1>
|
||||
<p class="description mt-8 block text-center">
|
||||
Zde můžete zadat údaje o druhém zákonném zástupci. Škole tím umožníte lépe komunikovat.
|
||||
</p>
|
||||
<div class="flex w-full flex-col">
|
||||
<span class="mt-8 w-full">
|
||||
<span class="field">
|
||||
<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"
|
||||
placeholder="Jméno a příjmení zákonného zástupce (nepovinné)"
|
||||
/>
|
||||
</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 class="field">
|
||||
<EmailField
|
||||
error={$typedErrors['parents'][1]['email']}
|
||||
on:change={handleChange}
|
||||
bind:value={$form.parents[1].email}
|
||||
placeholder="E-mail zákonného zástupce (nepovinné)"
|
||||
/>
|
||||
</span>
|
||||
<span class="field">
|
||||
<TelephoneField
|
||||
error={$typedErrors['parents'][1]['telephone']}
|
||||
on:change={handleChange}
|
||||
bind:value={$form.parents[1].telephone}
|
||||
placeholder="Telefon zákonného zástupce (nepovinné)"
|
||||
/>
|
||||
</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>
|
||||
{:else if pageIndex === 5}
|
||||
<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Poslední krok</h1>
|
||||
<p class="text-sspsGray mt-8 block text-center font-light">
|
||||
<h1 class="title mt-8">{pageTexts[5]}</h1>
|
||||
<p class="description mt-8 block text-center">
|
||||
Zadejte prosím své občanství, rodné číslo a obor na který se hlásíte.
|
||||
</p>
|
||||
<div class="flex w-full flex-row md:flex-col">
|
||||
<span class="mt-8 w-full">
|
||||
<span class="field">
|
||||
<SelectField
|
||||
error={$typedErrors['candidate']['citizenship']}
|
||||
on:change={handleChange}
|
||||
|
|
@ -417,11 +519,11 @@
|
|||
options={['Česká republika', 'Slovenská republika', 'Ukrajina', 'Jiné']}
|
||||
/>
|
||||
</span>
|
||||
<span class="mt-8 ml-2 w-full md:ml-0">
|
||||
<span class="field ml-2 md:ml-0">
|
||||
<TextField on:change={handleChange} type="text" placeholder="Evidenční číslo přihlášky" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-8 flex w-full items-center justify-center">
|
||||
<div class="field flex items-center justify-center">
|
||||
{#if $form.candidate.citizenship === 'Česká republika' || !$form.candidate.citizenship}
|
||||
<IdField
|
||||
error={$typedErrors['candidate']['personalIdNumber']}
|
||||
|
|
@ -448,53 +550,51 @@
|
|||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="mt-8 w-full">
|
||||
<Submit
|
||||
on:click={async (e) => {
|
||||
await handleSubmit(e);
|
||||
console.log('clicked ' + isPageInvalid());
|
||||
if (isPageInvalid()) return;
|
||||
if (pageIndex === pageCount) {
|
||||
} else {
|
||||
pagesFilled[pageIndex] = true;
|
||||
pageIndex++;
|
||||
}
|
||||
// @ts-ignore
|
||||
errors.set(formInitialValues);
|
||||
}}
|
||||
value={pageIndex === pageCount ? 'Odeslat' : 'Pokračovat'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 flex flex-row justify-center">
|
||||
{#each Array(pageCount + 1) as _, i}
|
||||
<button
|
||||
class:dotActive={i === pageIndex}
|
||||
<div class="controls w-full absolute bottom-1/12">
|
||||
<div class="field">
|
||||
<Submit
|
||||
on:click={async (e) => {
|
||||
const progress = pagesFilled.slice(0, i).every((item) => item === true);
|
||||
if (progress) {
|
||||
if (i > pageIndex) {
|
||||
// if next page is clicked, validate current page
|
||||
await handleSubmit(e);
|
||||
if (isPageInvalid()) return;
|
||||
pagesFilled[i] = true;
|
||||
pageIndex++;
|
||||
} else {
|
||||
await handleSubmit(e);
|
||||
if (isPageInvalid(pageIndex)) return;
|
||||
if (pageIndex === pageCount) {
|
||||
} else {
|
||||
pagesFilled[pageIndex] = true;
|
||||
pageIndex++;
|
||||
}
|
||||
// @ts-ignore
|
||||
errors.set(formInitialValues);
|
||||
}}
|
||||
value={pageIndex === pageCount ? 'Odeslat' : 'Pokračovat'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 md:mt-8 flex flex-row justify-center">
|
||||
{#each Array(pageCount + 1) as _, i}
|
||||
<button
|
||||
class:dotActive={i === pageIndex}
|
||||
on:click={async (e) => {
|
||||
pageIndex -= pageIndex === pageCount ? 1 : 0;
|
||||
await handleSubmit(e);
|
||||
pagesFilled = pagesFilled.map((_, i) => !isPageInvalid(i));
|
||||
|
||||
const progress = pagesFilled.slice(0, i).every((item) => item === true);
|
||||
if (progress) {
|
||||
pageIndex = i;
|
||||
}
|
||||
// @ts-ignore
|
||||
errors.set(formInitialValues);
|
||||
}
|
||||
}}
|
||||
class="dot"
|
||||
/>
|
||||
{/each}
|
||||
}}
|
||||
class="dot"
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SplitLayout>
|
||||
|
||||
<style lang="postcss">
|
||||
.field {
|
||||
@apply mt-4 md:mt-8 w-full;
|
||||
}
|
||||
.form {
|
||||
@apply flex flex-col;
|
||||
@apply mx-auto h-full w-[90%];
|
||||
|
|
@ -513,4 +613,10 @@
|
|||
.dotActive {
|
||||
@apply bg-sspsBlue;
|
||||
}
|
||||
.description {
|
||||
@apply text-gray-500;
|
||||
}
|
||||
.title {
|
||||
@apply text-sspsBlue text-4xl font-semibold text-center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -130,7 +130,7 @@
|
|||
input {
|
||||
@apply text-sspsBlue text-center font-semibold;
|
||||
@apply transition-colors duration-300;
|
||||
@apply focus:border-sspsBlue hover:border-sspsBlue rounded-xl border border-2 bg-[#f8fafb] p-3 caret-transparent shadow-lg outline-none;
|
||||
@apply focus:border-sspsBlue hover:border-sspsBlue rounded-xl border border-2 bg-[#f8fafb] p-3 md:caret-transparent shadow-lg outline-none;
|
||||
}
|
||||
.separater {
|
||||
@apply bg-sspsBlue mr-2 hidden h-2 w-8 md:block;
|
||||
|
|
|
|||
Loading…
Reference in a new issue