feat: create server-side request in daftar gangguan dialihkan ke posko lain

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 { ref, reactive } from 'vue'
-import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
-import InputText from '@/components/InputText.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) => {
+const handleRequestChange = (e: any) => {
-  resetData()
+  if (e.name === 'searchPanel') {
+    if (e.value !== '') {
+      requestOptions.filter = createSearchOptions(e.value)
+    } else {
+      requestOptions.filter = null
+    }
+  }
+
+  if (e.name === 'paging') {
+    requestOptions.take = e.value
+  }
+
+  if (e.name === 'columns') {
+    const columnIndex = parseInt(e.fullName.match(/\[(\d+)\]/)[1])
+    const columnDataField = e.component.columnOption(columnIndex).dataField
+
+    requestOptions.sort = [
+      {
+        selector: columnDataField,
+        desc: e.value === 'desc'
+      }
+    ]
+  }
+}
+
+const createSearchOptions = (keyword: string) => {
+  const dataGrid = dataGridRef.value!.instance!
+  const columns = dataGrid.getVisibleColumns()
+
+  const searchOptions = []
+
+  for (const column of columns) {
+    if (column.dataField === '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)

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 }

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