fix: daftar gangguan melapor lebih dari 1 kali

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"

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

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!