feat: implement server side in daftar gangguan melapor lebih dari 1 kali

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

@@ -1,5 +1,5 @@
 <template>
-  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
     <Type6 @update:filters="(value) => (filters = value)" />
   </Filters>
 
@@ -7,9 +7,10 @@
     <DxDataGrid
       ref="dataGridRef"
       :allow-column-reordering="true"
+      @option-changed="handleRequestChange"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
-      v-if="loadingData == false"
+      :remote-operations="true"
       :show-column-lines="true"
       :show-row-lines="false"
       :show-borders="true"
@@ -47,11 +48,12 @@
         :allow-export-selected-data="false"
       />
       <DxColumn
-        css-class="custom-table-column"
+        :allow-sorting="false"
+        css-class="custom-table-column !text-right"
         :width="50"
         alignment="center"
-        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
+        data-field="no"
         caption="No"
       />
       <DxColumn
@@ -310,7 +312,6 @@
           :row-alternation-enabled="true"
           :hover-state-enabled="true"
           @selection-changed="onDataSubSelectionChanged"
-          @exporting="onExporting"
           :allow-column-resizing="true"
           column-resizing-mode="widget"
         >
@@ -324,13 +325,12 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <!--  -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-          <DxExport
+          <!-- <DxExport
             :enabled="true"
             :formats="['pdf', 'xlsx', 'document']"
             :allow-export-selected-data="false"
-          />
+          /> -->
 
           <DxColumn
             css-class="custom-table-column"
@@ -415,7 +415,7 @@
     </div>
   </DetailDialog>
 
-  <BufferDialog v-if="loadingData || loadingSubData" />
+  <BufferDialog v-if="loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -436,7 +436,7 @@ import {
   DxSelection
 } from 'devextreme-vue/data-grid'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { onMounted, ref, reactive } from 'vue'
+import { ref, reactive } from 'vue'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, isNumber } from '@/utils/numbers'
 import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Gangguan/Daftar/DGangguan_MLD1K'
@@ -451,11 +451,11 @@ const requestOptions = reactive<IRequestOptions>({
   filter: null
 })
 
+const reportData: any = ref(null)
 const dataSub = ref<any[]>([])
 const dataSelected = ref<any>()
 const dataSubSelected = ref<any>()
 const dialogDetail = ref(false)
