From fc9537ef832da9d2f5709fa3bda32feca0887f96 Mon Sep 17 00:00:00 2001
From: Davide Di Modica <webmaster.ddm@gmail.com>
Date: Sat, 21 Sep 2024 18:26:32 +0200
Subject: [PATCH] feat: add cases export feature

---
 .../incidentManagement/cases/CasesExport.vue  | 102 ++++++++++++++++++
 .../incidentManagement/cases/CasesList.vue    |   5 +-
 2 files changed, 106 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/incidentManagement/cases/CasesExport.vue

diff --git a/frontend/src/components/incidentManagement/cases/CasesExport.vue b/frontend/src/components/incidentManagement/cases/CasesExport.vue
new file mode 100644
index 00000000..527c0a2e
--- /dev/null
+++ b/frontend/src/components/incidentManagement/cases/CasesExport.vue
@@ -0,0 +1,102 @@
+<template>
+	<n-dropdown placement="bottom-start" trigger="click" :options="customersOptions" @select="exportCases">
+		<n-button :size :loading="exporting" secondary @click="load()">
+			<template #icon>
+				<Icon :name="DownloadIcon" :size="14" />
+			</template>
+			Export
+		</n-button>
+	</n-dropdown>
+</template>
+
+<script setup lang="ts">
+import type { Customer } from "@/types/customers.d"
+import type { Size } from "naive-ui/es/button/src/interface"
+import Api from "@/api"
+import Icon from "@/components/common/Icon.vue"
+import { useSettingsStore } from "@/stores/settings"
+import { formatDate } from "@/utils"
+import { saveAs } from "file-saver"
+import { NButton, NDropdown, useMessage } from "naive-ui"
+import { computed, inject, ref, type Ref } from "vue"
+
+const { size } = defineProps<{ size?: Size }>()
+
+const DownloadIcon = "carbon:cloud-download"
+const loadingCustomersList = ref(false)
+const dFormats = useSettingsStore().dateFormat
+const exporting = ref(false)
+const message = useMessage()
+const customersList = inject<Ref<Customer[]>>("customers-list", ref([]))
+
+const customersOptions = computed(() => {
+	return [
+		{
+			label: "Export All Cases",
+			key: "--all--"
+		},
+		{
+			label: `Export by Customer${loadingCustomersList.value ? "..." : ""}`,
+			key: "customer",
+			disabled: loadingCustomersList.value,
+			children: loadingCustomersList.value
+				? undefined
+				: customersList.value.map(o => ({
+						label: `#${o.customer_code} - ${o.customer_name}`,
+						key: o.customer_code
+					}))
+		}
+	]
+})
+
+function exportCases(key: string) {
+	exporting.value = true
+
+	const fileName =
+		key === "--all--"
+			? `cases_${formatDate(new Date(), dFormats.datetimesec)}.csv`
+			: `cases_customer:${key}_${formatDate(new Date(), dFormats.datetimesec)}.csv`
+
+	Api.incidentManagement
+		.exportCases(key === "--all--" ? undefined : key)
+		.then(res => {
+			if (res.data) {
+				saveAs(new Blob([res.data], { type: "text/csv;charset=utf-8" }), fileName)
+			} else {
+				message.warning("An error occurred. Please try again later.")
+			}
+		})
+		.catch(err => {
+			message.error(err.response?.data?.message || "An error occurred. Please try again later.")
+		})
+		.finally(() => {
+			exporting.value = false
+		})
+}
+
+function getCustomers() {
+	loadingCustomersList.value = true
+
+	Api.customers
+		.getCustomers()
+		.then(res => {
+			if (res.data.success) {
+				customersList.value = res.data?.customers || []
+			} else {
+				message.warning(res.data?.message || "An error occurred. Please try again later.")
+			}
+		})
+		.catch(err => {
+			message.error(err.response?.data?.message || "An error occurred. Please try again later.")
+		})
+		.finally(() => {
+			loadingCustomersList.value = false
+		})
+}
+
+function load() {
+	if (!customersList.value.length) {
+		getCustomers()
+	}
+}
+</script>
diff --git a/frontend/src/components/incidentManagement/cases/CasesList.vue b/frontend/src/components/incidentManagement/cases/CasesList.vue
index b3fb9403..95d45494 100644
--- a/frontend/src/components/incidentManagement/cases/CasesList.vue
+++ b/frontend/src/components/incidentManagement/cases/CasesList.vue
@@ -36,7 +36,9 @@
 					</div>
 				</n-popover>
 
-				<CaseCreationButton :only-icon="caseCreationButtonOnlyIcon" @submitted="getData()" />
+				<CasesExport size="small" />
+
+				<CaseCreationButton :only-icon="caseCreationButtonOnlyIcon" size="small" @submitted="getData()" />
 			</div>
 			<n-pagination
 				v-model:page="currentPage"
@@ -179,6 +181,7 @@ import {
 import { computed, nextTick, onBeforeMount, provide, ref, toRefs, watch } from "vue"
 import CaseCreationButton from "./CaseCreationButton.vue"
 import CaseItem from "./CaseItem.vue"
+import CasesExport from "./CasesExport.vue"
 
 export interface CasesListFilter {
 	type: CasesFilterTypes