From bd0c3768bbffbb485364bb5bb84d32d9d76702f9 Mon Sep 17 00:00:00 2001
From: Sebastian Pravda <sebastian.pravda@gmail.com>
Date: Sun, 22 Jan 2023 19:17:31 +0100
Subject: [PATCH] feat: school selection PoC

---
 .../registerViews/RegisterView.svelte         |  4 ++
 .../lib/components/select/SchoolSelect.svelte | 20 +++++++--
 frontend/src/lib/stores/candidate.ts          | 13 ++++--
 .../(authenticated)/register/+page.svelte     | 42 +++++++++++++++----
 4 files changed, 65 insertions(+), 14 deletions(-)
 create mode 100644 frontend/src/lib/components/registerViews/RegisterView.svelte

diff --git a/frontend/src/lib/components/registerViews/RegisterView.svelte b/frontend/src/lib/components/registerViews/RegisterView.svelte
new file mode 100644
index 0000000..0a407fe
--- /dev/null
+++ b/frontend/src/lib/components/registerViews/RegisterView.svelte
@@ -0,0 +1,4 @@
+<script lang="ts">
+    export let title;
+    export let description;
+</script>
\ No newline at end of file
diff --git a/frontend/src/lib/components/select/SchoolSelect.svelte b/frontend/src/lib/components/select/SchoolSelect.svelte
index 09040ec..a7edbc2 100644
--- a/frontend/src/lib/components/select/SchoolSelect.svelte
+++ b/frontend/src/lib/components/select/SchoolSelect.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { School } from '$lib/stores/candidate';
 import AutoComplete from 'simple-svelte-autocomplete';
 import { onMount } from 'svelte';
 // import schoollistString from '$lib/assets/schoollist.txt';
@@ -11,8 +12,21 @@ onMount(async () => {
     .then((text) => text.split(';'));
 });
 
-export let selectedSchool: string = '';
+export let selectedSchool: School;
+export let schoolName: string = selectedSchool.name;
+$: selectedSchool.name = schoolName;
+
 </script>
 
-Selected color: {selectedSchool}
-<AutoComplete items={schools} bind:selectedItem={selectedSchool} />
\ No newline at end of file
+<div class="flex flex-row">
+    <div>
+        <span>
+            Selected school: {selectedSchool.name}
+        </span>
+        <AutoComplete items={schools} bind:selectedItem={schoolName} />
+    </div>
+    <div class="flex">
+        <span>Obor: </span>
+        <input type="text" bind:value={selectedSchool.field} />
+    </div>
+</div>
\ No newline at end of file
diff --git a/frontend/src/lib/stores/candidate.ts b/frontend/src/lib/stores/candidate.ts
index 7b22dc7..16dca75 100644
--- a/frontend/src/lib/stores/candidate.ts
+++ b/frontend/src/lib/stores/candidate.ts
@@ -1,6 +1,11 @@
 import type { GradeBackend } from '$lib/components/grades/GradesTable.svelte';
 import { writable } from 'svelte/store';
 
+
+export interface School {
+	name: string;
+	field: string;
+}
 export interface CandidateData {
 	candidate: {
 		name: string;
@@ -18,8 +23,8 @@ export interface CandidateData {
 		schoolName: string;
 		healthInsurance: string;
 		grades: Array<GradeBackend>;
-		firstSchool: string;
-		secondSchool: string;
+		firstSchool: School;
+		secondSchool: School;
 		testLanguage: string;
 	};
 	parents: Array<{
@@ -83,8 +88,8 @@ export const candidateData = writable<CandidateData>({
 		schoolName: '',
 		healthInsurance: '',
 		grades: [],
-		firstSchool: '',
-		secondSchool: '',
+		firstSchool: {name: '', field: ''},
+		secondSchool: {name: '', field: ''},
 		testLanguage: ''
 	},
 	parents: []
diff --git a/frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte b/frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte
index 69c961a..0de206f 100644
--- a/frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte
+++ b/frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte
@@ -24,9 +24,10 @@
 	import type { CandidateData } from '$lib/stores/candidate';
 	import AccountLinkCheckBox from '$lib/components/checkbox/AccountLinkCheckBox.svelte';
 	import GradesTable from '$lib/components/grades/GradesTable.svelte';
+	import SchoolSelect from '$lib/components/select/SchoolSelect.svelte';
 
 	let pageIndex = 0;
-	let pagesFilled = [false, false, false, false, false, false];
+	let pagesFilled = [false, false, false, false, false, false, false];
 	const pageCount = pagesFilled.length;
 	let pageTexts = [
 		$LL.candidate.register.second.title(),
@@ -67,8 +68,8 @@
 			schoolName: '',
 			healthInsurance: '',
 			grades: [],
-			firstSchool: '',
-			secondSchool: '',
+			firstSchool: {name: '', field: ''},
+			secondSchool: {name: '', field: ''},
 			testLanguage: '',
 		},
 		parents: [
@@ -129,9 +130,16 @@
 							semester: yup.string().required()
 						})
 						.required()
-				)
-				.required(),
-			testLanguage: yup.string().required()
+				).required(),
+			firstSchool: yup.object().shape({
+				name: yup.string().required(),
+				field: yup.string().required(),
+			}),
+			secondSchool: yup.object().shape({
+				name: yup.string().required(),
+				field: yup.string().required(),
+			}),
+			testLanguage: yup.string().required(),
 		}),
 		parents: yup.array().of(
 			yup.object().shape({
@@ -232,7 +240,7 @@
 			return false;
 		}
 	};
-
+	$: console.log($typedErrors);
 	const onSubmit = async (values: CandidateData) => {
 		if (pageIndex === 3) {
 			if (values.candidate.citizenship === 'Česká republika') {
@@ -256,6 +264,7 @@
 			personalIdBirthdateMatch = true;
 		}
 		if (pageIndex === pageCount) {
+			console.log('submitting');
 			// clone values to oldValues
 			let oldValues = JSON.parse(JSON.stringify(values));
 			try {
@@ -372,6 +381,15 @@
 				}
 				break;
 			case 6:
+				// @ts-ignore
+				if ($typedErrors["candidate"]["firstSchool"].name || $typedErrors["candidate"]["firstSchool"].field ||
+					// @ts-ignore
+					$typedErrors["candidate"]["secondSchool"].name || $typedErrors["candidate"]["secondSchool"].field
+				) {
+					return true;
+				}
+				break;
+			case 7:
 				if ($typedErrors["candidate"]["grades"].length > 0) return true;
 				break;
 			default:
@@ -684,6 +702,16 @@
 					</span>
 				</div>
 			{:else if pageIndex === 6}
+				<h1 class="title mt-8">Přihlášky na školy</h1>
+				<div class="flex flex-col justify-between h-full">
+					<span>
+						<SchoolSelect bind:selectedSchool={$form.candidate.firstSchool}></SchoolSelect>
+					</span>
+					<span class="mt-10 w-full">
+						<SchoolSelect bind:selectedSchool={$form.candidate.secondSchool}></SchoolSelect>
+					</span>
+				</div>
+			{:else if pageIndex === 7}
 				<h1 class="title mt-8">{pageTexts[5]}</h1>
 				<p class="description mt-8 block text-center">
 					{$LL.candidate.register.eighth.description()}