feat: optionally show personal data

frontend/src/lib/components/dashboard/DashboardInfoCard.svelte

@@ -7,10 +7,12 @@
 	import StatusNotificationBig from './StatusNotificationBig.svelte';
 	import InfoButton from './InfoButton.svelte';
 	import { candidateData } from '$lib/stores/candidate';
+	import tippy from 'tippy.js';
 
 	export let title: string;
 	export let status: Status;
 
+	export let showDetails = true;
 	let loading = false;
 
 	const submitPortfolio = async () => {
@@ -56,12 +58,12 @@
 		<div class="mr-4">
 			<div on:click on:keydown class="flex flex-col">
 				<div class="flex flex-col h-20">
-					<InfoButton on:download={downloadPortfolio}></InfoButton>
+					<InfoButton on:download={downloadPortfolio} on:showInfo on:showInfo={(_) => showDetails = !showDetails}></InfoButton>
 				</div>
 			</div>
 		</div>
 	</div>
-	<div class="relative flex flex-row justify-between">
+	<div class="relative flex flex-row">
 		<div>
 			<span class="absolute -left-16 -top-36">
 				<Circles />
@@ -71,6 +73,50 @@
 				<slot />
 			</div>
 		</div>
+		{#if showDetails}
+		<svg class="ml-12 mr-8 h-40 hidden xl:block mt-10" viewBox="0 0 2 80" xmlns="http://www.w3.org/2000/svg">
+			<line
+				x1="0"
+				y="0"
+				x2="0"
+				y2="80"
+				stroke="#406280ff"
+				stroke-width="2"
+				stroke-dasharray="3"/>
+		</svg>
+		<div
+			use:tippy={{
+				content: "<span>Vámi vyplněné osobní údaje</span>",
+				allowHTML: true,
+				placement: 'top',
+				showOnCreate: false,
+				delay: 0
+			}}
+		 class="flex flex-col justify-around mt-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="ml-10 flex flex-col justify-around mt-10">
+			{#each $candidateData.parents as parent}
+			<div class="flex flex-col">
+				<span class="font-bold text-sspsBlue text-xl">{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>
+		{/if}
 	</div>
 </div>
 

frontend/src/lib/components/dashboard/InfoButton.svelte

@@ -16,7 +16,8 @@
 
 <div class="flex flex-col">
 	<div class="flex flex-col">
-		<span on:click={(_) => showInfo()} on:keydown={(_) => showInfo()} use:tippy={{
+		<span on:click={(_) => showInfo()} on:keydown={(_) => showInfo()} 
+		use:tippy={{
 			content: "Zobrazit osobní údaje",
 			placement: 'top',
 			showOnCreate: false,

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

@@ -14,6 +14,9 @@
 
 	export let data: PageData;
 
+	// TODO: transition
+	let showDetails = true;
+
 	// @ts-ignore
 	$: candidateData.set(data.candidate);
 	// @ts-ignore
@@ -33,13 +36,13 @@
 
 <FullLayout>
 	<div class="dashboard dashboardDesktop">
-		<div class="name col-span-4">
+		<div class="movable name col-span-5" class:col-span-5={showDetails} class:col-span-3={!showDetails}>
-			<DashboardInfoCard status={getUploadStatus($submissionProgress.status)} title={$candidateData.candidate.name + ' ' + $candidateData.candidate.surname ?? ''}>
+			<DashboardInfoCard bind:showDetails={showDetails} status={getUploadStatus($submissionProgress.status)} title={$candidateData.candidate.name + ' ' + $candidateData.candidate.surname ?? ''}>
 				<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>
-		<div class="coverletter col-span-4">
+		<div class="movable coverletter" class:col-span-3={showDetails} class:col-span-5={!showDetails}>
 			<CoverLetterUploadCard />
 		</div>
 		<div class="portfolio col-span-3">