From 0710b2635d04ce6729b9fcce747085cc431a35e8 Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Mon, 22 Apr 2024 17:18:51 +0700
Subject: [PATCH 01/13] feat: create server-side request in daftar gangguan
 dialihkan ke posko lain

---
 .../Pages/Gangguan/Daftar/DGangguan_DKPL.vue  | 299 ++++++++----------
 src/types/requestParams.ts                    |   9 +
 src/utils/api/api.graphql.ts                  |  10 +
 3 files changed, 154 insertions(+), 164 deletions(-)
 create mode 100644 src/types/requestParams.ts

diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
index 738482f..f3ceae3 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
@@ -1,14 +1,16 @@
 <template>
-  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="resetData" @run-search="() => filterData(filters)" class="mb-4">
     <Type1 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="dataTable">
     <DxDataGrid
       ref="dataGridRef"
+      @option-changed="handleRequestChange"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
+      :remote-operations="true"
       v-if="loading == false"
       key-expr="no_laporan"
       :show-column-lines="true"
@@ -32,17 +34,6 @@
         :show-navigation-buttons="true"
       />
       <DxSelection mode="single" />
-      <!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-mode="virtual" /> -->
-      <!-- <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      /> -->
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -53,7 +44,6 @@
         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"
         caption="No"
       />
@@ -347,6 +337,11 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
+import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import InputText from '@/components/InputText.vue'
+import CustomStore from 'devextreme/data/custom_store'
+
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -357,29 +352,145 @@ import {
   DxSelection
 } from 'devextreme-vue/data-grid'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { onMounted, ref } from 'vue'
-import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
-import InputText from '@/components/InputText.vue'
+import { ref, reactive } from 'vue'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Gangguan/Daftar/DGangguan_DKPL'
-import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
-const data = ref<any[]>([])
+import type { IRequestOptions } from '@/types/requestParams'
+
+const requestOptions = reactive<IRequestOptions>({
+  skip: 0,
+  take: 20,
+  requireTotalCount: true,
+  sort: null,
+  filter: null
+})
 const dataSelected = ref<any>()
 const dialogDetail = ref(false)
 const loading = ref(false)
+const dataGridRef = ref<DxDataGrid | null>(null)
+const filters = ref()
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  posko: { id: 0, name: 'Semua Posko' },
+  periode: ''
+})
+
+const allowTableRequest = ref(false)
+const data = new CustomStore({
+  load: (loadOptions: any) => {
+    if (allowTableRequest.value) {
+      let query: any
+
+      if (Object.keys(loadOptions.userData).length === 0) {
+        query = {
+          skip: loadOptions.skip,
+          take: loadOptions.take,
+          sort: loadOptions.sort ? loadOptions.sort : null,
+          filter: loadOptions.filter ? loadOptions.filter : null,
+          requireTotalCount: loadOptions.requireTotalCount,
+          ...createQuery(filters.value)
+        }
+      } else {
+        query = loadOptions.userData
+      }
+
+      return requestGraphQl(queries.gangguan.daftar.dataDialihkanKePoskoLain, query)
+        .then((result) => {
+          return {
+            data: result.data.data.daftarGangguanDialihkanKePoskoLain,
+            totalCount: 0
+          }
+        })
+        .catch((err) => {
+          throw Error(err)
+        })
+        .finally(() => {
+          reportMeta.value = filters.value
+          loading.value = false
+        })
+    } else {
+      return new Promise(function (resolve) {
+        resolve({
+          data: [],
+          totalCount: 0
+        })
+      })
+    }
+  }
+})
+
 const closeDialog = () => (dialogDetail.value = false)
 
 const resetData = () => {
-  data.value = []
+  allowTableRequest.value = false
+  data.load()
 }
 
-const filterData = async (params: any) => {
-  resetData()
+const handleRequestChange = (e: any) => {
+  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 === 'number' || !column.dataField) {
+      continue
+    }
+
+    searchOptions.push([column.dataField, '=', keyword])
+
+    if (column !== columns[columns.length - 1]) {
+      searchOptions.push('or')
+    }
+  }
+
+  return searchOptions
+}
+
+const filterData = (params: any) => {
+  allowTableRequest.value = true
+
+  data.load({
+    userData: {
+      ...requestOptions,
+      ...createQuery(params)
+    }
+  })
+}
+
+const createQuery = (params: any) => {
   const { posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
 
-  const query = {
+  return {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -390,165 +501,25 @@ const filterData = async (params: any) => {
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   }
-  loading.value = true
-  await requestGraphQl(queries.gangguan.daftar.dataDialihkanKePoskoLain, query)
-    .then((result) => {
-      if (result.data.data != undefined) {
-        data.value = result.data.data.daftarGangguanDialihkanKePoskoLain
-      } else {
-        data.value = []
-      }
-
-      reportMeta.value = filters.value
-    })
-    .catch((err) => {
-      console.error(err)
-    })
-    .finally(() => {
-      loading.value = false
-    })
 }
 
-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]
   }
   showDetail()
 }
+
 const showDetail = () => {
   dialogDetail.value = true
   clearSelection()
 }
 
