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 1/2] 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 2/2] 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
+            }
           }
         }
       `,