Refactor data retrieval in filterData function

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

@@ -310,7 +310,7 @@ import {
   DxSelection
 } from 'devextreme-vue/data-grid'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { exportToPDF, exportToDOCX, exportToXLSX } from '@/report/Gangguan/Daftar/DGangguan_BM'
 
 const position = { of: '#data' }
@@ -321,6 +321,7 @@ const data = ref<any[]>([])
 const dataSelected = ref<any>({})
 const dialogDetail = ref(false)
 const dataGridRef = ref<DxDataGrid | null>(null)
+const loading = ref(false)
 const clearSelection = () => {
   const dataGrid = dataGridRef.value!.instance!
   dataGrid.clearSelection()
@@ -337,20 +338,11 @@ const showDetail = () => (dialogDetail.value = true)
 
 const closeDialog = () => (dialogDetail.value = false)
 
-const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar.berdasarkanMedia, {
-  dateFrom: new Date().toISOString().slice(0, 10),
-  dateTo: new Date().toISOString().slice(0, 10),
-  posko: 0,
-  idUid: 0,
-  idUp3: 0,
-  media: 'Twitter'
-})
-
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const { posko, uid, up3, media } = params
   const dateValue = params.periode.split(' s/d ')
 
-  refetch({
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -361,20 +353,25 @@ const filterData = (params: any) => {
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,
     media: media ? media.id : ''
-  })
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.daftarGangguanBerdasarkanMedia
-    }
+  loading.value = true
+  await requestGraphQl(queries.gangguan.daftar.berdasarkanMedia, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.daftarGangguanBerdasarkanMedia
+      } else {
+        data.value = []
+      }
 
-    reportMeta.value = filters.value
-    console.log(queryResult.data)
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loading.value = false
+    })
 }
 
 const onExporting = (e: any) => {

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

@@ -360,7 +360,7 @@ import { onMounted, ref } from 'vue'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Gangguan/Daftar/DGangguan_DKPL'
 
 const position = { of: '#dataTable' }
@@ -370,13 +370,14 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataSelected = ref<any>()
 const dialogDetail = ref(false)
+const loading = ref(false)
 const closeDialog = () => (dialogDetail.value = false)
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const { posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
 
-  refetch({
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -386,29 +387,26 @@ const filterData = (params: any) => {
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
-  })
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.daftarGangguanDialihkanKePoskoLain
-    }
-
-    reportMeta.value = filters.value
-    console.log(queryResult.data)
-  })
-  onError((error) => {
-    console.log(error)
-  })
-}
-const { onResult, onError, loading, refetch } = useQuery(
-  queries.gangguan.daftar.dataDialihkanKePoskoLain,
-  {
-    dateFrom: new Date().toISOString().slice(0, 10),
-    dateTo: new Date().toISOString().slice(0, 10),
-    posko: 0,
-    idUid: 0,
-    idUp3: 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!

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

@@ -320,7 +320,7 @@ import {
   DxSelection
 } from 'devextreme-vue/data-grid'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Gangguan/Daftar/DGangguan_DMAPKT'
 
 const position = { of: '#data' }
@@ -331,6 +331,7 @@ const data = ref<any[]>([])
 const dataSelected = ref<any>({})
 const dialogDetail = ref(false)
 const dataGridRef = ref<DxDataGrid | null>(null)
+const loading = ref(false)
 const clearSelection = () => {
   const dataGrid = dataGridRef.value!.instance!
   dataGrid.clearSelection()
@@ -347,22 +348,11 @@ const showDetail = () => (dialogDetail.value = true)
 
 const closeDialog = () => (dialogDetail.value = false)
 
-const { onResult, onError, loading, refetch } = useQuery(
-  queries.gangguan.daftar.diselesaikanMobileAPKT,
-  {
-    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    posko: 0,
-    idUid: 0,
-    idUp3: 0
-  }
-)
-
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
 
-  refetch({
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -372,20 +362,25 @@ const filterData = (params: any) => {
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3?.id ? up3.id : 0
-  })
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.daftarGangguanDiselesaikanMobileAPKT
-    }
+  loading.value = true
+  await requestGraphQl(queries.gangguan.daftar.diselesaikanMobileAPKT, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.daftarGangguanDiselesaikanMobileAPKT
+      } else {
+        data.value = []
+      }
 
-    reportMeta.value = filters.value
-    console.log(queryResult.data)
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loading.value = false
+    })
 }
 
 const onExporting = (e: any) => {

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

@@ -441,7 +441,7 @@ import {
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+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'
@@ -483,7 +483,7 @@ const setDetailType = (columnCaption: string) => {
   }
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -498,25 +498,23 @@ const getDetail = () => {
     idUid: selected?.id_uid ? selected?.id_uid : 0,
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
+  loadingSubData.value = false
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -533,19 +531,8 @@ const showDetail = () => {
   }
 }
 
-const onDataSelectionChanged = ({
-  selectedRowsData,
-  selectedRowKeys,
-  currentSelectedRowKeys,
-  element,
-  component
-}: any) => {
+const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
-    // console.log(selectedRowKeys)
-    // console.log(currentSelectedRowKeys)
-    // console.log(element)
-    // console.log(component)
-
     dataSelected.value = selectedRowsData[0]
     showDetail()
   }
@@ -558,42 +545,40 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
 
 const closeDialog = () => (dialogDetail.value = false)
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const { minJmlLapor, maxJmlLapor, posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.daftar.melaporLebihDariSatuKali,
-    {
-      minJmlLapor: minJmlLapor ? minJmlLapor : 1,
-      maxJmlLapor: maxJmlLapor ? maxJmlLapor : 1,
-      dateFrom: dateValue[0]
-        ? dateValue[0].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      dateTo: dateValue[1]
-        ? dateValue[1].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      posko: posko ? posko.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0
-    }
-  )
+  const query = {
+    minJmlLapor: minJmlLapor ? minJmlLapor : 1,
+    maxJmlLapor: maxJmlLapor ? maxJmlLapor : 1,
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    posko: posko ? posko.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  }
+  loadingData.value = true
+  await requestGraphQl(queries.gangguan.daftar.melaporLebihDariSatuKali, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.daftarGangguanMelaporLebihDariSatuKali
+      } else {
+        data.value = []
+      }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.daftarGangguanMelaporLebihDariSatuKali
-    }
-
-    reportMeta.value = filters.value
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 const onExporting = (e: any) => {

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

@@ -346,7 +346,7 @@ import {
   DxSelection
 } from 'devextreme-vue/data-grid'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import {
   exportToPDF,
   exportToXLSX,
@@ -361,6 +361,7 @@ const data = ref<any[]>([])
 const dataSelected = ref<any>({})
 const dialogDetail = ref(false)
 const dataGridRef = ref<DxDataGrid | null>(null)
+const loading = ref(false)
 const clearSelection = () => {
   const dataGrid = dataGridRef.value!.instance!
   dataGrid.clearSelection()
@@ -377,11 +378,11 @@ const showDetail = () => (dialogDetail.value = true)
 
 const closeDialog = () => (dialogDetail.value = false)
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const { minTime, maxTime, posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
 
-  refetch({
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -393,19 +394,24 @@ const filterData = (params: any) => {
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
-  })
+  }
+  loading.value = true
+  await requestGraphQl(queries.gangguan.daftar.recoveryTime, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.daftarGangguanRecoveryTime
+      } else {
+        data.value = []
+      }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.daftarGangguanRecoveryTime
-    }
-
-    reportMeta.value = filters.value
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loading.value = false
+    })
 }
 
 const onExporting = (e: any) => {
@@ -418,16 +424,6 @@ const onExporting = (e: any) => {
   }
 }
 
-const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar.recoveryTime, {
-  dateFrom: new Date().toISOString().slice(0, 10),
-  dateTo: new Date().toISOString().slice(0, 10),
-  minDurasiRecoveryTime: 1, //menit
-  maxDurasiRecoveryTime: 1, // menit
-  posko: 0,
-  idUid: 0,
-  idUp3: 0
-})
-
 const filters = ref()
 const reportMeta = ref({
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },

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

@@ -323,7 +323,7 @@ import {
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import {
   exportToPDF,
   exportToXLSX,
@@ -338,6 +338,7 @@ const data = ref<any[]>([])
 const dataSelected = ref<any>({})
 const dialogDetail = ref(false)
 const dataGridRef = ref<DxDataGrid | null>(null)
+const loading = ref(false)
 const clearSelection = () => {
   const dataGrid = dataGridRef.value!.instance!
   dataGrid.clearSelection()
@@ -354,11 +355,11 @@ const showDetail = () => (dialogDetail.value = true)
 
 const closeDialog = () => (dialogDetail.value = false)
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const { minTime, maxTime, posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
 
-  refetch({
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -370,31 +371,26 @@ const filterData = (params: any) => {
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
-  })
+  }
+  loading.value = true
+  await requestGraphQl(queries.gangguan.daftar.responseTime, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.daftarGangguanResponseTime
+      } else {
+        data.value = []
+      }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.daftarGangguanResponseTime
-    }
-
-    reportMeta.value = filters.value
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loading.value = false
+    })
 }
 
-const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar.responseTime, {
-  dateFrom: new Date().toISOString().slice(0, 10),
-  dateTo: new Date().toISOString().slice(0, 10),
-  minDurasiResponseTime: 1, //menit
-  maxDurasiResponseTime: 1, // menit
-  posko: 0,
-  idUid: 0,
-  idUp3: 0
-})
-
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     exportToPDF(reportMeta, data)

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

