From 86439762b79498bc471e0066f3003efaee4e7f47 Mon Sep 17 00:00:00 2001
From: Sebastian Pravda <sebastian.pravda@gmail.com>
Date: Sun, 4 Dec 2022 11:52:38 +0100
Subject: [PATCH] feat: upload status alert

---
 frontend/src/lib/@api/candidate.ts            |  9 ++++
 .../dashboard/DashboardInfoCard.svelte        | 51 ++++++++++++++++---
 .../dashboard/StatusNotificationBig.svelte    | 34 ++++++++-----
 .../(authenticated)/dashboard/+page.svelte    | 21 ++++++--
 4 files changed, 90 insertions(+), 25 deletions(-)

diff --git a/frontend/src/lib/@api/candidate.ts b/frontend/src/lib/@api/candidate.ts
index 2f80d48..c91e020 100644
--- a/frontend/src/lib/@api/candidate.ts
+++ b/frontend/src/lib/@api/candidate.ts
@@ -145,3 +145,12 @@ export const apiUploadPortfolioZip = async (
 		throw errorHandler(e, 'Failed to upload cover letter');
 	}
 };
+
+export const apiSubmitPortfolio = async (): Promise<boolean> => {
+	try {
+		await axios.post(API_URL + '/candidate/portfolio/submit', {}, { withCredentials: true });
+		return true;
+	} catch (e: any) {
+		throw errorHandler(e, 'Failed to submit portfolio');
+	}
+};
\ No newline at end of file
diff --git a/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte b/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte
index 741afe7..5cfd285 100644
--- a/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte
+++ b/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte
@@ -1,24 +1,59 @@
 <script lang="ts">
+	import { apiSubmitPortfolio } from '$lib/@api/candidate';
 	import Circles from '$lib/components/icons/Circles.svelte';
+	import { fetchSubmProgress, type Status } from '$lib/stores/portfolio';
+	import StatusNotificationBig from './StatusNotificationBig.svelte';
 
 	export let title: string;
+	export let status: Status;
+
+	const submit = async () => {
+		const res = await apiSubmitPortfolio();
+		await fetchSubmProgress();
+	}
 </script>
 
