diff --git a/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte b/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte index e11653c..db45d0f 100644 --- a/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte +++ b/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte @@ -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') + }
@@ -86,52 +91,65 @@
{#if showDetails} -
-
+
+
Vámi vyplněné osobní údaje', + allowHTML: true, + placement: 'top', + showOnCreate: false, + delay: 0 + }} + class="mt-4 flex flex-col justify-between leading-10" + > + Adresa: {$candidateData.candidate.address} + Datum narození: {$candidateData.candidate.birthdate} + Místo narození: {$candidateData.candidate.birthplace} + Rodné číslo: {$candidateData.candidate.personalIdNumber} + Telefon: {$candidateData.candidate.telephone} +
+
Vámi vyplněné osobní údaje', + allowHTML: true, + placement: 'top', + showOnCreate: false, + delay: 0 + }} + class="mt-4 flex flex-col leading-10" + > + {#each $candidateData.parents as parent} +
+ {parent.name + ' ' + parent.surname} + Email: {parent.email} + Telefon: {parent.telephone} +
+ {/each} +
+
+ Vámi vyplněné osobní údaje', - 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" - > - Adresa: {$candidateData.candidate.address} - Datum narození: {$candidateData.candidate.birthdate} - Místo narození: {$candidateData.candidate.birthplace} - Rodné číslo: {$candidateData.candidate.personalIdNumber} - Telefon: {$candidateData.candidate.telephone} -
-
Vámi vyplněné osobní údaje', - allowHTML: true, - placement: 'top', - showOnCreate: false, - delay: 0 - }} - class="mt-4 flex flex-col leading-10" - > - {#each $candidateData.parents as parent} -
- {parent.name + ' ' + parent.surname} - Email: {parent.email} - Telefon: {parent.telephone} -
- {/each} -
+ on:click={(_) => editDetails()} on:keydown={(_) => editDetails()} class="mt-4 hover:cursor-pointer"> + +
{/if} diff --git a/frontend/src/lib/stores/candidate.ts b/frontend/src/lib/stores/candidate.ts index 498098e..810afd0 100644 --- a/frontend/src/lib/stores/candidate.ts +++ b/frontend/src/lib/stores/candidate.ts @@ -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({ - candidate: {}, + candidate: { + name: '', + surname: '', + birthplace: '', + birthdate: '', + address: '', + telephone: '', + citizenship: '', + email: '', + sex: '', + study: '', + personalIdNumber: '' + }, parents: [] }); diff --git a/frontend/src/routes/(candidate)/(authenticated)/register/+page.server.ts b/frontend/src/routes/(candidate)/(authenticated)/register/+page.server.ts new file mode 100644 index 0000000..6e591f8 --- /dev/null +++ b/frontend/src/routes/(candidate)/(authenticated)/register/+page.server.ts @@ -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, + }; +}; diff --git a/frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte b/frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte index d1c9570..2a63d30 100644 --- a/frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte +++ b/frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte @@ -13,16 +13,23 @@ 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'; + import { onMount } from 'svelte'; const pageCount = 5; let pageIndex = 0; let pagesFilled = [false, false, false, false, false]; + export let data: PageData; + let details = data.candidate; + + let editMode = false; + const formInitialValues = { gdpr: false, candidate: { @@ -108,43 +115,45 @@ ) }); + const 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); + } + } + } + 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); - } - } - } + onSubmit: async (values: CandidateData) => onSubmit(values) }); type FormErrorType = { @@ -163,8 +172,8 @@ // TODO: https://github.com/tjinauyeung/svelte-forms-lib/issues/171!! (Zatím tenhle mega typ) $: typedErrors = errors as unknown as Writable; - const isPageInvalid = (): boolean => { - switch (pageIndex) { + const isPageInvalid = (index: number): boolean => { + switch (index) { case 0: if ($typedErrors['gdpr']) { return true; @@ -224,6 +233,52 @@ } return false; }; + + const formatTelephone = (telephone: string) => { + return '+' + telephone + .match(/[0-9]{1,3}/g)! + .join(' '); + } + + $: console.log($form.candidate.birthdate); + + if (details !== undefined) { + details.candidate.birthdate = details.candidate.birthdate + .split('-') + .map((x) => x.startsWith('0') ? x.slice(1) : x) + .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 + } + + // onMount(() => { + // let evt: Event = document.createEvent('MouseEvent'); + // handleSubmit(evt); + + // }); + @@ -231,8 +286,9 @@
+
{handleSubmit(e); console.log("event" + e)}} id="triggerForm" class="invisible hidden">
{#if pageIndex === 0} -
+ {handleSubmit(e); console.log("event" + e)}}>

Váš souhlas

V rámci portálu pro přijímací řízení zpracováváme mnoho osobních údajů. Proto je nutný Váš @@ -247,7 +303,7 @@

{:else if pageIndex === 1} -
+ {handleSubmit(e); console.log("event" + e)}}>

Registrace

V rámci usnadnění přijímacího řízení jsme připravili online formulář, který vám pomůže s @@ -452,9 +508,9 @@

{ + console.log('event: ' + e); await handleSubmit(e); - console.log('clicked ' + isPageInvalid()); - if (isPageInvalid()) return; + if (isPageInvalid(pageIndex)) return; if (pageIndex === pageCount) { } else { pagesFilled[pageIndex] = true; @@ -472,19 +528,24 @@