feat: add frontend export function

backend/core/templates/core/action_plan_pdf.html

@@ -16,6 +16,8 @@ <h1 class="flex justify-center">Action plan</h1>
         <p class="font-semibold text-lg"> {% trans "Project" %}: {{ compliance_assessment.project.name }}</p>
         <p class="font-semibold text-lg">/</p>
         <p class="font-semibold text-lg"> {% trans "Audit" %}: {{ compliance_assessment.name }} - {{ compliance_assessment.version }}</p>
+        <p class="font-semibold text-lg">/</p>
+        <p class="font-semibold text-lg"> {% trans "Framework" %}: {{ compliance_assessment.framework }}</p>
     </div>
     <p class="p-2 m-2 text-lg font-semibold"> {% trans "Associated applied controls" %}: </p>
     <p class="m-2 p-2">{% trans "Separated by status and sorted by eta" %}</p>

frontend/messages/en.json

@@ -519,5 +519,6 @@
 	"actionPlan": "Action plan",
 	"noStatus": "No status",
 	"actionPlanHelpText": "Separated by status and sorted by eta",
-	"requirementsCount": "Requirements count"
+	"requirementsCount": "Requirements count",
+	"asZIP": "as ZIP"
 }

frontend/src/routes/(app)/compliance-assessments/[id=uuid]/+page.svelte

@@ -2,7 +2,8 @@
 	import { page } from '$app/stores';
 	import RecursiveTreeView from '$lib/components/TreeView/RecursiveTreeView.svelte';
 	import { breadcrumbObject } from '$lib/utils/stores';
-	import type { TreeViewNode } from '@skeletonlabs/skeleton';
+	import type { PopupSettings, TreeViewNode } from '@skeletonlabs/skeleton';
+	import { popup } from '@skeletonlabs/skeleton';
 	import type { PageData } from './$types';
 	import TreeViewItemContent from './TreeViewItemContent.svelte';
 	import TreeViewItemLead from './TreeViewItemLead.svelte';
@@ -103,6 +104,12 @@
 
 	expandedNodes = $expandedNodesState;
 	$: expandedNodesState.set(expandedNodes);
+
+	const popupDownload: PopupSettings = {
+		event: 'click',
+		target: 'popupDownload',
+		placement: 'bottom'
+	};
 </script>
 
 <div class="flex flex-col space-y-4 whitespace-pre-line">
@@ -183,9 +190,24 @@
 		</div>
 		<div class="flex flex-col space-y-2 ml-4">
 			<div class="flex flex-row space-x-2">
-				<a href={`${$page.url.pathname}/export`} class="btn variant-filled-primary h-fit"
-					><i class="fa-solid fa-download mr-2" /> {m.exportButton()}</a
+				<button class="btn variant-filled-primary" use:popup={popupDownload}
+					><i class="fa-solid fa-download mr-2" />{m.exportButton()}</button
 				>
+				<div
+					class="card whitespace-nowrap bg-white py-2 w-fit shadow-lg space-y-1"
+					data-popup="popupDownload"
+				>
+					<p class="block px-4 py-2 text-sm text-gray-800">{m.complianceAssessment()}</p>
+					<a
+						href="/compliance-assessments/{data.compliance_assessment.id}/export"
+						class="block px-4 py-2 text-sm text-gray-800 hover:bg-gray-200">... {m.asZIP()}</a
+					>
+					<p class="block px-4 py-2 text-sm text-gray-800">{m.actionPlan()}</p>
+					<a
+						href="/compliance-assessments/{data.compliance_assessment.id}/action-plan/export/pdf"
+						class="block px-4 py-2 text-sm text-gray-800 hover:bg-gray-200">... {m.asPDF()}</a
+					>
+				</div>
 				{#if canEditObject}
 					<a
 						href={`${$page.url.pathname}/edit?next=${$page.url.pathname}`}

frontend/src/routes/(app)/compliance-assessments/[id=uuid]/action-plan/+page.svelte

@@ -107,6 +107,15 @@
 			>{data.compliance_assessment.name} - {data.compliance_assessment.version}</a
 		>
 	</p>
+	<p>/</p>
+	<p class="font-semibold text-lg">
+		{m.framework()}:
+		<a
+			class="unstyled text-primary-500 hover:text-primary-700 cursor-pointer"
+			href="/frameworks/{data.compliance_assessment.framework.id}/"
+			>{data.compliance_assessment.framework.str}</a
+		>
+	</p>
 </div>
 <div class="flex flex-col space-y-4 bg-white p-4 shadow rounded-lg space-x-2">
 	<div>

frontend/src/routes/(app)/compliance-assessments/[id=uuid]/action-plan/export/pdf/+server.ts

@@ -0,0 +1,22 @@
+import { BASE_API_URL } from '$lib/utils/constants';
+
+import { error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+export const GET: RequestHandler = async ({ fetch, params }) => {
+	const URLModel = 'compliance-assessments';
+	const endpoint = `${BASE_API_URL}/${URLModel}/${params.id}/action_plan_pdf/`;
+
+	const res = await fetch(endpoint);
+	if (!res.ok) {
+		error(400, 'Error fetching the PDF file');
+	}
+
+	const fileName = `AP-${params.id}-${new Date().toISOString()}.pdf`;
+
+	return new Response(await res.blob(), {
+		headers: {
+			'Content-Type': 'text/pdf',
+			'Content-Disposition': `attachment; filename="${fileName}"`
+		}
+	});
+};