Refactor filterData function and add resetData function

src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue

@@ -234,7 +234,13 @@ const onExporting = (e: any) => {
   }
 }
 
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
 const filterData = async (params: any) => {
+  resetData()
   const { posko, uid, up3, ulp } = params
   const dateValue = params.periode.split(' s/d ')
 

src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue

@@ -329,7 +329,12 @@ const showDetail = () => (dialogDetail.value = true)
 
 const closeDialog = () => (dialogDetail.value = false)
 
+const resetData = () => {
+  data.value = []
+}
+
 const filterData = async (params: any) => {
+  resetData()
   const { posko, uid, up3, media } = params
   const dateValue = params.periode.split(' s/d ')
 

src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue

@@ -373,7 +373,12 @@ const dialogDetail = ref(false)
 const loading = ref(false)
 const closeDialog = () => (dialogDetail.value = false)
 
+const resetData = () => {
+  data.value = []
+}
+
 const filterData = async (params: any) => {
+  resetData()
   const { posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
 

src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue

@@ -324,7 +324,12 @@ const showDetail = () => (dialogDetail.value = true)
 
 const closeDialog = () => (dialogDetail.value = false)
 
+const resetData = () => {
+  data.value = []
+}
+
 const filterData = async (params: any) => {
+  resetData()
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
 

src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue

@@ -535,7 +535,13 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
 
 const closeDialog = () => (dialogDetail.value = false)
 
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
 const filterData = async (params: any) => {
+  resetData()
   const { minJmlLapor, maxJmlLapor, posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
 

src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue

@@ -383,7 +383,12 @@ const showDetail = () => (dialogDetail.value = true)
 
 const closeDialog = () => (dialogDetail.value = false)
 
+const resetData = () => {
+  data.value = []
+}
+
 const filterData = async (params: any) => {
+  resetData()
   const { minTime, maxTime, posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
 

src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue

@@ -360,7 +360,12 @@ const showDetail = () => (dialogDetail.value = true)
 
 const closeDialog = () => (dialogDetail.value = false)
 
+const resetData = () => {
+  data.value = []
+}
+
 const filterData = async (params: any) => {
+  resetData()
   const { minTime, maxTime, posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
 

src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue

@@ -328,7 +328,12 @@ const showDetail = () => (dialogDetail.value = true)
 
 const closeDialog = () => (dialogDetail.value = false)
 
+const resetData = () => {
+  data.value = []
+}
+
 const filterData = async (params: any) => {
+  resetData()
   const { posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
 

src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue

@@ -89,7 +89,7 @@
           data-type="number"
           caption="Total"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberLaporanTotal"
         />
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
           <DxColumn
@@ -98,7 +98,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlSelesai"
           />
           <DxColumn
             alignment="center"
@@ -116,7 +116,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlBelumSelesai"
           />
           <DxColumn
             alignment="center"

src/utils/api/api.graphql.ts

@@ -2018,23 +2018,63 @@ export const queries = {
             }
           }
         `,
-        gangguanBelumSelesai: gql`
+        gangguanBelumSelesaiDetail: gql`
-          query monalisaGangguanBelumSelesai(
+          query detailMonalisaGangguanBelumSelesai(
-            $namaRegional: String
+            $bulan: Int!
-            $idUlp: Int
+            $tahun: Int!
-            $idUid: Int
+            $namaRegional: String!
-            $idUp3: Int
+            $idUlp: Int!
-            $bulan: Int
+            $idUid: Int!
-            $tahun: Int
+            $idUp3: Int!
           ) {
-            monalisaGangguanBelumSelesai(
+            detailMonalisaGangguanBelumSelesai(
+              bulan: $bulan
+              tahun: $tahun
               namaRegional: $namaRegional
               idUlp: $idUlp
               idUid: $idUid
               idUp3: $idUp3
+            ) {
+              id
+              nama_regional
+              id_uid
+              nama_uid
+              id_up3
+              nama_up3
+              id_ulp
+              nama_ulp
+              id_pelanggan
+              nama_pelanggan
+              nama_pelapor
+              alamat_pelapor
+              no_telp_pelapor
+              keterangan_pelapor
+              penyebab
+              kode_gangguan
+              nama_jenis_gangguan
+              durasi_response_time
+              durasi_recovery_time
+            }
+          }
+        `,
+        gangguanBelumSelesai: gql`
+          query monalisaGangguanBelumSelesai(
+            $bulan: Int!
+            $tahun: Int!
+            $namaRegional: String!
+            $idUlp: Int!
+            $idUid: Int!
+            $idUp3: Int!
+          ) {
+            monalisaGangguanBelumSelesai(
               bulan: $bulan
               tahun: $tahun
+              namaRegional: $namaRegional
+              idUlp: $idUlp
+              idUid: $idUid
+              idUp3: $idUp3
             ) {
+              id
               nama_regional
               id_uid
               nama_uid