-const filters = ref()
-const reportMeta = ref({
-  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
-  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
-  posko: { id: 0, name: 'Semua Posko' },
-  periode: ''
-})
-
-onMounted(() => {
-  if (import.meta.env.DEV) {
-    data.value = [
-      {
-        no_laporan: 'G1423012400040',
-        pembuat_laporan: 'CC.14.ALFIAN',
-        waktu_lapor: '01/02/2023 13:53:36',
-        waktu_dialihkan: '24/01/2023 02:20:22',
-        waktu_response: null,
-        waktu_recovery: null,
-        durasi_response_time: null,
-        durasi_recovery_time: null,
-        id_posko_lama: 181701,
-        nama_posko_lama: 'POSKO ULP SIAK SRI INDRAPURA',
-        id_posko_baru: 181801,
-        nama_posko_baru: 'POSKO ULP PANGKALAN KERINCI',
-        status_akhir: 'Dibatalkan',
-        idpel_nometer: '',
-        nama_pelapor: 'BP HABIB',
-        alamat_pelapor: 'JL PEMBANGUNAN RT 5 RW 2 DESA RAWANG TAUH KEC LUBUK DALAM KAB SIAK ',
-        no_telp_pelapor: '081365027399',
-        keterangan_pelapor: 'GANGGUAN BERULANG : G1423012400025, BANYAK RUMAH PADAM',
-        media: 'Call PLN 123'
-      },
-      {
-        no_laporan: 'G1223012400580',
-        pembuat_laporan: 'CC.12.TONI',
-        waktu_lapor: '01/02/2023 13:53:36',
-        waktu_dialihkan: '24/01/2023 17:30:32',
-        waktu_response: null,
-        waktu_recovery: null,
-        durasi_response_time: null,
-        durasi_recovery_time: null,
-        id_posko_lama: 181101,
-        nama_posko_lama: 'POSKO ULP PEKANBARU KOTA TIMUR',
-        id_posko_baru: 181101,
-        nama_posko_baru: 'POSKO ULP PEKANBARU KOTA TIMUR',
-        status_akhir: 'Selesai(PEMADAMAN MELUAS)',
-        idpel_nometer: '',
-        nama_pelapor: 'BP DAUT',
-        alamat_pelapor:
-          'JL RAWAMANGUN SIMPANG ANGGREK RT01 RW8 KEL TANGERANG LUBUAY KEC BUKIT RAYA KOTA PEKANBARU RIAU ACUAN DEKAT KOLAM PANCING RIKI ',
-        no_telp_pelapor: '085278178766',
-        keterangan_pelapor: 'TRAFO MELEDAK, BANYAK RUMAH VOLTAGE TIDAK STABIL, TEGANGAN 120 V ',
-        media: 'Call PLN 123'
-      },
-      {
-        no_laporan: 'G1223012400580',
-        pembuat_laporan: 'CC.12.TONI',
-        waktu_lapor: '01/02/2023 13:53:36',
-        waktu_dialihkan: '24/01/2023 17:30:29',
-        waktu_response: null,
-        waktu_recovery: null,
-        durasi_response_time: null,
-        durasi_recovery_time: null,
-        id_posko_lama: 181111,
-        nama_posko_lama: 'POSKO ULP PEKANBARU KOTA BARAT',
-        id_posko_baru: 181101,
-        nama_posko_baru: 'POSKO ULP PEKANBARU KOTA TIMUR',
-        status_akhir: 'Selesai(PEMADAMAN MELUAS)',
-        idpel_nometer: '',
-        nama_pelapor: 'BP DAUT',
-        alamat_pelapor:
-          'JL RAWAMANGUN SIMPANG ANGGREK RT01 RW8 KEL TANGERANG LUBUAY KEC BUKIT RAYA KOTA PEKANBARU RIAU ACUAN DEKAT KOLAM PANCING RIKI ',
-        no_telp_pelapor: '085278178766',
-        keterangan_pelapor: 'TRAFO MELEDAK, BANYAK RUMAH VOLTAGE TIDAK STABIL, TEGANGAN 120 V ',
-        media: 'Call PLN 123'
-      },
-      {
-        no_laporan: 'G1423012400611',
-        pembuat_laporan: 'cc.14.OKTA',
-        waktu_lapor: '01/02/2023 13:53:36',
-        waktu_dialihkan: '24/01/2023 15:39:23',
-        waktu_response: null,
-        waktu_recovery: null,
-        durasi_response_time: null,
-        durasi_recovery_time: null,
-        id_posko_lama: 181201,
-        nama_posko_lama: 'POSKO ULP SIMPANG TIGA',
-        id_posko_baru: 181131,
-        nama_posko_baru: '',
-        status_akhir: 'Selesai(PEMADAMAN MELUAS)',
-        idpel_nometer: '',
-        nama_pelapor: 'IBU SURYANTI',
-        alamat_pelapor:
-          'JLN. KEPAU JAYA RT 01 RW 03 DESA KEPAU  KEC. SIAK HULU KAB. KAMPAR PROV. RIAU. DIDEKAT SIMPANG PT. BENI',
-        no_telp_pelapor: '082246836428',
-        keterangan_pelapor: 'SR PUTUS (PTL PADAM) ',
-        media: 'Call PLN 123'
-      },
-      {
-        no_laporan: 'G5223012400639',
-        pembuat_laporan: 'CC.52.HARYO.SM',
-        waktu_lapor: '01/02/2023 13:53:36',
-        waktu_dialihkan: '24/01/2023 11:02:02',
-        waktu_response: null,
-        waktu_recovery: null,
-        durasi_response_time: null,
-        durasi_recovery_time: null,
-        id_posko_lama: 182601,
-        nama_posko_lama: 'POSKO ULP BAGAN BATU',
-        id_posko_baru: 181801,
-        nama_posko_baru: 'POSKO ULP PANGKALAN KERINCI',
-        status_akhir: 'Selesai(PEMADAMAN MELUAS)',
-        idpel_nometer: '',
-        nama_pelapor: 'BAPAK SAOR MARUDUT',
-        alamat_pelapor:
-          'DESA BANJAR PANJANG KECAMATAN KERUMUTAN KABUPATEN PELALAWAN PROVINSI RIAU ',
-        no_telp_pelapor: '085278020428',
-        keterangan_pelapor: 'TERKAIT NO LAPOR G5423012405161 STATUS DIBATALKAN. BANYAK RUMAH PADAM',
-        media: 'Live Chat PLN Mobile'
-      }
-    ]
-  }
-})
-
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     exportToPDF(reportMeta, data)
diff --git a/src/types/requestParams.ts b/src/types/requestParams.ts
new file mode 100644
index 0000000..dabc4f1
--- /dev/null
+++ b/src/types/requestParams.ts
@@ -0,0 +1,9 @@
+interface IRequestOptions {
+  skip: number
+  take: number
+  requireTotalCount: boolean
+  sort: null | Array<object>
+  filter: null | Array<any>
+}
+
+export type { IRequestOptions }
diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index 4d2ea21..ba171ff 100755
--- a/src/utils/api/api.graphql.ts
+++ b/src/utils/api/api.graphql.ts
@@ -2539,6 +2539,11 @@ export const queries = {
           $posko: Int
           $idUid: Int
           $idUp3: Int
+          $skip: Int
+          $take: Int
+          $requireTotalCount: Boolean
+          $sort: [SortInput]
+          $filter: [FilterInput]
         ) {
           daftarGangguanDialihkanKePoskoLain(
             dateFrom: $dateFrom
@@ -2546,6 +2551,11 @@ export const queries = {
             posko: $posko
             idUid: $idUid
             idUp3: $idUp3
+            skip: $skip
+            take: $take
+            requireTotalCount: $requireTotalCount
+            sort: $sort
+            filter: $filter
           ) {
             alamat_pelapor
             pembuat_laporan

From af4f6035f51883feb883f0574f2a105fd0edc6c8 Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Thu, 25 Apr 2024 16:31:57 +0700
Subject: [PATCH 02/13] fix: server side in daftar gangguan dialihkan ke posko
 lain

---
 .env.development                              |   2 +-
 .../Pages/Gangguan/Daftar/DGangguan_DKPL.vue  | 122 ++++++++++++------
 src/report/Gangguan/Daftar/DGangguan_DKPL.ts  |  44 ++++---
 src/types/requestParams.ts                    |   2 +-
 src/utils/api/api.graphql.ts                  |  53 ++++----
 5 files changed, 137 insertions(+), 86 deletions(-)

diff --git a/.env.development b/.env.development
index d701d3e..a0c0f0e 100755
--- a/.env.development
+++ b/.env.development
@@ -1,4 +1,4 @@
-VITE_BASE_URL=http://localhost:5173
+VITE_BASE_URL=http://localhost/:5173
 VITE_BASE_DIRECTORY=/
 VITE_APP_VERSION=0.0.1
 VITE_APP_NAME='Executive Information System'
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
index f3ceae3..ee95852 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
@@ -1,5 +1,5 @@
 <template>
-  <Filters @reset-form="resetData" @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
     <Type1 @update:filters="(value) => (filters = value)" />
   </Filters>
 
@@ -11,7 +11,6 @@
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :remote-operations="true"
-      v-if="loading == false"
       key-expr="no_laporan"
       :show-column-lines="true"
       :show-row-lines="false"
@@ -24,6 +23,7 @@
       :allow-column-resizing="true"
       column-resizing-mode="widget"
     >
+      <DxLoadPanel :enabled="true" />
       <DxPaging :page-size="20" :enabled="true" :page-index="0" />
       <DxPager
         :visible="true"
@@ -41,10 +41,12 @@
         :allow-export-selected-data="false"
       />
       <DxColumn
+        :allow-sorting="false"
         css-class="custom-table-column !text-right"
         :width="50"
         alignment="center"
         data-type="number"
+        data-field="no"
         caption="No"
       />
       <DxColumn
@@ -330,14 +332,11 @@
       </div>
     </div>
   </DetailDialog>
-
-  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
-import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import CustomStore from 'devextreme/data/custom_store'
@@ -349,7 +348,8 @@ import {
   DxPager,
   DxPaging,
   DxSearchPanel,
-  DxSelection
+  DxSelection,
+  DxLoadPanel
 } from 'devextreme-vue/data-grid'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { ref, reactive } from 'vue'
@@ -367,7 +367,7 @@ const requestOptions = reactive<IRequestOptions>({
 })
 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({
@@ -379,28 +379,35 @@ const reportMeta = ref({
 
 const allowTableRequest = ref(false)
 const data = new CustomStore({
-  load: (loadOptions: any) => {
+  load: async (loadOptions: any) => {
     if (allowTableRequest.value) {
-      let query: any
+      loadOptions.requireTotalCount = true
 
-      if (Object.keys(loadOptions.userData).length === 0) {
-        query = {
-          skip: loadOptions.skip,
-          take: loadOptions.take,
-          sort: loadOptions.sort ? loadOptions.sort : null,
-          filter: loadOptions.filter ? loadOptions.filter : null,
-          requireTotalCount: loadOptions.requireTotalCount,
-          ...createQuery(filters.value)
-        }
-      } else {
-        query = loadOptions.userData
+      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 requestGraphQl(queries.gangguan.daftar.dataDialihkanKePoskoLain, query)
+      return await requestGraphQl(
+        queries.gangguan.daftar.ssdaftarGangguanDialihkanKePoskoLain,
+        query
+      )
         .then((result) => {
+          const response = result.data.data.ssdaftarGangguanDialihkanKePoskoLain
+
+          let no = query.skip ?? 0
+
+          for (const data of response.data) {
+            data.no = ++no
+          }
+
           return {
-            data: result.data.data.daftarGangguanDialihkanKePoskoLain,
-            totalCount: 0
+            data: response.data,
+            totalCount: response.totalCount
           }
         })
         .catch((err) => {
@@ -408,7 +415,6 @@ const data = new CustomStore({
         })
         .finally(() => {
           reportMeta.value = filters.value
-          loading.value = false
         })
     } else {
       return new Promise(function (resolve) {
@@ -425,7 +431,11 @@ const closeDialog = () => (dialogDetail.value = false)
 
 const resetData = () => {
   allowTableRequest.value = false
-  data.load()
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
 }
 
 const handleRequestChange = (e: any) => {
@@ -461,29 +471,39 @@ const createSearchOptions = (keyword: string) => {
   const searchOptions = []
 
   for (const column of columns) {
-    if (column.dataField === 'number' || !column.dataField) {
+    if (column.dataField === 'no' || !column.dataField) {
       continue
     }
 
-    searchOptions.push([column.dataField, '=', keyword])
-
-    if (column !== columns[columns.length - 1]) {
-      searchOptions.push('or')
-    }
+    searchOptions.push({
+      field: column.dataField,
+      value: keyword
+    })
   }
 
   return searchOptions
 }
 
-const filterData = (params: any) => {
-  allowTableRequest.value = true
-
-  data.load({
-    userData: {
-      ...requestOptions,
-      ...createQuery(params)
+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) => {
@@ -520,13 +540,29 @@ const showDetail = () => {
   clearSelection()
 }
 
-const onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    exportToPDF(reportMeta, data)
+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 {
-    exportToDOCX(reportMeta, data)
+  } else if (e.format === 'document' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const doc = await exportToDOCX(reportMeta, reportData)
+
+    if (doc) {
+      dataGrid.endCustomLoading()
+    }
   }
 }
 </script>
diff --git a/src/report/Gangguan/Daftar/DGangguan_DKPL.ts b/src/report/Gangguan/Daftar/DGangguan_DKPL.ts
index 5437b7e..aafb596 100644
--- a/src/report/Gangguan/Daftar/DGangguan_DKPL.ts
+++ b/src/report/Gangguan/Daftar/DGangguan_DKPL.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) => {
         '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.pembuat_laporan,
@@ -204,9 +205,16 @@ const exportToPDF = (reportMeta: any, data: any) => {
     margin: { left: 230 }
   })
 
-  doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
-    console.log('pdf berhasil disimpan')
-  })
+  await doc
+    .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) => {
@@ -266,10 +274,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 10, column: 1 },
-    loadPanel: {
-      enabled: false
-    }
+    topLeftCell: { row: 10, column: 1 }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -279,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' },
@@ -530,11 +536,17 @@ const exportToDOCX = (reportMeta: any, data: any) => {
     ]
   })
 
-  Packer.toBlob(doc).then((blob) => {
-    console.log(blob)
-    saveAs(blob, `Laporan ${reportName}.docx`)
-    console.log('Document created successfully')
-  })
+  await Packer.toBlob(doc)
+    .then((blob) => {
+      saveAs(blob, `Laporan ${reportName}.docx`)
+
+      console.log('DOCX Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting DOCX', error)
+    })
+
+  return true
 }
 
 export { exportToPDF, exportToXLSX, exportToDOCX }
diff --git a/src/types/requestParams.ts b/src/types/requestParams.ts
index dabc4f1..e3e1b5f 100644
--- a/src/types/requestParams.ts
+++ b/src/types/requestParams.ts
@@ -3,7 +3,7 @@ interface IRequestOptions {
   take: number
   requireTotalCount: boolean
   sort: null | Array<object>
-  filter: null | Array<any>
+  filter: null | Array<object>
 }
 
 export type { IRequestOptions }
diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index ba171ff..a881277 100755
--- a/src/utils/api/api.graphql.ts
+++ b/src/utils/api/api.graphql.ts
@@ -2532,20 +2532,20 @@ export const queries = {
           }
         }
       `,
-      dataDialihkanKePoskoLain: gql`
-        query DaftarGangguan(
+      ssdaftarGangguanDialihkanKePoskoLain: gql`
+        query ssdaftarGangguanDialihkanKePoskoLain(
           $dateFrom: Date!
           $dateTo: Date!
-          $posko: Int
-          $idUid: Int
-          $idUp3: Int
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
           $skip: Int
           $take: Int
           $requireTotalCount: Boolean
           $sort: [SortInput]
           $filter: [FilterInput]
         ) {
-          daftarGangguanDialihkanKePoskoLain(
+          ssdaftarGangguanDialihkanKePoskoLain(
             dateFrom: $dateFrom
             dateTo: $dateTo
             posko: $posko
@@ -2557,25 +2557,28 @@ export const queries = {
             sort: $sort
             filter: $filter
           ) {
-            alamat_pelapor
-            pembuat_laporan
-            durasi_recovery_time
-            durasi_response_time
-            waktu_lapor
-            waktu_dialihkan
-            waktu_recovery
-            waktu_response
-            idpel_nometer
-            keterangan_pelapor
-            media
-            nama_pelapor
-            no_laporan
-            no_telp_pelapor
-            nama_posko_lama
-            nama_posko_baru
-            status_akhir
-            waktu_recovery
-            waktu_response
+            totalCount
+            data {
+              no_laporan
+              pembuat_laporan
+              waktu_lapor
+              waktu_dialihkan
+              waktu_response
+              waktu_recovery
+              durasi_response_time
+              durasi_recovery_time
+              id_posko_lama
+              nama_posko_lama
+              id_posko_baru
+              nama_posko_baru
+              status_akhir
+              idpel_nometer
+              nama_pelapor
+              alamat_pelapor
+              no_telp_pelapor
+              keterangan_pelapor
+              media
+            }
           }
         }
       `,

From b40a877cda90c7820b166f8cf4e1f4f90fa306bd Mon Sep 17 00:00:00 2001
From: bagus <maulana21mh@gmail.com>
Date: Fri, 3 May 2024 16:04:15 +0700
Subject: [PATCH 03/13] fix: daftar gangguan melapor lebih dari 1 kali

---
 .../Anomali/Gangguan/Anomali_LAPPGP_LPT.vue   |   1 +
 .../Pages/Gangguan/Daftar/DGangguan_MLD1K.vue | 166 +++++++++++++++---
 src/utils/api/api.graphql.ts                  |  51 ++++++
 3 files changed, 198 insertions(+), 20 deletions(-)

diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
index 97d459d..2c99814 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
@@ -47,6 +47,7 @@
     <DxColumn
       v-if="grouping.length > 0"
       v-for="(group, index) in grouping"
+      :key="index"
       :width="150"
       alignment="center"
       :data-field="group.data"
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
index ef3bd43..9f69cbc 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
@@ -421,43 +421,44 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type6 from '@/components/Form/FiltersType/Type6.vue'
-import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { onMounted, ref } from 'vue'
+import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import InputText from '@/components/InputText.vue'
+import CustomStore from 'devextreme/data/custom_store'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
+
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
   DxExport,
-  DxLoadPanel,
   DxPager,
   DxPaging,
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
-import InputText from '@/components/InputText.vue'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+import { onMounted, 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'
-import { apolloClient } from '@/utils/api/api.graphql'
-import { provideApolloClient } from '@vue/apollo-composable'
-import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
-const client = apolloClient()
-provideApolloClient(client)
-const position = { of: '#data' }
-const showIndicator = ref(true)
-const shading = ref(true)
-const showPane = ref(true)
-const data = ref<any[]>([])
+import type { IRequestOptions } from '@/types/requestParams'
+
+const requestOptions = reactive<IRequestOptions>({
+  skip: 0,
+  take: 20,
+  requireTotalCount: true,
+  sort: null,
+  filter: null
+})
+
 const dataSub = ref<any[]>([])
 const dataSelected = ref<any>()
 const dataSubSelected = ref<any>()
 const dialogDetail = ref(false)
-const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
-const detailType = ref('form') // form, table
-
+const detailType = ref('form')
+const dataGridRef = ref<DxDataGrid | null>(null)
 const filters = ref()
 const reportMeta = ref({
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
@@ -468,6 +469,56 @@ const reportMeta = ref({
   maxJmlLapor: 1
 })
 
+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.gangguan.daftar.ssdaftarGangguanMelaporLebihDariSatuKali,
+        query
+      )
+        .then((result) => {
+          const response = result.data.data.ssdaftarGangguanMelaporLebihDariSatuKali
+
+          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 setDetailType = (columnCaption: string) => {
   if (columnCaption == 'Jml Lapor') {
     detailType.value = 'table'
@@ -503,14 +554,16 @@ const getDetail = async () => {
     })
 }
 
-const dataGridRef = ref<DxDataGrid | null>(null)
 const clearSelection = () => {
   const dataGrid = dataGridRef.value!.instance!
   dataGrid.clearSelection()
 }
+
 const showDetail = () => {
   clearSelection()
+
   dataSubSelected.value = null
+
   if (detailType.value == 'table') {
     getDetail()
   } else {
@@ -521,23 +574,96 @@ const showDetail = () => {
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
+
     showDetail()
   }
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
+
   dataSubSelected.value = data
 }
 
 const closeDialog = () => (dialogDetail.value = false)
 
 const resetData = () => {
-  data.value = []
+  allowTableRequest.value = false
   dataSub.value = []
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
+}
+
+const handleRequestChange = (e: any) => {
+  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 = async (params: any) => {
+  llowTableRequest.value = true
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
+
   resetData()
   const { minJmlLapor, maxJmlLapor, posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index 7a9f18b..a649525 100755
--- a/src/utils/api/api.graphql.ts
+++ b/src/utils/api/api.graphql.ts
@@ -2502,6 +2502,57 @@ export const queries = {
           }
         }
       `,
+      ssdaftarGangguanMelaporLebihDariSatuKali: gql`
+        query ssdaftarGangguanMelaporLebihDariSatuKali(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $minJmlLapor: Int!
+          $maxJmlLapor: Int!
+          $skip: Int
+          $take: Int
+          $requireTotalCount: Boolean
+          $sort: [SortInput]
+          $filter: [FilterInput]
+        ) {
+          ssdaftarGangguanMelaporLebihDariSatuKali(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            minJmlLapor: $minJmlLapor
+            maxJmlLapor: $maxJmlLapor
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+            skip: $skip
+            take: $take
+            requireTotalCount: $requireTotalCount
+            sort: $sort
+            filter: $filter
+          ) {
+            totalCount
+            data {
+              no_laporan
+              pembuat_laporan
+              waktu_lapor
+              waktu_response
+              waktu_recovery
+              jumlah_lapor
+              durasi_response_time
+              durasi_recovery_time
+              status_akhir
+              idpel_nometer
+              nama_pelapor
+              alamat_pelapor
+              no_telp_pelapor
+              keterangan_pelapor
+              media
+              nama_posko
+            }
+          }
+        }
+      `,
       diselesaikanMobileAPKT: gql`
         query daftarGangguanDiselesaikanMobileAPKT(
           $dateFrom: Date!

From ed931d8eb3a64d0c84732841ed6ddf840458db63 Mon Sep 17 00:00:00 2001
From: bagus <maulana21mh@gmail.com>
Date: Fri, 3 May 2024 17:06:50 +0700
Subject: [PATCH 04/13] feat: implement server side in daftar gangguan melapor
 lebih dari 1 kali

---
 .../Pages/Gangguan/Daftar/DGangguan_MLD1K.vue | 176 ++++--------------
 src/report/Gangguan/Daftar/DGangguan_DKPL.ts  |   4 +-
 src/report/Gangguan/Daftar/DGangguan_MLD1K.ts |  47 +++--
 3 files changed, 70 insertions(+), 157 deletions(-)

diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
index 9f69cbc..ff0216c 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
+++ b/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) => {
-  llowTableRequest.value = true
+const filterData = () => {
+  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
-    })
-    .catch((err) => {
-      console.error(err)
-    })
-    .finally(() => {
-      loadingData.value = false
-    })
 }
 
-const onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    exportToPDF(reportMeta, data)
+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, data, e)
-  } else {
-    exportToDOCX(reportMeta, data)
+    await exportToXLSX(reportMeta, e)
+  } else if (e.format === 'document' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const doc = await exportToDOCX(reportMeta, reportData)
+
+    if (doc) {
+      dataGrid.endCustomLoading()
+    }
   }
 }
-
-onMounted(() => {
-  if (import.meta.env.DEV) {
-    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>
diff --git a/src/report/Gangguan/Daftar/DGangguan_DKPL.ts b/src/report/Gangguan/Daftar/DGangguan_DKPL.ts
index aafb596..6736e51 100644
--- a/src/report/Gangguan/Daftar/DGangguan_DKPL.ts
+++ b/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,
diff --git a/src/report/Gangguan/Daftar/DGangguan_MLD1K.ts b/src/report/Gangguan/Daftar/DGangguan_MLD1K.ts
index ee92353..c7760c3 100644
--- a/src/report/Gangguan/Daftar/DGangguan_MLD1K.ts
+++ b/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(() => {
-    console.log('pdf berhasil disimpan')
-  })
+  await doc
+    .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 },
-    loadPanel: {
-      enabled: false
-    }
+    topLeftCell: { row: 11, column: 1 }
   }).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) => {
-    saveAs(blob, `Laporan ${reportName}.docx`)
-    console.log('Document created successfully')
-  })
+  await Packer.toBlob(doc)
+    .then((blob) => {
+      saveAs(blob, `Laporan ${reportName}.docx`)
+
+      console.log('DOCX Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting DOCX', error)
+    })
+
+  return true
 }
 
 export { exportToPDF, exportToXLSX, exportToDOCX }

From 768abf7dbff8462d024ace3223f23c06b3101f12 Mon Sep 17 00:00:00 2001
From: bagus <maulana21mh@gmail.com>
Date: Fri, 3 May 2024 17:34:27 +0700
Subject: [PATCH 05/13] feat: implement server side in daftar gangguan response
 time

---
 .../Pages/Gangguan/Daftar/DGangguan_MLD1K.vue |  11 +-
 .../Daftar/DGangguan_ResponseTime.vue         | 385 +++++++++---------
 .../Gangguan/Daftar/DGangguan_ResponseTime.ts |  47 ++-
 src/utils/api/api.graphql.ts                  |  54 +++
 4 files changed, 278 insertions(+), 219 deletions(-)

diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
index ff0216c..f52c93d 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
@@ -32,15 +32,7 @@
         :show-info="true"
         :show-navigation-buttons="true"
       />
-      <!-- <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible.sync="loadingData"
-        :enabled="true"
-      /> -->
+      <DxLoadPanel :enabled="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -429,6 +421,7 @@ import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
+  DxLoadPanel,
   DxExport,
   DxPager,
   DxPaging,
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
index 65aad3d..9f69b0f 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
@@ -1,5 +1,5 @@
 <template>
-  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="resetData" @run-search="() => filterData(filters)" class="mb-4">
     <Type7 @update:filters="(value) => (filters = value)" />
   </Filters>
 
@@ -9,7 +9,8 @@
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
-      v-if="loading == false"
+      @option-changed="handleRequestChange"
+      :remote-operations="true"
       :show-column-lines="true"
       :show-row-lines="false"
       :show-borders="true"
@@ -21,6 +22,7 @@
       :allow-column-resizing="true"
       column-resizing-mode="widget"
     >
+      <DxLoadPanel :enabled="true" />
       <DxSelection mode="single" />
       <DxPaging :page-size="20" :enabled="true" />
       <DxPager
@@ -31,16 +33,6 @@
         :show-info="true"
         :show-navigation-buttons="true"
       />
-      <!-- <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      /> -->
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -48,13 +40,13 @@
         :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"
-        cell-template="cellCenter"
       />
 
       <DxColumn
@@ -309,71 +301,191 @@
       </div>
     </div>
   </DetailDialog>
-
-  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type7 from '@/components/Form/FiltersType/Type7.vue'
-import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { onMounted, ref } from 'vue'
+import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import InputText from '@/components/InputText.vue'
+import CustomStore from 'devextreme/data/custom_store'
+
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
-  DxExport,
   DxLoadPanel,
+  DxExport,
   DxPager,
   DxPaging,
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
-import InputText from '@/components/InputText.vue'
-import { useQuery } from '@vue/apollo-composable'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+import { ref, reactive } from 'vue'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import {
   exportToPDF,
   exportToXLSX,
   exportToDOCX
 } from '@/report/Gangguan/Daftar/DGangguan_ResponseTime'
-import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
-const position = { of: '#data' }
-const showIndicator = ref(true)
-const shading = ref(true)
-const showPane = ref(true)
-const data = ref<any[]>([])
+import type { IRequestOptions } from '@/types/requestParams'
+
+const requestOptions = reactive<IRequestOptions>({
+  skip: 0,
+  take: 20,
+  requireTotalCount: true,
+  sort: null,
+  filter: null
+})
 const dataSelected = ref<any>({})
 const dialogDetail = ref(false)
+const reportData: any = ref(null)
 const dataGridRef = ref<DxDataGrid | null>(null)
-const loading = ref(false)
+const filters = ref()
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  posko: { id: 0, name: 'Semua Posko' },
+  periode: '',
+  minTime: '',
+  maxTime: ''
+})
+
+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.gangguan.daftar.ssdaftarGangguanResponseTime, query)
+        .then((result) => {
+          const response = result.data.data.ssdaftarGangguanResponseTime
+
+          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 clearSelection = () => {
   const dataGrid = dataGridRef.value!.instance!
   dataGrid.clearSelection()
 }
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  if (selectedRowsData[0] != undefined) {
-    dataSelected.value = selectedRowsData[0]
-  }
-  clearSelection()
-  showDetail()
-}
-
-const showDetail = () => (dialogDetail.value = true)
-
-const closeDialog = () => (dialogDetail.value = false)
 
 const resetData = () => {
-  data.value = []
+  allowTableRequest.value = false
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
 }
 
-const filterData = async (params: any) => {
-  resetData()
+const handleRequestChange = (e: any) => {
+  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 { minTime, maxTime, posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
 
-  const query = {
+  return {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -386,157 +498,44 @@ const filterData = async (params: any) => {
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   }
-  loading.value = true
-  await requestGraphQl(queries.gangguan.daftar.responseTime, query)
-    .then((result) => {
-      if (result.data.data != undefined) {
-        data.value = result.data.data.daftarGangguanResponseTime
-      } else {
-        data.value = []
-      }
-
-      reportMeta.value = filters.value
-    })
-    .catch((err) => {
-      console.error(err)
-    })
-    .finally(() => {
-      loading.value = false
-    })
 }
 
-const onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    exportToPDF(reportMeta, data)
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+
+  clearSelection()
+  showDetail()
+}
+
+const showDetail = () => (dialogDetail.value = true)
+
+const closeDialog = () => (dialogDetail.value = false)
+
+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, data, e)
-  } else {
-    exportToDOCX(reportMeta, data)
+    exportToXLSX(reportMeta, e)
+  } else if (e.format === 'document' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const doc = await exportToDOCX(reportMeta, reportData)
+
+    if (doc) {
+      dataGrid.endCustomLoading()
+    }
   }
 }
-
-const filters = ref()
-const reportMeta = ref({
-  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
-  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
-  posko: { id: 0, name: 'Semua Posko' },
-  periode: '',
-  minTime: '',
-  maxTime: ''
-})
-
-onMounted(() => {
-  if (import.meta.env.DEV) {
-    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',
-        durasi_response_time: 2411,
-        durasi_recovery_time: 249,
-        status_akhir: 'Selesai',
-        is_marking: 0,
-        referensi_marking: 'P3124142424',
-        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',
-        penyebab: 'P3124142424',
-        tindakan: 'P3124142424'
-      },
-      {
-        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',
-        durasi_response_time: 1970,
-        durasi_recovery_time: 415,
-        status_akhir: 'Selesai',
-        is_marking: 0,
-        referensi_marking: 'P3124142424',
-        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',
-        penyebab: 'P3124142424',
-        tindakan: 'P3124142424'
-      },
-      {
-        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',
-        durasi_response_time: 612,
-        durasi_recovery_time: 353,
-        status_akhir: 'Selesai',
-        is_marking: 0,
-        referensi_marking: 'P3124142424',
-        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',
-        penyebab: 'P3124142424',
-        tindakan: 'P3124142424'
-      },
-      {
-        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',
-        durasi_response_time: 1313,
-        durasi_recovery_time: 0,
-        status_akhir: 'Dibatalkan',
-        is_marking: 0,
-        referensi_marking: 'P3124142424',
-        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',
-        penyebab: 'P3124142424',
-        tindakan: 'P3124142424'
-      },
-      {
-        no_laporan: 'G5423020103015',
-        pembuat_laporan: 'CC.54.EKA.CSOI',
-        waktu_lapor: '01-02-2023 07:39:03',
-        waktu_response: '01-02-2023 08:14:56',
-        waktu_recovery: '01-02-2023 08:19:32',
-        durasi_response_time: 2153,
-        durasi_recovery_time: 276,
-        status_akhir: 'Selesai',
-        is_marking: 0,
-        referensi_marking: 'P3124142424',
-        idpel_nometer: '',
-        nama_pelapor: 'IBU DIN',
-        alamat_pelapor:
-          'JL. HAJI MIUN NO.97 RT. 1 RW 2 KEL KALISARI KEC. PASAR REBO JAKTIM, SEBERANG CAFE LAW COFFE ',
-        no_telp_pelapor: '082112050265',
-        keterangan_pelapor: 'MCB LEMAH DAYA 1.300 VA ',
-        media: 'Call PLN 123',
-        nama_posko: 'POSKO CIRACAS',
-        penyebab: 'P3124142424',
-        tindakan: 'P3124142424'
-      }
-    ]
-  }
-})
 </script>
diff --git a/src/report/Gangguan/Daftar/DGangguan_ResponseTime.ts b/src/report/Gangguan/Daftar/DGangguan_ResponseTime.ts
index bf3d095..7b0e102 100644
--- a/src/report/Gangguan/Daftar/DGangguan_ResponseTime.ts
+++ b/src/report/Gangguan/Daftar/DGangguan_ResponseTime.ts
@@ -64,12 +64,13 @@ const formatMetaData = (reportMeta: any) => {
   }
 }
 
-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'
   })
@@ -150,7 +151,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,
@@ -217,12 +218,19 @@ const exportToPDF = (reportMeta: any, data: any) => {
     margin: { left: 230 }
   })
 
-  doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
-    console.log('pdf berhasil disimpan')
-  })
+  await doc
+    .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()
@@ -282,14 +290,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 },
-    loadPanel: {
-      enabled: false
-    }
+    topLeftCell: { row: 11, column: 1 }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -299,15 +304,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' },
@@ -553,10 +559,17 @@ const exportToDOCX = (reportMeta: any, data: any) => {
     ]
   })
 
-  Packer.toBlob(doc).then((blob) => {
-    saveAs(blob, `Laporan ${reportName}.docx`)
-    console.log('Document created successfully')
-  })
+  await Packer.toBlob(doc)
+    .then((blob) => {
+      saveAs(blob, `Laporan ${reportName}.docx`)
+
+      console.log('DOCX Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting DOCX', error)
+    })
+
+  return true
 }
 
 export { exportToPDF, exportToXLSX, exportToDOCX }
diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index a649525..fc0367a 100755
--- a/src/utils/api/api.graphql.ts
+++ b/src/utils/api/api.graphql.ts
@@ -2416,6 +2416,60 @@ export const queries = {
           }
         }
       `,
+      ssdaftarGangguanResponseTime: gql`
+        query ssdaftarGangguanResponseTime(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $minDurasiResponseTime: Int!
+          $maxDurasiResponseTime: Int!
+          $skip: Int
+          $take: Int
+          $requireTotalCount: Boolean
+          $sort: [SortInput]
+          $filter: [FilterInput]
+        ) {
+          ssdaftarGangguanResponseTime(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            minDurasiResponseTime: $minDurasiResponseTime
+            maxDurasiResponseTime: $maxDurasiResponseTime
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+            skip: $skip
+            take: $take
+            requireTotalCount: $requireTotalCount
+            sort: $sort
+            filter: $filter
+          ) {
+            totalCount
+            data {
+              no_laporan
+              pembuat_laporan
+              waktu_lapor
+              waktu_response
+              waktu_recovery
+              durasi_response_time
+              durasi_recovery_time
+              status_akhir
+              is_marking
+              referensi_marking
+              idpel_nometer
+              nama_pelapor
+              alamat_pelapor
+              no_telp_pelapor
+              keterangan_pelapor
+              media
+              nama_posko
+              penyebab
+              tindakan
+            }
+          }
+        }
+      `,
       recoveryTime: gql`
         query daftarGangguanRecoveryTime(
           $dateFrom: Date!

From b8867a1310cba9c5ad1556a947635d57c9b67e89 Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Sat, 4 May 2024 14:40:27 +0700
Subject: [PATCH 06/13] feat: implement server-side in daftar gangguan recovery
 time

---
 .../Daftar/DGangguan_RecoveryTime.vue         | 369 +++++++++---------
 .../Daftar/DGangguan_ResponseTime.vue         |   2 +-
 .../Gangguan/Daftar/DGangguan_RecoveryTime.ts |  47 ++-
 src/utils/api/api.graphql.ts                  |  52 +++
 4 files changed, 273 insertions(+), 197 deletions(-)

diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
index 47e8182..03a0e66 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.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">
     <Type7
       @update:filters="(value) => (filters = value)"
       :sla-options="[
@@ -22,10 +22,11 @@
   <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"
@@ -37,6 +38,7 @@
       @selection-changed="onSelectionChanged"
       column-resizing-mode="widget"
     >
+      <DxLoadPanel :enabled="true" />
       <DxSelection mode="single" />
       <DxPaging :page-size="20" :enabled="true" />
       <DxPager
@@ -47,16 +49,6 @@
         :show-info="true"
         :show-navigation-buttons="true"
       />
-      <!-- <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      /> -->
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -64,11 +56,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"
       />
 
@@ -312,8 +305,6 @@
       </div>
     </div>
   </DetailDialog>
-
-  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -321,8 +312,10 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type7 from '@/components/Form/FiltersType/Type7.vue'
+import CustomStore from 'devextreme/data/custom_store'
+
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { onMounted, ref } from 'vue'
+import { ref, reactive } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -333,50 +326,167 @@ import {
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import { useQuery } from '@vue/apollo-composable'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import {
   exportToPDF,
   exportToXLSX,
   exportToDOCX
 } from '@/report/Gangguan/Daftar/DGangguan_RecoveryTime'
-import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
-const position = { of: '#data' }
-const showIndicator = ref(true)
-const shading = ref(true)
-const showPane = ref(true)
-const data = ref<any[]>([])
+import type { IRequestOptions } from '@/types/requestParams'
+
+const requestOptions = reactive<IRequestOptions>({
+  skip: 0,
+  take: 20,
+  requireTotalCount: true,
+  sort: null,
+  filter: null
+})
 const dataSelected = ref<any>({})
 const dialogDetail = ref(false)
+const reportData: any = ref(null)
 const dataGridRef = ref<DxDataGrid | null>(null)
-const loading = ref(false)
-const clearSelection = () => {
-  const dataGrid = dataGridRef.value!.instance!
-  dataGrid.clearSelection()
-}
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  if (selectedRowsData[0] != undefined) {
-    dataSelected.value = selectedRowsData[0]
-  }
-  clearSelection()
-  showDetail()
-}
+const filters = ref()
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  posko: { id: 0, name: 'Semua Posko' },
+  periode: '',
+  minTime: '',
+  maxTime: ''
+})
 
