From 485bd8613de8e85294cc7f5b087e381915c891f6 Mon Sep 17 00:00:00 2001
From: Sebastian Pravda <sebastian.pravda@gmail.com>
Date: Fri, 2 Dec 2022 19:30:56 +0100
Subject: [PATCH] feat: file upload status

---
 .../dashboard/CoverLetterUploadCard.svelte    |  6 ++-
 .../dashboard/DashboardInfoCard.svelte        |  5 ---
 .../dashboard/DashboardUploadCard.svelte      | 36 ++++++++++++++++-
 .../PortfolioLetterUploadCard.svelte          |  5 ++-
 .../dashboard/PortfolioZipUploadCard.svelte   |  5 ++-
 .../dashboard/StatusNotification.svelte       | 39 +++++++++++++++++++
 frontend/src/routes/dashboard/+page.svelte    |  3 ++
 frontend/src/stores/portfolio.ts              | 11 +++++-
 8 files changed, 98 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/lib/components/dashboard/StatusNotification.svelte

diff --git a/frontend/src/lib/components/dashboard/CoverLetterUploadCard.svelte b/frontend/src/lib/components/dashboard/CoverLetterUploadCard.svelte
index 3b02f0c..9c39fa2 100644
--- a/frontend/src/lib/components/dashboard/CoverLetterUploadCard.svelte
+++ b/frontend/src/lib/components/dashboard/CoverLetterUploadCard.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { AxiosProgressEvent } from "axios";
+	import { fetchSubmProgress } from "../../../stores/portfolio";
 	import { apiUploadCoverLetter } from "../../../@api/candidate";
 	import DashboardUploadCard from "./DashboardUploadCard.svelte";
 
@@ -7,6 +8,7 @@
         await apiUploadCoverLetter(file, (progressEvent: AxiosProgressEvent) => {
             console.log(progressEvent.progress)
         });
+        await fetchSubmProgress();
     }
 
 </script>
@@ -16,5 +18,7 @@
     on:filedrop={e => onFileDrop(e.detail)}
     title="Motivační dopis"
     filetype="PDF"
-    filesize="10 MB">
+    filesize="10 MB"
+    fileType={1}
+    >
 </DashboardUploadCard>
diff --git a/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte b/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte
index 8c58f2e..f98f76b 100644
--- a/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte
+++ b/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte
@@ -1,12 +1,7 @@
 <script lang="ts">
 	import Circles from "$lib/components/icons/Circles.svelte";
-	import { fetchSubmProgress, submissionProgress } from "../../../stores/portfolio";
 
 	export let title: string;
-
-	fetchSubmProgress();
-	
-	$: if ($submissionProgress) {console.log($submissionProgress.status);}
 </script>
 
 <div class="card infoCard relative">
diff --git a/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte b/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte
index 87e50f6..eb3e259 100644
--- a/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte
+++ b/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte
@@ -1,14 +1,34 @@
 <script lang="ts">
 	import FileType from './FileType.svelte';
+	import FileDrop from 'filedrop-svelte';
+	import FileMissingNotification from './StatusNotification.svelte';
+	import { submissionProgress, UploadStatus } from '../../../stores/portfolio';
 	import { createEventDispatcher } from 'svelte';
+	import StatusNotification from './StatusNotification.svelte';
 
 	const dispatch = createEventDispatcher();
 
 	export let title: string;
 	export let filetype: 'PDF' | 'ZIP';
 	export let filesize: string;
+	export let fileType: number = 0;
 
-	import FileDrop from 'filedrop-svelte';
+	let missing = false;
+
+	$: if ($submissionProgress) {
+		missing = isMissing();
+	}
+
+	const isMissing = (): boolean => {
+		switch ($submissionProgress.status) {
+			case UploadStatus.None:
+				return true;
+			case UploadStatus.Some:
+				return !$submissionProgress.files!.some(code => code === fileType);
+			default:
+				return false;
+		}
+	}
 
 	let dashAnimationProgress = 0;
 	let dashAnimationInterval: NodeJS.Timer;
@@ -41,8 +61,19 @@
 
 <div class="card uploadCard">
 	<div class="flex flex-col sm:flex-row justify-between sm:items-center">
+		<!-- <div class="grid grid-cols-8">
+			<h3 class="col-start-1 col-end-5">{title}</h3>
+			<div class="mt-1 col-start-5 col-end-8">
+				<FileMissingNotification title="File Missing" />
+			</div>
+		</div> -->
+		<!-- <div class="flex flex-col justify-between">
+		</div> -->
 		<h3>{title}</h3>