@@ -320,7 +320,7 @@ import {
   DxSelection
 } from 'devextreme-vue/data-grid'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { exportToPDF, exportToDOCX, exportToXLSX } from '@/report/Gangguan/Daftar/DGangguan_STIDP'
 
 const position = { of: '#data' }
@@ -331,6 +331,7 @@ const data = ref<any[]>([])
 const dataSelected = ref<any>({})
 const dialogDetail = ref(false)
 const dataGridRef = ref<DxDataGrid | null>(null)
+const loading = ref(false)
 const clearSelection = () => {
   const dataGrid = dataGridRef.value!.instance!
   dataGrid.clearSelection()
@@ -347,22 +348,11 @@ const showDetail = () => (dialogDetail.value = true)
 
 const closeDialog = () => (dialogDetail.value = false)
 
-const { onResult, onError, loading, refetch } = useQuery(
-  queries.gangguan.daftar.selesaiTanpaIDPelanggan,
-  {
-    dateFrom: new Date().toISOString().slice(0, 10),
-    dateTo: new Date().toISOString().slice(0, 10),
-    posko: 0,
-    idUid: 0,
-    idUp3: 0
-  }
-)
-
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const { posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
 
-  refetch({
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -372,20 +362,24 @@ const filterData = (params: any) => {
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
-  })
+  }
+  loading.value = true
+  await requestGraphQl(queries.gangguan.daftar.selesaiTanpaIDPelanggan, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.daftarGangguanSelesaiTanpaIdPelanggan
+      } else {
+        data.value = []
+      }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.daftarGangguanSelesaiTanpaIdPelanggan
-    }
-
-    reportMeta.value = filters.value
-    console.log(queryResult.data)
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loading.value = false
+    })
 }
 
 const onExporting = (e: any) => {