-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.gangguan.daftar.ssdaftarGangguanRecoveryTime, query)
+        .then((result) => {
+          const response = result.data.data.ssdaftarGangguanRecoveryTime
+
+          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 resetData = () => {
-  data.value = []
+  allowTableRequest.value = false
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
 }
 
-const filterData = async (params: any) => {
-  resetData()
+const handleRequestChange = (e: any) => {
+  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 { minTime, maxTime, posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
 
-  const query = {
+  return {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -389,147 +499,48 @@ const filterData = async (params: any) => {
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   }
-  loading.value = true
-  await requestGraphQl(queries.gangguan.daftar.recoveryTime, query)
-    .then((result) => {
-      if (result.data.data != undefined) {
-        data.value = result.data.data.daftarGangguanRecoveryTime
-      } else {
-        data.value = []
-      }
-
-      reportMeta.value = filters.value
-    })
-    .catch((err) => {
-      console.error(err)
-    })
-    .finally(() => {
-      loading.value = false
-    })
 }
 
-const onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    exportToPDF(reportMeta, data)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  showDetail()
+}
+
+const showDetail = () => {
+  dialogDetail.value = true
+  clearSelection()
+}
+
+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, data, e)
-  } else {
-    exportToDOCX(reportMeta, data)
+    exportToXLSX(reportMeta, e)
+  } else if (e.format === 'document' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const doc = await exportToDOCX(reportMeta, reportData)
+
+    if (doc) {
+      dataGrid.endCustomLoading()
+    }
   }
 }
-
-const filters = ref()
-const reportMeta = ref({
-  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
-  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
-  posko: { id: 0, name: 'Semua Posko' },
-  periode: '',
-  minTime: '',
-  maxTime: ''
-})
-
-onMounted(() => {
-  if (import.meta.env.DEV) {
-    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',
-        durasi_response_time: 2411,
-        durasi_recovery_time: 249,
-        status_akhir: 'Selesai',
-        is_marking: 0,
-        referensi_marking: 'P3124142424',
-        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',
-        durasi_response_time: 1970,
-        durasi_recovery_time: 415,
-        status_akhir: 'Selesai',
-        is_marking: 0,
-        referensi_marking: 'P3124142424',
-        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',
-        durasi_response_time: 612,
-        durasi_recovery_time: 353,
-        status_akhir: 'Selesai',
-        is_marking: 0,
-        referensi_marking: 'P3124142424',
-        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: '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',
-        durasi_response_time: 1313,
-        durasi_recovery_time: 33958236,
-        status_akhir: 'Dibatalkan',
-        is_marking: 0,
-        referensi_marking: 'P3124142424',
-        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'
-      },
-      {
-        no_laporan: 'G5423020103015',
-        pembuat_laporan: 'CC.54.EKA.CSOI',
-        waktu_lapor: '01-02-2023 07:39:03',
-        waktu_response: '01-02-2023 08:14:56',
-        waktu_recovery: '01-02-2023 08:19:32',
-        durasi_response_time: 2153,
-        durasi_recovery_time: 276,
-        status_akhir: 'Selesai',
-        is_marking: 0,
-        referensi_marking: 'P3124142424',
-        idpel_nometer: '',
-        nama_pelapor: 'IBU DIN',
-        alamat_pelapor:
-          'JL. HAJI MIUN NO.97 RT. 1 RW 2 KEL KALISARI KEC. PASAR REBO JAKTIM, SEBERANG CAFE LAW COFFE ',
-        no_telp_pelapor: '082112050265',
-        keterangan_pelapor: 'MCB LEMAH DAYA 1.300 VA ',
-        media: 'Call PLN 123',
-        nama_posko: 'POSKO CIRACAS'
-      }
-    ]
-  }
-})
 </script>
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
index 9f69b0f..5b5cd92 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
@@ -1,5 +1,5 @@
 <template>
-  <Filters @reset-form="resetData" @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
     <Type7 @update:filters="(value) => (filters = value)" />
   </Filters>
 
diff --git a/src/report/Gangguan/Daftar/DGangguan_RecoveryTime.ts b/src/report/Gangguan/Daftar/DGangguan_RecoveryTime.ts
index 26f6a89..07c7a04 100644
--- a/src/report/Gangguan/Daftar/DGangguan_RecoveryTime.ts
+++ b/src/report/Gangguan/Daftar/DGangguan_RecoveryTime.ts
@@ -64,12 +64,13 @@ const formatMetaData = (reportMeta: any) => {
   }
 }
 
-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'
   })
@@ -150,7 +151,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,
@@ -217,12 +218,19 @@ const exportToPDF = (reportMeta: any, data: any) => {
     margin: { left: 230 }
   })
 
-  doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
-    console.log('pdf berhasil disimpan')
-  })
+  await doc
+    .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()
@@ -282,14 +290,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 },
-    loadPanel: {
-      enabled: false
-    }
+    topLeftCell: { row: 10, column: 1 }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -299,15 +304,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' },
@@ -553,10 +559,17 @@ const exportToDOCX = (reportMeta: any, data: any) => {
     ]
   })
 
-  Packer.toBlob(doc).then((blob) => {
-    saveAs(blob, `Laporan ${reportName}.docx`)
-    console.log('Document created successfully')
-  })
+  await Packer.toBlob(doc)
+    .then((blob) => {
+      saveAs(blob, `Laporan ${reportName}.docx`)
+
+      console.log('DOCX Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting DOCX', error)
+    })
+
+  return true
 }
 
 export { exportToPDF, exportToXLSX, exportToDOCX }
diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index fc0367a..151c5a0 100755
--- a/src/utils/api/api.graphql.ts
+++ b/src/utils/api/api.graphql.ts
@@ -2507,6 +2507,58 @@ export const queries = {
           }
         }
       `,
+      ssdaftarGangguanRecoveryTime: gql`
+        query ssdaftarGangguanRecoveryTime(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $minDurasiRecoveryTime: Int!
+          $maxDurasiRecoveryTime: Int!
+          $skip: Int
+          $take: Int
+          $requireTotalCount: Boolean
+          $sort: [SortInput]
+          $filter: [FilterInput]
+        ) {
+          ssdaftarGangguanRecoveryTime(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            minDurasiRecoveryTime: $minDurasiRecoveryTime
+            maxDurasiRecoveryTime: $maxDurasiRecoveryTime
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+            skip: $skip
+            take: $take
+            requireTotalCount: $requireTotalCount
+            sort: $sort
+            filter: $filter
+          ) {
+            totalCount
+            data {
+              no_laporan
+              pembuat_laporan
+              waktu_lapor
+              waktu_response
+              waktu_recovery
+              durasi_response_time
+              durasi_recovery_time
+              status_akhir
+              is_marking
+              referensi_marking
+              idpel_nometer
+              nama_pelapor
+              alamat_pelapor
+              no_telp_pelapor
+              keterangan_pelapor
+              media
+              nama_posko
+            }
+          }
+        }
+      `,
       melaporLebihDariSatuKaliDetail: gql`
         query detailGangguanLaporLebihDariSatuKali($noLaporan: String!) {
           detailGangguanLaporLebihDariSatuKali(noLaporan: $noLaporan) {

From 03caab34c1686576f7c397234c0ea0646d8d3021 Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Sat, 4 May 2024 15:02:32 +0700
Subject: [PATCH 07/13] feat: implement server side daftar gangguan selesai
 tandap id pelanggan

---
 .../Pages/Gangguan/Daftar/DGangguan_STIDP.vue | 356 ++++++++++--------
 src/report/Gangguan/Daftar/DGangguan_STIDP.ts |  47 ++-
 src/utils/api/api.graphql.ts                  |  46 +++
 3 files changed, 265 insertions(+), 184 deletions(-)

diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
index 11db02d..82ce212 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.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">
     <Type1 @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="loading == false"
+      :remote-operations="true"
       :show-column-lines="true"
       :show-row-lines="false"
       :show-borders="true"
@@ -21,6 +22,7 @@
       :allow-column-resizing="true"
       column-resizing-mode="widget"
     >
+      <DxLoadPanel :enabled="true" />
       <DxSelection mode="single" />
       <DxPaging :page-size="20" :enabled="true" />
       <DxPager
@@ -31,16 +33,6 @@
         :show-info="true"
         :show-navigation-buttons="true"
       />
-      <!-- <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      /> -->
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -48,11 +40,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"
       />
 
@@ -281,8 +274,6 @@
       </div>
     </div>
   </DetailDialog>
-
-  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -290,8 +281,10 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.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,
@@ -302,46 +295,164 @@ import {
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import { useQuery } from '@vue/apollo-composable'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { exportToPDF, exportToDOCX, exportToXLSX } from '@/report/Gangguan/Daftar/DGangguan_STIDP'
-import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
-const position = { of: '#data' }
-const showIndicator = ref(true)
-const shading = ref(true)
-const showPane = ref(true)
-const data = ref<any[]>([])
+import type { IRequestOptions } from '@/types/requestParams'
+
+const requestOptions = reactive<IRequestOptions>({
+  skip: 0,
+  take: 20,
+  requireTotalCount: true,
+  sort: null,
+  filter: null
+})
 const dataSelected = ref<any>({})
 const dialogDetail = ref(false)
+const reportData: any = ref(null)
 const dataGridRef = ref<DxDataGrid | null>(null)
-const loading = ref(false)
-const clearSelection = () => {
-  const dataGrid = dataGridRef.value!.instance!
-  dataGrid.clearSelection()
-}
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  if (selectedRowsData[0] != undefined) {
-    dataSelected.value = selectedRowsData[0]
-  }
-  clearSelection()
-  showDetail()
-}
+const filters = ref()
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  posko: { id: 0, name: 'Semua Posko' },
+  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.gangguan.daftar.ssdaftarGangguanSelesaiTanpaIdPelanggan,
+        query
+      )
+        .then((result) => {
+          const response = result.data.data.ssdaftarGangguanSelesaiTanpaIdPelanggan
+
+          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 resetData = () => {
-  data.value = []
+  allowTableRequest.value = false
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
 }
 
-const filterData = async (params: any) => {
-  resetData()
+const handleRequestChange = (e: any) => {
+  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 { posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
 
-  const query = {
+  return {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -352,135 +463,46 @@ const filterData = async (params: any) => {
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   }
-  loading.value = true
-  await requestGraphQl(queries.gangguan.daftar.selesaiTanpaIDPelanggan, query)
-    .then((result) => {
-      if (result.data.data != undefined) {
-        data.value = result.data.data.daftarGangguanSelesaiTanpaIdPelanggan
-      } else {
-        data.value = []
-      }
-
-      reportMeta.value = filters.value
-    })
-    .catch((err) => {
-      console.error(err)
-    })
-    .finally(() => {
-      loading.value = false
-    })
 }
 
-const onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    exportToPDF(reportMeta, data)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  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, data, e)
-  } else {
-    exportToDOCX(reportMeta, data)
+    exportToXLSX(reportMeta, e)
+  } else if (e.format === 'document' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const doc = await exportToDOCX(reportMeta, reportData)
+
+    if (doc) {
+      dataGrid.endCustomLoading()
+    }
   }
 }
-
-const filters = ref()
-const reportMeta = ref({
-  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
-  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
-  posko: { id: 0, name: 'Semua Posko' },
-  periode: ''
-})
-
-onMounted(() => {
-  if (import.meta.env.DEV) {
-    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',
-        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',
-        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',
-        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: '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',
-        durasi_response_time: 1313,
-        durasi_recovery_time: 33948072,
-        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'
-      },
-      {
-        no_laporan: 'G5423020103015',
-        pembuat_laporan: 'CC.54.EKA.CSOI',
-        waktu_lapor: '01-02-2023 07:39:03',
-        waktu_response: '01-02-2023 08:14:56',
-        waktu_recovery: '01-02-2023 08:19:32',
-        durasi_response_time: 2153,
-        durasi_recovery_time: 276,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'IBU DIN',
-        alamat_pelapor:
-          'JL. HAJI MIUN NO.97 RT. 1 RW 2 KEL KALISARI KEC. PASAR REBO JAKTIM, SEBERANG CAFE LAW COFFE ',
-        no_telp_pelapor: '082112050265',
-        keterangan_pelapor: 'MCB LEMAH DAYA 1.300 VA ',
-        media: 'Call PLN 123',
-        nama_posko: 'POSKO CIRACAS'
-      }
-    ]
-  }
-})
 </script>
diff --git a/src/report/Gangguan/Daftar/DGangguan_STIDP.ts b/src/report/Gangguan/Daftar/DGangguan_STIDP.ts
index fd939c0..c342ced 100644
--- a/src/report/Gangguan/Daftar/DGangguan_STIDP.ts
+++ b/src/report/Gangguan/Daftar/DGangguan_STIDP.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'
   })
@@ -127,7 +128,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,
@@ -194,12 +195,19 @@ const exportToPDF = (reportMeta: any, data: any) => {
     margin: { left: 230 }
   })
 
-  doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
-    console.log('pdf berhasil disimpan')
-  })
+  await doc
+    .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}`)
@@ -252,14 +260,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: 10, column: 1 },
-    loadPanel: {
-      enabled: false
-    }
+    topLeftCell: { row: 10, column: 1 }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -269,15 +274,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' },
@@ -512,10 +518,17 @@ const exportToDOCX = (reportMeta: any, data: any) => {
     ]
   })
 
-  Packer.toBlob(doc).then((blob) => {
-    saveAs(blob, `Laporan ${reportName}.docx`)
-    console.log('Document created successfully')
-  })
+  await Packer.toBlob(doc)
+    .then((blob) => {
+      saveAs(blob, `Laporan ${reportName}.docx`)
+
+      console.log('DOCX Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting DOCX', error)
+    })
+
+  return true
 }
 
 export { exportToPDF, exportToXLSX, exportToDOCX }
diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index 151c5a0..33cc325 100755
--- a/src/utils/api/api.graphql.ts
+++ b/src/utils/api/api.graphql.ts
@@ -2376,6 +2376,52 @@ export const queries = {
           }
         }
       `,
