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

---
 frontend/src/@api/candidate.ts                | 59 ++++++++++++-------
 .../dashboard/CoverLetterUploadCard.svelte    | 20 +++++++
 .../dashboard/DashboardUploadCard.svelte      |  8 ++-
 .../PortfolioLetterUploadCard.svelte          | 20 +++++++
 .../dashboard/PortfolioZipUploadCard.svelte   | 20 +++++++
 frontend/src/routes/dashboard/+page.svelte    |  9 ++-
 frontend/src/stores/portfolio.ts              |  2 +-
 7 files changed, 113 insertions(+), 25 deletions(-)
 create mode 100644 frontend/src/lib/components/dashboard/CoverLetterUploadCard.svelte
 create mode 100644 frontend/src/lib/components/dashboard/PortfolioLetterUploadCard.svelte
 create mode 100644 frontend/src/lib/components/dashboard/PortfolioZipUploadCard.svelte

diff --git a/frontend/src/@api/candidate.ts b/frontend/src/@api/candidate.ts
index cc85244..ded10b8 100644
--- a/frontend/src/@api/candidate.ts
+++ b/frontend/src/@api/candidate.ts
@@ -1,5 +1,6 @@
 import axios, { type AxiosProgressEvent } from 'axios';
 import type { CandidateData, CandidateLogin } from 'src/stores/candidate';
+import type { SubmissionProgress } from 'src/stores/portfolio';
 import { API_URL, errorHandler } from '.';
 
 export async function apiWhoami(): Promise<string> {
@@ -48,17 +49,29 @@ export async function apiFetchDetails(): Promise<CandidateData> {
 	}
 }
 
