feat: implement server side in daftar keluhan dialihkan ke unit lain

src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue

@@ -1,15 +1,16 @@
 <template>
-  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
     <Type3 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
     <DxDataGrid
       ref="dataGridRef"
+      @option-changed="handleRequestChange"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
-      v-if="loading == false"
+      :remote-operations="true"
       :show-column-lines="true"
       :show-row-lines="false"
       :show-borders="true"
@@ -22,6 +23,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="false"
     >
+      <DxLoadPanel :enabled="true" />
       <DxSelection mode="single" />
       <DxPaging :page-size="20" :enabled="true" />
       <DxPager
@@ -41,13 +43,13 @@
       <DxColumnFixing :enabled="true" />
 
       <DxColumn
-        css-class="custom-table-column !align-top"
+        :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"
-        cell-template="formatNumber"
       />
       <DxColumn
         :width="170"
@@ -317,7 +319,6 @@
       </div>
     </div>
   </DetailDialog>
-  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -325,8 +326,10 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type3 from '@/components/Form/FiltersType/Type3.vue'
+import CustomStore from 'devextreme/data/custom_store'
+
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { onMounted, ref } from 'vue'
+import { reactive, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -341,16 +344,20 @@ import {
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_DKUL'
-import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
-const position = { of: '#data' }
+import type { IRequestOptions } from '@/types/requestParams'
-const showIndicator = ref(true)
+
-const shading = ref(true)
+const requestOptions = reactive<IRequestOptions>({
-const showPane = ref(true)
+  skip: 0,
-const data = ref<any[]>([])
+  take: 20,
+  requireTotalCount: true,
+  sort: null,
+  filter: null
+})
 const dataSelected = ref<any>({})
 const dialogDetail = ref(false)
-const loading = ref(false)
+const reportData: any = ref(null)
+const dataGridRef = ref<DxDataGrid | null>(null)
 const filters = ref()
 const reportMeta = ref({
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
@@ -359,42 +366,137 @@ const reportMeta = ref({
   periode: ''
 })
 
-const showDetail = () => (dialogDetail.value = true)
+const allowTableRequest = ref(false)
+const data = new CustomStore({
+  load: async (loadOptions: any) => {
+    if (allowTableRequest.value) {
+      loadOptions.requireTotalCount = true
+
+      const query = {
+        skip: loadOptions.skip,
+        take: loadOptions.take,
+        sort: loadOptions.sort ? loadOptions.sort : null,
+        filter: loadOptions.filter ? mapSearchOptions(loadOptions.filter) : null,
+        requireTotalCount: loadOptions.requireTotalCount,
+        ...createQuery(filters.value)
+      }
+
+      return await requestGraphQl(queries.keluhan.daftar.ssdaftarKeluhanDialihkanKeUnitLain, query)
+        .then((result) => {
+          const response = result.data.data.ssdaftarKeluhanDialihkanKeUnitLain
+
+          let no = query.skip ?? 0
+
+          for (const data of response.data) {
+            data.no = ++no
+          }
+
+          return {
+            data: response.data,
+            totalCount: response.totalCount
+          }
+        })
+        .catch((err) => {
+          throw Error(err)
+        })
+        .finally(() => {
+          reportMeta.value = filters.value
+        })
+    } else {
+      return new Promise(function (resolve) {
+        resolve({
+          data: [],
+          totalCount: 0
+        })
+      })
+    }
+  }
+})
 
 const closeDialog = () => (dialogDetail.value = false)
 
-const onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    exportToPDF(reportMeta, data)
-  } else if (e.format === 'xlsx') {
-    exportToXLSX(reportMeta, e)
-  } else {
-    exportToDOCX(reportMeta, data)
-  }
-}
-const dataGridRef = ref<DxDataGrid | null>(null)
-const clearSelection = () => {
-  const dataGrid = dataGridRef.value!.instance!
-  dataGrid.clearSelection()
-}
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  if (selectedRowsData[0] != undefined) {
-    dataSelected.value = selectedRowsData[0]
-  }
-  clearSelection()
-  showDetail()
-}
-
 const resetData = () => {
-  data.value = []
+  allowTableRequest.value = false
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
 }
 
-const filterData = async (params: any) => {
+const handleRequestChange = (e: any) => {
-  resetData()
+  if (e.name === 'searchPanel') {
+    if (e.value !== '') {
+      requestOptions.filter = createSearchOptions(e.value)
+    } else {
+      requestOptions.filter = null
+    }
+  }
+
+  if (e.name === 'paging') {
+    requestOptions.take = e.value
+  }
+
+  if (e.name === 'columns') {
+    const columnIndex = parseInt(e.fullName.match(/\[(\d+)\]/)[1])
+    const columnDataField = e.component.columnOption(columnIndex).dataField
+
+    requestOptions.sort = [
+      {
+        selector: columnDataField,
+        desc: e.value === 'desc'
+      }
+    ]
+  }
+}
+
+const createSearchOptions = (keyword: string) => {
+  const dataGrid = dataGridRef.value!.instance!
+  const columns = dataGrid.getVisibleColumns()
+
+  const searchOptions = []
+
+  for (const column of columns) {
+    if (column.dataField === 'no' || !column.dataField) {
+      continue
+    }
+
+    searchOptions.push({
+      field: column.dataField,
+      value: keyword
+    })
+  }
+
+  return searchOptions
+}
+
+const mapSearchOptions = (searchOptions: any) => {
+  const result = searchOptions.map((option: any) => {
+    if (Array.isArray(option) && option[0] !== 'no') {
+      return {
+        field: option[0],
+        value: option[2]
+      }
+    }
+  })
+
+  return result.filter((item: any) => item)
+}
+
+const filterData = () => {
+  allowTableRequest.value = true
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
+}
+
+const createQuery = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
 
-  const query = {
+  return {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -405,141 +507,46 @@ const filterData = async (params: any) => {
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   }
-
-  loading.value = true
-  await requestGraphQl(queries.keluhan.daftar.keluhanDipindahkanKeIDULPLain, query)
-    .then((result) => {
-      if (result.data.data != undefined) {
-        data.value = result.data.data.daftarKeluhanDialihkanKeUnitLain
-      } else {
-        data.value = []
-      }
-
-      reportMeta.value = filters.value
-    })
-    .catch((err) => {
-      console.error(err)
-    })
-    .finally(() => {
-      loading.value = false
-    })
 }
 
-onMounted(() => {
+const clearSelection = () => {
-  if (import.meta.env.DEV) {
+  const dataGrid = dataGridRef.value!.instance!
-    data.value = [
+  dataGrid.clearSelection()
-      {
+}
-        no_laporan: 'K5523020400288',
+
-        pembuat_laporan: 'CC.55.ANISA',
+const onSelectionChanged = ({ selectedRowsData }: any) => {
-        waktu_lapor: '04/02/2023 11:18:57',
+  if (selectedRowsData[0] != undefined) {
-        waktu_dialihkan: '04/02/2023 12:49:36',
+    dataSelected.value = selectedRowsData[0]
-        waktu_response: '04/02/2023 12:50:21',
-        waktu_recovery: '04/02/2023 13:06:53',
-        durasi_response_time: 5484,
-        durasi_recovery_time: 992,
-        id_unit_lama: 227,
-        nama_unit_lama: 'ULP MEDAN SELATAN',
-        id_unit_baru: 5,
-        nama_unit_baru: 'ULP DENAI',
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'IBU ELVIRA ',
-        alamat_pelapor:
-          'JL PASAR 3 GG PISANG NO.22 RT0/RW0 KEL BANDAR KALIFA KEC PERCUT SEI TUAN KAB DELI SERDANG SUMATRA UTARA',
-        no_telp_pelapor: '087882621344',
-        keterangan_pelapor:
-          '1 APP PRABAYAR TERTERA GAGAL. TIDAK BISA MEMASUKKAN PULSA. (PTL TIDAK PADAM ). SETELAH UPDATE VKRN 43. NO TOKEN : 38665587538675472633. SISA PULSA  : 43.20 KWH PELANGGAN MENGHUBUNGI KEMBALI. UPDATE CC.52.ETA',
-        media: 'Call PLN 123'
-      },
-      {
-        no_laporan: 'K5423021005925',
-        pembuat_laporan: 'CC.54.HENDI',
-        waktu_lapor: '10/02/2023 20:24:35',
-        waktu_dialihkan: '10/02/2023 21:02:39',
-        waktu_response: '10/02/2023 21:36:20',
-        waktu_recovery: '10/02/2023 21:42:37',
-        durasi_response_time: 4305,
-        durasi_recovery_time: 377,
-        id_unit_lama: 233,
-        nama_unit_lama: 'ULP PURWOKERTO KOTA',
-        id_unit_baru: 236,
-        nama_unit_baru: 'ULP BANJARNEGARA',
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'BP EKO BUDIYANTO',
-        alamat_pelapor:
-          'ALAMAT LOKASI : DN TANJUNG TIRTA RT 5 RW 1 KEL DS TANJUNG TIRTA KEC PUNGGELAN KAB BANJARNEGARA JATENG, ACUAN LOKASI : DEKAT KELURAHAN',
-        no_telp_pelapor: '08121512224',
-        keterangan_pelapor:
-          'MOHON UNTUK DITINDAKLANJUTI PROSES PS NON PELANGGAN  ( L/ 5500 VA ) MELALUI PLN 123 DENGAN NO AGENDA 522040132302100027 DAN NO REG 5220429004905 DIPERUNTUKAN UNTUK PENERANGAN BTS SELAMA 14 HARI MULAI PADA TGL 11/2/23 - 24/2/23 PUKUL 12:00 WIB PEMOHON MENGAKU SEBAGAI PIHAK YANG BERTANGGUNG JAWAB',
-        media: 'Call PLN 123'
-      },
-      {
-        no_laporan: 'K5423021005015',
-        pembuat_laporan: 'PLNMOBILE',
-        waktu_lapor: '10/02/2023 18:01:21',
-        waktu_dialihkan: '10/02/2023 18:04:07',
-        waktu_response: '10/02/2023 18:13:47',
-        waktu_recovery: '01/01/1970 00:00:00',
-        durasi_response_time: 746,
-        durasi_recovery_time: 33136328,
-        id_unit_lama: 227,
-        nama_unit_lama: 'ULP MEDAN SELATAN',
-        id_unit_baru: 225,
-        nama_unit_baru: 'ULP MEDAN KOTA',
-        status_akhir: 'Dalam Proses Bidang Unit',
-        idpel_nometer: '',
-        nama_pelapor: 'Ervina Vina4',
-        alamat_pelapor: 'JL PSR MERAH GG SETIA UJUNG KEL BINJAI No.0 RT.0 RW.0 M DENAI',
-        no_telp_pelapor: '6285276706679',
-        keterangan_pelapor:
-          'MUTASI_K (G9923021098935:app) - sudah beli token.tapi gagal terus tolong PLN tindak lanjutin lebih cepat.terima kasih',
-        media: 'PLN Mobile'
-      },
-      {
-        no_laporan: 'K5423021004276',
-        pembuat_laporan: 'PLNMOBILE',
-        waktu_lapor: '10/02/2023 16:20:21',
-        waktu_dialihkan: '11/02/2023 06:28:29',
-        waktu_response: '11/02/2023 13:39:37',
-        waktu_recovery: '11/02/2023 16:28:03',
-        durasi_response_time: 76756,
-        durasi_recovery_time: 10106,
-        id_unit_lama: 62,
-        nama_unit_lama: 'ULP KAYU AGUNG',
-        id_unit_baru: 82,
-        nama_unit_baru: 'ULP TUGU MULYO',
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'call center bmg',
-        alamat_pelapor:
-          'Desa Gading Raja Desa SP2 Kecamatan Padamaran Kabupaten Ogan Komering Ilir, Sumatera Selatan',
-        no_telp_pelapor: '6281225199487',
-        keterangan_pelapor: 'Seal in MCB KWH NA or Seal Papan OKA NA',
-        media: 'PLN Mobile'
-      },
-      {
-        no_laporan: 'K5423021001969',
-        pembuat_laporan: 'PLNMOBILE',
-        waktu_lapor: '10/02/2023 10:49:02',
-        waktu_dialihkan: '10/02/2023 10:53:35',
-        waktu_response: '10/02/2023 11:21:09',
-        waktu_recovery: '10/02/2023 12:15:16',
-        durasi_response_time: 1927,
-        durasi_recovery_time: 3247,
-        id_unit_lama: 238,
-        nama_unit_lama: 'UP3 TANJUNG PRIOK',
-        id_unit_baru: 194,
-        nama_unit_baru: 'UP3 BANDENGAN',
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'muhammad alinafia',
-        alamat_pelapor: 'blok a no 55',
-        no_telp_pelapor: '6282123607797',
-        keterangan_pelapor: 'K5423021001925',
-        media: 'PLN Mobile'
   }
-    ]
+  clearSelection()
+  showDetail()
+}
+
+const showDetail = () => (dialogDetail.value = true)
+
+const onExporting = async (e: any) => {
+  const dataGrid = dataGridRef.value!.instance!
+
+  if (e.format === 'pdf' || e.format === 'document') {
+    reportData.value = await data.load()
   }
-})
+
+  if (e.format === 'pdf' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const pdf = await exportToPDF(reportMeta, reportData)
+
+    if (pdf) {
+      dataGrid.endCustomLoading()
+    }
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta, e)
+  } else if (e.format === 'document' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const doc = await exportToDOCX(reportMeta, reportData)
+
+    if (doc) {
+      dataGrid.endCustomLoading()
+    }
+  }
+}
 </script>

src/report/Keluhan/Daftar/DKeluhan_DKUL.ts

@@ -48,12 +48,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'
   })
@@ -133,7 +134,7 @@ const exportToPDF = (reportMeta: any, data: any) => {
         'Nama ULP'
       ]
     ],
-    body: data.value.map((item: any, i: any) => [
+    body: resultData.map((item: any, i: any) => [
       { content: ++i, styles: { halign: 'right' } },
       item.no_laporan,
       item.pembuat_laporan,
@@ -204,12 +205,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, e: any) => {
+const exportToXLSX = async (reportMeta: any, e: any) => {
   const meta = formatMetaData(reportMeta)
   const workbook = new Workbook()
   const worksheet = workbook.addWorksheet(`${reportName}`)
@@ -262,11 +270,11 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   worksheet.mergeCells('A6:S6')
   worksheet.mergeCells('A7:S7')
 
-  exportToExcel({
+  await exportToExcel({
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 9, column: 1 }
+    topLeftCell: { row: 10, column: 1 }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -276,15 +284,16 @@ const exportToXLSX = (reportMeta: 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' },
@@ -527,10 +536,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 }

src/utils/api/api.graphql.ts

@@ -281,6 +281,56 @@ export const queries = {
           }
         }
       `,
+      ssdaftarKeluhanDialihkanKeUnitLain: gql`
+        query ssdaftarKeluhanDialihkanKeUnitLain(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $skip: Int
+          $take: Int
+          $requireTotalCount: Boolean
+          $sort: [SortInput]
+          $filter: [FilterInput]
+        ) {
+          ssdaftarKeluhanDialihkanKeUnitLain(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+            skip: $skip
+            take: $take
+            requireTotalCount: $requireTotalCount
+            sort: $sort
+            filter: $filter
+          ) {
+            totalCount
+            data {
+              no_laporan
+              pembuat_laporan
+              waktu_lapor
+              waktu_dialihkan
+              waktu_response
+              waktu_recovery
+              durasi_response_time
+              durasi_recovery_time
+              id_unit_lama
+              nama_unit_lama
+              id_unit_baru
+              nama_unit_baru
+              status_akhir
+              idpel_nometer
+              nama_pelapor
+              alamat_pelapor
+              no_telp_pelapor
+              keterangan_pelapor
+              media
+            }
+          }
+        }
+      `,
       keluhanBerdasarkanMedia: gql`
         query daftarKeluhanBerdasarkanMedia(
           $dateFrom: Date!