feat: add save to pdf logic (#2)

* feat: add save to pdf logic

* fix: make it fill the page

* fix: subtle pdf and web fix

* chore: feat compose ports

---------

Co-authored-by: Merul Dhiman <[email protected]>
Co-authored-by: Merul Dhiman <[email protected]>

apps/client/package.json

@@ -30,6 +30,7 @@
 		"flowbite-svelte": "^0.47.1",
 		"flowbite-svelte-icons": "^1.6.2",
 		"globals": "^15.0.0",
+		"html2pdf.js": "^0.10.2",
 		"mdsvex": "^0.11.2",
 		"prettier": "^3.3.2",
 		"prettier-plugin-svelte": "^3.2.6",
@@ -44,6 +45,7 @@
 	"dependencies": {
 		"@sveltejs/adapter-node": "^5.2.8",
 		"axios": "^1.7.7",
+		"moment": "^2.30.1",
 		"svelte-qrcode-action": "^1.0.2"
 	}
 }

apps/client/src/routes/(private)/new-vcv/+page.svelte

@@ -15,6 +15,7 @@
 	import Step2 from './steps/step2.svelte';
 	import Step3 from './steps/step3.svelte';
 	import Step4 from './steps/step4.svelte';
+  import Step5 from './steps/step5.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
 	import { goto } from '$app/navigation';
 	import { apiClient } from '$lib/axios/axios';
@@ -40,6 +41,10 @@
 	let editing = false;
 	let cvId: string;
 
+	let makePdf: HTMLDivElement;
+
+	let handlePdfSave: () => void;
+
 	function handleGoBack() {
 		if (step === 0) {
 			goto('/dashboard');
@@ -75,6 +80,19 @@
 	}
 
 	onMount(async () => {
+		const html2pdf = (await import('html2pdf.js')).default;
+
+		let html2PdfWorker = html2pdf();
+		handlePdfSave = () => {
+			let opt = {
+				margin: [0, 0, 0, 0],
+				filename: 'YourVCV.pdf',
+				image: { type: 'png' },
+				html2canvas: { scale: 3 },
+				jsPDF: { unit: 'mm', format: 'a4', orientation: 'p', putOnlyUsedFonts: true }
+			};
+			html2PdfWorker.from(makePdf).set(opt).save();
+		};
 		const urlParams = new URLSearchParams($page.url.search);
 		const urlContainerId = urlParams.get('id');
 		if (urlContainerId) {
@@ -91,6 +109,7 @@
 			credentials = data.credentials;
 			experiences = data.experiences;
 		}
+ 
 	});
 </script>
 
@@ -105,18 +124,24 @@
 				{:else if step === 2}
 					<Step3 bind:selectedCredentials={credentials}></Step3>
 				{:else if step === 3}
-					<Step4 {cvId} bind:experiences></Step4>
+					<Step4></Step4>
+				{:else if step === 4}
+					<Step5 onSavePdfClick={handlePdfSave}></Step5>
 				{/if}
 			</div>
 			<div class="flex w-full justify-between items-center">
 				<!-- svelte-ignore a11y_click_events_have_key_events -->
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				<div class="flex w-full cursor-pointer text-sm" on:click={handleGoBack}>
-					<ChevronLeftOutline></ChevronLeftOutline>Go Back
-				</div>
-				<div class="w-full flex justify-end">
-					<Button color="yellow" on:click={handleContinue}>Continue</Button>
-				</div>
+				{#if step > 0}
+					<div class="flex w-full cursor-pointer text-sm" on:click={handleGoBack}>
+						<ChevronLeftOutline></ChevronLeftOutline>Go Back
+					</div>
+				{/if}
+				{#if step < 4}
+					<div class="w-full flex justify-end">
+						<Button color="yellow" on:click={handleContinue}>Continue</Button>
+					</div>
+				{/if}
 			</div>
 		</div>
 	</Card>

apps/client/src/routes/(private)/new-vcv/steps/step5.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import Button from '$lib/components/ui/Button.svelte';
+
+	export let onSavePdfClick: () => void;
+</script>
+
+<h1 class="text-2xl font-bold text-gray-700 mb-5">Export your VCV</h1>
+
+<div class="flex flex-col gap-3">
+	<div class="flex gap-5">
+		<Button color="light-blue" on:click={onSavePdfClick}>Export to PDF</Button>
+	</div>
+</div>

dev.docker-compose.yml

@@ -7,7 +7,7 @@ services:
       context: .
       dockerfile: ./docker/dev/Dockerfile.client
     ports:
-      - 5173:5173
+      - 51733:5173
     env_file:
       - .env
     develop:
@@ -30,7 +30,7 @@ services:
       context: .
       dockerfile: ./docker/dev/Dockerfile.server
     ports:
-      - 1209:1209
+      - 12923:1209
     develop:
       watch:
         - action: sync
@@ -56,7 +56,7 @@ services:
     volumes:
       - ~/data/vcv/db:/var/lib/postgresql/data
     ports:
-      - 5434:5432
+      - 5433:5432
 
 networks:
   host-bridge:

package.json

@@ -17,10 +17,5 @@
     "format": "pnpm -F=* format",
     "lint": "pnpm -F=* lint",
     "dev": "docker compose -f ./dev.docker-compose.yml up"
-  },
-  "dependencies": {
-    "html2pdf": "^0.0.11",
-    "jspdf": "^2.5.2",
-    "moment": "^2.30.1"
   }
 }