+      ssdaftarGangguanSelesaiTanpaIdPelanggan: gql`
+        query ssdaftarGangguanSelesaiTanpaIdPelanggan(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $skip: Int
+          $take: Int
+          $requireTotalCount: Boolean
+          $sort: [SortInput]
+          $filter: [FilterInput]
+        ) {
+          ssdaftarGangguanSelesaiTanpaIdPelanggan(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+            skip: $skip
+            take: $take
+            requireTotalCount: $requireTotalCount
+            sort: $sort
+            filter: $filter
+          ) {
+            totalCount
+            data {
+              no_laporan
+              pembuat_laporan
+              waktu_lapor
+              waktu_response
+              waktu_recovery
+              durasi_response_time
+              durasi_recovery_time
+              status_akhir
+              idpel_nometer
+              nama_pelapor
+              alamat_pelapor
+              no_telp_pelapor
+              keterangan_pelapor
+              media
+              nama_posko
+            }
+          }
+        }
+      `,
       responseTime: gql`
         query daftarGangguanResponseTime(
           $dateFrom: Date!

From 91c08a29acf69e81b42c849d98daaf0cb40d0d51 Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Sat, 4 May 2024 15:39:54 +0700
Subject: [PATCH 08/13] feat: implement server side daftar gangguan berdasarkan
 media

---
 .../Pages/Gangguan/Daftar/DGangguan_BM.vue    | 359 +++++++++---------
 src/report/Gangguan/Daftar/DGangguan_BM.ts    |  47 ++-
 src/utils/api/api.graphql.ts                  |  50 +++
 3 files changed, 267 insertions(+), 189 deletions(-)

diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
index d7222a4..4eb6511 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_BM.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">
     <Type16 @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"
@@ -21,6 +22,7 @@
       :allow-column-resizing="true"
       column-resizing-mode="widget"
     >
+      <DxLoadPanel :enabled="true" />
       <DxSelection mode="single" />
       <DxPaging :page-size="20" :enabled="true" />
       <DxPager
@@ -31,16 +33,6 @@
         :show-info="true"
         :show-navigation-buttons="true"
       />
-      <!-- <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      /> -->
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -48,11 +40,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"
       />
 
@@ -282,8 +275,6 @@
       </div>
     </div>
   </DetailDialog>
-
-  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -291,8 +282,10 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type16 from '@/components/Form/FiltersType/Type16.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,
@@ -303,46 +296,162 @@ import {
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import { useQuery } from '@vue/apollo-composable'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { exportToPDF, exportToDOCX, exportToXLSX } from '@/report/Gangguan/Daftar/DGangguan_BM'
-import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
-const position = { of: '#data' }
-const showIndicator = ref(true)
-const shading = ref(true)
-const showPane = ref(true)
-const data = ref<any[]>([])
+import type { IRequestOptions } from '@/types/requestParams'
+
+const requestOptions = reactive<IRequestOptions>({
+  skip: 0,
+  take: 20,
+  requireTotalCount: true,
+  sort: null,
+  filter: null
+})
 const dataSelected = ref<any>({})
 const dialogDetail = ref(false)
+const reportData: any = ref(null)
 const dataGridRef = ref<DxDataGrid | null>(null)
-const loading = ref(false)
-const clearSelection = () => {
-  const dataGrid = dataGridRef.value!.instance!
-  dataGrid.clearSelection()
-}
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  if (selectedRowsData[0] != undefined) {
-    dataSelected.value = selectedRowsData[0]
-  }
-  clearSelection()
-  showDetail()
-}
+const filters = ref()
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  posko: { id: 0, name: 'Semua Posko' },
+  media: { id: '', name: 'Semua Media' },
+  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.gangguan.daftar.ssdaftarGangguanBerdasarkanMedia, query)
+        .then((result) => {
+          const response = result.data.data.ssdaftarGangguanBerdasarkanMedia
+
+          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 resetData = () => {
-  data.value = []
+  allowTableRequest.value = false
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
 }
 
-const filterData = async (params: any) => {
-  resetData()
+const handleRequestChange = (e: any) => {
+  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 { posko, uid, up3, media } = params
   const dateValue = params.periode.split(' s/d ')
 
-  const query = {
+  return {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -354,140 +463,46 @@ const filterData = async (params: any) => {
     idUp3: up3 ? up3.id : 0,
     media: media ? media.id : ''
   }
-
-  loading.value = true
-  await requestGraphQl(queries.gangguan.daftar.berdasarkanMedia, query)
-    .then((result) => {
-      if (result.data.data != undefined) {
-        data.value = result.data.data.daftarGangguanBerdasarkanMedia
-      } else {
-        data.value = []
-      }
-
-      reportMeta.value = filters.value
-    })
-    .catch((err) => {
-      console.error(err)
-    })
-    .finally(() => {
-      loading.value = false
-    })
 }
 
-const onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    exportToPDF(reportMeta, data)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  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, data, e)
-  } else {
-    exportToDOCX(reportMeta, data)
+    exportToXLSX(reportMeta, e)
+  } else if (e.format === 'document' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const doc = await exportToDOCX(reportMeta, reportData)
+
+    if (doc) {
+      dataGrid.endCustomLoading()
+    }
   }
 }
-
-const filters = ref()
-const reportMeta = ref({
-  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
-  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
-  posko: { id: 0, name: 'Semua Posko' },
-  media: { id: '', name: 'Semua Media' },
-  periode: ''
-})
-
-onMounted(() => {
-  if (import.meta.env.DEV) {
-    data.value = [
-      {
-        no_laporan: 'G5423020100150',
-        waktu_lapor: '31-01-2023 17:16:17',
-        pembuat_laporan: 'PLNMOBILE',
-        waktu_response: '31-01-2023 17:56:28',
-        waktu_recovery: '31-01-2023 18:00:37',
-        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_media: 'x',
-        media: 'PLN Mobile',
-        waktu_media: '31-12-1969 17:00:00',
-        nama_posko: 'POSKO CIRACAS'
-      },
-      {
-        no_laporan: 'G5423020100985',
-        waktu_lapor: '31-01-2023 20:09:50',
-        pembuat_laporan: 'PLNMOBILE',
-        waktu_response: '31-01-2023 20:42:40',
-        waktu_recovery: '31-01-2023 20:49:35',
-        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_media: 'x',
-        media: 'PLN Mobile',
-        waktu_media: '31-12-1969 17:00:00',
-        nama_posko: 'POSKO CIRACAS'
-      },
-      {
-        no_laporan: 'G5423020101461',
-        waktu_lapor: '31-01-2023 22:38:01',
-        pembuat_laporan: 'PLNMOBILE',
-        waktu_response: '31-01-2023 22:48:13',
-        waktu_recovery: '31-01-2023 22:54:06',
-        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_media: 'x',
-        media: 'PLN Mobile',
-        waktu_media: '31-12-1969 17:00:00',
-        nama_posko: 'POSKO CIRACAS'
-      },
-      {
-        no_laporan: 'G5523020100067',
-        waktu_lapor: '31-01-2023 22:57:02',
-        pembuat_laporan: 'CC.55.SUMIATI',
-        waktu_response: '31-01-2023 23:18:55',
-        waktu_recovery: '31-12-1969 17:00:00',
-        durasi_response_time: 1313,
-        durasi_recovery_time: 33945870,
-        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_media: 'x',
-        media: 'Call PLN 123',
-        waktu_media: '31-12-1969 17:00:00',
-        nama_posko: 'POSKO CIRACAS'
-      },
-      {
-        no_laporan: 'G5423020103015',
-        waktu_lapor: '01-02-2023 00:39:03',
-        pembuat_laporan: 'CC.54.EKA.CSOI',
-        waktu_response: '01-02-2023 01:14:56',
-        waktu_recovery: '01-02-2023 01:19:32',
-        durasi_response_time: 2153,
-        durasi_recovery_time: 276,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'IBU DIN',
-        alamat_pelapor:
-          'JL. HAJI MIUN NO.97 RT. 1 RW 2 KEL KALISARI KEC. PASAR REBO JAKTIM, SEBERANG CAFE LAW COFFE ',
-        no_telp_pelapor: '082112050265',
-        keterangan_media: 'x',
-        media: 'Call PLN 123',
-        waktu_media: '31-12-1969 17:00:00',
-        nama_posko: 'POSKO CIRACAS'
-      }
-    ]
-  }
-})
 </script>
diff --git a/src/report/Gangguan/Daftar/DGangguan_BM.ts b/src/report/Gangguan/Daftar/DGangguan_BM.ts
index 6ba9eb2..3058b45 100644
--- a/src/report/Gangguan/Daftar/DGangguan_BM.ts
+++ b/src/report/Gangguan/Daftar/DGangguan_BM.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'
   })
@@ -134,7 +135,7 @@ const exportToPDF = (reportMeta: any, data: any) => {
         'Keterangan Media'
       ]
     ],
-    body: data.value.map((item: any, i: any) => [
+    body: resultData.map((item: any, i: any) => [
       { content: ++i, styles: { halign: 'right' } },
       item.no_laporan,
       item.nama_pelapor,
@@ -201,12 +202,19 @@ const exportToPDF = (reportMeta: any, data: any) => {
     margin: { left: 230 }
   })
 
-  doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
-    console.log('pdf berhasil disimpan')
-  })
+  await doc
+    .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}`)
@@ -269,14 +277,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: 10, column: 1 },
-    loadPanel: {
-      enabled: false
-    }
+    topLeftCell: { row: 10, column: 1 }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -286,15 +291,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' },
@@ -542,10 +548,17 @@ const exportToDOCX = (reportMeta: any, data: any) => {
     ]
   })
 
-  Packer.toBlob(doc).then((blob) => {
-    saveAs(blob, `Laporan ${reportName}.docx`)
-    console.log('Document created successfully')
-  })
+  await Packer.toBlob(doc)
+    .then((blob) => {
+      saveAs(blob, `Laporan ${reportName}.docx`)
+
+      console.log('DOCX Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting DOCX', error)
+    })
+
+  return true
 }
 
 export { exportToPDF, exportToXLSX, exportToDOCX }
diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index 33cc325..19a07cc 100755
--- a/src/utils/api/api.graphql.ts
+++ b/src/utils/api/api.graphql.ts
@@ -2787,6 +2787,56 @@ export const queries = {
           }
         }
       `,
+      ssdaftarGangguanBerdasarkanMedia: gql`
+        query ssdaftarGangguanBerdasarkanMedia(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $media: String!
+          $skip: Int
+          $take: Int
+          $requireTotalCount: Boolean
+          $sort: [SortInput]
+          $filter: [FilterInput]
+        ) {
+          ssdaftarGangguanBerdasarkanMedia(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+            media: $media
+            skip: $skip
+            take: $take
+            requireTotalCount: $requireTotalCount
+            sort: $sort
+            filter: $filter
+          ) {
+            totalCount
+            data {
+              no_laporan
+              waktu_lapor
+              pembuat_laporan
+              waktu_response
+              waktu_recovery
+              durasi_response_time
+              durasi_recovery_time
+              status_akhir
+              idpel_nometer
+              nama_pelapor
+              alamat_pelapor
+              no_telp_pelapor
+              keterangan_media
+              media
+              waktu_media
+              keterangan_media
+              nama_posko
+            }
+          }
+        }
+      `,
       berdasarkanMedia: gql`
         query daftarGangguanBerdasarkanMedia(
           $dateFrom: Date!

From 4e7dc2adae5b13275f03e0e909278defdf6847c6 Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Sat, 4 May 2024 16:10:07 +0700
Subject: [PATCH 09/13] feat: implement server side daftar gangguan selesai
 mobile apkt

---
 .../Gangguan/Daftar/DGangguan_DMAPKT.vue      | 357 +++++++++---------
 .../Gangguan/Daftar/DGangguan_DMAPKT.ts       |  47 ++-
 src/utils/api/api.graphql.ts                  |  46 +++
 3 files changed, 265 insertions(+), 185 deletions(-)

diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
index da0d5ed..1137e53 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.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">
     <Type1 @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"
@@ -21,6 +22,7 @@
       :allow-column-resizing="true"
       column-resizing-mode="widget"
     >
+      <DxLoadPanel :enabled="true" />
       <DxSelection mode="single" />
       <DxPaging :page-size="20" :enabled="true" />
       <DxPager
@@ -31,16 +33,6 @@
         :show-info="true"
         :show-navigation-buttons="true"
       />
-      <!-- <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      /> -->
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -48,11 +40,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"
       />
 
@@ -277,8 +270,6 @@
       </div>
     </div>
   </DetailDialog>
-
-  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -286,8 +277,10 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.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,
@@ -298,46 +291,164 @@ import {
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import { useQuery } from '@vue/apollo-composable'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Gangguan/Daftar/DGangguan_DMAPKT'
-import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
-const position = { of: '#data' }
-const showIndicator = ref(true)
-const shading = ref(true)
-const showPane = ref(true)
-const data = ref<any[]>([])
+import type { IRequestOptions } from '@/types/requestParams'
+
+const requestOptions = reactive<IRequestOptions>({
+  skip: 0,
+  take: 20,
+  requireTotalCount: true,
+  sort: null,
+  filter: null
+})
 const dataSelected = ref<any>({})
 const dialogDetail = ref(false)
+const reportData: any = ref(null)
 const dataGridRef = ref<DxDataGrid | null>(null)
-const loading = ref(false)
-const clearSelection = () => {
-  const dataGrid = dataGridRef.value!.instance!
-  dataGrid.clearSelection()
-}
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  if (selectedRowsData[0] != undefined) {
-    dataSelected.value = selectedRowsData[0]
-  }
-  clearSelection()
-  showDetail()
-}
+const filters = ref()
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  posko: { id: 0, name: 'Semua Posko' },
+  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.gangguan.daftar.ssdaftarGangguanDiselesaikanMobileAPKT,
+        query
+      )
+        .then((result) => {
+          const response = result.data.data.ssdaftarGangguanDiselesaikanMobileAPKT
+
+          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 resetData = () => {
-  data.value = []
+  allowTableRequest.value = false
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
 }
 
-const filterData = async (params: any) => {
-  resetData()
+const handleRequestChange = (e: any) => {
+  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 { posko, uid, up3 } = params
 
-  const query = {
+  return {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -348,136 +459,46 @@ const filterData = async (params: any) => {
     idUid: uid ? uid.id : 0,
     idUp3: up3?.id ? up3.id : 0
   }
-
-  loading.value = true
-  await requestGraphQl(queries.gangguan.daftar.diselesaikanMobileAPKT, query)
-    .then((result) => {
-      if (result.data.data != undefined) {
-        data.value = result.data.data.daftarGangguanDiselesaikanMobileAPKT
-      } else {
-        data.value = []
-      }
-
-      reportMeta.value = filters.value
-    })
-    .catch((err) => {
-      console.error(err)
-    })
-    .finally(() => {
-      loading.value = false
-    })
 }
 
-const onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    exportToPDF(reportMeta, data)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  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, data, e)
-  } else {
-    exportToDOCX(reportMeta, data)
+    exportToXLSX(reportMeta, e)
+  } else if (e.format === 'document' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const doc = await exportToDOCX(reportMeta, reportData)
+
+    if (doc) {
+      dataGrid.endCustomLoading()
+    }
   }
 }
-
-const filters = ref()
-const reportMeta = ref({
-  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
-  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
-  posko: { id: 0, name: 'Semua Posko' },
-  periode: ''
-})
-
-onMounted(() => {
-  if (import.meta.env.DEV) {
-    data.value = [
-      {
-        no_laporan: 'G5423020100150',
-        waktu_lapor: '01-02-2023 00:16:17',
-        pembuat_laporan: 'PLNMOBILE',
-        waktu_response: '01-02-2023 00:56:28',
-        waktu_recovery: '01-02-2023 01:00:37',
-        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',
-        waktu_lapor: '01-02-2023 03:09:50',
-        pembuat_laporan: 'PLNMOBILE',
-        waktu_response: '01-02-2023 03:42:40',
-        waktu_recovery: '01-02-2023 03:49:35',
-        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',
-        waktu_lapor: '01-02-2023 05:38:01',
-        pembuat_laporan: 'PLNMOBILE',
-        waktu_response: '01-02-2023 05:48:13',
-        waktu_recovery: '01-02-2023 05:54:06',
-        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: 'G5523020100067',
-        waktu_lapor: '01-02-2023 05:57:02',
-        pembuat_laporan: 'CC.55.SUMIATI',
-        waktu_response: '01-02-2023 06:18:55',
-        waktu_recovery: '01-01-1970 00:00:00',
-        durasi_response_time: 1313,
-        durasi_recovery_time: 33958371,
-        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'
-      },
-      {
-        no_laporan: 'G5423020103015',
-        waktu_lapor: '01-02-2023 07:39:03',
-        pembuat_laporan: 'CC.54.EKA.CSOI',
-        waktu_response: '01-02-2023 08:14:56',
-        waktu_recovery: '01-02-2023 08:19:32',
-        durasi_response_time: 2153,
-        durasi_recovery_time: 276,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'IBU DIN',
-        alamat_pelapor:
-          'JL. HAJI MIUN NO.97 RT. 1 RW 2 KEL KALISARI KEC. PASAR REBO JAKTIM, SEBERANG CAFE LAW COFFE ',
-        no_telp_pelapor: '082112050265',
-        keterangan_pelapor: 'MCB LEMAH DAYA 1.300 VA ',
-        media: 'Call PLN 123',
-        nama_posko: 'POSKO CIRACAS'
-      }
-    ]
-  }
-})
 </script>
diff --git a/src/report/Gangguan/Daftar/DGangguan_DMAPKT.ts b/src/report/Gangguan/Daftar/DGangguan_DMAPKT.ts
index a4784c2..d7e26e1 100644
--- a/src/report/Gangguan/Daftar/DGangguan_DMAPKT.ts
+++ b/src/report/Gangguan/Daftar/DGangguan_DMAPKT.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'
   })
@@ -127,7 +128,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,
@@ -194,12 +195,19 @@ const exportToPDF = (reportMeta: any, data: any) => {
     margin: { left: 230 }
   })
 
-  doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
-    console.log('pdf berhasil disimpan')
-  })
+  await doc
+    .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}`)
@@ -252,14 +260,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: 10, column: 1 },
-    loadPanel: {
-      enabled: false
-    }
+    topLeftCell: { row: 10, column: 1 }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -269,15 +274,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' },
@@ -512,10 +518,17 @@ const exportToDOCX = (reportMeta: any, data: any) => {
     ]
   })
 
-  Packer.toBlob(doc).then((blob) => {
-    saveAs(blob, `Laporan ${reportName}.docx`)
-    console.log('Document created successfully')
-  })
+  await Packer.toBlob(doc)
+    .then((blob) => {
+      saveAs(blob, `Laporan ${reportName}.docx`)
+
+      console.log('DOCX Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting DOCX', error)
+    })
+
+  return true
 }
 
 export { exportToPDF, exportToXLSX, exportToDOCX }
diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index 19a07cc..40284e0 100755
--- a/src/utils/api/api.graphql.ts
+++ b/src/utils/api/api.graphql.ts
@@ -2705,6 +2705,52 @@ export const queries = {
           }
         }
       `,