-const loadingData = ref(false)
 const loadingSubData = ref(false)
 const detailType = ref('form')
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -528,7 +528,6 @@ const setDetailType = (columnCaption: string) => {
 }
 
 const getDetail = async () => {
-  const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
   const query = {
@@ -656,19 +655,20 @@ const mapSearchOptions = (searchOptions: any) => {
   return result.filter((item: any) => item)
 }
 
-const filterData = async (params: any) => {
+const filterData = () => {
-  llowTableRequest.value = true
+  allowTableRequest.value = true
 
   const dataGrid = dataGridRef.value!.instance!
   const dataGridDataSource = dataGrid.getDataSource()
 
   dataGridDataSource.reload()
+}
 
-  resetData()
+const createQuery = (params: any) => {
   const { minJmlLapor, maxJmlLapor, posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
 
-  const query = {
+  return {
     minJmlLapor: minJmlLapor ? minJmlLapor : 1,
     maxJmlLapor: maxJmlLapor ? maxJmlLapor : 1,
     dateFrom: dateValue[0]
@@ -681,131 +681,31 @@ const filterData = async (params: any) => {
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   }
-  loadingData.value = true
-  await requestGraphQl(queries.gangguan.daftar.melaporLebihDariSatuKali, query)
-    .then((result) => {
-      if (result.data.data != undefined) {
-        data.value = result.data.data.daftarGangguanMelaporLebihDariSatuKali
-      } else {
-        data.value = []
 }
 
-      reportMeta.value = filters.value
+const onExporting = async (e: any) => {
-    })
+  const dataGrid = dataGridRef.value!.instance!
-    .catch((err) => {
+
-      console.error(err)
+  if (e.format === 'pdf' || e.format === 'document') {
-    })
+    reportData.value = await data.load()
-    .finally(() => {
-      loadingData.value = false
-    })
   }
 
-const onExporting = (e: any) => {
+  if (e.format === 'pdf' && reportData.value) {
-  if (e.format === 'pdf') {
+    dataGrid.beginCustomLoading('')
-    exportToPDF(reportMeta, data)
+    const pdf = await exportToPDF(reportMeta, reportData)
+
+    if (pdf) {
+      dataGrid.endCustomLoading()
+    }
   } else if (e.format === 'xlsx') {
-    exportToXLSX(reportMeta, data, e)
+    await exportToXLSX(reportMeta, e)
-  } else {
+  } else if (e.format === 'document' && reportData.value) {
-    exportToDOCX(reportMeta, data)
+    dataGrid.beginCustomLoading('')
-  }
+    const doc = await exportToDOCX(reportMeta, reportData)
-}
 
-onMounted(() => {
+    if (doc) {
-  if (import.meta.env.DEV) {
+      dataGrid.endCustomLoading()
-    data.value = [
+    }
-      {
-        no_laporan: 'G5423020100150',
-        pembuat_laporan: 'PLNMOBILE',
-        waktu_lapor: '01-02-2023 00:16:17',
-        waktu_response: '01-02-2023 00:56:28',
-        waktu_recovery: '01-02-2023 01:00:37',
-        jumlah_lapor: 0,
-        durasi_response_time: 2411,
-        durasi_recovery_time: 249,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'Raihana S. Rahmahadi',
-        alamat_pelapor: 'JL BKT RAFLESIA N8-16',
-        no_telp_pelapor: '6282138889101',
-        keterangan_pelapor:
-          'MCB LEMAH DAYA RI/2200VA. SESUAI INFO PELANGGAN SUDAH ADA PETUGAS YANG MENGHUBUNGI DIINFORMASIKAN AKAN ADA PETUGAS YANG DATANG KE LOKASI.',
-        media: 'PLN Mobile',
-        nama_posko: 'POSKO CIRACAS'
-      },
-      {
-        no_laporan: 'G5423020100985',
-        pembuat_laporan: 'PLNMOBILE',
-        waktu_lapor: '01-02-2023 03:09:50',
-        waktu_response: '01-02-2023 03:42:40',
-        waktu_recovery: '01-02-2023 03:49:35',
-        jumlah_lapor: 0,
-        durasi_response_time: 1970,
-        durasi_recovery_time: 415,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'Risky Ariyanto',
-        alamat_pelapor: 'JL JANKES AD No. RT.7 RW.2',
-        no_telp_pelapor: '6285240208016',
-        keterangan_pelapor: 'gagal isi token dan di meteran ada tulisan Periksa',
-        media: 'PLN Mobile',
-        nama_posko: 'POSKO CIRACAS'
-      },
-      {
-        no_laporan: 'G5423020101461',
-        pembuat_laporan: 'PLNMOBILE',
-        waktu_lapor: '01-02-2023 05:38:01',
-        waktu_response: '01-02-2023 05:48:13',
-        waktu_recovery: '01-02-2023 05:54:06',
-        jumlah_lapor: 0,
-        durasi_response_time: 612,
-        durasi_recovery_time: 353,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'Junaedi Muntoro',
-        alamat_pelapor: 'PR BKT GOLF ARCADIA BLK G.06 No.5 CBBR',
-        no_telp_pelapor: '628111588806',
-        keterangan_pelapor:
-          'Mohon bantuan isi token PLN 3214732093\\n\\nPT. KARYA CANTIKA KUSUMA\\n\\nBukit Golf Riverside\\nKluster Arcadia Blok G6/5\\nBojong Nangka Gunung Putri Bogor\\n\\nGagal isi Tokel Tertera Meteran TERPERIKSA.\\n\\nMOHON BANTUAN PAK..',
-        media: 'PLN Mobile',
-        nama_posko: 'POSKO CIRACAS'
-      },
-      {
-        no_laporan: 'G5423020101612',
-        pembuat_laporan: 'PLNMOBILE',
-        waktu_lapor: '01-02-2023 05:54:33',
-        waktu_response: '01-01-1970 00:00:00',
-        waktu_recovery: '01-01-1970 00:00:00',
-        jumlah_lapor: 0,
-        durasi_response_time: 0,
-        durasi_recovery_time: 0,
-        status_akhir: 'Dibatalkan',
-        idpel_nometer: '',
-        nama_pelapor: 'Raihana S. Rahmahadi',
-        alamat_pelapor: 'JL BKT RAFLESIA N8-16',
-        no_telp_pelapor: '6282138889101',
-        keterangan_pelapor: 'listrik turun lagi setelah diganti mcb oleh petugas jam 1 malam',
-        media: 'PLN Mobile',
-        nama_posko: 'POSKO CIRACAS'
-      },
-      {
-        no_laporan: 'G5523020100067',
-        pembuat_laporan: 'CC.55.SUMIATI',
-        waktu_lapor: '01-02-2023 05:57:02',
-        waktu_response: '01-02-2023 06:18:55',
-        waktu_recovery: '01-01-1970 00:00:00',
-        jumlah_lapor: 0,
-        durasi_response_time: 0,
-        durasi_recovery_time: 0,
-        status_akhir: 'Dibatalkan',
-        idpel_nometer: '',
-        nama_pelapor: 'BP ANAL ',
-        alamat_pelapor: 'JL MANUNGGAL RT 05 RW 02 KEL KELAPA  DUA WETAN KEC CIRACAS JAKARTA TIMUR ',
-        no_telp_pelapor: '6285777592240',
-        keterangan_pelapor: 'BANYAK RUMAH PADAM ',
-        media: 'Call PLN 123',
-        nama_posko: 'POSKO CIRACAS'
   }
-    ]
 }
-})
 </script>

src/report/Gangguan/Daftar/DGangguan_DKPL.ts

@@ -217,7 +217,7 @@ const exportToPDF = async (reportMeta: any, data: any) => {
   return true
 }
 
-const exportToXLSX = (reportMeta: any, e: any) => {
+const exportToXLSX = async (reportMeta: any, e: any) => {
   const meta = formatMetaData(reportMeta)
   const workbook = new Workbook()
   const worksheet = workbook.addWorksheet(`${reportName}`)
@@ -270,7 +270,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   worksheet.mergeCells('A6:S6')
   worksheet.mergeCells('A7:S7')
 
-  exportToExcel({
+  await exportToExcel({
     component: e.component,
     worksheet,
     autoFilterEnabled: true,

src/report/Gangguan/Daftar/DGangguan_MLD1K.ts

@@ -46,12 +46,13 @@ const formatMetaData = (reportMeta: any) => {
   return { dateFromFormat, dateToFormat, dayTo }
 }
 
-const exportToPDF = (reportMeta: any, data: any) => {
+const exportToPDF = async (reportMeta: any, data: any) => {
   const meta = formatMetaData(reportMeta)
   const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
   const date = new Date().getDate()
   const month = new Date().toLocaleString('id-ID', { month: 'long' })
   const year = new Date().getFullYear()
+  const resultData = data.value.data
   const doc = new jsPDF({
     orientation: 'landscape'
   })
@@ -129,7 +130,7 @@ const exportToPDF = (reportMeta: any, data: any) => {
         'Posko'
       ]
     ],
-    body: data.value.map((item: any, i: any) => [
+    body: resultData.map((item: any, i: any) => [
       { content: ++i, styles: { halign: 'right' } },
       item.no_laporan,
       item.waktu_lapor,
@@ -197,12 +198,19 @@ const exportToPDF = (reportMeta: any, data: any) => {
     margin: { left: 230 }
   })
 
-  doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
+  await doc
-    console.log('pdf berhasil disimpan')
+    .save(`Laporan ${reportName}.pdf`, { returnPromise: true })
+    .then(() => {
+      console.log('PDF Exported')
     })
+    .catch((error) => {
+      console.error('Error while exporting PDF', error)
+    })
+
+  return true
 }
 
-const exportToXLSX = (reportMeta: any, data: any, e: any) => {
+const exportToXLSX = async (reportMeta: any, e: any) => {
   const meta = formatMetaData(reportMeta)
   const workbook = new Workbook()
   const worksheet = workbook.addWorksheet(`${reportName}`)
@@ -261,14 +269,11 @@ const exportToXLSX = (reportMeta: any, data: any, e: any) => {
   worksheet.mergeCells('H7:J7')
   worksheet.mergeCells('H8:J8')
 
-  exportToExcel({
+  await exportToExcel({
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 11, column: 1 },
+    topLeftCell: { row: 11, column: 1 }
-    loadPanel: {
-      enabled: false
-    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -278,15 +283,16 @@ const exportToXLSX = (reportMeta: any, data: any, e: any) => {
   e.cancel = true
 }
 
-const exportToDOCX = (reportMeta: any, data: any) => {
+const exportToDOCX = async (reportMeta: any, data: any) => {
   const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
   const date = new Date().getDate()
   const month = new Date().toLocaleString('id-ID', { month: 'long' })
   const year = new Date().getFullYear()
   const meta = formatMetaData(reportMeta)
+  const resultData = data.value.data
 
   const generateRows = () => {
-    return data.value.map((item: any, i: any) => {
+    return resultData.map((item: any, i: any) => {
       return new TableRow({
         children: [
           { text: `${++i}`, field: 'no' },
@@ -532,10 +538,17 @@ const exportToDOCX = (reportMeta: any, data: any) => {
     ]
   })
 
-  Packer.toBlob(doc).then((blob) => {
+  await Packer.toBlob(doc)
+    .then((blob) => {
       saveAs(blob, `Laporan ${reportName}.docx`)
-    console.log('Document created successfully')
+
+      console.log('DOCX Exported')
     })
+    .catch((error) => {
+      console.error('Error while exporting DOCX', error)
+    })
+
+  return true
 }
 
 export { exportToPDF, exportToXLSX, exportToDOCX }