fix: server side in daftar gangguan dialihkan ke posko lain

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>