+      ssdaftarGangguanDiselesaikanMobileAPKT: gql`
+        query ssdaftarGangguanDiselesaikanMobileAPKT(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $skip: Int
+          $take: Int
+          $requireTotalCount: Boolean
+          $sort: [SortInput]
+          $filter: [FilterInput]
+        ) {
+          ssdaftarGangguanDiselesaikanMobileAPKT(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+            skip: $skip
+            take: $take
+            requireTotalCount: $requireTotalCount
+            sort: $sort
+            filter: $filter
+          ) {
+            totalCount
+            data {
+              no_laporan
+              waktu_lapor
+              pembuat_laporan
+              waktu_response
+              waktu_recovery
+              durasi_response_time
+              durasi_recovery_time
+              status_akhir
+              idpel_nometer
+              nama_pelapor
+              alamat_pelapor
+              no_telp_pelapor
+              keterangan_pelapor
+              media
+              nama_posko
+            }
+          }
+        }
+      `,
       diselesaikanMobileAPKT: gql`
         query daftarGangguanDiselesaikanMobileAPKT(
           $dateFrom: Date!

From b94201911f53303f5524fc4b1d36fdc33080bfe6 Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Sun, 5 May 2024 11:53:21 +0700
Subject: [PATCH 10/13] feat: implement server side in daftar keluhan dialihkan
 ke unit lain

---
 .../Pages/Keluhan/Daftar/DKeluhan_DKUL.vue    | 357 +++++++++---------
 src/report/Keluhan/Daftar/DKeluhan_DKUL.ts    |  44 ++-
 src/utils/api/api.graphql.ts                  |  50 +++
 3 files changed, 262 insertions(+), 189 deletions(-)

diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
index ebf65fe..d12c168 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
+++ b/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' }
-const showIndicator = ref(true)
-const shading = ref(true)
-const showPane = ref(true)
-const data = ref<any[]>([])
+import type { IRequestOptions } from '@/types/requestParams'
+
+const requestOptions = reactive<IRequestOptions>({
+  skip: 0,
+  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) => {
-  resetData()
+const handleRequestChange = (e: any) => {
+  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(() => {
-  if (import.meta.env.DEV) {
-    data.value = [
-      {
-        no_laporan: 'K5523020400288',
-        pembuat_laporan: 'CC.55.ANISA',
-        waktu_lapor: '04/02/2023 11:18:57',
-        waktu_dialihkan: '04/02/2023 12:49:36',
-        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'
-      }
-    ]
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
   }
-})
+  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>
diff --git a/src/report/Keluhan/Daftar/DKeluhan_DKUL.ts b/src/report/Keluhan/Daftar/DKeluhan_DKUL.ts
index 7c81648..c0fa171 100644
--- a/src/report/Keluhan/Daftar/DKeluhan_DKUL.ts
+++ b/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(() => {
-    console.log('pdf berhasil disimpan')
-  })
+  await doc
+    .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) => {
-    saveAs(blob, `Laporan ${reportName}.docx`)
-    console.log('Document created successfully')
-  })
+  await Packer.toBlob(doc)
+    .then((blob) => {
+      saveAs(blob, `Laporan ${reportName}.docx`)
+
+      console.log('DOCX Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting DOCX', error)
+    })
+
+  return true
 }
 
 export { exportToPDF, exportToXLSX, exportToDOCX }
diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index 40284e0..ebe7235 100755
--- a/src/utils/api/api.graphql.ts
+++ b/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!

From 1b94c0ba746b6a4f1bd2634f79341aa93b2f5aad Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Sun, 5 May 2024 12:06:28 +0700
Subject: [PATCH 11/13] feat: implement server side daftar keluhan berdasarkan
 media

---
 .../Keluhan/Daftar/DKeluhan_BerdasarMedia.vue | 363 +++++++++---------
 .../Keluhan/Daftar/DKeluhan_BerdasarMedia.ts  |  44 ++-
 src/utils/api/api.graphql.ts                  |  47 +++
 3 files changed, 268 insertions(+), 186 deletions(-)

diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
index 01842a7..caec99e 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.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,11 +43,12 @@
       <DxColumnFixing :enabled="true" />
 
       <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
@@ -281,7 +284,6 @@
       </div>
     </div>
   </DetailDialog>
-  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -289,8 +291,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,
@@ -308,59 +312,161 @@ import {
   exportToXLSX,
   exportToDOCX
 } from '@/report/Keluhan/Daftar/DKeluhan_BerdasarMedia'
-import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
-const position = { of: '#data' }
-const showIndicator = ref(true)
-const shading = ref(true)
-const showPane = ref(true)
+import type { IRequestOptions } from '@/types/requestParams'
+
+const requestOptions = reactive<IRequestOptions>({
+  skip: 0,
+  take: 20,
+  requireTotalCount: true,
+  sort: null,
+  filter: null
+})
 const dataSelected = ref<any>()
 const dialogDetail = 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' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
+  periode: ''
+})
+
+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.ssdaftarKeluhanBerdasarkanMedia, query)
+        .then((result) => {
+          const response = result.data.data.ssdaftarKeluhanBerdasarkanMedia
+
+          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 dataGridRef = ref<DxDataGrid | null>(null)
-const clearSelection = () => {
-  const dataGrid = dataGridRef.value!.instance!
-  dataGrid.clearSelection()
-}
-const showDetail = () => {
-  clearSelection()
-  dialogDetail.value = true
-}
-
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  if (selectedRowsData[0] != undefined) {
-    dataSelected.value = selectedRowsData[0]
-  }
-  showDetail()
-}
-
-const onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    exportToPDF(reportMeta, data)
-  } else if (e.format === 'xlsx') {
-    exportToXLSX(reportMeta, e)
-  } else {
-    exportToDOCX(reportMeta, data)
-  }
-}
-
-const data = ref<any[]>([])
-const loading = ref(false)
-
 const resetData = () => {
-  data.value = []
+  allowTableRequest.value = false
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
 }
 
-const filterData = async (params: any) => {
-  resetData()
+const handleRequestChange = (e: any) => {
+  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),
@@ -371,135 +477,48 @@ const filterData = async (params: any) => {
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   }
-
-  loading.value = true
-  await requestGraphQl(queries.keluhan.daftar.keluhanBerdasarkanMedia, query)
-    .then((result) => {
-      if (result.data.data != undefined) {
-        data.value = result.data.data.daftarKeluhanBerdasarkanMedia
-      } else {
-        data.value = []
-      }
-
-      reportMeta.value = filters.value
-    })
-    .catch((err) => {
-      console.error(err)
-    })
-    .finally(() => {
-      loading.value = false
-    })
 }
 
-const filters = ref()
-const reportMeta = ref({
-  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' },
-  periode: ''
-})
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 
-onMounted(() => {
-  if (import.meta.env.DEV) {
-    data.value = [
-      {
-        no_laporan: 'K5123020100019',
-        waktu_lapor: '01/02/2023 01:59:02',
-        waktu_response: '01/02/2023 05:22:50',
-        waktu_recovery: '01/02/2023 08:33:38',
-        durasi_response_time: 12228,
-        durasi_recovery_time: 11448,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'BP AHMAD',
-        alamat_pelapor:
-          'JL BENTENGAN TIMUR NO31 RT11/03, SUNTER JAYA, TANJUNG PRIOK, KOTA ADM. JAKARTA UTARA, DKI JAKARTA',
-        no_telp_pelapor: '082320000152',
-        keterangan_pelapor:
-          'MOHON BANTUAN PEMBATALAN PERMOHONAN PB NO AGENDA 545109912301319203 DIKARENAKAN PELANGGAN INGIN KE DAYA 2200 VA, PELANGGAN SUDAH MELAKUKAN PEMBAYARAN MELALAUI GOPAY TANGGAL 31/01/2023 PUKUL 18:49 WIB, NAMUN PEMBAYARAN BELUM MASUK, MOHON KONFRIMASI KE PELANGGAN, TERIMA KASIH. ',
-        media: 'Call PLN 123',
-        waktu_media: '01/01/1970 00:00:00',
-        keterangan_media: 'x',
-        nama_ulp: 'UP3 TANJUNG PRIOK'
-      },
-      {
-        no_laporan: 'K5123020100021',
-        waktu_lapor: '01/02/2023 02:04:04',
-        waktu_response: '01/02/2023 02:26:01',
-        waktu_recovery: '01/02/2023 02:34:06',
-        durasi_response_time: 1317,
-        durasi_recovery_time: 485,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'IBU TITIN ',
-        alamat_pelapor: 'TIDAK BISAMALKUKANPEMBELIAN KETMELEBIHI BATAS MAXIMUM / SISA 100 KWH ',
-        no_telp_pelapor: '087786974290',
-        keterangan_pelapor: 'TIDAK BISAMALKUKANPEMBELIAN KETMELEBIHI BATAS MAXIMUM / SISA 100 KWH ',
-        media: 'Call PLN 123',
-        waktu_media: '01/01/1970 00:00:00',
-        keterangan_media: 'x',
-        nama_ulp: 'ULP CIBITUNG'
-      },
-      {
-        no_laporan: 'K1423020100022',
-        waktu_lapor: '01/02/2023 03:13:25',
-        waktu_response: '01/02/2023 04:59:44',
-        waktu_recovery: '01/02/2023 07:03:37',
-        durasi_response_time: 6379,
-        durasi_recovery_time: 7433,
-        status_akhir: 'Selesai',
-        idpel_nometer: '000000000000000001820788',
-        nama_pelapor: 'IBU IRFI ',
-        alamat_pelapor:
-          'JL NIAGA 7 PERUM KEMANG BLOK F NO 23 KEC RAWA LUMBU KEL SEPANJANG JAYA KOTA BEKASI ACUAN LOKASI DEKAT RUMAH YATIM ',
-        no_telp_pelapor: '62816922683',
-        keterangan_pelapor:
-          'TIDAK BISA INPUT TOKEN SETELAH UPDATE VKRN 43 (PTL TIDAK PADAM) \\nDENGAN NO METER 56700750112 DAN SISA KWH 15.1',
-        media: 'Call PLN 123',
-        waktu_media: '01/01/1970 00:00:00',
-        keterangan_media: 'x',
-        nama_ulp: 'ULP BANTARGEBANG'
-      },
-      {
-        no_laporan: 'K5223020100106',
-        waktu_lapor: '01/02/2023 03:45:58',
-        waktu_response: '01/02/2023 06:24:51',
-        waktu_recovery: '01/02/2023 06:28:11',
-        durasi_response_time: 9533,
-        durasi_recovery_time: 200,
-        status_akhir: 'Selesai',
-        idpel_nometer: '000000000000000000943441',
-        nama_pelapor: 'IBU MELLY KURNIASIH',
-        alamat_pelapor: 'PERUMAHAN CEMPAKA ARUM JL. FLAMBOYAN 5 NO 191 CIREBON',
-        no_telp_pelapor: '08889353988',
-        keterangan_pelapor:
-          'LEBIH TAGIH. ST AK REK FEB 2023 (28/01/2023) = 4608, ST APP TGL 26/01/2023 = 4496. REK BELUM DILUNASI. (RUMAH TIDAK DIHUNI NAMUN PAGAR TIDAK TERKUNCI, PETUGAS TIDAK DIKETAHUI DATANG KE LOKASI). PELANGGAN MENGINGINKAN AGAR HAL TERSEBUT TIDAK TERULANG KEMBALI.',
-        media: 'Live Chat PLN Mobile',
-        waktu_media: '01/01/1970 00:00:00',
-        keterangan_media: 'x',
-        nama_ulp: 'ULP SUMBER'
-      },
-      {
-        no_laporan: 'K5223020100112',
-        waktu_lapor: '01/02/2023 04:16:48',
-        waktu_response: '01/02/2023 05:58:33',
-        waktu_recovery: '01/02/2023 12:02:23',
-        durasi_response_time: 6105,
-        durasi_recovery_time: 21830,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'BP HENDRIYANTO',
-        alamat_pelapor:
-          'JL.PALEM HIJAU, COKROKONTENG, RT.04 RW.2. KEL SIDOARUM. KEC GODEAN KAB SLEMAN PROV DIY',
-        no_telp_pelapor: '085921182228',
-        keterangan_pelapor:
-          'PELANGGAN TIDAK BISA INPUT TOKEN SETELAH UPDATE VKRN 43. (BELUM ADA) PETUGAS YANG MELAKUKAN PENGATURAN. SISA KWH: 385.41. PTL (HAMPIR PADAM). PELANGGAN PERNAH LAPOR DENGAN NO: K5223013102183, STATUS SELESAI, PELANGGAN TIDAK DIKONFIRMASI s.d 1X6 JAM. LAPOR KEMBALI CC.54.JULIANA TGL 01/02/23 12FZUS3 08.46 085921182228',
-        media: 'Live Chat PLN Mobile',
-        waktu_media: '01/01/1970 00:00:00',
-        keterangan_media: 'x',
-        nama_ulp: 'ULP SEDAYU'
-      }
-    ]
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
   }
-})
+  showDetail()
+}
+
+const showDetail = () => {
+  clearSelection()
+  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>
diff --git a/src/report/Keluhan/Daftar/DKeluhan_BerdasarMedia.ts b/src/report/Keluhan/Daftar/DKeluhan_BerdasarMedia.ts
index 6e5954d..eed4f5c 100644
--- a/src/report/Keluhan/Daftar/DKeluhan_BerdasarMedia.ts
+++ b/src/report/Keluhan/Daftar/DKeluhan_BerdasarMedia.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'
   })
@@ -129,7 +130,7 @@ const exportToPDF = (reportMeta: any, data: any) => {
         'Keterangan Media'
       ]
     ],
-    body: data.value.map((item: any, i: any) => [
+    body: resultData.map((item: any, i: any) => [
       { content: ++i, styles: { halign: 'right' } },
       item.no_laporan,
       item.nama_pelapor,
@@ -196,12 +197,19 @@ const exportToPDF = (reportMeta: any, data: any) => {
     margin: { left: 230 }
   })
 
-  doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
-    console.log('pdf berhasil disimpan')
-  })
+  await doc
+    .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}`)
@@ -254,11 +262,11 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   worksheet.mergeCells('A6:O6')
   worksheet.mergeCells('A7:O7')
 
-  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`)
@@ -268,15 +276,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 resultData = data.value.data
   const meta = formatMetaData(reportMeta)
 
   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' },
@@ -511,10 +520,17 @@ const exportToDOCX = (reportMeta: any, data: any) => {
     ]
   })
 
-  Packer.toBlob(doc).then((blob) => {
-    saveAs(blob, `Laporan ${reportName}.docx`)
-    console.log('Document created successfully')
-  })
+  await Packer.toBlob(doc)
+    .then((blob) => {
+      saveAs(blob, `Laporan ${reportName}.docx`)
+
+      console.log('DOCX Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting DOCX', error)
+    })
+
+  return true
 }
 
 export { exportToPDF, exportToXLSX, exportToDOCX }
diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index ebe7235..d5c855d 100755
--- a/src/utils/api/api.graphql.ts
+++ b/src/utils/api/api.graphql.ts
@@ -331,6 +331,53 @@ export const queries = {
           }
         }
       `,
