feat: create candidates modal

frontend/src/lib/components/admin/CreateCandidateModal.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { apiCreateCandidate } from '$lib/@api/admin';
+	import type { CreateCandidate, CreateCandidateLogin } from '$lib/stores/candidate';
+	import { createEventDispatcher } from 'svelte';
+	import Modal from '../Modal.svelte';
+	import IdField from '../textfield/IdField.svelte';
+	import NumberField from '../textfield/NumberField.svelte';
+
+	let isOpened = true;
+
+	let applicationId: string = '';
+	let personalId: string = '';
+
+	let login: CreateCandidateLogin;
+
+	const dispatch = createEventDispatcher();
+
+	const createCandidate = async () => {
+		const data: CreateCandidate = {
+			applicationId: Number(applicationId),
+			personalIdNumber: personalId
+		};
+		try {
+			login = await apiCreateCandidate(data);
+			dispatch('created');
+		} catch (e) {
+			console.log(e);
+		}
+	};
+
+	const close = () => {
+		isOpened = false;
+		dispatch('close');
+	};
+</script>
+
+{#if isOpened}
+	<Modal on:close={close}>
+		<div class="p-20">
+			{#if login}
+				<h1 class="text-sspsBlue text-3xl font-semibold">{applicationId}</h1>
+				<h1 class="text-sspsBlue text-3xl font-semibold">{login.password}</h1>
+			{:else}
+				<h1 class="text-sspsBlue text-3xl font-semibold">Registrace nového uchazeče</h1>
+				<h3 class="my-4">Evidenčni číslo přihlášky</h3>
+				<NumberField bind:value={applicationId} />
+				<h3 class="my-4">Rodné číslo</h3>
+				<IdField bind:value={personalId} />
+				<input
+					on:click={createCandidate}
+					class="bg-sspsBlue hover:bg-sspsBlueDark mt-6 w-full rounded-lg p-3 text-xl font-semibold text-white transition-colors duration-300"
+					type="submit"
+					value="Vytvořit"
+				/>
+			{/if}
+		</div>
+	</Modal>
+{/if}
+
+<style>
+</style>

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

@@ -6,6 +6,8 @@
 	import CandidateDetails from '$lib/components/list/CandidateDetails.svelte';
 	import { onMount } from 'svelte';
 	import type { PageData } from '../$types';
+	import Modal from '$lib/components/Modal.svelte';
+	import CreateCandidateModal from '$lib/components/admin/CreateCandidateModal.svelte';
 
 	let candidates: [CandidatePreview] = [{}];
 	let candidateDetails: { [id: number]: CandidateData } = {};
@@ -16,7 +18,7 @@
 		candidates = data.preview;
 	});
 
-	async function getCandidates() {
+	const getCandidates = async () => {
 		try {
 			candidates = await apiListCandidates();
 		} catch {
@@ -24,14 +26,6 @@
 		}
 	}
 
-	async function toggleDetail(id: number | undefined) {
-		if (id === undefined) return true;
-		if (candidateDetails.hasOwnProperty(id)) {
-			delete candidateDetails[id];
-		} else {
-			candidateDetails[id] = await apiFetchCandidate(id);
-		}
-	}
 
 	type Filter = 'Vše' | 'KBB' | 'IT' | 'GYM';
 
@@ -40,8 +34,18 @@
 	let activeFilter: Filter = 'Vše';
 
 	let scrollTop = 0;
+
+	let createCandidateModal: boolean = false;
+
+	const openCreateCandidateModal = () => {
+		createCandidateModal = true;
+	};
 </script>
 
+{#if createCandidateModal}
+	<CreateCandidateModal on:created={getCandidates}  on:close={() => (createCandidateModal = false)} />
+{/if}
+
 <div>
 	<div class="flex flex-row">
 		<div class="list fixed">
@@ -57,6 +61,7 @@
 			<div class="controls my-8">
 				<TextField placeholder="Hledat" />
 				<button
+					on:click={openCreateCandidateModal}
 					class="bg-sspsBlue hover:bg-sspsBlueDark ml-3 w-2/5 rounded-lg p-3 py-4 text-xl font-semibold text-white transition-colors duration-300"
 					>Nový uchazeč</button
 				>
@@ -64,6 +69,7 @@
 			{#if scrollTop > 200}
 				<div class="fixed bottom-8 right-8">
 					<button
+						on:click={openCreateCandidateModal}
 						class="bg-sspsBlue flex h-16 w-16 items-center justify-center rounded-full p-6 text-lg font-semibold text-white"
 						>+</button
 					>
@@ -90,11 +96,15 @@
 								<tbody>
 									{#each candidates as candidate}
 										<tr
-											on:click={(e) => toggleDetail(candidate.applicationId)}
 											class="border-b bg-white hover:cursor-pointer"
 										>
 											<td class="whitespace-nowrap px-6 py-4 text-sm text-gray-900"
-												><a target="_blank" href="/admin/candidate/{candidate.applicationId}">{candidate.applicationId}</a></td
+												><a
+													target="_blank"
+													rel="noreferrer"
+													href="/admin/candidate/{candidate.applicationId}"
+													>{candidate.applicationId}</a
+												></td
 											>
 											<td class="whitespace-nowrap px-6 py-4 text-sm text-gray-900">
 												{candidate.name}