Merge pull request #82 from EETagent/form_nested

(frontend) nested form

frontend/src/lib/@api/candidate.ts

@@ -79,11 +79,22 @@ export const apiLogin = async (data: CandidateLogin): Promise<number> => {
 };
 
 export const apiFillDetails = async (data: CandidateData): Promise<CandidateData> => {
-	Object.keys(data).forEach((key) => {
+	// Sanitize candidate data
+	Object.keys(data.candidate).forEach((key) => {
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-ignore
-		data[key] = DOMPurify.sanitize(data[key]);
+		data.candidate[key] = DOMPurify.sanitize(data.candidate[key]);
 	});
+	// Sanitize parents data
+	for (let index = 0; index < data.parents.length; index++) {
+		Object.keys(data.parents[index]).forEach((key) => {
+			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+			// @ts-ignore
+			data.parents[index][key] = DOMPurify.sanitize(data.parents[index][key]);
+		});
+	}
+
+	console.log(data);
 	try {
 		const res = await axios.post(API_URL + '/candidate/details', data, { withCredentials: true });
 		return res.data;

frontend/src/lib/stores/candidate.ts

@@ -1,21 +1,25 @@
 import { writable } from 'svelte/store';
 
 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 {

frontend/src/routes/(candidate)/(authenticated)/dashboard/+page.svelte

@@ -34,8 +34,8 @@
 <FullLayout>
 	<div class="dashboard dashboardDesktop">
 		<div class="name col-span-3 <2xl:col-span-4">
-			<DashboardInfoCard status={getUploadStatus($submissionProgress.status)} title={$candidateData.name + ' ' + $candidateData.surname ?? ''}>
+			<DashboardInfoCard status={getUploadStatus($submissionProgress.status)} title={$candidateData.candidate.name + ' ' + $candidateData.candidate.surname ?? ''}>
-				<span class="text-sspsBlue mt-3 truncate">{$candidateData.email}</span>
+				<span class="text-sspsBlue mt-3 truncate">{$candidateData.candidate.email}</span>
 				<span class="text-sspsGray mt-3 text-xs">Uchazeč na SSPŠ</span>
 			</DashboardInfoCard>
 		</div>
@@ -51,8 +51,8 @@
 	</div>
 	<div class="dashboard dashboardMobile">
 		<div class="name my-10 mx-auto w-[90%]">
-			<DashboardInfoCard status={getUploadStatus($submissionProgress.status)} title={$candidateData.name + ' ' + $candidateData.surname ?? ''}>
+			<DashboardInfoCard status={getUploadStatus($submissionProgress.status)} title={$candidateData.candidate.name + ' ' + $candidateData.candidate.surname ?? ''}>
-				<span class="text-sspsBlue mt-3 truncate">{$candidateData.email}</span>
+				<span class="text-sspsBlue mt-3 truncate">{$candidateData.candidate.email}</span>
 				<span class="text-sspsGray mt-3 text-xs">Uchazeč na SSPŠ</span>
 			</DashboardInfoCard>
 		</div>

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

@@ -12,8 +12,10 @@
 	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 { createForm } from 'svelte-forms-lib';
+	import type { Writable } from 'svelte/store';
 	import * as yup from 'yup';
 
 	const pageCount = 3;
@@ -21,26 +23,31 @@
 	let pagesFilled = 0;
 
 	const formInitialValues = {
-		name: '',
+		candidate: {
-		surname: '',
+			name: '',
-		email: '',
+			surname: '',
-		telephone: '',
+			email: '',
-		birthplace: '',
+			telephone: '',
-		birthdate: '',
+			birthplace: '',
-		sex: '',
+			birthdate: '',
-		address: '',
+			sex: '',
-		citizenship: '',
+			address: '',
-		personalIdNumber: '',
+			citizenship: '',
-		study: '',
+			personalIdNumber: '',
-		parentName: '',
+			study: '',
-		parentSurname: '',
+		},
-		parentTelephone: '',
+		parents: [
-		parentEmail: ''
+			{
+				name: '',
+				surname: '',
+				email: '',
+				telephone: ''
+			}
+		]
 	};
 
-	const { form, errors, handleSubmit, handleChange } = createForm({
+	const formValidationSchema = yup.object().shape({
-		initialValues: formInitialValues,
+		candidate: yup.object().shape({
-		validationSchema: yup.object().shape({
 			name: yup.string().required(),
 			surname: yup.string(),
 			email: yup.string().email().required(),
@@ -49,28 +56,55 @@
 				.required()
 				.matches(/^\+\d{1,3} \d{3} \d{3} \d{3}$/),
 			birthplace: yup.string().required(),
-			birthdate: yup.string().required(),
+			birthdate: yup
+				.string()
+				.required()
+				.matches(/^([0-3]?[0-9])\.([1-9]|1[0-2])\.[0-9]{4}$/),
 			sex: yup.string(),
 			address: yup.string().required(),
 			citizenship: yup.string().required(),
 			personalIdNumber: yup.string().required(),
-			study: yup.string().required(),
+			study: yup.string().required()
-			parentName: yup.string(),
-			parentSurname: yup.string(),
-			parentTelephone: yup
-				.string()
-				.required()
-				.matches(/^\+\d{1,3} \d{3} \d{3} \d{3}$/),
-			parentEmail: yup.string().email().required()
 		}),
+		parents: yup
+			.array()
+			.of(
+				yup.object().shape({
+					name: yup.string().required(),
+					surname: yup.string().required(),
+					email: yup.string().email().required(),
+					telephone: yup
+						.string()
+						.required()
+						.matches(/^\+\d{1,3} \d{3} \d{3} \d{3}$/)
+				})
+			)
+			.required()
+	});
 
-		onSubmit: async (values) => {
+	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) {
 				try {
 					console.log('submit');
 					// @ts-ignore // love javascript
 					delete values.undefined;
-					values.birthdate = '2000-01-01'; // TODO: reformat user typed date
+					// 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;
+
 					await apiFillDetails(values);
 					goto('/dashboard');
 				} catch (e) {
@@ -80,35 +114,57 @@
 		}
 	});
 
-	$: console.log($errors);
+	type FormErrorType = {
+		[K in keyof typeof formInitialValues]: typeof formInitialValues[K] extends Record<
+			string,
+			unknown
+		>
+			? {
+					[K2 in keyof typeof formInitialValues[K]]: string;
+			  }
+			: typeof formInitialValues[K] extends Array<Record<string, unknown>>
+			? Array<{ [K3 in keyof typeof formInitialValues[K][number]]: string }>
+			: string;
+	};
+
+	// 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) {
 			case 0:
-				if ($errors.name || $errors.email || $errors.telephone) {
+				if (
+					$typedErrors['candidate']['name'] ||
+					$typedErrors['candidate']['email'] ||
+					$typedErrors['candidate']['telephone']
+				) {
 					return true;
 				}
 				break;
 
 			case 1:
 				if (
-					/* $errors.birthdurname || */ $errors.birthplace ||
+					/* $typedErrors.birthdurname || */ $typedErrors['candidate']['birthplace'] ||
-					$errors.birthdate /* || $errors.sex */
+					$typedErrors['candidate']['birthdate'] /* || $typedErrors.sex */
 				) {
 					return true;
 				}
 				break;
 			case 2:
-				if ($errors.address || $errors.parentEmail || $errors.parentTelephone) {
+				if (
+					$typedErrors['candidate']['address'] ||
+					$typedErrors['parents'][0]['email'] ||
+					$typedErrors['parents'][0]['telephone']
+				) {
 					return true;
 				}
 				break;
 			case 3:
 				if (
-					$errors.citizenship ||
+					$typedErrors['candidate']['citizenship'] ||
-					$errors.personalIdNumber ||
+					$typedErrors['candidate']['personalIdNumber'] ||
-					$errors.study //||
+					$typedErrors['candidate']['study'] //||
-					// $errors.applicationId
+					// $typedErrors.applicationId
 				) {
 					return true;
 				}
@@ -135,27 +191,27 @@
 				<div class="flex w-full items-center justify-center md:flex-col">
 					<span class="mt-8 w-full">
 						<NameField
-							error={$errors.name}
+							error={$typedErrors['candidate']['name']}
 							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í"
 						/>
 					</span>
 					<span class="mt-8 ml-2 w-full md:ml-0">
 						<EmailField
-							error={$errors.email}
+							error={$typedErrors['candidate']['email']}
 							on:change={handleChange}
-							bind:value={$form.email}
+							bind:value={$form.candidate.email}
 							placeholder="E-mail"
 						/>
 					</span>
 				</div>
 				<div class="mt-8 w-full">
 					<TelephoneField
-						error={$errors.telephone}
+						error={$typedErrors['candidate']['telephone']}
 						on:change={handleChange}
-						bind:value={$form.telephone}
+						bind:value={$form.candidate.telephone}
 						placeholder="Telefon"
 					/>
 				</div>
@@ -169,23 +225,23 @@
 			<div class="flex w-full flex-row md:flex-col">
 				<span class="mt-8 w-full">
 					<NameField
-						error={$errors.name}
+						error={$typedErrors['parents'][0]['name'] || $typedErrors['parents'][0]['surname']}
 						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"
 					/>
 				</span>
 				<span class="mt-8 ml-2 w-full md:ml-0">
 					<TextField
-						error={$errors.birthplace}
+						error={$typedErrors['candidate']['birthplace']}
 						on:change={handleChange}
-						bind:value={$form.birthplace}
+						bind:value={$form.candidate.birthplace}
 						type="text"
 						placeholder="Místo narození"
 						icon
 					>
-						<div slot="icon" class="flex items-center justify-center text-sspsBlue">
+						<div slot="icon" class="text-sspsBlue flex items-center justify-center">
 							<Home />
 						</div>
 					</TextField>
@@ -194,17 +250,17 @@
 
 			<div class="mt-8 flex w-full items-center">
 				<TextField
-					error={$errors.birthdate}
+					error={$typedErrors['candidate']['birthdate']}
 					on:change={handleChange}
-					bind:value={$form.birthdate}
+					bind:value={$form.candidate.birthdate}
 					type="text"
 					placeholder="Datum narození"
 				/>
 				<div class="ml-2">
 					<SelectField
-						error={$errors.sex}
+						error={$typedErrors['candidate']['sex']}
 						on:change={handleChange}
-						bind:value={$form.sex}
+						bind:value={$form.candidate.sex}
 						options={['Žena', 'Muž']}
 						placeholder="Pohlaví"
 					/>
@@ -219,9 +275,9 @@
 			<div class="flex w-full flex-col">
 				<span class="mt-8 w-full">
 					<TextField
-						error={$errors.address}
+						error={$typedErrors['candidate']['address']}
 						on:change={handleChange}
-						bind:value={$form.address}
+						bind:value={$form.candidate.address}
 						type="text"
 						placeholder="Adresa trvalého bydliště"
 					/>
@@ -229,17 +285,17 @@
 				<div class="mt-8 flex flex-row items-center md:flex-col">
 					<span class="w-full">
 						<EmailField
-							error={$errors.parentEmail}
+							error={$typedErrors['parents'][0]['email']}
 							on:change={handleChange}
-							bind:value={$form.parentEmail}
+							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={$errors.parentTelephone}
+							error={$typedErrors['parents'][0]['telephone']}
 							on:change={handleChange}
-							bind:value={$form.parentTelephone}
+							bind:value={$form.parents[0].telephone}
 							placeholder="Telefon zákonného zástupce"
 						/>
 					</span>
@@ -254,9 +310,9 @@
 			<div class="flex w-full flex-row md:flex-col">
 				<span class="mt-8 w-full">
 					<TextField
-						error={$errors.citizenship}
+						error={$typedErrors['candidate']['citizenship']}
 						on:change={handleChange}
-						bind:value={$form.citizenship}
+						bind:value={$form.candidate.citizenship}
 						type="text"
 						placeholder="Občanství"
 					/>
@@ -267,16 +323,16 @@
 			</div>
 			<div class="mt-8 flex w-full items-center justify-center">
 				<IdField
-					error={$errors.personalIdNumber}
+					error={$typedErrors['candidate']['personalIdNumber']}
 					on:change={handleChange}
-					bind:value={$form.personalIdNumber}
+					bind:value={$form.candidate.personalIdNumber}
 					placeholder="Rodné číslo"
 				/>
 				<span class="ml-2">
 					<SelectField
-						error={$errors.study}
+						error={$typedErrors['candidate']['study']}
 						on:change={handleChange}
-						bind:value={$form.study}
+						bind:value={$form.candidate.study}
 						placeholder="Obor"
 						options={['KB', 'IT', 'G']}
 					/>
@@ -295,6 +351,7 @@
 						pagesFilled++;
 						pageIndex++;
 					}
+					// @ts-ignore
 					errors.set(formInitialValues);
 				}}
 				value={pageIndex === pageCount ? 'Odeslat' : 'Pokračovat'}
@@ -315,6 +372,7 @@
 							if (isPageInvalid()) return;
 							pagesFilled++;
 							pageIndex++;
+							// @ts-ignore
 							errors.set(formInitialValues);
 						}
 					}}