fix: server side in daftar gangguan dialihkan ke posko lain

.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'

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) {
+      const query = {
-        query = {
+        skip: loadOptions.skip,
-          skip: loadOptions.skip,
+        take: loadOptions.take,
-          take: loadOptions.take,
+        sort: loadOptions.sort ? loadOptions.sort : null,
-          sort: loadOptions.sort ? loadOptions.sort : null,
+        filter: loadOptions.filter ? mapSearchOptions(loadOptions.filter) : null,
-          filter: loadOptions.filter ? loadOptions.filter : null,
+        requireTotalCount: loadOptions.requireTotalCount,
-          requireTotalCount: loadOptions.requireTotalCount,
+        ...createQuery(filters.value)
-          ...createQuery(filters.value)
-        }
-      } else {
-        query = loadOptions.userData
       }
 
-      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,
+            data: response.data,
-            totalCount: 0
+            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])
+    searchOptions.push({
-
+      field: column.dataField,
-    if (column !== columns[columns.length - 1]) {
+      value: keyword
-      searchOptions.push('or')
+    })
-    }
   }
 
   return searchOptions
 }
 
-const filterData = (params: any) => {
+const mapSearchOptions = (searchOptions: any) => {
-  allowTableRequest.value = true
+  const result = searchOptions.map((option: any) => {
-
+    if (Array.isArray(option) && option[0] !== 'no') {
-  data.load({
+      return {
-    userData: {
+        field: option[0],
-      ...requestOptions,
+        value: option[2]
-      ...createQuery(params)
+      }
     }
   })
+
+  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) => {
+const onExporting = async (e: any) => {
-  if (e.format === 'pdf') {
+  const dataGrid = dataGridRef.value!.instance!
-    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 {
+  } else if (e.format === 'document' && reportData.value) {
-    exportToDOCX(reportMeta, data)
+    dataGrid.beginCustomLoading('')
+    const doc = await exportToDOCX(reportMeta, reportData)
+
+    if (doc) {
+      dataGrid.endCustomLoading()
+    }
   }
 }
 </script>

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(() => {
+  await doc
-    console.log('pdf berhasil disimpan')
+    .save(`Laporan ${reportName}.pdf`, { returnPromise: true })
-  })
+    .then(() => {
+      console.log('PDF Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting PDF', error)
+    })
+
+  return true
 }
 
 const exportToXLSX = (reportMeta: any, e: any) => {
@@ -266,10 +274,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 10, column: 1 },
+    topLeftCell: { row: 10, column: 1 }
-    loadPanel: {
-      enabled: false
-    }
   }).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) => {
+  await Packer.toBlob(doc)
-    console.log(blob)
+    .then((blob) => {
-    saveAs(blob, `Laporan ${reportName}.docx`)
+      saveAs(blob, `Laporan ${reportName}.docx`)
-    console.log('Document created successfully')
+
-  })
+      console.log('DOCX Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting DOCX', error)
+    })
+
+  return true
 }
 
 export { exportToPDF, exportToXLSX, exportToDOCX }

src/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 }

src/utils/api/api.graphql.ts

@@ -2532,20 +2532,20 @@ export const queries = {
           }
         }
       `,
-      dataDialihkanKePoskoLain: gql`
+      ssdaftarGangguanDialihkanKePoskoLain: gql`
-        query DaftarGangguan(
+        query ssdaftarGangguanDialihkanKePoskoLain(
           $dateFrom: Date!
           $dateTo: Date!
-          $posko: Int
+          $posko: Int!
-          $idUid: Int
+          $idUid: Int!
-          $idUp3: 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
+            totalCount
-            pembuat_laporan
+            data {
-            durasi_recovery_time
+              no_laporan
-            durasi_response_time
+              pembuat_laporan
-            waktu_lapor
+              waktu_lapor
-            waktu_dialihkan
+              waktu_dialihkan
-            waktu_recovery
+              waktu_response
-            waktu_response
+              waktu_recovery
-            idpel_nometer
+              durasi_response_time
-            keterangan_pelapor
+              durasi_recovery_time
-            media
+              id_posko_lama
-            nama_pelapor
+              nama_posko_lama
-            no_laporan
+              id_posko_baru
-            no_telp_pelapor
+              nama_posko_baru
-            nama_posko_lama
+              status_akhir
-            nama_posko_baru
+              idpel_nometer
-            status_akhir
+              nama_pelapor
-            waktu_recovery
+              alamat_pelapor
-            waktu_response
+              no_telp_pelapor
+              keterangan_pelapor
+              media
+            }
           }
         }
       `,