feat: ssr for candidate details, own page, refactoring

frontend/src/routes/(admin)/admin/(authenticated)/candidate/[code=application]/+page.server.ts

@@ -0,0 +1,20 @@
+import { apiFetchCandidate } from '$lib/@api/admin';
+import type { CandidateData } from '$lib/stores/candidate';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ fetch, params }) => {
+	const { code } = params;
+	const codeNumber = Number(code);
+
+	let candidateData: CandidateData = {};
+	try {
+		candidateData = await apiFetchCandidate(codeNumber, fetch);
+	} catch (e) {
+		console.error(e);
+	}
+
+	return {
+		id: codeNumber,
+		candidate: candidateData
+	};
+};

frontend/src/routes/(admin)/admin/(authenticated)/candidate/[code=application]/+page.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import CandidateDetails from '$lib/components/list/CandidateDetails.svelte';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+</script>
+
+<CandidateDetails id={data.id} candidate={data.candidate} />
+
+<style>
+</style>

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

@@ -1,8 +1,8 @@
 import { apiListCandidates } from '$lib/@api/admin';
 import type { CandidatePreview } from '$lib/stores/candidate';
-import type { LayoutServerLoad } from './$types';
+import type { PageServerLoad } from './$types';
 
-export const load: LayoutServerLoad = async ({ fetch }) => {
+export const load: PageServerLoad = async ({ fetch }) => {
 	let candidatePreview: [CandidatePreview] = [{}];
 	try {
 		candidatePreview = await apiListCandidates(fetch);

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

@@ -3,7 +3,7 @@
 	import Home from '$lib/components/icons/Home.svelte';
 	import TextField from '$lib/components/textfield/TextField.svelte';
 	import type { CandidateData, CandidatePreview } from '$lib/stores/candidate';
-	import CandidateDetails from '$lib/components/dashboard/CandidateDetails.svelte';
+	import CandidateDetails from '$lib/components/list/CandidateDetails.svelte';
 	import { onMount } from 'svelte';
 	import type { PageData } from '../$types';
 
@@ -94,7 +94,7 @@
 											class="border-b bg-white hover:cursor-pointer"
 										>
 											<td class="whitespace-nowrap px-6 py-4 text-sm text-gray-900"
-												>{candidate.applicationId}</td
+												><a target="_blank" href="/admin/candidate/{candidate.applicationId}">{candidate.applicationId}</a></td
 											>
 											<td class="whitespace-nowrap px-6 py-4 text-sm text-gray-900">
 												{candidate.name}
@@ -106,15 +106,6 @@
 												{candidate.study}
 											</td>
 										</tr>
-										{#if candidateDetails.hasOwnProperty(candidate.applicationId)}
-											<div class="mb-20 w-full">
-												<CandidateDetails
-													id={candidate.applicationId}
-													candidate={candidateDetails[candidate.applicationId]}
-												/>
-												<hr class="w-full border-4" />
-											</div>
-										{/if}
 									{/each}
 								</tbody>
 							</table>