From b8d79e8cd9d6dcfe052831671ea6fa31fb846b9b Mon Sep 17 00:00:00 2001
From: EETagent <vojta.jungmann@gmail.com>
Date: Sun, 1 Jan 2023 13:59:44 +0100
Subject: [PATCH] feat: move table to seperate component

---
 .../lib/components/admin/table/Table.svelte   | 60 +++++++++++++++++++
 .../src/lib/components/button/Delete.svelte   | 14 +++--
 .../(authenticated)/dashboard/+page.svelte    | 54 +----------------
 3 files changed, 71 insertions(+), 57 deletions(-)
 create mode 100644 frontend/src/lib/components/admin/table/Table.svelte

diff --git a/frontend/src/lib/components/admin/table/Table.svelte b/frontend/src/lib/components/admin/table/Table.svelte
new file mode 100644
index 0000000..97755b7
--- /dev/null
+++ b/frontend/src/lib/components/admin/table/Table.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+	import Delete from '$lib/components/button/Delete.svelte';
+	import type { CandidatePreview } from '$lib/stores/candidate';
+
+	export let candidates: Array<CandidatePreview> = [];
+</script>
+
+<div class="flex flex-col">
+	<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
+		<div class="inline-block min-w-full py-4 sm:px-6 lg:px-8">
+			<div class="overflow-hidden rounded-md border-2  border-[#dfe0e9] ">
+				<table class="min-w-full text-center ">
+					<thead class="bg-[#f6f4f4] ">
+						<tr>
+							<th scope="col"> Ev. č. přihlásky </th>
+							<th scope="col"> Jméno </th>
+							<th scope="col"> Příjmení </th>
+							<th scope="col"> Obor </th>
+							<th scope="col" />
+						</tr>
+					</thead>
+					<tbody>
+						{#each candidates as candidate}
+							<tr class="border-b bg-white hover:cursor-pointer">
+								<td class="text-gray-900"
+									><a
+										target="_blank"
+										rel="noreferrer"
+										href="/admin/candidate/{candidate.applicationId}">{candidate.applicationId}</a
+									></td
+								>
+								<td class="text-gray-900">
+									{candidate.name}
+								</td>
+								<td class="text-gray-900">
+									{candidate.surname}
+								</td>
+								<td class="text-gray-900">
+									{candidate.study}
+								</td>
+								<td class="text-sm">
+									<Delete id={candidate.applicationId} on:delete value="Odstranit" />
+								</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		</div>
+	</div>
+</div>
+
+<style lang="postcss">
+	th {
+		@apply px-6 py-4 text-sm font-medium text-gray-900;
+	}
+	td {
+		@apply whitespace-nowrap px-6 py-4 text-sm;
+	}
+</style>
diff --git a/frontend/src/lib/components/button/Delete.svelte b/frontend/src/lib/components/button/Delete.svelte
index 1e49128..ae1f330 100644
--- a/frontend/src/lib/components/button/Delete.svelte
+++ b/frontend/src/lib/components/button/Delete.svelte
@@ -5,14 +5,19 @@
 
 	export let value: string;
 
-	let isPrepared = false;
+	export let id: number | undefined;
 
+	let isPrepared = false;
 
 	const buttonLogic = () => {
 		if (isPrepared) {
-			dispatch('delete');
+			dispatch('delete', {
+				id: id
+			});
 		} else {
-			dispatch('prepared');
+			dispatch('prepared', {
+				id: id
+			});
 			isPrepared = true;
 			setTimeout(() => {
 				isPrepared = false;
@@ -44,9 +49,8 @@
 	button {
 		@apply inline-flex items-center;
 		@apply bg-red-700;
-		@apply @apply rounded-lg p-3 text-xl font-semibold 
+		@apply @apply rounded-lg p-3 font-semibold 
         text-white transition-colors duration-300;
-		@apply w-full;
 
 		animation: none !important;
 	}
diff --git a/frontend/src/routes/(admin)/admin/(authenticated)/dashboard/+page.svelte b/frontend/src/routes/(admin)/admin/(authenticated)/dashboard/+page.svelte
index f2e18b4..c50249c 100644
--- a/frontend/src/routes/(admin)/admin/(authenticated)/dashboard/+page.svelte
+++ b/frontend/src/routes/(admin)/admin/(authenticated)/dashboard/+page.svelte
@@ -7,6 +7,7 @@
 	import Fuse from 'fuse.js';
 	import type { PageServerData } from './$types';
 	import Delete from '$lib/components/button/Delete.svelte';
+	import Table from '$lib/components/admin/table/Table.svelte';
 
 	export let data: PageServerData;
 
@@ -112,58 +113,7 @@
 				</div>
 			{/if}
 
-			<div class="flex flex-col">
-				<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
-					<div class="inline-block min-w-full py-4 sm:px-6 lg:px-8">
-						<div class="overflow-hidden rounded-md border-2  border-[#dfe0e9] ">
-							<table class="min-w-full text-center ">
-								<thead class="bg-[#f6f4f4] ">
-									<tr>
-										<th scope="col" class="px-6 py-4 text-sm font-medium text-gray-900">
-											Ev. č. přihlásky
-										</th>
-										<th scope="col" class="px-6 py-4 text-sm font-medium text-gray-900"> Jméno </th>
-										<th scope="col" class="px-6 py-4 text-sm font-medium text-gray-900">
-											Příjmení
-										</th>
-										<th scope="col" class="px-6 py-4 text-sm font-medium text-gray-900"> Obor </th>
-										<th scope="col" class="px-6 py-4 text-sm font-medium text-gray-900" />
-									</tr>
-								</thead>
-								<tbody>
-									{#each candidatesTable as candidate}
-										<tr class="border-b bg-white hover:cursor-pointer">
-											<td class="whitespace-nowrap px-6 py-4 text-sm text-gray-900"
-												><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}
-											</td>
-											<td class="whitespace-nowrap px-6 py-4 text-sm text-gray-900">
-												{candidate.surname}
-											</td>
-											<td class="whitespace-nowrap px-6 py-4 text-sm text-gray-900">
-												{candidate.study}
-											</td>
-											<td class="whitespace-nowrap px-6 py-4 text-sm">
-												<Delete
-													on:delete={async () => await deleteCandidate(candidate.applicationId)}
-													value="Odstranit"
-												/>
-											</td>
-										</tr>
-									{/each}
-								</tbody>
-							</table>
-						</div>
-					</div>
-				</div>
-			</div>
+				<Table candidates={candidatesTable} on:delete={(event) => deleteCandidate(event.detail.id)} />
 		</div>
 	</div>
 </div>