Refactor data retrieval in filterData function

src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue

@@ -315,7 +315,7 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import autoTable from 'jspdf-autotable'
 
 const position = { of: '#data' }
@@ -536,23 +536,13 @@ const onExporting = (e: any) => {
 }
 
 const data = ref<any[]>([])
+const loading = ref(false)
 
-const { onResult, onError, loading, refetch } = useQuery(
-  queries.keluhan.daftar.keluhanBerdasarkanMedia,
-  {
-    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    idUlp: 0,
-    idUid: 0,
-    idUp3: 0
-  }
-)
-
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
 
-  refetch({
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -562,20 +552,25 @@ const filterData = (params: any) => {
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
-  })
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.daftarKeluhanBerdasarkanMedia
-    }
+  loading.value = true
+  await requestGraphQl(queries.keluhan.daftar.keluhanBerdasarkanMedia, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.daftarKeluhanBerdasarkanMedia
+      } 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 filters = ref()

src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue

@@ -349,7 +349,7 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { jsPDF } from 'jspdf'
 import autoTable from 'jspdf-autotable'
@@ -361,6 +361,7 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataSelected = ref<any>({})
 const dialogDetail = ref(false)
+const loading = ref(false)
 
 const showDetail = () => (dialogDetail.value = true)
 
@@ -571,22 +572,11 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   showDetail()
 }
 
-const { onResult, onError, loading, refetch } = useQuery(
-  queries.keluhan.daftar.keluhanDipindahkanKeIDULPLain,
-  {
-    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    idUlp: 0,
-    idUid: 0,
-    idUp3: 0
-  }
-)
-
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
 
-  refetch({
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -596,20 +586,25 @@ const filterData = (params: any) => {
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
-  })
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.daftarKeluhanDialihkanKeUnitLain
-    }
+  loading.value = true
+  await requestGraphQl(queries.keluhan.daftar.keluhanDipindahkanKeIDULPLain, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.daftarKeluhanDialihkanKeUnitLain
+      } 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 filters = ref()

src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue

@@ -339,7 +339,7 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import autoTable from 'jspdf-autotable'
 
@@ -566,27 +566,15 @@ const onExporting = (e: any) => {
 }
 
 const data = ref<any[]>([])
+const loading = ref(false)
 
-const { onResult, onError, loading, refetch } = useQuery(
-  queries.keluhan.daftar.keluhanMelaporLebihDariSatuKali,
-  {
-    minJmlLapor: 1,
-    maxJmlLapor: 100,
-    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    idUlp: 0,
-    idUid: 0,
-    idUp3: 0
-  }
-)
-
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
   const minJmlLapor = params.minJmlLapor ? params.minJmlLapor : 1
   const maxJmlLapor = params.maxJmlLapor ? params.maxJmlLapor : 100
 
-  refetch({
+  const query = {
     minJmlLapor: minJmlLapor,
     maxJmlLapor: maxJmlLapor,
     dateFrom: dateValue[0]
@@ -598,20 +586,25 @@ const filterData = (params: any) => {
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
-  })
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.daftarKeluhanMelaporLebihDariSatuKali
-    }
+  loading.value = true
+  await requestGraphQl(queries.keluhan.daftar.keluhanMelaporLebihDariSatuKali, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.daftarKeluhanMelaporLebihDariSatuKali
+      } 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 filters = ref()

src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue

@@ -317,7 +317,7 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import autoTable from 'jspdf-autotable'
 
 const position = { of: '#data' }
@@ -548,25 +548,13 @@ const onExporting = (e: any) => {
 }
 
 const data = ref<any[]>([])
+const loading = ref(false)
 
-const { onResult, onError, loading, refetch } = useQuery(
-  queries.keluhan.daftar.keluhanRecoveryTime,
-  {
-    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    minDurasiRecoveryTime: 0,
-    maxDurasiRecoveryTime: 0,
-    idUlp: 0,
-    idUid: 0,
-    idUp3: 0
-  }
-)
-
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3, minTime, maxTime } = params
 
-  refetch({
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -578,20 +566,25 @@ const filterData = (params: any) => {
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
-  })
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.daftarKeluhanRecoveryTime
-    }
+  loading.value = true
+  await requestGraphQl(queries.keluhan.daftar.keluhanRecoveryTime, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.daftarKeluhanRecoveryTime
+      } 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 filters = ref()

src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue

@@ -335,7 +335,7 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import autoTable from 'jspdf-autotable'
 
@@ -567,25 +567,13 @@ const onExporting = (e: any) => {
 }
 
 const data = ref<any[]>([])
+const loading = ref(false)
 
-const { onResult, onError, loading, refetch } = useQuery(
-  queries.keluhan.daftar.keluhanResponseTime,
-  {
-    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    minDurasiResponseTime: 0,
-    maxDurasiResponseTime: 0,
-    idUlp: 0,
-    idUid: 0,
-    idUp3: 0
-  }
-)
-
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3, maxTime, minTime } = params
 
-  refetch({
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -597,20 +585,25 @@ const filterData = (params: any) => {
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
-  })
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.daftarKeluhanResponseTime
-    }
+  loading.value = true
+  await requestGraphQl(queries.keluhan.daftar.keluhanResponseTime, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.daftarKeluhanResponseTime
+      } 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 filters = ref()

src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue

@@ -308,7 +308,7 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import autoTable from 'jspdf-autotable'
 
 const position = { of: '#data' }
@@ -531,23 +531,13 @@ const onExporting = (e: any) => {
 }
 
 const data = ref<any[]>([])
+const loading = ref(false)
 
-const { onResult, onError, loading, refetch } = useQuery(
-  queries.keluhan.daftar.keluhanSelesaiTanpaIDPelanggan,
-  {
-    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    idUlp: 0,
-    idUid: 0,
-    idUp3: 0
-  }
-)
-
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
 
-  refetch({
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -557,20 +547,25 @@ const filterData = (params: any) => {
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
-  })
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.daftarKeluhanSelesaiTanpaIdPelanggan
-    }
+  loading.value = true
+  await requestGraphQl(queries.keluhan.daftar.keluhanSelesaiTanpaIDPelanggan, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.daftarKeluhanSelesaiTanpaIdPelanggan
+      } 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 filters = ref()

src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue

@@ -327,7 +327,7 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import autoTable from 'jspdf-autotable'
@@ -556,18 +556,7 @@ const onExporting = (e: any) => {
 }
 
 const data = ref<any[]>([])
-
-const { onResult, onError, loading, refetch } = useQuery(
-  queries.keluhan.daftar.keluhanDiselesaikanCC123,
-  {
-    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    idUlp: 0,
-    idUid: 0,
-    idUp3: 0,
-    media: ''
-  }
-)
+const loading = ref(false)
 const filters = ref()
 const reportMeta = ref({
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
@@ -576,11 +565,11 @@ const reportMeta = ref({
   periode: ''
 })
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
 
-  refetch({
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -591,19 +580,25 @@ const filterData = (params: any) => {
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,
     media: ''
-  })
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.daftarKeluhanDiselesaikanCC123
-    }
+  loading.value = true
+  await requestGraphQl(queries.keluhan.daftar.keluhanDiselesaikanCC123, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.daftarKeluhanDiselesaikanCC123
+      } else {
+        data.value = []
+      }
 
-    reportMeta.value = filters.value
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loading.value = false
+    })
 }
 
 onMounted(() => {