feat: create pdf export pdf in daftar gangguan berdasar media dan diselesaikan mobile apkt

src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue

@@ -14,7 +14,11 @@
       :hover-state-enabled="true"
       @selection-changed=""
       :column-width="100"
+<<<<<<< HEAD
       @exporting=""
+=======
+      @exporting="onExporting"
+>>>>>>> e9b05e7 (feat: create pdf export pdf in daftar gangguan berdasar media dan diselesaikan mobile apkt)
       :allow-column-resizing="true"
       column-resizing-mode="widget"
     >
@@ -66,7 +70,11 @@
         alignment="center"
         data-field="nama_pelapor"
         caption="Nama Pelapor"
+<<<<<<< HEAD
         cell-template="formatText"
+=======
+        cell-template="cellLeft"
+>>>>>>> e9b05e7 (feat: create pdf export pdf in daftar gangguan berdasar media dan diselesaikan mobile apkt)
       />
       <DxColumn
         css-class="custom-table-column"
@@ -74,7 +82,11 @@
         alignment="center"
         data-field="alamat_pelapor"
         caption="Alamat Pelapor"
+<<<<<<< HEAD
         cell-template="formatText"
+=======
+        cell-template="cellLeft"
+>>>>>>> e9b05e7 (feat: create pdf export pdf in daftar gangguan berdasar media dan diselesaikan mobile apkt)
       />
       <DxColumn
         css-class="custom-table-column"
@@ -90,7 +102,11 @@
         alignment="center"
         data-field="keterangan_pelapor"
         caption="Keterangan Pelapor"
+<<<<<<< HEAD
         cell-template="formatText"
+=======
+        cell-template="cellLeft"
+>>>>>>> e9b05e7 (feat: create pdf export pdf in daftar gangguan berdasar media dan diselesaikan mobile apkt)
       />
       <DxColumn
         css-class="custom-table-column"
@@ -130,7 +146,11 @@
         alignment="center"
         data-field="durasi_response_time"
         caption="Durasi Response Time"
+<<<<<<< HEAD
         cell-template="formatTime"
+=======
+        cell-template="data-waktu"
+>>>>>>> e9b05e7 (feat: create pdf export pdf in daftar gangguan berdasar media dan diselesaikan mobile apkt)
       />
       <DxColumn
         css-class="custom-table-column"
@@ -138,7 +158,11 @@
         alignment="center"
         data-field="durasi_recovery_time"
         caption="Durasi Recovery Time"
+<<<<<<< HEAD
         cell-template="formatTime"
+=======
+        cell-template="data-waktu"
+>>>>>>> e9b05e7 (feat: create pdf export pdf in daftar gangguan berdasar media dan diselesaikan mobile apkt)
       />
       <DxColumn
         css-class="custom-table-column"
@@ -162,7 +186,11 @@
         alignment="center"
         data-field="keterangan_media"
         caption="Keterangan Media"
+<<<<<<< HEAD
         cell-template="formatText"
+=======
+        cell-template="cellLeft"
+>>>>>>> e9b05e7 (feat: create pdf export pdf in daftar gangguan berdasar media dan diselesaikan mobile apkt)
       />
 
       <template #cellCenter="{ data }">
@@ -204,6 +232,11 @@ import {
 import { useQuery } from '@vue/apollo-composable'
 import { dummyData } from '@/utils/dummy'
 import { queries } from '@/utils/api/api.graphql'
+import { jsPDF } from 'jspdf'
+import autoTable from 'jspdf-autotable'
+import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import { saveAs } from 'file-saver'
+import { Workbook } from 'exceljs'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -248,6 +281,74 @@ const filterData = (params: any) => {
   })
 }
 