+      ssdaftarKeluhanBerdasarkanMedia: gql`
+        query ssdaftarKeluhanBerdasarkanMedia(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $skip: Int
+          $take: Int
+          $requireTotalCount: Boolean
+          $sort: [SortInput]
+          $filter: [FilterInput]
+        ) {
+          ssdaftarKeluhanBerdasarkanMedia(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+            skip: $skip
+            take: $take
+            requireTotalCount: $requireTotalCount
+            sort: $sort
+            filter: $filter
+          ) {
+            totalCount
+            data {
+              no_laporan
+              waktu_lapor
+              waktu_response
+              waktu_recovery
+              durasi_response_time
+              durasi_recovery_time
+              status_akhir
+              idpel_nometer
+              nama_pelapor
+              alamat_pelapor
+              no_telp_pelapor
+              keterangan_pelapor
+              media
+              waktu_media
+              keterangan_media
+              nama_ulp
+            }
+          }
+        }
+      `,
       keluhanBerdasarkanMedia: gql`
         query daftarKeluhanBerdasarkanMedia(
           $dateFrom: Date!

From fddc43581d3f8bf61589cc9c8cec115b1ba77c1a Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Sun, 5 May 2024 17:50:06 +0700
Subject: [PATCH 12/13] feat: implement server side in daftar keluhan selesai
 cc

---
 .../Keluhan/Daftar/DKeluhan_SelesaiCC.vue     | 377 +++++++++---------
 .../Keluhan/Daftar/DKeluhan_SelesaiCC.ts      |  44 +-
 src/utils/api/api.graphql.ts                  |  53 +++
 3 files changed, 271 insertions(+), 203 deletions(-)

diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
index 3e792f3..f3dc767 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.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"
@@ -294,7 +296,6 @@
       </div>
     </div>
   </DetailDialog>
-  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -302,7 +303,9 @@ 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 { onMounted, ref } from 'vue'
+import CustomStore from 'devextreme/data/custom_store'
+
+import { reactive, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -317,48 +320,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_SelesaiCC'
-import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
-const position = { of: '#data' }
-const showIndicator = ref(true)
-const shading = ref(true)
-const showPane = ref(true)
+import type { IRequestOptions } from '@/types/requestParams'
+
+const requestOptions = reactive<IRequestOptions>({
+  skip: 0,
+  take: 20,
+  requireTotalCount: true,
+  sort: null,
+  filter: null
+})
 const dataSelected = ref<any>()
 const dialogDetail = ref(false)
-
-const closeDialog = () => {
-  dialogDetail.value = false
-}
-
+const reportData: any = ref(null)
 const dataGridRef = ref<DxDataGrid | null>(null)
-const clearSelection = () => {
-  const dataGrid = dataGridRef.value!.instance!
-  dataGrid.clearSelection()
-}
-const showDetail = () => {
-  clearSelection()
-  dialogDetail.value = true
-}
-
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  if (selectedRowsData[0] != undefined) {
-    dataSelected.value = selectedRowsData[0]
-    showDetail()
-  }
-}
-
-const onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    exportToPDF(reportMeta, data)
-  } else if (e.format === 'xlsx') {
-    exportToXLSX(reportMeta, e)
-  } else {
-    exportToDOCX(reportMeta, data)
-  }
-}
-
-const data = ref<any[]>([])
-const loading = ref(false)
 const filters = ref()
 const reportMeta = ref({
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
@@ -367,16 +342,135 @@ const reportMeta = ref({
   periode: ''
 })
 
+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.ssdaftarKeluhanDiselesaikanCC123, query)
+        .then((result) => {
+          const response = result.data.data.ssdaftarKeluhanDiselesaikanCC123
+
+          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 resetData = () => {
-  data.value = []
+  allowTableRequest.value = false
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
 }
 
-const filterData = async (params: any) => {
-  resetData()
+const handleRequestChange = (e: any) => {
+  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),
@@ -388,147 +482,52 @@ const filterData = async (params: any) => {
     idUp3: up3 ? up3.id : 0,
     media: ''
   }
-
-  loading.value = true
-  await requestGraphQl(queries.keluhan.daftar.keluhanDiselesaikanCC123, query)
-    .then((result) => {
-      if (result.data.data != undefined) {
-        data.value = result.data.data.daftarKeluhanDiselesaikanCC123
-      } else {
-        data.value = []
-      }
-
-      reportMeta.value = filters.value
-    })
-    .catch((err) => {
-      console.error(err)
-    })
-    .finally(() => {
-      loading.value = false
-    })
 }
 
-onMounted(() => {
-  if (import.meta.env.DEV) {
-    data.value = [
-      {
-        no_laporan: 'K5123020100019',
-        id_uid: 2,
-        nama_uid: 'DISTRIBUSI JAKARTA RAYA',
-        id_up3: 13,
-        nama_up3: 'UP3 TANJUNG PRIOK',
-        id_ulp: 54510,
-        nama_ulp: 'UP3 TANJUNG PRIOK',
-        idpel_nometer: '',
-        nama_pelapor: 'BP AHMAD',
-        alamat_pelapor:
-          'JL BENTENGAN TIMUR NO31 RT11/03, SUNTER JAYA, TANJUNG PRIOK, KOTA ADM. JAKARTA UTARA, DKI JAKARTA',
-        no_telp_pelapor: '082320000152',
-        keterangan_pelapor:
-          'MOHON BANTUAN PEMBATALAN PERMOHONAN PB NO AGENDA 545109912301319203 DIKARENAKAN PELANGGAN INGIN KE DAYA 2200 VA, PELANGGAN SUDAH MELAKUKAN PEMBAYARAN MELALAUI GOPAY TANGGAL 31/01/2023 PUKUL 18:49 WIB, NAMUN PEMBAYARAN BELUM MASUK, MOHON KONFRIMASI KE PELANGGAN, TERIMA KASIH. ',
-        status_akhir: 'Selesai',
-        pembuat_laporan: 'CC.51.NUGROHO',
-        waktu_lapor: '01/02/2023 01:59:02',
-        waktu_recovery: '01/02/2023 08:33:38',
-        jumlah_lapor: 1,
-        media: 'Call PLN 123',
-        nama_issuetype: 'Informasi',
-        nama_subissuetype: 'PB '
-      },
-      {
-        no_laporan: 'K5123020100021',
-        id_uid: 427,
-        nama_uid: 'DISTRIBUSI JAWA BARAT',
-        id_up3: 547,
-        nama_up3: 'UP3 CIKARANG',
-        id_ulp: 53702,
-        nama_ulp: 'ULP CIBITUNG',
-        idpel_nometer: '',
-        nama_pelapor: 'IBU TITIN ',
-        alamat_pelapor: 'TIDAK BISAMALKUKANPEMBELIAN KETMELEBIHI BATAS MAXIMUM / SISA 100 KWH ',
-        no_telp_pelapor: '087786974290',
-        keterangan_pelapor: 'TIDAK BISAMALKUKANPEMBELIAN KETMELEBIHI BATAS MAXIMUM / SISA 100 KWH ',
-        status_akhir: 'Selesai',
-        pembuat_laporan: 'CC.51.BARIQI',
-        waktu_lapor: '01/02/2023 02:04:04',
-        waktu_recovery: '01/02/2023 02:34:06',
-        jumlah_lapor: 1,
-        media: 'Call PLN 123',
-        nama_issuetype: 'Tagihan Listrik dan Token ',
-        nama_subissuetype: 'Tidak bisa beli Token '
-      },
-      {
-        no_laporan: 'K1423020100022',
-        id_uid: 427,
-        nama_uid: 'DISTRIBUSI JAWA BARAT',
-        id_up3: 532,
-        nama_up3: 'UP3 BEKASI',
-        id_ulp: 53741,
-        nama_ulp: 'ULP BANTARGEBANG',
-        idpel_nometer: '000000000000000001820788',
-        nama_pelapor: 'IBU IRFI ',
-        alamat_pelapor:
-          'JL NIAGA 7 PERUM KEMANG BLOK F NO 23 KEC RAWA LUMBU KEL SEPANJANG JAYA KOTA BEKASI ACUAN LOKASI DEKAT RUMAH YATIM ',
-        no_telp_pelapor: '62816922683',
-        keterangan_pelapor:
-          'TIDAK BISA INPUT TOKEN SETELAH UPDATE VKRN 43 (PTL TIDAK PADAM) \\nDENGAN NO METER 56700750112 DAN SISA KWH 15.1',
-        status_akhir: 'Selesai',
-        pembuat_laporan: 'CC.14.ANDI',
-        waktu_lapor: '01/02/2023 03:13:25',
-        waktu_recovery: '01/02/2023 07:03:37',
-        jumlah_lapor: 1,
-        media: 'Call PLN 123',
-        nama_issuetype: 'Tagihan Listrik dan Token ',
-        nama_subissuetype: 'Gagal Input Token'
-      },
-      {
-        no_laporan: 'K5223020100106',
-        id_uid: 427,
-        nama_uid: 'DISTRIBUSI JAWA BARAT',
-        id_up3: 537,
-        nama_up3: 'UP3 CIREBON',
-        id_ulp: 53331,
-        nama_ulp: 'ULP SUMBER',
-        idpel_nometer: '000000000000000000943441',
-        nama_pelapor: 'IBU MELLY KURNIASIH',
-        alamat_pelapor: 'PERUMAHAN CEMPAKA ARUM JL. FLAMBOYAN 5 NO 191 CIREBON',
-        no_telp_pelapor: '08889353988',
-        keterangan_pelapor:
-          'LEBIH TAGIH. ST AK REK FEB 2023 (28/01/2023) = 4608, ST APP TGL 26/01/2023 = 4496. REK BELUM DILUNASI. (RUMAH TIDAK DIHUNI NAMUN PAGAR TIDAK TERKUNCI, PETUGAS TIDAK DIKETAHUI DATANG KE LOKASI). PELANGGAN MENGINGINKAN AGAR HAL TERSEBUT TIDAK TERULANG KEMBALI.',
-        status_akhir: 'Selesai',
-        pembuat_laporan: 'CC.52.YORDAN.LC',
-        waktu_lapor: '01/02/2023 03:45:58',
-        waktu_recovery: '01/02/2023 06:28:11',
-        jumlah_lapor: 1,
-        media: 'Live Chat PLN Mobile',
-        nama_issuetype: 'Cater',
-        nama_subissuetype: 'Keakuratan hasil catat meter '
-      },
-      {
-        no_laporan: 'K5223020100112',
-        id_uid: 101,
-        nama_uid: 'DISTRIBUSI JAWA TENGAH & DIY',
-        id_up3: 52100,
-        nama_up3: 'UP3 YOGYAKARTA',
-        id_ulp: 52104,
-        nama_ulp: 'ULP SEDAYU',
-        idpel_nometer: '',
-        nama_pelapor: 'BP HENDRIYANTO',
-        alamat_pelapor:
-          'JL.PALEM HIJAU, COKROKONTENG, RT.04 RW.2. KEL SIDOARUM. KEC GODEAN KAB SLEMAN PROV DIY',
-        no_telp_pelapor: '085921182228',
-        keterangan_pelapor:
-          'PELANGGAN TIDAK BISA INPUT TOKEN SETELAH UPDATE VKRN 43. (BELUM ADA) PETUGAS YANG MELAKUKAN PENGATURAN. SISA KWH: 385.41. PTL (HAMPIR PADAM). PELANGGAN PERNAH LAPOR DENGAN NO: K5223013102183, STATUS SELESAI, PELANGGAN TIDAK DIKONFIRMASI s.d 1X6 JAM. LAPOR KEMBALI CC.54.JULIANA TGL 01/02/23 12FZUS3 08.46 085921182228',
-        status_akhir: 'Selesai',
-        pembuat_laporan: 'CC.52.YORDAN.LC',
-        waktu_lapor: '01/02/2023 04:16:48',
-        waktu_recovery: '01/02/2023 12:02:23',
-        jumlah_lapor: 1,
-        media: 'Live Chat PLN Mobile',
-        nama_issuetype: 'Tagihan Listrik dan Token ',
-        nama_subissuetype: 'Gagal Input Token'
-      }
-    ]
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+    showDetail()
   }
-})
+}
+
+const closeDialog = () => {
+  dialogDetail.value = false
+}
+
+const showDetail = () => {
+  clearSelection()
+  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>
diff --git a/src/report/Keluhan/Daftar/DKeluhan_SelesaiCC.ts b/src/report/Keluhan/Daftar/DKeluhan_SelesaiCC.ts
index 33965d9..97bf323 100644
--- a/src/report/Keluhan/Daftar/DKeluhan_SelesaiCC.ts
+++ b/src/report/Keluhan/Daftar/DKeluhan_SelesaiCC.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'
   })
@@ -131,7 +132,7 @@ const exportToPDF = (reportMeta: any, data: any) => {
         'Sub Issue Type'
       ]
     ],
-    body: data.value.map((item: any, i: any) => [
+    body: resultData.map((item: any, i: any) => [
       { content: ++i, styles: { halign: 'right' } },
       item.no_laporan,
       item.nama_ulp,
@@ -200,12 +201,19 @@ const exportToPDF = (reportMeta: any, data: any) => {
     margin: { left: 230 }
   })
 
-  doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
-    console.log('pdf berhasil disimpan')
-  })
+  await doc
+    .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}`)
@@ -258,11 +266,11 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   worksheet.mergeCells('A6:Q6')
   worksheet.mergeCells('A7:Q7')
 
-  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`)
@@ -272,15 +280,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' },
@@ -509,10 +518,17 @@ const exportToDOCX = (reportMeta: any, data: any) => {
     ]
   })
 
-  Packer.toBlob(doc).then((blob) => {
-    saveAs(blob, `Laporan ${reportName}.docx`)
-    console.log('Document created successfully')
-  })
+  await Packer.toBlob(doc)
+    .then((blob) => {
+      saveAs(blob, `Laporan ${reportName}.docx`)
+
+      console.log('DOCX Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting DOCX', error)
+    })
+
+  return true
 }
 
 export { exportToPDF, exportToXLSX, exportToDOCX }
diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index d5c855d..cffe854 100755
--- a/src/utils/api/api.graphql.ts
+++ b/src/utils/api/api.graphql.ts
@@ -84,6 +84,59 @@ export const queries = {
           }
         }
       `,
