feat: create export pdf and xlsx in monalisa jumlah kali gangguan and dispatching time

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue

@@ -1,5 +1,6 @@
 <template>
   <Filters
+    @run-report="() => exportToPDF(reportMeta, data, true)"
     @reset-form="data = []"
     :report-button="true"
     @run-search="() => filterData(filters)"
@@ -710,12 +711,6 @@ import {
   DxSummary,
   DxTotalItem
 } from 'devextreme-vue/data-grid'
-import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { useQuery } from '@vue/apollo-composable'
 import { getMonthName } from '@/utils/texts'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
@@ -725,6 +720,12 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import InputText from '@/components/InputText.vue'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
+import {
+  exportToPDF,
+  exportToXLSX,
+  exportDetailToPDF,
+  exportDetailToXLSX
+} from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -747,33 +748,36 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const reportMeta = ref({
+  regional: { id: 0, name: 'Semua Regional' },
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
+  bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
+  tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
+  periode: '',
+  lastMonth: new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1,
+  lastYearMoM: new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear(),
+  currentMonth: new Date().getMonth(),
+  currentYear: new Date().getFullYear(),
+  lastYear: new Date().getFullYear() - 1
+})
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
-    const doc = new jsPDF()
-
-    exportToPdf({
-      jsPDFDocument: doc,
-      component: e.component,
-      indent: 5
-    }).then(() => {
-      doc.save(`.pdf`)
-    })
+    exportToPDF(reportMeta.value, data.value)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta.value, e)
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
+  }
+}
 
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
+const onExportingDetail = (e: any) => {
+  if (e.format === 'pdf') {
+    exportDetailToPDF(reportMeta.value, dataSub.value)
+  } else if (e.format === 'xlsx') {
+    exportDetailToXLSX(reportMeta.value, e)
+  } else {
   }
 }
 
@@ -801,6 +805,21 @@ const filterData = async (params: any) => {
       } else {
         data.value = []
       }
+
+      reportMeta.value = {
+        regional: regional,
+        uid: uid,
+        up3: up3,
+        ulp: ulp,
+        bulan: bulan,
+        tahun: tahun,
+        periode: `${bulan.name} ${tahun.name}`,
+        lastMonth: lastMonth.value,
+        lastYearMoM: lastYearMoM.value,
+        currentMonth: currentMonth.value,
+        currentYear: currentYear.value,
+        lastYear: lastYear.value
+      }
     })
     .catch((err) => {
       console.error(err)
@@ -877,8 +896,6 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const onExportingDetail = (e: any) => {}
-
 const filters = ref()
 onMounted(() => {
   if (import.meta.env.DEV) {

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue

@@ -1,5 +1,6 @@
 <template>
   <Filters
+    @run-report="() => exportToPDF(reportMeta, data, true)"
     :report-button="true"
     @reset-form="data = []"
     @run-search="filterData(filters)"
@@ -287,17 +288,15 @@ import {
   DxSummary,
   DxTotalItem
 } from 'devextreme-vue/data-grid'
-import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { useQuery } from '@vue/apollo-composable'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
+import {
+  exportToPDF,
+  exportToXLSX
+} from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -313,33 +312,27 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const reportMeta = ref({
+  regional: { id: 0, name: 'Semua Regional' },
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
+  bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
+  tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
+  periode: '',
+  lastMonth: new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1,
+  lastYearMoM: new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear(),
+  currentMonth: new Date().getMonth(),
+  currentYear: new Date().getFullYear(),
+  lastYear: new Date().getFullYear() - 1
+})
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
-    const doc = new jsPDF()
-
-    exportToPdf({
-      jsPDFDocument: doc,
-      component: e.component,
-      indent: 5
-    }).then(() => {
-      doc.save(`.pdf`)
-    })
+    exportToPDF(reportMeta.value, data.value)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta.value, e)
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
-
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
   }
 }
 const lastMonth = ref(new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1)
@@ -381,6 +374,21 @@ const filterData = async (params: any) => {
       } else {
         data.value = []
       }
+
+      reportMeta.value = {
+        regional: regional,
+        uid: uid,
+        up3: up3,
+        ulp: ulp,
+        bulan: bulan,
+        tahun: tahun,
+        periode: `${bulan.name} ${tahun.name}`,
+        lastMonth: lastMonth.value,
+        lastYearMoM: lastYearMoM.value,
+        currentMonth: currentMonth.value,
+        currentYear: currentYear.value,
+        lastYear: lastYear.value
+      }
     })
     .catch((err) => {
       console.error(err)