-		<div class="mt-3 sm:mt-0">
+		{#if missing}
+			<StatusNotification type="missing" />
+		{/if}
+		<div class="mt-1 sm:mt-0">
 			<FileType {filetype} {filesize} />
 		</div>
 	</div>
@@ -51,6 +82,7 @@
 			multiple={false}
 			maxSize={filetype == 'PDF' ? 100_000_000 : 10_000_000}
 			accept={filetype == 'PDF' ? 'application/pdf' : 'application/zip'}
+			
 			on:filedrop={(e) => onFileDrop(e.detail.files)}
 			on:filedragenter={dashAnimationStart}
 			on:filedragleave={dashAnimationStop}
diff --git a/frontend/src/lib/components/dashboard/PortfolioLetterUploadCard.svelte b/frontend/src/lib/components/dashboard/PortfolioLetterUploadCard.svelte
index 5efbb6d..e61ef57 100644
--- a/frontend/src/lib/components/dashboard/PortfolioLetterUploadCard.svelte
+++ b/frontend/src/lib/components/dashboard/PortfolioLetterUploadCard.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { AxiosProgressEvent } from "axios";
+	import { fetchSubmProgress } from "../../../stores/portfolio";
 	import { apiUploadPortfolioLetter } from "../../../@api/candidate";
 	import DashboardUploadCard from "./DashboardUploadCard.svelte";
 
@@ -7,6 +8,7 @@
         await apiUploadPortfolioLetter(file, (progressEvent: AxiosProgressEvent) => {
             console.log(progressEvent.loaded)
         });
+        await fetchSubmProgress();
     }
 
 </script>
@@ -16,5 +18,6 @@
     on:filedrop={e => onFileDrop(e.detail)} 
     title="Portfolio"
     filetype="PDF"
-    filesize="10 MB">
+    filesize="10 MB"
+    fileType={2}>
 </DashboardUploadCard>
diff --git a/frontend/src/lib/components/dashboard/PortfolioZipUploadCard.svelte b/frontend/src/lib/components/dashboard/PortfolioZipUploadCard.svelte
index 5df50df..8c3861b 100644
--- a/frontend/src/lib/components/dashboard/PortfolioZipUploadCard.svelte
+++ b/frontend/src/lib/components/dashboard/PortfolioZipUploadCard.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { AxiosProgressEvent } from "axios";
+	import { fetchSubmProgress } from "../../../stores/portfolio";
 	import { apiUploadPortfolioZip } from "../../../@api/candidate";
 	import DashboardUploadCard from "./DashboardUploadCard.svelte";
 
@@ -7,6 +8,7 @@
         await apiUploadPortfolioZip(file, (progressEvent: AxiosProgressEvent) => {
             console.log(progressEvent.loaded)
         });
+        await fetchSubmProgress();
     }
 
 </script>
@@ -16,5 +18,6 @@
     on:filedrop={e => onFileDrop(e.detail)} 
     title="Další data"
     filetype="ZIP"
-    filesize="100 MB">
+    filesize="100 MB"
+    fileType={3}>
 </DashboardUploadCard>
diff --git a/frontend/src/lib/components/dashboard/StatusNotification.svelte b/frontend/src/lib/components/dashboard/StatusNotification.svelte
new file mode 100644
index 0000000..c5c2db7
--- /dev/null
+++ b/frontend/src/lib/components/dashboard/StatusNotification.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+    export let type: "submitted" | "uploaded" | "missing";
+    let title: string;
+    switch (type) {
+        case "submitted":
+            title = "Odeslané";
+            break;
+        case "uploaded":
+            title = "Nahráno";
+            break;
+        case "missing":
+            title = "Chybí";
+            break;
+    };
+</script>
+
+<!-- make red dot -->
+<div class="flex flex-col justify-between">
+    <span class="mt-1 w-5 h-5 rounded-full {type}" />
+    <h3 class="ml-8 font-bold text-xl">{title}</h3>
+</div>
+
+<style>
+    span {
+		@apply absolute rounded-full p-1;
+	}
+
+    .submitted {
+        @apply bg-green-700;
+    }
+
+    .uploaded {
+        @apply bg-yellow-700;
+    }
+
+    .missing {
+        @apply bg-red-700;
+    }
+</style>
\ No newline at end of file
diff --git a/frontend/src/routes/dashboard/+page.svelte b/frontend/src/routes/dashboard/+page.svelte
index 53557f4..c57ddca 100644
--- a/frontend/src/routes/dashboard/+page.svelte
+++ b/frontend/src/routes/dashboard/+page.svelte
@@ -10,6 +10,7 @@
 	import CoverLetterUploadCard from '$lib/components/dashboard/CoverLetterUploadCard.svelte';
 	import PortfolioLetterUploadCard from '$lib/components/dashboard/PortfolioLetterUploadCard.svelte';
 	import PortfolioZipUploadCard from '$lib/components/dashboard/PortfolioZipUploadCard.svelte';
+	import { fetchSubmProgress } from '../../stores/portfolio';
 
 	
 	let fullName = "";
@@ -20,6 +21,8 @@
 		email = $candidateData.email ?? "";
 	}
 
+	fetchSubmProgress(); // TODO: move to a better place
+
 	$: if ($candidateData.name === undefined) {
 		fetch();
 	}
diff --git a/frontend/src/stores/portfolio.ts b/frontend/src/stores/portfolio.ts
index d925865..3be192e 100644
--- a/frontend/src/stores/portfolio.ts
+++ b/frontend/src/stores/portfolio.ts
@@ -1,12 +1,19 @@
 import { apiFetchSubmissionProgress } from "../@api/candidate";
 import { writable } from "svelte/store";
 
+export enum UploadStatus {
+    None = 1,
+    Some = 2,
+    All = 3,
+    Submitted = 4,
+}
+
 export interface SubmissionProgress {
-    status?: number;
+    status?: UploadStatus;
     files?: [number];
 }
 
-export const submissionProgress = writable<SubmissionProgress>();
+export const submissionProgress = writable<SubmissionProgress>({});
 
 export async function fetchSubmProgress() {
     try {