+      ssdaftarKeluhanDiselesaikanCC123: gql`
+        query ssdaftarKeluhanDiselesaikanCC123(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $media: String!
+          $skip: Int
+          $take: Int
+          $requireTotalCount: Boolean
+          $sort: [SortInput]
+          $filter: [FilterInput]
+        ) {
+          ssdaftarKeluhanDiselesaikanCC123(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+            media: $media
+            skip: $skip
+            take: $take
+            requireTotalCount: $requireTotalCount
+            sort: $sort
+            filter: $filter
+          ) {
+            totalCount
+            data {
+              no_laporan
+              id_uid
+              nama_uid
+              id_up3
+              nama_up3
+              id_ulp
+              nama_ulp
+              idpel_nometer
+              nama_pelapor
+              alamat_pelapor
+              no_telp_pelapor
+              keterangan_pelapor
+              status_akhir
+              pembuat_laporan
+              waktu_lapor
+              waktu_recovery
+              jumlah_lapor
+              media
+              nama_issuetype
+              nama_subissuetype
+            }
+          }
+        }
+      `,
       keluhanDiselesaikanCC123: gql`
         query daftarKeluhanDiselesaikanCC123(
           $dateFrom: Date!

From 63d0a676fa1b36de3e8b42c68a0d62820c295040 Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Sun, 5 May 2024 18:44:42 +0700
Subject: [PATCH 13/13] feat: implements server side to all daftar keluhan

---
 .../Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue   | 367 ++++++++++--------
 .../Keluhan/Daftar/DKeluhan_RecoveryTime.vue  | 354 +++++++++--------
 .../Keluhan/Daftar/DKeluhan_ResponseTime.vue  | 356 +++++++++--------
 .../Pages/Keluhan/Daftar/DKeluhan_STIDP.vue   | 358 +++++++++--------
 src/report/Keluhan/Daftar/DKeluhan_PLD1K.ts   |  42 +-
 .../Keluhan/Daftar/DKeluhan_RecoveryTime.ts   |  42 +-
 .../Keluhan/Daftar/DKeluhan_ResponseTime.ts   |  42 +-
 src/report/Keluhan/Daftar/DKeluhan_STIDP.ts   |  44 ++-
 src/utils/api/api.graphql.ts                  | 193 +++++++++
 9 files changed, 1090 insertions(+), 708 deletions(-)

diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
index 665a0ca..8f51ef8 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.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">
     <Type10 @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="loadingData == 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
@@ -42,11 +44,12 @@
       <DxColumnFixing :enabled="true" />
 
       <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
@@ -311,7 +314,6 @@
           :row-alternation-enabled="true"
           :hover-state-enabled="true"
           @selection-changed="onDataSubSelectionChanged"
-          @exporting="onExporting"
           :allow-column-resizing="true"
           column-resizing-mode="widget"
         >
@@ -327,11 +329,6 @@
           />
 
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-          <DxExport
-            :enabled="true"
-            :formats="['pdf', 'xlsx', 'document']"
-            :allow-export-selected-data="false"
-          />
 
           <DxColumn
             css-class="custom-table-column"
@@ -415,7 +412,8 @@
       </div>
     </div>
   </DetailDialog>
-  <BufferDialog v-if="loadingData || loadingSubData" />
+
+  <BufferDialog v-if="loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -423,35 +421,42 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type10 from '@/components/Form/FiltersType/Type10.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,
   DxColumnFixing,
-  DxExport, DxPager,
+  DxExport,
+  DxPager,
   DxPaging,
   DxSearchPanel,
-  DxSelection
+  DxSelection,
+  DxLoadPanel
 } from 'devextreme-vue/data-grid'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, isNumber } from '@/utils/numbers'
 import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_PLD1K'
-import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
-const position = { of: '#data' }
-const showIndicator = ref(true)
-const shading = ref(true)
-const showPane = ref(true)
-const data = ref<any[]>([])
+import type { IRequestOptions } from '@/types/requestParams'
+
+const requestOptions = reactive<IRequestOptions>({
+  skip: 0,
+  take: 20,
+  requireTotalCount: true,
+  sort: null,
+  filter: null
+})
 const dataSub = ref<any[]>([])
 const dataSelected = ref<any>()
 const dataSubSelected = ref<any>()
+const reportData: any = ref(null)
 const dialogDetail = ref(false)
-const closedialogDetail = () => (dialogDetail.value = false)
-const loadingData = ref(false)
+const dataGridRef = ref<DxDataGrid | null>(null)
 const loadingSubData = ref(false)
-const detailType = ref('form') // form, table
+const detailType = ref('form')
 const filters = ref()
 const reportMeta = ref({
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
@@ -462,6 +467,154 @@ const reportMeta = ref({
   periode: ''
 })
 
+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.ssdaftarKeluhanMelaporLebihDariSatuKali,
+        query
+      )
+        .then((result) => {
+          const response = result.data.data.ssdaftarKeluhanMelaporLebihDariSatuKali
+
+          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 resetData = () => {
+  allowTableRequest.value = false
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
+}
+
+const handleRequestChange = (e: any) => {
+  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 minJmlLapor = params.minJmlLapor ? params.minJmlLapor : 1
+  const maxJmlLapor = params.maxJmlLapor ? params.maxJmlLapor : 100
+
+  return {
+    minJmlLapor: minJmlLapor,
+    maxJmlLapor: maxJmlLapor,
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  }
+}
+
 const setDetailType = (columnCaption: string) => {
   if (columnCaption == 'Jml Lapor') {
     detailType.value = 'table'
@@ -471,7 +624,6 @@ const setDetailType = (columnCaption: string) => {
 }
 
 const getDetail = async () => {
-  const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
   const query = {
@@ -497,17 +649,17 @@ const getDetail = async () => {
     })
 }
 
-const dataGridRef = ref<DxDataGrid | null>(null)
 const clearSelection = () => {
   const dataGrid = dataGridRef.value!.instance!
   dataGrid.clearSelection()
 }
+
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
   if (detailType.value == 'table') {
     getDetail()
-  }else{
+  } else {
     dialogDetail.value = true
   }
 }
@@ -525,152 +677,29 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const closeDialog = () => (dialogDetail.value = false)
+const onExporting = async (e: any) => {
+  const dataGrid = dataGridRef.value!.instance!
 
-const onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    exportToPDF(reportMeta, data)
+  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 {
-    exportToDOCX(reportMeta, data)
+  } else if (e.format === 'document' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const doc = await exportToDOCX(reportMeta, reportData)
+
+    if (doc) {
+      dataGrid.endCustomLoading()
+    }
   }
 }
-
-const resetData = () => {
-  data.value = []
-  dataSub.value = []
-}
-
-const filterData = async (params: any) => {
-  resetData()
-  const dateValue = params.periode.split(' s/d ')
-  const { ulp, uid, up3 } = params
-  const minJmlLapor = params.minJmlLapor ? params.minJmlLapor : 1
-  const maxJmlLapor = params.maxJmlLapor ? params.maxJmlLapor : 100
-
-  const query = {
-    minJmlLapor: minJmlLapor,
-    maxJmlLapor: maxJmlLapor,
-    dateFrom: dateValue[0]
-      ? dateValue[0].split('-').reverse().join('-')
-      : new Date().toISOString().slice(0, 10),
-    dateTo: dateValue[1]
-      ? dateValue[1].split('-').reverse().join('-')
-      : new Date().toISOString().slice(0, 10),
-    idUlp: ulp ? ulp.id : 0,
-    idUid: uid ? uid.id : 0,
-    idUp3: up3 ? up3.id : 0
-  }
-
-  loadingData.value = true
-  await requestGraphQl(queries.keluhan.daftar.keluhanMelaporLebihDariSatuKali, query)
-    .then((result) => {
-      if (result.data.data != undefined) {
-        data.value = result.data.data.daftarKeluhanMelaporLebihDariSatuKali
-      } else {
-        data.value = []
-      }
-
-      reportMeta.value = filters.value
-    })
-    .catch((err) => {
-      console.error(err)
-    })
-    .finally(() => {
-      loadingData.value = false
-    })
-}
-
-onMounted(() => {
-  if (import.meta.env.DEV) {
-    data.value = [
-      {
-        no_laporan: 'K5423020100003',
-        waktu_lapor: '01/02/2023 00:00:54',
-        waktu_response: '01/01/1970 00:00:00',
-        waktu_recovery: '01/01/1970 00:00:00',
-        jumlah_lapor: 1,
-        durasi_response_time: -1675209654,
-        durasi_recovery_time: 1709189971,
-        status_akhir: 'Dalam Proses Manager Unit',
-        idpel_nometer: '',
-        nama_pelapor: 'ROLLY DWI NOVIANDARU',
-        alamat_pelapor: 'TA MBAK BERAS RT1 CER No.ME RT.00 RW.00',
-        no_telp_pelapor: '6285785412365',
-        keterangan_pelapor: 'meter macet',
-        media: 'PLN Mobile',
-        nama_ulp: 'ULP BENJENG'
-      },
-      {
-        no_laporan: 'K5423020100006',
-        waktu_lapor: '01/02/2023 00:01:23',
-        waktu_response: '01/02/2023 00:01:59',
-        waktu_recovery: '01/02/2023 00:02:52',
-        jumlah_lapor: 1,
-        durasi_response_time: 36,
-        durasi_recovery_time: 53,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'Doni',
-        alamat_pelapor: 'JL KH WASYID NO 119 CILEGON No.0 RT.0 RW.0 CILEGON',
-        no_telp_pelapor: '62895391110909',
-        keterangan_pelapor: 'mohon info terkait prediksi pemakaian tenaga listrik',
-        media: 'PLN Mobile',
-        nama_ulp: 'ULP PRIMA KRAKATAU (TT/TM)'
-      },
-      {
-        no_laporan: 'K5423020100022',
-        waktu_lapor: '01/02/2023 00:06:30',
-        waktu_response: '01/02/2023 04:26:02',
-        waktu_recovery: '01/01/1970 00:00:00',
-        jumlah_lapor: 1,
-        durasi_response_time: 15572,
-        durasi_recovery_time: 33964409,
-        status_akhir: 'Dalam Proses Bidang Unit',
-        idpel_nometer: '',
-        nama_pelapor: 'Yolanda Palar',
-        alamat_pelapor: 'JL TANGGUL SELATAN No.0',
-        no_telp_pelapor: '6285256607777',
-        keterangan_pelapor:
-          'MUTASI_K (G9923020187811:meteran terblokir) - Kilometer Terblokir, Listrik Padam, Vouchers tidak bisa diisi. informasi dari petugas Aplikasi harus ganti kilometer. saya Naikan Daya dari Agustus 2022 Terblokirnya Hari ini bagaimana ya?',
-        media: 'PLN Mobile',
-        nama_ulp: 'ULP PALU KOTA'
-      },
-      {
-        no_laporan: 'K5423020100028',
-        waktu_lapor: '01/02/2023 00:09:30',
-        waktu_response: '01/01/1970 00:00:00',
-        waktu_recovery: '01/01/1970 00:00:00',
-        jumlah_lapor: 1,
-        durasi_response_time: -1675210170,
-        durasi_recovery_time: 1709189971,
-        status_akhir: 'Dalam Proses Manager Unit',
-        idpel_nometer: '',
-        nama_pelapor: 'Tisatin Najemi',
-        alamat_pelapor: 'JL ABADI 2 No. RT.47 RW.7 GT MANGGIS',
-        no_telp_pelapor: '6281349719849',
-        keterangan_pelapor: 'saya baru aja isi token listrik lewat bangking cuman gak mau masuk ',
-        media: 'PLN Mobile',
-        nama_ulp: 'ULP BANJARBARU'
-      },
-      {
-        no_laporan: 'K5423020100029',
-        waktu_lapor: '01/02/2023 00:09:39',
-        waktu_response: '01/02/2023 05:48:52',
-        waktu_recovery: '01/01/1970 00:00:00',
-        jumlah_lapor: 1,
-        durasi_response_time: 20353,
-        durasi_recovery_time: 33959439,
-        status_akhir: 'Dalam Proses Bidang Unit',
-        idpel_nometer: '',
-        nama_pelapor: 'fris jhon ferni',
-        alamat_pelapor: 'the royal griya loka blok o no 05',
-        no_telp_pelapor: '62895396277717',
-        keterangan_pelapor: 'MUTASI_K (G9923020187825:tekmik) - token gagal masuk',
-        media: 'PLN Mobile',
-        nama_ulp: 'ULP TABANAN'
-      }
-    ]
-  }
-})
 </script>
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
index e740db7..df0918d 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.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">
     <Type11
       @update:filters="(value) => (filters = value)"
       :sla-options="[
@@ -22,10 +22,11 @@
   <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"
@@ -38,6 +39,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="false"
     >
+      <DxLoadPanel :enabled="true" />
       <DxSelection mode="single" />
       <DxPaging :page-size="20" :enabled="true" />
       <DxPager
@@ -57,11 +59,12 @@
       <DxColumnFixing :enabled="true" />
 
       <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
@@ -283,7 +286,6 @@
       </div>
     </div>
   </DetailDialog>
-  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -291,8 +293,10 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type11 from '@/components/Form/FiltersType/Type11.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,
@@ -310,59 +314,163 @@ import {
   exportToDOCX,
   exportToXLSX
 } from '@/report/Keluhan/Daftar/DKeluhan_RecoveryTime'
-import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
-const position = { of: '#data' }
-const showIndicator = ref(true)
-const shading = ref(true)
-const showPane = ref(true)
+import type { IRequestOptions } from '@/types/requestParams'
+
+const requestOptions = reactive<IRequestOptions>({
+  skip: 0,
+  take: 20,
+  requireTotalCount: true,
+  sort: null,
+  filter: null
+})
 const dataSelected = ref<any>()
 const dialogDetail = 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' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
+  periode: '',
+  minTime: '',
+  maxTime: ''
+})
+
+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.ssdaftarKeluhanRecoveryTime, query)
+        .then((result) => {
+          const response = result.data.data.ssdaftarKeluhanRecoveryTime
+
+          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 dataGridRef = ref<DxDataGrid | null>(null)
-const clearSelection = () => {
-  const dataGrid = dataGridRef.value!.instance!
-  dataGrid.clearSelection()
-}
-const showDetail = () => {
-  clearSelection()
-  dialogDetail.value = true
-}
-
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  if (selectedRowsData[0] != undefined) {
-    dataSelected.value = selectedRowsData[0]
-  }
-  showDetail()
-}
-
-const onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    exportToPDF(reportMeta, data)
-  } else if (e.format === 'xlsx') {
-    exportToXLSX(reportMeta, e)
-  } else {
-    exportToDOCX(reportMeta, data)
-  }
-}
-
-const data = ref<any[]>([])
-const loading = ref(false)
-
 const resetData = () => {
-  data.value = []
+  allowTableRequest.value = false
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
 }
 
-const filterData = async (params: any) => {
-  resetData()
+const handleRequestChange = (e: any) => {
+  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, minTime, maxTime } = params
 
-  const query = {
+  return  {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -375,124 +483,48 @@ const filterData = async (params: any) => {
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   }
-
-  loading.value = true
-  await requestGraphQl(queries.keluhan.daftar.keluhanRecoveryTime, query)
-    .then((result) => {
-      if (result.data.data != undefined) {
-        data.value = result.data.data.daftarKeluhanRecoveryTime
-      } else {
-        data.value = []
-      }
-
-      reportMeta.value = filters.value
-    })
-    .catch((err) => {
-      console.error(err)
-    })
-    .finally(() => {
-      loading.value = false
-    })
 }
 
-const filters = ref()
-const reportMeta = ref({
-  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' },
-  periode: '',
-  minTime: '',
-  maxTime: ''
-})
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 
-onMounted(() => {
-  if (import.meta.env.DEV) {
-    data.value = [
-      {
-        no_laporan: 'K5423020100006',
-        waktu_lapor: '01/02/2023 00:01:23',
-        waktu_response: '01/02/2023 00:01:59',
-        waktu_recovery: '01/02/2023 00:02:52',
-        durasi_response_time: 36,
-        durasi_recovery_time: 53,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'Doni',
-        alamat_pelapor: 'JL KH WASYID NO 119 CILEGON No.0 RT.0 RW.0 CILEGON',
-        no_telp_pelapor: '62895391110909',
-        keterangan_pelapor: 'mohon info terkait prediksi pemakaian tenaga listrik',
-        media: 'PLN Mobile',
-        nama_ulp: 'ULP PRIMA KRAKATAU (TT/TM)'
-      },
-      {
-        no_laporan: 'K5423020100030',
-        waktu_lapor: '01/02/2023 00:10:39',
-        waktu_response: '01/02/2023 01:17:31',
-        waktu_recovery: '01/01/1970 00:00:00',
-        durasi_response_time: 4012,
-        durasi_recovery_time: 33977641,
-        status_akhir: 'Dalam Proses Bidang Unit',
-        idpel_nometer: '',
-        nama_pelapor: 'wulan',
-        alamat_pelapor: 'DS OELETA No. RT.3 RW.2 ALAK',
-        no_telp_pelapor: '6285788900596',
-        keterangan_pelapor:
-          'MUTASI_K (G9923020187809:pemeriksaan ) - pulsa meter su babunyi .ketong isi gagal terus . apa bisa di konfirmasi kenapa begitu ',
-        media: 'PLN Mobile',
-        nama_ulp: 'ULP KUPANG'
-      },
-      {
-        no_laporan: 'K5423020100045',
-        waktu_lapor: '01/02/2023 00:16:57',
-        waktu_response: '01/02/2023 00:19:40',
-        waktu_recovery: '01/01/1970 00:00:00',
-        durasi_response_time: 163,
-        durasi_recovery_time: 33981112,
-        status_akhir: 'Dalam Proses Bidang Unit',
-        idpel_nometer: '',
-        nama_pelapor: 'veri susanto',
-        alamat_pelapor: 'JL NURUL HUDA KOMP TERAS HOKILAND No.A6 RT.2 RW.3 DS KAPUR',
-        no_telp_pelapor: '6282150235722',
-        keterangan_pelapor:
-          'MUTASI_K (G9923020187794:cek kwh) - tidak bisa membeli vocer listrik,vocer listrik sudah mau habis',
-        media: 'PLN Mobile',
-        nama_ulp: 'ULP SIANTAN'
-      },
-      {
-        no_laporan: 'K5423020100062',
-        waktu_lapor: '01/02/2023 00:29:48',
-        waktu_response: '01/02/2023 01:08:45',
-        waktu_recovery: '01/01/1970 00:00:00',
-        durasi_response_time: 2337,
-        durasi_recovery_time: 33978167,
-        status_akhir: 'Dalam Proses Bidang Unit',
-        idpel_nometer: '',
-        nama_pelapor: 'Diki wahyudi',
-        alamat_pelapor: 'jl Galunggung amansari RT. 01 rw 01',
-        no_telp_pelapor: '6285770967966',
-        keterangan_pelapor:
-          'MUTASI_K (G9923020187796:token gagal) - token di masukan keterangan gagal',
-        media: 'PLN Mobile',
-        nama_ulp: 'ULP RENGASDENGKLOK'
-      },
-      {
-        no_laporan: 'K5423020100089',
-        waktu_lapor: '01/02/2023 00:45:30',
-        waktu_response: '01/02/2023 01:00:27',
-        waktu_recovery: '01/02/2023 07:53:08',
-        durasi_response_time: 897,
-        durasi_recovery_time: 24761,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'SAHABATJAKARTA',
-        alamat_pelapor: 'Stasiun Jln. Nyi Raja Permas',
-        no_telp_pelapor: '6281210701126',
-        keterangan_pelapor:
-          'NO AGENDA 538319912301199708\\nMOHON PERCEPATAN PASANG BARU ATAS NAMA CFC ST KA BOGOR..KARNA HARI RABU 1 FEBRUARI 2023 GERAI TERSEBUT MAU GRAND OPENING *5 MOHON DAPAT PRIORITAS INVESTASI KAMI DI KOTA BOGOR TSB TKSH',
-        media: 'PLN Mobile',
-        nama_ulp: 'ULP BOGOR KOTA'
-      }
-    ]
+const showDetail = () => {
+  clearSelection()
+  dialogDetail.value = true
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
   }
-})
+  showDetail()
+}
+
+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>
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
index e667f90..6988713 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.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">
     <Type11
       @update:filters="(value) => (filters = value)"
       :sla-options="[
@@ -22,10 +22,11 @@
   <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"
@@ -38,6 +39,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="false"
     >
+      <DxLoadPanel :enabled="true" />
       <DxSelection mode="single" />
       <DxPaging :page-size="20" :enabled="true" />
       <DxPager
@@ -57,11 +59,12 @@
       <DxColumnFixing :enabled="true" />
 
       <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
@@ -301,7 +304,6 @@
       </div>
     </div>
   </DetailDialog>
-  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -309,8 +311,10 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type11 from '@/components/Form/FiltersType/Type11.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,
@@ -330,18 +334,176 @@ import {
   exportToDOCX
 } from '@/report/Keluhan/Daftar/DKeluhan_ResponseTime'
 
-const position = { of: '#data' }
-const showIndicator = ref(true)
-const shading = ref(true)
-const showPane = ref(true)
+import type { IRequestOptions } from '@/types/requestParams'
+
+const requestOptions = reactive<IRequestOptions>({
+  skip: 0,
+  take: 20,
+  requireTotalCount: true,
+  sort: null,
+  filter: null
+})
 const dataSelected = ref<any>()
 const dialogDetail = 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' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
+  periode: '',
+  minTime: '',
+  maxTime: ''
+})
+
+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.ssdaftarKeluhanResponseTime, query)
+        .then((result) => {
+          const response = result.data.data.ssdaftarKeluhanResponseTime
+
+          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 resetData = () => {
+  allowTableRequest.value = false
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
+}
+
+const handleRequestChange = (e: any) => {
+  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, maxTime, minTime } = params
+
+  return {
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    minDurasiResponseTime: minTime,
+    maxDurasiResponseTime: maxTime,
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  }
+}
 
 const closeDialog = () => {
   dialogDetail.value = false
 }
 
-const dataGridRef = ref<DxDataGrid | null>(null)
 const clearSelection = () => {
   const dataGrid = dataGridRef.value!.instance!
   dataGrid.clearSelection()
@@ -358,159 +520,29 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   }
 }
 
-const onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    exportToPDF(reportMeta, data)
+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 {
-    exportToDOCX(reportMeta, data)
+  } else if (e.format === 'document' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const doc = await exportToDOCX(reportMeta, reportData)
+
+    if (doc) {
+      dataGrid.endCustomLoading()
+    }
   }
 }
-
-const data = ref<any[]>([])
-const loading = ref(false)
-
-const resetData = () => {
-  data.value = []
-}
-
-const filterData = async (params: any) => {
-  resetData()
-  const dateValue = params.periode.split(' s/d ')
-  const { ulp, uid, up3, maxTime, minTime } = params
-
-  const query = {
-    dateFrom: dateValue[0]
-      ? dateValue[0].split('-').reverse().join('-')
-      : new Date().toISOString().slice(0, 10),
-    dateTo: dateValue[1]
-      ? dateValue[1].split('-').reverse().join('-')
-      : new Date().toISOString().slice(0, 10),
-    minDurasiResponseTime: minTime,
-    maxDurasiResponseTime: maxTime,
-    idUlp: ulp ? ulp.id : 0,
-    idUid: uid ? uid.id : 0,
-    idUp3: up3 ? up3.id : 0
-  }
-
-  loading.value = true
-  await requestGraphQl(queries.keluhan.daftar.keluhanResponseTime, query)
-    .then((result) => {
-      if (result.data.data != undefined) {
-        data.value = result.data.data.daftarKeluhanResponseTime
-      } else {
-        data.value = []
-      }
-
-      reportMeta.value = filters.value
-    })
-    .catch((err) => {
-      console.error(err)
-    })
-    .finally(() => {
-      loading.value = false
-    })
-}
-
-const filters = ref()
-const reportMeta = ref({
-  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' },
-  periode: '',
-  minTime: '',
-  maxTime: ''
-})
-
-onMounted(() => {
-  if (import.meta.env.DEV) {
-    data.value = [
-      {
-        no_laporan: 'K5423020100006',
-        waktu_lapor: '01/02/2023 00:01:23',
-        waktu_response: '01/02/2023 00:01:59',
-        waktu_recovery: '01/02/2023 00:02:52',
-        durasi_response_time: 36,
-        durasi_recovery_time: 53,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'Doni',
-        alamat_pelapor: 'JL KH WASYID NO 119 CILEGON No.0 RT.0 RW.0 CILEGON',
-        no_telp_pelapor: '62895391110909',
-        keterangan_pelapor: 'mohon info terkait prediksi pemakaian tenaga listrik',
-        media: 'PLN Mobile',
-        nama_ulp: 'ULP PRIMA KRAKATAU (TT/TM)'
-      },
-      {
-        no_laporan: 'K5423020100030',
-        waktu_lapor: '01/02/2023 00:10:39',
-        waktu_response: '01/02/2023 01:17:31',
-        waktu_recovery: '01/01/1970 00:00:00',
-        durasi_response_time: 4012,
-        durasi_recovery_time: 33978014,
-        status_akhir: 'Dalam Proses Bidang Unit',
-        idpel_nometer: '',
-        nama_pelapor: 'wulan',
-        alamat_pelapor: 'DS OELETA No. RT.3 RW.2 ALAK',
-        no_telp_pelapor: '6285788900596',
-        keterangan_pelapor:
-          'MUTASI_K (G9923020187809:pemeriksaan ) - pulsa meter su babunyi .ketong isi gagal terus . apa bisa di konfirmasi kenapa begitu ',
-        media: 'PLN Mobile',
-        nama_ulp: 'ULP KUPANG'
-      },
-      {
-        no_laporan: 'K5423020100045',
-        waktu_lapor: '01/02/2023 00:16:57',
-        waktu_response: '01/02/2023 00:19:40',
-        waktu_recovery: '01/01/1970 00:00:00',
-        durasi_response_time: 163,
-        durasi_recovery_time: 33981485,
-        status_akhir: 'Dalam Proses Bidang Unit',
-        idpel_nometer: '',
-        nama_pelapor: 'veri susanto',
-        alamat_pelapor: 'JL NURUL HUDA KOMP TERAS HOKILAND No.A6 RT.2 RW.3 DS KAPUR',
-        no_telp_pelapor: '6282150235722',
-        keterangan_pelapor:
-          'MUTASI_K (G9923020187794:cek kwh) - tidak bisa membeli vocer listrik,vocer listrik sudah mau habis',
-        media: 'PLN Mobile',
-        nama_ulp: 'ULP SIANTAN'
-      },
-      {
-        no_laporan: 'K5423020100062',
-        waktu_lapor: '01/02/2023 00:29:48',
-        waktu_response: '01/02/2023 01:08:45',
-        waktu_recovery: '01/01/1970 00:00:00',
-        durasi_response_time: 2337,
-        durasi_recovery_time: 33978540,
-        status_akhir: 'Dalam Proses Bidang Unit',
-        idpel_nometer: '',
-        nama_pelapor: 'Diki wahyudi',
-        alamat_pelapor: 'jl Galunggung amansari RT. 01 rw 01',
-        no_telp_pelapor: '6285770967966',
-        keterangan_pelapor:
-          'MUTASI_K (G9923020187796:token gagal) - token di masukan keterangan gagal',
-        media: 'PLN Mobile',
-        nama_ulp: 'ULP RENGASDENGKLOK'
-      },
-      {
-        no_laporan: 'K5423020100089',
-        waktu_lapor: '01/02/2023 00:45:30',
-        waktu_response: '01/02/2023 01:00:27',
-        waktu_recovery: '01/02/2023 07:53:08',
-        durasi_response_time: 897,
-        durasi_recovery_time: 24761,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'SAHABATJAKARTA',
-        alamat_pelapor: 'Stasiun Jln. Nyi Raja Permas',
-        no_telp_pelapor: '6281210701126',
-        keterangan_pelapor:
-          'NO AGENDA 538319912301199708\\nMOHON PERCEPATAN PASANG BARU ATAS NAMA CFC ST KA BOGOR..KARNA HARI RABU 1 FEBRUARI 2023 GERAI TERSEBUT MAU GRAND OPENING *5 MOHON DAPAT PRIORITAS INVESTASI KAMI DI KOTA BOGOR TSB TKSH',
-        media: 'PLN Mobile',
-        nama_ulp: 'ULP BOGOR KOTA'
-      }
-    ]
-  }
-})
 </script>
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
index 3f925c1..bb5457a 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.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,11 +43,12 @@
       <DxColumnFixing :enabled="true" />
 
       <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
@@ -274,7 +277,6 @@
       </div>
     </div>
   </DetailDialog>
-  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -282,8 +284,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,
@@ -297,24 +301,182 @@ import {
 } from 'devextreme-vue/data-grid'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_STIDP'
-import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
-const position = { of: '#data' }
-const showIndicator = ref(true)
-const shading = ref(true)
-const showPane = ref(true)
+import type { IRequestOptions } from '@/types/requestParams'
+
+const requestOptions = reactive<IRequestOptions>({
+  skip: 0,
+  take: 20,
+  requireTotalCount: true,
+  sort: null,
+  filter: null
+})
+
 const dataSelected = ref<any>()
 const dialogDetail = 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' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
+  periode: ''
+})
+
+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.ssdaftarKeluhanSelesaiTanpaIdPelanggan,
+        query
+      )
+        .then((result) => {
+          const response = result.data.data.ssdaftarKeluhanSelesaiTanpaIdPelanggan
+
+          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 resetData = () => {
+  allowTableRequest.value = false
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
+}
+
+const handleRequestChange = (e: any) => {
+  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
+
+  return {
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  }
+}
 
 const closeDialog = () => {
   dialogDetail.value = false
 }
 
-const dataGridRef = ref<DxDataGrid | null>(null)
 const clearSelection = () => {
   const dataGrid = dataGridRef.value!.instance!
   dataGrid.clearSelection()
 }
+
 const showDetail = () => {
   clearSelection()
   dialogDetail.value = true
@@ -327,159 +489,29 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   showDetail()
 }
 
-const onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    exportToPDF(reportMeta, data)
+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 {
-    exportToDOCX(reportMeta, data)
+  } else if (e.format === 'document' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const doc = await exportToDOCX(reportMeta, reportData)
+
+    if (doc) {
+      dataGrid.endCustomLoading()
+    }
   }
 }
-
-const data = ref<any[]>([])
-const loading = ref(false)
-
-const resetData = () => {
-  data.value = []
-}
-
-const filterData = async (params: any) => {
-  resetData()
-  const dateValue = params.periode.split(' s/d ')
-  const { ulp, uid, up3 } = params
-
-  const query = {
-    dateFrom: dateValue[0]
-      ? dateValue[0].split('-').reverse().join('-')
-      : new Date().toISOString().slice(0, 10),
-    dateTo: dateValue[1]
-      ? dateValue[1].split('-').reverse().join('-')
-      : new Date().toISOString().slice(0, 10),
-    idUlp: ulp ? ulp.id : 0,
-    idUid: uid ? uid.id : 0,
-    idUp3: up3 ? up3.id : 0
-  }
-
-  loading.value = true
-  await requestGraphQl(queries.keluhan.daftar.keluhanSelesaiTanpaIDPelanggan, query)
-    .then((result) => {
-      if (result.data.data != undefined) {
-        data.value = result.data.data.daftarKeluhanSelesaiTanpaIdPelanggan
-      } else {
-        data.value = []
-      }
-
-      reportMeta.value = filters.value
-    })
-    .catch((err) => {
-      console.error(err)
-    })
-    .finally(() => {
-      loading.value = false
-    })
-}
-
-const filters = ref()
-const reportMeta = ref({
-  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' },
-  periode: ''
-})
-
-onMounted(() => {
-  if (import.meta.env.DEV) {
-    data.value = [
-      {
-        no_laporan: 'K5123020100019',
-        waktu_lapor: '01/02/2023 01:59:02',
-        waktu_response: '01/02/2023 05:22:50',
-        waktu_recovery: '01/02/2023 08:33:38',
-        durasi_response_time: 12228,
-        durasi_recovery_time: 11448,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'BP AHMAD',
-        alamat_pelapor:
-          'JL BENTENGAN TIMUR NO31 RT11/03, SUNTER JAYA, TANJUNG PRIOK, KOTA ADM. JAKARTA UTARA, DKI JAKARTA',
-        no_telp_pelapor: '082320000152',
-        keterangan_pelapor:
-          'MOHON BANTUAN PEMBATALAN PERMOHONAN PB NO AGENDA 545109912301319203 DIKARENAKAN PELANGGAN INGIN KE DAYA 2200 VA, PELANGGAN SUDAH MELAKUKAN PEMBAYARAN MELALAUI GOPAY TANGGAL 31/01/2023 PUKUL 18:49 WIB, NAMUN PEMBAYARAN BELUM MASUK, MOHON KONFRIMASI KE PELANGGAN, TERIMA KASIH. ',
-        media: 'Call PLN 123',
-        nama_ulp: 'UP3 TANJUNG PRIOK'
-      },
-      {
-        no_laporan: 'K5123020100021',
-        waktu_lapor: '01/02/2023 02:04:04',
-        waktu_response: '01/02/2023 02:26:01',
-        waktu_recovery: '01/02/2023 02:34:06',
-        durasi_response_time: 1317,
-        durasi_recovery_time: 485,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'IBU TITIN ',
-        alamat_pelapor: 'TIDAK BISAMALKUKANPEMBELIAN KETMELEBIHI BATAS MAXIMUM / SISA 100 KWH ',
-        no_telp_pelapor: '087786974290',
-        keterangan_pelapor: 'TIDAK BISAMALKUKANPEMBELIAN KETMELEBIHI BATAS MAXIMUM / SISA 100 KWH ',
-        media: 'Call PLN 123',
-        nama_ulp: 'ULP CIBITUNG'
-      },
-      {
-        no_laporan: 'K5223020100112',
-        waktu_lapor: '01/02/2023 04:16:48',
-        waktu_response: '01/02/2023 05:58:33',
-        waktu_recovery: '01/02/2023 12:02:23',
-        durasi_response_time: 6105,
-        durasi_recovery_time: 21830,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'BP HENDRIYANTO',
-        alamat_pelapor:
-          'JL.PALEM HIJAU, COKROKONTENG, RT.04 RW.2. KEL SIDOARUM. KEC GODEAN KAB SLEMAN PROV DIY',
-        no_telp_pelapor: '085921182228',
-        keterangan_pelapor:
-          'PELANGGAN TIDAK BISA INPUT TOKEN SETELAH UPDATE VKRN 43. (BELUM ADA) PETUGAS YANG MELAKUKAN PENGATURAN. SISA KWH: 385.41. PTL (HAMPIR PADAM). PELANGGAN PERNAH LAPOR DENGAN NO: K5223013102183, STATUS SELESAI, PELANGGAN TIDAK DIKONFIRMASI s.d 1X6 JAM. LAPOR KEMBALI CC.54.JULIANA TGL 01/02/23 12FZUS3 08.46 085921182228',
-        media: 'Live Chat PLN Mobile',
-        nama_ulp: 'ULP SEDAYU'
-      },
-      {
-        no_laporan: 'K5223020100116',
-        waktu_lapor: '01/02/2023 04:43:43',
-        waktu_response: '01/02/2023 08:06:28',
-        waktu_recovery: '01/02/2023 08:52:05',
-        durasi_response_time: 12165,
-        durasi_recovery_time: 2737,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'BP SELAMET',
-        alamat_pelapor:
-          'JL MUARA TAKUS NO.30 - RT- / RW- KEL MADRASHULU KEC MEDAN KOLONIA KOTA MEDAN > LOKASI BELAKANG SAN PLASA',
-        no_telp_pelapor: '0614510290',
-        keterangan_pelapor:
-          'LEBIH TAGIH . STAND AKHIR REK JANUARI, 2023 =19583, STAND APP 01/02/2023 = 16677,NOTE: PETUGAS CATER SELALU MENGINFORMASIKAN UNTUK LISTRIK AKAN DIGANTI KE BISNIS, PELANGGAN INGIN MENGETAHUI MAKSUD DAN TUJUAN, PETUGAS CATER DIJANJIKAN UNTUK MELAKUKAN PERGANTIAN KWH METER BARU NAMUN JUGA TIDAK DIREALISASI.',
-        media: 'Call PLN 123',
-        nama_ulp: 'ULP MEDAN KOTA'
-      },
-      {
-        no_laporan: 'K5223020100119',
-        waktu_lapor: '01/02/2023 04:48:12',
-        waktu_response: '01/02/2023 07:34:08',
-        waktu_recovery: '01/02/2023 11:50:28',
-        durasi_response_time: 9956,
-        durasi_recovery_time: 15380,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'Febry Cahjagraha_',
-        alamat_pelapor:
-          ' JL PISANG GG.TALOK 3 SAREN NO., CATURTUNGGAL, DEPOK, KAB. SLEMAN, DAERAH ISTIMEWA YOGYAKARTA',
-        no_telp_pelapor: '089611011990',
-        keterangan_pelapor:
-          'PELANGGAN MENGAJUKAN PROSES TURUN DAYA (R2T/3500 VA - R1T/1300 VA) MELALUI APLIKASI PLN MOBILE DENGAN STATUS PERMOHONAN MENUNGGU VERIFIKASI PLN UNIT DAN STATUS PADA AP2T PERMOHONAN BELUM DISAHKAN MANAGER. YBS INGIN SEGERA DAPAT DITINDAKLANJUTI.',
-        media: 'Facebook',
-        nama_ulp: 'ULP YOGYAKARTA KOTA'
-      }
-    ]
-  }
-})
 </script>
diff --git a/src/report/Keluhan/Daftar/DKeluhan_PLD1K.ts b/src/report/Keluhan/Daftar/DKeluhan_PLD1K.ts
index 060d3c6..5c8f4bf 100644
--- a/src/report/Keluhan/Daftar/DKeluhan_PLD1K.ts
+++ b/src/report/Keluhan/Daftar/DKeluhan_PLD1K.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'
   })
@@ -131,7 +132,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.waktu_lapor,
@@ -199,12 +200,19 @@ const exportToPDF = (reportMeta: any, data: any) => {
     margin: { left: 230 }
   })
 
-  doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
-    console.log('pdf berhasil disimpan')
-  })
+  await doc
+    .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}`)
@@ -264,7 +272,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   worksheet.mergeCells('A7:P7')
   worksheet.mergeCells('A8:P8')
 
