From 4f32b244cf1e324d091eb3be63f1a9e1ff2e67b1 Mon Sep 17 00:00:00 2001
From: EETagent <vojta.jungmann@gmail.com>
Date: Mon, 5 Dec 2022 02:54:36 +0100
Subject: [PATCH] feat: temp candidate details redesign

---
 .../components/list/CandidateDetails.svelte   | 138 ++++++++++++------
 1 file changed, 90 insertions(+), 48 deletions(-)

diff --git a/frontend/src/lib/components/list/CandidateDetails.svelte b/frontend/src/lib/components/list/CandidateDetails.svelte
index 78b2e60..b4688d5 100644
--- a/frontend/src/lib/components/list/CandidateDetails.svelte
+++ b/frontend/src/lib/components/list/CandidateDetails.svelte
@@ -1,65 +1,107 @@
 <script lang="ts">
-	import { apiGetCandidatePortfolio, apiResetCandidatePassword } from "$lib/@api/admin";
-	import type { CandidateData } from "$lib/stores/candidate";
-	import ListElement from "./ListElement.svelte";
+	import { apiGetCandidatePortfolio, apiResetCandidatePassword } from '$lib/@api/admin';
+	import type { CandidateData } from '$lib/stores/candidate';
+	import ListElement from './ListElement.svelte';
 
-    export let id: number;
-    export let candidate: CandidateData;
+	export let id: number;
+	export let candidate: CandidateData;
 
-    async function resetCandidatePassword() {
+	async function resetCandidatePassword() {
 		try {
 			const res = await apiResetCandidatePassword(id);
-            alert("Nove heslo: " + res.password);
+			alert('Nove heslo: ' + res.password);
 		} catch {
 			console.log('error');
 		}
 	}
 
-    async function downloadPortfolio() {
-        try {
-            const portfolioBlob = await apiGetCandidatePortfolio(id);
-            const url = window.URL.createObjectURL(new Blob([portfolioBlob]));
-            const link = document.createElement('a');
-            link.href = url;
-            link.setAttribute('download', 'PORTFOLIO' + '_' + id + '.zip');
-            document.body.appendChild(link);
-            link.click();
-        } catch (e) {
-            console.log(e);
-        }
-    }
+	async function downloadPortfolio() {
+		try {
+			const portfolioBlob = await apiGetCandidatePortfolio(id);
+			const url = window.URL.createObjectURL(new Blob([portfolioBlob]));
+			const link = document.createElement('a');
+			link.href = url;
+			link.setAttribute('download', 'PORTFOLIO' + '_' + id + '.zip');
+			document.body.appendChild(link);
+			link.click();
+		} catch (e) {
+			console.log(e);
+		}
+	}
 </script>
 
-<div class="flex flex-row">
-    <div class="w-96">
-        <li>
-            <ListElement label="Jméno" content={candidate.name}></ListElement>
-            <ListElement label="Příjmení" content={candidate.surname}></ListElement>
-            <ListElement label="Místo narození" content={candidate.birthplace}></ListElement>
-            <ListElement label="Datum narození" content={candidate.birthdate}></ListElement>
-            <ListElement label="Adresa" content={candidate.address}></ListElement>
-            <ListElement label="Telefon" content={candidate.telephone}></ListElement>
-            <ListElement label="Email" content={candidate.email}></ListElement>
-            <ListElement label="Obor" content={candidate.study}></ListElement>
-            <ListElement label="Rodné číslo" content={candidate.personalIdNumber}></ListElement>
+<div class="flex h-screen w-full items-center justify-center">
+	<div class="mr-8 max-w-sm">
+		<div class="rounded-lg bg-white p-10 shadow-xl">
+			<div class="p-2">
+				<h3 class="text-sspsBlue text-center  text-2xl font-medium font-semibold leading-8">
+					{candidate.name + ' ' + candidate.surname}
+				</h3>
 
-            <ListElement label="Jméno rodiče" content={candidate.parentName}></ListElement>
-            <ListElement label="Příjmení rodiče" content={candidate.parentSurname}></ListElement>
-            <ListElement label="Telefon rodiče" content={candidate.parentTelephone}></ListElement>
-            <ListElement label="Email rodiče" content={candidate.parentEmail}></ListElement>
-        </li>
-    </div>
-    <div class="ml-20">
-        <div class="flex flex-col">
-            <button on:click={e => resetCandidatePassword()} class="">Resetovat heslo</button>
-            <button on:click={e => downloadPortfolio()} class="mt-40">Stáhnout portfolio</button>
-        </div>
-    </div>
+				<table class="my-3 text-xs">
+					<tbody
+						><tr>
+							<td class="px-2 py-2 font-semibold text-gray-500">Místo narození</td>
+							<td class="px-2 py-2">{candidate.birthplace}</td>
+						</tr>
+						<tr>
+							<td class="px-2 py-2 font-semibold text-gray-500">Datum narození</td>
+							<td class="px-2 py-2">{candidate.birthdate}</td>
+						</tr>
+						<tr>
+							<td class="px-2 py-2 font-semibold text-gray-500">Adresa</td>
+							<td class="px-2 py-2">{candidate.address}</td>
+						</tr>
+						<tr>
+							<td class="px-2 py-2 font-semibold text-gray-500">Telefon</td>
+							<td class="px-2 py-2">{candidate.telephone}</td>
+						</tr>
+						<tr>
+							<td class="px-2 py-2 font-semibold text-gray-500">E-mail</td>
+							<td class="px-2 py-2">{candidate.email}</td>
+						</tr>
+						<tr>
+							<td class="px-2 py-2 font-semibold text-gray-500">Obor</td>
+							<td class="px-2 py-2">{candidate.study}</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+		</div>
+	</div>
+	<div class="max-w-sm">
+		<div class="rounded-lg bg-white p-10 shadow-xl">
+			<div class="p-2">
+				<h3 class="text-sspsBlue text-center  text-2xl font-medium font-semibold leading-8">
+					{candidate.parentName + ' ' + candidate.parentSurname}
+				</h3>
+				<table class="my-3 text-xs">
+					<tbody
+						><tr>
+							<td class="px-2 py-2 font-semibold text-gray-500">Telefon</td>
+							<td class="px-2 py-2">{candidate.parentTelephone}</td>
+						</tr>
+						<tr>
+							<td class="px-2 py-2 font-semibold text-gray-500">E-mail</td>
+							<td class="px-2 py-2">{candidate.parentEmail}</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+		</div>
+
+		<div class="my-8">
+			<div class="flex flex-col">
+				<button on:click={(e) => resetCandidatePassword()}>Resetovat heslo</button>
+				<button on:click={(e) => downloadPortfolio()} class="my-8">Stáhnout portfolio</button>
+			</div>
+		</div>
+	</div>
 </div>
 
 <style>
-    button {
-        @apply bg-sspsBlue hover:bg-sspsBlueDark transition duration-300 rounded-lg;
-        @apply text-2xl text-white font-bold px-10 py-4;
-    }
+	button {
+		@apply bg-sspsBlue hover:bg-sspsBlueDark rounded-lg transition duration-300;
+		@apply px-10 py-4 text-2xl font-bold text-white;
+	}
 </style>