feat: add pdf output on case report

socfortress · Nov 5, 2024 · 5708185 · 5708185
1 parent 8657162
commit 5708185
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 26 deletions.
diff --git a/frontend/src/api/endpoints/incidentManagement.ts b/frontend/src/api/endpoints/incidentManagement.ts
@@ -388,8 +388,9 @@ export default {
 			`/incidents/db_operations/case-report-template/do-default-template-exists`
 		)
 	},
-	generateCaseReport(payload: CaseReportPayload) {
-		return HttpClient.post<Blob>(`/incidents/report/generate-report-docx`, payload, {
+	generateCaseReport(payload: CaseReportPayload, type: "docx" | "pdf") {
+		const url = type === "docx" ? `/incidents/report/generate-report-docx` : `/incidents/report/generate-report-pdf`
+		return HttpClient.post<Blob>(url, payload, {
 			responseType: "blob"
 		})
 	},

diff --git a/frontend/src/components/incidentManagement/cases/CaseReportButton.vue b/frontend/src/components/incidentManagement/cases/CaseReportButton.vue
@@ -10,7 +10,7 @@
 		v-model:show="showForm"
 		display-directive="show"
 		preset="card"
-		:style="{ maxWidth: 'min(600px, 90vw)', minHeight: 'min(270px, 90vh)', overflow: 'hidden' }"
+		:style="{ maxWidth: 'min(600px, 90vw)', minHeight: 'min(240px, 90vh)', overflow: 'hidden' }"
 		title="Generate Report"
 		:bordered="false"
 		segmented
@@ -21,18 +21,20 @@
 					<n-form-item label="Template" path="template_name">
 						<CaseReportTemplateSelect v-model:value="form.template_name" />
 					</n-form-item>
-					<n-form-item label="Filename" path="file_name">
-						<n-input-group>
-							<n-input
-								v-model:value.trim="form.file_name"
-								placeholder="Please insert File Name"
-								clearable
-							/>
-							<n-input-group-label>.docx</n-input-group-label>
-						</n-input-group>
-					</n-form-item>
-
-					<div class="mt-8 flex justify-between gap-4">
+					<n-collapse-transition :show="!!form.template_name">
+						<n-form-item label="Filename" path="file_name">
+							<n-input-group>
+								<n-input
+									v-model:value.trim="form.file_name"
+									placeholder="Please insert File Name"
+									clearable
+								/>
+								<n-input-group-label v-if="reportType">.{{ reportType }}</n-input-group-label>
+							</n-input-group>
+						</n-form-item>
+					</n-collapse-transition>
+
+					<div class="mt-3 flex justify-between gap-4">
 						<n-button :disabled="exporting" @click="reset()">Reset</n-button>
 						<n-button
 							type="primary"
@@ -63,6 +65,7 @@ import {
 	type FormRules,
 	type FormValidationError,
 	NButton,
+	NCollapseTransition,
 	NForm,
 	NFormItem,
 	NInput,
@@ -84,6 +87,17 @@ const showForm = ref(false)
 const message = useMessage()
 const form = ref<DeepNullable<CaseReportPayload>>(getClearForm())
 const formRef = ref<FormInst | null>(null)
+const reportType = computed<"docx" | "pdf" | null>(() => {
+	const ext = form.value.template_name?.split(".").pop()?.toLowerCase() || null
+	switch (ext) {
+		case "docx":
+			return "docx"
+		case "html":
+			return "pdf"
+		default:
+			return null
+	}
+})
 
 const rules: FormRules = {
 	template_name: {
@@ -142,25 +156,34 @@ function resetForm() {
 }
 
 function exportCases() {
-	if (!form.value.file_name || !form.value.template_name) return
+	if (!form.value.file_name || !form.value.template_name || !reportType.value) return
 
 	exporting.value = true
 
+	const extension = reportType.value === "pdf" ? "pdf" : "docx"
+	const mimeType =
+		reportType.value === "pdf"
+			? "application/pdf"
+			: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+
 	const fileName = form.value.file_name
-		? `${form.value.file_name}.docx`
-		: `case:${caseId}_report_${formatDate(new Date(), dFormats.datetimesec)}.docx`
+		? `${form.value.file_name}.${extension}`
+		: `case:${caseId}_report_${formatDate(new Date(), dFormats.datetimesec)}.${extension}`
 
 	Api.incidentManagement
-		.generateCaseReport({
-			case_id: caseId,
-			file_name: form.value.file_name,
-			template_name: form.value.template_name
-		})
+		.generateCaseReport(
+			{
+				case_id: caseId,
+				file_name: form.value.file_name,
+				template_name: form.value.template_name
+			},
+			reportType.value
+		)
 		.then(res => {
 			if (res.data) {
 				saveAs(
 					new Blob([res.data], {
-						type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+						type: mimeType
 					}),
 					fileName
 				)

diff --git a/frontend/src/components/incidentManagement/cases/CaseReportTemplateManager.vue b/frontend/src/components/incidentManagement/cases/CaseReportTemplateManager.vue
@@ -29,14 +29,20 @@
 						v-model:file-list="fileList"
 						:max="1"
 						:disabled="uploading"
-						accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document, .docx, .DOCX"
+						accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document, .docx, .DOCX, text/html, .html, .HTML"
 					>
 						<n-upload-dragger>
 							<div>
 								<Icon :name="UploadIcon" :size="28" :depth="3"></Icon>
 							</div>
 							<div class="font-semibold">Click or drag a file to this area to upload</div>
-							<p class="mt-2">Only .docx files are accepted</p>
+							<p class="mt-2">
+								Only
+								<strong>.docx</strong>
+								and
+								<strong>.html</strong>
+								files are accepted
+							</p>
 						</n-upload-dragger>
 					</n-upload>
 

diff --git a/frontend/src/components/incidentManagement/cases/CaseReportTemplateSelect.vue b/frontend/src/components/incidentManagement/cases/CaseReportTemplateSelect.vue
@@ -7,6 +7,7 @@
 			clearable
 			:loading="loadingOptions"
 			class="overflow-hidden"
+			to="body"
 		/>
 		<n-button secondary @click="showManagerDialog = true">
 			<template #icon>