+const onExporting = (e: any) => {
+  if (e.format === 'pdf') {
+    const doc = new jsPDF({
+      orientation: 'landscape'
+    })
+
+    autoTable(doc, {
+      head: [
+        [
+          'No Laporan',
+          'Nama Pelapor',
+          'Alamat Pelapor',
+          'No Telp Pelapor',
+          'Keterangan Pelapor',
+          'Status',
+          'Tgl Lapor',
+          'Tgl Response',
+          'Tgl Recovery',
+          'Durasi Response Time',
+          'Durasi Recovery Time',
+          'Sumber Lapor',
+          'Tgl Media',
+          'Keterangan Media'
+        ]
+      ],
+      body: data.value.map((item) => [
+        item.no_laporan,
+        item.nama_pelapor,
+        item.alamat_pelapor,
+        item.no_telp_pelapor,
+        item.keterangan_pelapor,
+        item.status_akhir,
+        item.waktu_lapor,
+        item.waktu_response,
+        item.waktu_recovery,
+        item.durasi_response_time,
+        item.durasi_recovery_time,
+        item.nama_posko,
+        item.waktu_media,
+        item.keterangan_media
+      ]),
+      styles: {
+        fontSize: 4
+      }
+    })
+
+    doc.save('Daftar Gangguan Berdasarkan Media.pdf')
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Daftar Gangguan Berdasarkan Media')
+
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(
+          new Blob([buffer], { type: 'application/octet-stream' }),
+          'Daftar Gangguan Berdasarkan Media.xlsx'
+        )
+      })
+    })
+
+    e.cancel = true
+  }
+}
+
 const filters = ref()
 onMounted(() => {
   if (import.meta.env.DEV) {

src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue

@@ -14,7 +14,7 @@
       :hover-state-enabled="true"
       @selection-changed=""
       :column-width="100"
-      @exporting=""
+      @exporting="onExporting"
       :allow-column-resizing="true"
       column-resizing-mode="widget"
     >
@@ -204,6 +204,11 @@ import {
 import { useQuery } from '@vue/apollo-composable'
 import { dummyData } from '@/utils/dummy'
 import { queries } from '@/utils/api/api.graphql'
+import { jsPDF } from 'jspdf'
+import autoTable from 'jspdf-autotable'
+import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import { saveAs } from 'file-saver'
+import { Workbook } from 'exceljs'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -250,6 +255,74 @@ const filterData = (params: any) => {
   })
 }
 
+const onExporting = (e: any) => {
+  if (e.format === 'pdf') {
+    const doc = new jsPDF({
+      orientation: 'landscape'
+    })
+
+    autoTable(doc, {
+      head: [
+        [
+          'No Laporan',
+          'Tgl Lapor',
+          'Tgl Response',
+          'Tgl Recovery',
+          'Durasi Response Time',
+          'Durasi Recovery Time',
+          'Status',
+          'IDPEL/NO METER',
+          'Nama Pelapor',
+          'Alamat Pelapor',
+          'No Telp Pelapor',
+          'Keterangan Pelapor',
+          'Sumber Lapor',
+          'Posko'
+        ]
+      ],
+      body: data.value.map((item) => [
+        item.no_laporan,
+        item.waktu_lapor,
+        item.waktu_response,
+        item.waktu_recovery,
+        item.durasi_response_time,
+        item.durasi_recovery_time,
+        item.status_akhir,
+        item.idpel_nometer,
+        item.nama_pelapor,
+        item.alamat_pelapor,
+        item.no_telp_pelapor,
+        item.keterangan_pelapor,
+        item.media,
+        item.nama_posko
+      ]),
+      styles: {
+        fontSize: 4
+      }
+    })
+
+    doc.save('Daftar Gangguan Diselesaikan Mobile APKT.pdf')
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Daftar Gangguan Diselesaikan Mobile APKT')
+
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(
+          new Blob([buffer], { type: 'application/octet-stream' }),
+          'Daftar Gangguan Diselesaikan Mobile APKT.xlsx'
+        )
+      })
+    })
+
+    e.cancel = true
+  }
+}
+
 const filters = ref()
 onMounted(() => {
   if (import.meta.env.DEV) {