+export async function apiFetchSubmissionProgress(): Promise<SubmissionProgress> {
+	try {
+		const res = await axios.get(API_URL + '/candidate/portfolio/submission_progress', { withCredentials: true });
+		return res.data;
+	} catch (e: any) {
+		throw errorHandler(e, 'Failed to fetch submission progress');
+	}
+}		
+
 export async function apiUploadCoverLetter(
 	letter: File,
 	progressReporter: (progress: AxiosProgressEvent) => void
 ): Promise<boolean> {
 	try {
-		const res = await axios.post(
-			API_URL + '/candidate/cover_letter',
-			{ letter: letter },
-			{ withCredentials: true, onUploadProgress: progressReporter }
-		);
-		return res.data === 'true';
+		const res = await axios.post(API_URL + '/candidate/add/cover_letter', letter, {
+			withCredentials: true,
+			data: letter,
+			headers: {
+				'Content-Type': 'application/pdf',
+			},
+			onUploadProgress: progressReporter,
+		});
+		return true;
 	} catch (e: any) {
 		throw errorHandler(e, 'Failed to upload cover letter');
 	}
@@ -69,14 +82,17 @@ export async function apiUploadPortfolioLetter(
 	progressReporter: (progress: AxiosProgressEvent) => void
 ): Promise<boolean> {
 	try {
-		const res = await axios.post(
-			API_URL + '/candidate/portfolio_letter',
-			{ letter: letter },
-			{ withCredentials: true, onUploadProgress: progressReporter }
-		);
-		return res.data === 'true';
+		const res = await axios.post(API_URL + '/candidate/add/portfolio_letter', letter, {
+			withCredentials: true,
+			data: letter,
+			headers: {
+				'Content-Type': 'application/pdf',
+			},
+			onUploadProgress: progressReporter,
+		});
+		return true;
 	} catch (e: any) {
-		throw errorHandler(e, 'Failed to upload portfolio letter');
+		throw errorHandler(e, 'Failed to upload cover letter');
 	}
 }
 
@@ -85,13 +101,16 @@ export async function apiUploadPortfolioZip(
 	progressReporter: (progress: AxiosProgressEvent) => void
 ): Promise<boolean> {
 	try {
-		const res = await axios.post(
-			API_URL + '/candidate/portfolio_zip',
-			{ portfolio: portfolio },
-			{ withCredentials: true, onUploadProgress: progressReporter }
-		);
-		return res.data === 'true';
+		const res = await axios.post(API_URL + '/candidate/add/portfolio_zip', portfolio, {
+			withCredentials: true,
+			data: portfolio,
+			headers: {
+				'Content-Type': 'application/zip',
+			},
+			onUploadProgress: progressReporter,
+		});
+		return true;
 	} catch (e: any) {
-		throw errorHandler(e, 'Failed to upload portfolio zip');
+		throw errorHandler(e, 'Failed to upload cover letter');
 	}
 }
diff --git a/frontend/src/lib/components/dashboard/CoverLetterUploadCard.svelte b/frontend/src/lib/components/dashboard/CoverLetterUploadCard.svelte
new file mode 100644
index 0000000..3b02f0c
--- /dev/null
+++ b/frontend/src/lib/components/dashboard/CoverLetterUploadCard.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { AxiosProgressEvent } from "axios";
+	import { apiUploadCoverLetter } from "../../../@api/candidate";
+	import DashboardUploadCard from "./DashboardUploadCard.svelte";
+
+    const onFileDrop = async (file: File) => {
+        await apiUploadCoverLetter(file, (progressEvent: AxiosProgressEvent) => {
+            console.log(progressEvent.progress)
+        });
+    }
+
+</script>
+
+
+<DashboardUploadCard 
+    on:filedrop={e => onFileDrop(e.detail)}
+    title="Motivační dopis"
+    filetype="PDF"
+    filesize="10 MB">
+</DashboardUploadCard>
diff --git a/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte b/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte
index ee8843e..87e50f6 100644
--- a/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte
+++ b/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
 	import FileType from './FileType.svelte';
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
 
 	export let title: string;
 	export let filetype: 'PDF' | 'ZIP';
@@ -30,6 +33,9 @@
 	
 	const onFileDrop = (dropped: Dropped) => {
 		console.log(dropped);
+		if (dropped.accepted.length > 0) {
+			dispatch('filedrop', dropped.accepted[0]);
+		}
 	};
 </script>
 
@@ -44,7 +50,7 @@
 		<FileDrop
 			multiple={false}
 			maxSize={filetype == 'PDF' ? 100_000_000 : 10_000_000}
-			accept={filetype == 'PDF' ? 'application/pdf' : 'application/octet-stream'}
+			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
new file mode 100644
index 0000000..5efbb6d
--- /dev/null
+++ b/frontend/src/lib/components/dashboard/PortfolioLetterUploadCard.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { AxiosProgressEvent } from "axios";
+	import { apiUploadPortfolioLetter } from "../../../@api/candidate";
+	import DashboardUploadCard from "./DashboardUploadCard.svelte";
+
+    const onFileDrop = async (file: File) => {
+        await apiUploadPortfolioLetter(file, (progressEvent: AxiosProgressEvent) => {
+            console.log(progressEvent.loaded)
+        });
+    }
+
+</script>
+
+
+<DashboardUploadCard
+    on:filedrop={e => onFileDrop(e.detail)} 
+    title="Portfolio"
+    filetype="PDF"
+    filesize="10 MB">
+</DashboardUploadCard>
diff --git a/frontend/src/lib/components/dashboard/PortfolioZipUploadCard.svelte b/frontend/src/lib/components/dashboard/PortfolioZipUploadCard.svelte
new file mode 100644
index 0000000..5df50df
--- /dev/null
+++ b/frontend/src/lib/components/dashboard/PortfolioZipUploadCard.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { AxiosProgressEvent } from "axios";
+	import { apiUploadPortfolioZip } from "../../../@api/candidate";
+	import DashboardUploadCard from "./DashboardUploadCard.svelte";
+
+    const onFileDrop = async (file: File) => {
+        await apiUploadPortfolioZip(file, (progressEvent: AxiosProgressEvent) => {
+            console.log(progressEvent.loaded)
+        });
+    }
+
+</script>
+
+
+<DashboardUploadCard
+    on:filedrop={e => onFileDrop(e.detail)} 
+    title="Další data"
+    filetype="ZIP"
+    filesize="100 MB">
+</DashboardUploadCard>
diff --git a/frontend/src/routes/dashboard/+page.svelte b/frontend/src/routes/dashboard/+page.svelte
index c08caa5..53557f4 100644
--- a/frontend/src/routes/dashboard/+page.svelte
+++ b/frontend/src/routes/dashboard/+page.svelte
@@ -7,6 +7,9 @@
 	import DashboardUploadCard from '$lib/components/dashboard/DashboardUploadCard.svelte';
 	import DashboardInfoCard from '$lib/components/dashboard/DashboardInfoCard.svelte';
 	import { candidateData, fetchDetails } from '../../stores/candidate';
+	import CoverLetterUploadCard from '$lib/components/dashboard/CoverLetterUploadCard.svelte';
+	import PortfolioLetterUploadCard from '$lib/components/dashboard/PortfolioLetterUploadCard.svelte';
+	import PortfolioZipUploadCard from '$lib/components/dashboard/PortfolioZipUploadCard.svelte';
 
 	
 	let fullName = "";
@@ -39,13 +42,13 @@
 			</DashboardInfoCard>
 		</div>
 		<div class="coverletter col-span-5">
-			<DashboardUploadCard title="Motivační dopis" filetype="PDF" filesize="10 MB" />
+			<CoverLetterUploadCard />
 		</div>
 		<div class="portfolio col-span-4">
-			<DashboardUploadCard title="Portfolio" filetype="PDF" filesize="10 MB" />
+			<PortfolioLetterUploadCard />
 		</div>
 		<div class="moreData col-span-4">
-			<DashboardUploadCard title="Další data" filetype="ZIP" filesize="100 MB" />
+			<PortfolioZipUploadCard />
 		</div>
 	</div>
 	<div class="dashboard dashboardMobile">
diff --git a/frontend/src/stores/portfolio.ts b/frontend/src/stores/portfolio.ts
index 302e05f..d925865 100644
--- a/frontend/src/stores/portfolio.ts
+++ b/frontend/src/stores/portfolio.ts
@@ -1,4 +1,4 @@
-import { apiFetchSubmissionProgress } from "../api/candidate";
+import { apiFetchSubmissionProgress } from "../@api/candidate";
 import { writable } from "svelte/store";
 
 export interface SubmissionProgress {