-  exportToExcel({
+  await exportToExcel({
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
@@ -278,15 +286,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' },
@@ -532,10 +541,17 @@ const exportToDOCX = (reportMeta: any, data: any) => {
     ]
   })
 
-  Packer.toBlob(doc).then((blob) => {
-    saveAs(blob, `Laporan ${reportName}.docx`)
-    console.log('Document created successfully')
-  })
+  await Packer.toBlob(doc)
+    .then((blob) => {
+      saveAs(blob, `Laporan ${reportName}.docx`)
+
+      console.log('DOCX Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting DOCX', error)
+    })
+
+  return true
 }
 
 export { exportToPDF, exportToXLSX, exportToDOCX }
diff --git a/src/report/Keluhan/Daftar/DKeluhan_RecoveryTime.ts b/src/report/Keluhan/Daftar/DKeluhan_RecoveryTime.ts
index 8bfff8c..367b337 100644
--- a/src/report/Keluhan/Daftar/DKeluhan_RecoveryTime.ts
+++ b/src/report/Keluhan/Daftar/DKeluhan_RecoveryTime.ts
@@ -59,12 +59,13 @@ const formatMetaData = (reportMeta: any) => {
   return { dateFromFormat, dateToFormat, dayTo, durasi, minTime, maxTime }
 }
 
-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'
   })
@@ -144,7 +145,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.waktu_lapor,
@@ -210,12 +211,19 @@ const exportToPDF = (reportMeta: any, data: any) => {
     margin: { left: 230 }
   })
 
-  doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
-    console.log('pdf berhasil disimpan')
-  })
+  await doc
+    .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}`)
@@ -275,7 +283,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   worksheet.mergeCells('A7:N7')
   worksheet.mergeCells('A8:N8')
 
-  exportToExcel({
+  await exportToExcel({
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
@@ -289,15 +297,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' },
@@ -539,10 +548,17 @@ const exportToDOCX = (reportMeta: any, data: any) => {
     ]
   })
 
-  Packer.toBlob(doc).then((blob) => {
-    saveAs(blob, `Laporan ${reportName}.docx`)
-    console.log('Document created successfully')
-  })
+  await Packer.toBlob(doc)
+    .then((blob) => {
+      saveAs(blob, `Laporan ${reportName}.docx`)
+
+      console.log('DOCX Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting DOCX', error)
+    })
+
+  return true
 }
 
 export { exportToPDF, exportToXLSX, exportToDOCX }
diff --git a/src/report/Keluhan/Daftar/DKeluhan_ResponseTime.ts b/src/report/Keluhan/Daftar/DKeluhan_ResponseTime.ts
index d806d9a..202ba03 100644
--- a/src/report/Keluhan/Daftar/DKeluhan_ResponseTime.ts
+++ b/src/report/Keluhan/Daftar/DKeluhan_ResponseTime.ts
@@ -59,12 +59,13 @@ const formatMetaData = (reportMeta: any) => {
   return { dateFromFormat, dateToFormat, dayTo, durasi, minTime, maxTime }
 }
 
-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'
   })
@@ -144,7 +145,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.waktu_lapor,
@@ -210,12 +211,19 @@ const exportToPDF = (reportMeta: any, data: any) => {
     margin: { left: 230 }
   })
 
-  doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
-    console.log('pdf berhasil disimpan')
-  })
+  await doc
+    .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}`)
@@ -275,7 +283,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   worksheet.mergeCells('A7:N7')
   worksheet.mergeCells('A8:N8')
 
-  exportToExcel({
+  await exportToExcel({
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
@@ -289,15 +297,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' },
@@ -539,10 +548,17 @@ const exportToDOCX = (reportMeta: any, data: any) => {
     ]
   })
 
-  Packer.toBlob(doc).then((blob) => {
-    saveAs(blob, `Laporan ${reportName}.docx`)
-    console.log('Document created successfully')
-  })
+  await Packer.toBlob(doc)
+    .then((blob) => {
+      saveAs(blob, `Laporan ${reportName}.docx`)
+
+      console.log('DOCX Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting DOCX', error)
+    })
+
+  return true
 }
 
 export { exportToPDF, exportToXLSX, exportToDOCX }
diff --git a/src/report/Keluhan/Daftar/DKeluhan_STIDP.ts b/src/report/Keluhan/Daftar/DKeluhan_STIDP.ts
index d3dc280..65c98d3 100644
--- a/src/report/Keluhan/Daftar/DKeluhan_STIDP.ts
+++ b/src/report/Keluhan/Daftar/DKeluhan_STIDP.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'
   })
@@ -129,7 +130,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.waktu_lapor,
@@ -196,12 +197,19 @@ const exportToPDF = (reportMeta: any, data: any) => {
     margin: { left: 230 }
   })
 
-  doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
-    console.log('pdf berhasil disimpan')
-  })
+  await doc
+    .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}`)
@@ -254,11 +262,11 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   worksheet.mergeCells('A6:O6')
   worksheet.mergeCells('A7:O7')
 
-  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`)
@@ -268,15 +276,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' },
@@ -511,10 +520,17 @@ const exportToDOCX = (reportMeta: any, data: any) => {
     ]
   })
 
-  Packer.toBlob(doc).then((blob) => {
-    saveAs(blob, `Laporan ${reportName}.docx`)
-    console.log('Document created successfully')
-  })
+  await Packer.toBlob(doc)
+    .then((blob) => {
+      saveAs(blob, `Laporan ${reportName}.docx`)
+
+      console.log('DOCX Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting DOCX', error)
+    })
+
+  return true
 }
 
 export { exportToPDF, exportToXLSX, exportToDOCX }
diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index cffe854..763606c 100755
--- a/src/utils/api/api.graphql.ts
+++ b/src/utils/api/api.graphql.ts
@@ -52,6 +52,51 @@ export const apolloClient = () => {
 export const queries = {
   keluhan: {
     daftar: {
+      ssdaftarKeluhanSelesaiTanpaIdPelanggan: gql`
+        query ssdaftarKeluhanSelesaiTanpaIdPelanggan(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $skip: Int
+          $take: Int
+          $requireTotalCount: Boolean
+          $sort: [SortInput]
+          $filter: [FilterInput]
+        ) {
+          ssdaftarKeluhanSelesaiTanpaIdPelanggan(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+            skip: $skip
+            take: $take
+            requireTotalCount: $requireTotalCount
+            sort: $sort
+            filter: $filter
+          ) {
+            totalCount
+            data {
+              no_laporan
+              waktu_lapor
+              waktu_response
+              waktu_recovery
+              durasi_response_time
+              durasi_recovery_time
+              status_akhir
+              idpel_nometer
+              nama_pelapor
+              alamat_pelapor
+              no_telp_pelapor
+              keterangan_pelapor
+              media
+              nama_ulp
+            }
+          }
+        }
+      `,
       keluhanSelesaiTanpaIDPelanggan: gql`
         query daftarKeluhanSelesaiTanpaIdPelanggan(
           $dateFrom: Date!
@@ -177,6 +222,55 @@ export const queries = {
           }
         }
       `,
+      ssdaftarKeluhanResponseTime: gql`
+        query ssdaftarKeluhanResponseTime(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $minDurasiResponseTime: Int!
+          $maxDurasiResponseTime: Int!
+          $skip: Int
+          $take: Int
+          $requireTotalCount: Boolean
+          $sort: [SortInput]
+          $filter: [FilterInput]
+        ) {
+          ssdaftarKeluhanResponseTime(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+            minDurasiResponseTime: $minDurasiResponseTime
+            maxDurasiResponseTime: $maxDurasiResponseTime
+            skip: $skip
+            take: $take
+            requireTotalCount: $requireTotalCount
+            sort: $sort
+            filter: $filter
+          ) {
+            totalCount
+            data {
+              no_laporan
+              waktu_lapor
+              waktu_response
+              waktu_recovery
+              durasi_response_time
+              durasi_recovery_time
+              status_akhir
+              idpel_nometer
+              nama_pelapor
+              alamat_pelapor
+              no_telp_pelapor
+              keterangan_pelapor
+              media
+              nama_ulp
+            }
+          }
+        }
+      `,
       keluhanResponseTime: gql`
         query daftarKeluhanResponseTime(
           $dateFrom: Date!
@@ -213,6 +307,55 @@ export const queries = {
           }
         }
       `,
+      ssdaftarKeluhanRecoveryTime: gql`
+        query ssdaftarKeluhanRecoveryTime(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $minDurasiRecoveryTime: Int!
+          $maxDurasiRecoveryTime: Int!
+          $skip: Int
+          $take: Int
+          $requireTotalCount: Boolean
+          $sort: [SortInput]
+          $filter: [FilterInput]
+        ) {
+          ssdaftarKeluhanRecoveryTime(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+            minDurasiRecoveryTime: $minDurasiRecoveryTime
+            maxDurasiRecoveryTime: $maxDurasiRecoveryTime
+            skip: $skip
+            take: $take
+            requireTotalCount: $requireTotalCount
+            sort: $sort
+            filter: $filter
+          ) {
+            totalCount
+            data {
+              no_laporan
+              waktu_lapor
+              waktu_response
+              waktu_recovery
+              durasi_response_time
+              durasi_recovery_time
+              status_akhir
+              idpel_nometer
+              nama_pelapor
+              alamat_pelapor
+              no_telp_pelapor
+              keterangan_pelapor
+              media
+              nama_ulp
+            }
+          }
+        }
+      `,
       keluhanRecoveryTime: gql`
         query daftarKeluhanRecoveryTime(
           $dateFrom: Date!
@@ -260,6 +403,56 @@ export const queries = {
           }
         }
       `,
+      ssdaftarKeluhanMelaporLebihDariSatuKali: gql`
+        query ssdaftarKeluhanMelaporLebihDariSatuKali(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $minJmlLapor: Int!
+          $maxJmlLapor: Int!
+          $skip: Int
+          $take: Int
+          $requireTotalCount: Boolean
+          $sort: [SortInput]
+          $filter: [FilterInput]
+        ) {
+          ssdaftarKeluhanMelaporLebihDariSatuKali(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+            minJmlLapor: $minJmlLapor
+            maxJmlLapor: $maxJmlLapor
+            skip: $skip
+            take: $take
+            requireTotalCount: $requireTotalCount
+            sort: $sort
+            filter: $filter
+          ) {
+            totalCount
+            data {
+              no_laporan
+              waktu_lapor
+              waktu_response
+              waktu_recovery
+              jumlah_lapor
+              durasi_response_time
+              durasi_recovery_time
+              status_akhir
+              idpel_nometer
+              nama_pelapor
+              alamat_pelapor
+              no_telp_pelapor
+              keterangan_pelapor
+              media
+              nama_ulp
+            }
+          }
+        }
+      `,
       keluhanMelaporLebihDariSatuKali: gql`
         query daftarKeluhanMelaporLebihDariSatuKali(
           $minJmlLapor: Int!