-<div class="card infoCard relative">
-	<span class="absolute -left-8 -top-8">
-		<Circles />
-	</span>
-	<div class="mt-20 flex flex-col">
-		<h3>{title}</h3>
-		<slot />
+<div class="card flex flex-col">
+	<div class="infoBar flex flex-row-reverse">
+		<StatusNotificationBig {status} />
+	</div>
+	<div class="flex flex-row justify-between relative">
+		<div>
+			<span class="absolute -left-20 -top-20">
+				<Circles />
+			</span>
+			<div class="mt-20 flex flex-col">
+				<h3>{title}</h3>
+				<slot />
+			</div>
+		</div>
+		<div class="flex flex-col justify-evenly w-[50%]">
+			{#if status === 'uploaded'}
+				<button on:click={submit} class="bg-green-600">
+					Odevzdat
+					<svg class="w-8 h-8 inline-block align-middle" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg>
+				</button>
+			{:else if status === 'submitted'}
+				<button class="bg-gray-500 hover:bg-gray-800">Smazat portfolio</button>
+			{:else}
+				<button class="bg-gray-500 hover:bg-gray-500 hover:cursor-not-allowed">Odevzdat</button>
+			{/if}
+			<button>Zobrazit údaje</button>
+		</div>
 	</div>
 </div>
 
 <style>
+	button {
+		@apply bg-sspsBlue text-white font-bold;
+		@apply hover:bg-sspsBlueDark transition-colors duration-300;
+		@apply text-xl;
+		@apply rounded-xl shadow-lg;
+		@apply py-3 px-4;
+	}
 	.card {
 		@apply m-3;
 		@apply h-full;
-		@apply flex flex-col justify-between;
 
 		@apply bg-[#f8fbfc];
 		@apply rounded-3xl;
diff --git a/frontend/src/lib/components/dashboard/StatusNotificationBig.svelte b/frontend/src/lib/components/dashboard/StatusNotificationBig.svelte
index 3edac4a..d4a4b56 100644
--- a/frontend/src/lib/components/dashboard/StatusNotificationBig.svelte
+++ b/frontend/src/lib/components/dashboard/StatusNotificationBig.svelte
@@ -1,38 +1,48 @@
 <script lang="ts">
 	import type { Status } from '$lib/stores/portfolio';
-	import StatusNotificationDot from './StatusNotificationDot.svelte';
 
 	export let status: Status;
 
 	let title: string;
-	switch (status) {
+	let description: string;
+	$: switch (status) {
 		case 'submitted':
-			title = 'Soubory odeslány!';
+			title = 'Soubory odevzdány!';
+			description = 'Vaše soubory byly odevzdány';
 			break;
 		case 'uploaded':
-			title = 'Soubory nahrány!';
+			title = 'Soubory nebyly odevzdány!';
+			description = 'Odevzdejte soubory prosím';
 			break;
 		case 'missing':
-			title = 'Chybí soubory!';
+			title = 'Soubory nebyly nahrány!';
+			description = 'Nahrajte včechny soubory prosím';
 			break;
 	}
 </script>
 
-<div class="mb-8 flex rounded-full bg-white">
-	<div class="mt-3 mb-3 ml-3 flex flex-row">
-		<h2 class="text-sspsBlueDark ml-2 text-2xl font-bold">{title}</h2>
-		<span class="ml-32  h-8 w-8 self-center rounded-full {status}" />
-		<!-- <StatusNotificationDot {status} /> -->
+<div class="flex flex-col">
+	<div class="info flex flex-col {status}">
+		<span class="text-white text-2xl font-bold">{title}</span>
+		<span class="text-white text-md italic">{description}</span>
 	</div>
 </div>
 
 <style>
+	.info {
+		@apply flex items-center justify-between;
+		@apply py-3 px-8;
+		@apply rounded-xl bg-red-700 shadow-md border-red-700;
+
+		@apply hover:cursor-help;
+	}
+
 	.submitted {
-		@apply bg-[#35e000ff];
+		@apply bg-green-600;
 	}
 
 	.uploaded {
-		@apply bg-[#ff8530ff];
+		@apply bg-yellow-600;
 	}
 
 	.missing {
diff --git a/frontend/src/routes/(candidate)/(authenticated)/dashboard/+page.svelte b/frontend/src/routes/(candidate)/(authenticated)/dashboard/+page.svelte
index 83e41e3..3c94266 100644
--- a/frontend/src/routes/(candidate)/(authenticated)/dashboard/+page.svelte
+++ b/frontend/src/routes/(candidate)/(authenticated)/dashboard/+page.svelte
@@ -10,7 +10,7 @@
 	import PortfolioLetterUploadCard from '$lib/components/dashboard/PortfolioLetterUploadCard.svelte';
 	import PortfolioZipUploadCard from '$lib/components/dashboard/PortfolioZipUploadCard.svelte';
 	import type { PageData } from './$types';
-	import { fetchSubmProgress, submissionProgress } from '$lib/stores/portfolio';
+	import { fetchSubmProgress, submissionProgress, UploadStatus, type Status } from '$lib/stores/portfolio';
 	import { candidateData } from '$lib/stores/candidate';
 
 	export let data: PageData;
@@ -19,17 +19,28 @@
 	$: candidateData.set(data.candidate);
 	// @ts-ignore
 	$: submissionProgress.set(data.submission);
+	
+	const getUploadStatus = (progressStatus: UploadStatus | undefined): Status => {
+		switch (progressStatus) {
+			case 3:
+				return 'uploaded';
+			case 4:
+				return 'submitted';
+			default:
+				return 'missing';
+		}
+	}
 </script>
 
 <FullLayout>
 	<div class="dashboard dashboardDesktop">
-		<div class="name col-span-3">
-			<DashboardInfoCard title={$candidateData.name + ' ' + $candidateData.surname ?? ''}>
+		<div class="name col-span-3 <2xl:col-span-4">
+			<DashboardInfoCard status={getUploadStatus($submissionProgress.status)} title={$candidateData.name + ' ' + $candidateData.surname ?? ''}>
 				<span class="text-sspsBlue mt-3 truncate">{$candidateData.email}</span>
 				<span class="text-sspsGray mt-3 text-xs">Uchazeč na SSPŠ</span>
 			</DashboardInfoCard>
 		</div>
-		<div class="coverletter col-span-5">
+		<div class="coverletter col-span-5 <2xl:col-span-4">
 			<CoverLetterUploadCard />
 		</div>
 		<div class="portfolio col-span-4">
@@ -41,7 +52,7 @@
 	</div>
 	<div class="dashboard dashboardMobile">
 		<div class="name my-10 mx-auto w-[90%]">
-			<DashboardInfoCard title={$candidateData.name + ' ' + $candidateData.surname ?? ''}>
+			<DashboardInfoCard status={getUploadStatus($submissionProgress.status)} title={$candidateData.name + ' ' + $candidateData.surname ?? ''}>
 				<span class="text-sspsBlue mt-3 truncate">{$candidateData.email}</span>
 				<span class="text-sspsGray mt-3 text-xs">Uchazeč na SSPŠ</span>
 			</DashboardInfoCard>