Add GraphQL queries for material-related data

src/components/Pages/Material/Daftar/Material_DGMYG.vue

@@ -152,51 +152,19 @@ import Filters from '@/components/Form/Filters.vue'
 import { Type14 } from '@/components/Form/FiltersType'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
+const loading = ref(false)
 
-const daftarGangguanDanMaterialDipakai = gql`
+const filterData = async (params: any) => {
-  query DaftardaftarGangguanDanMaterialDipakai(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $posko: String
-    $idUid: Int
-    $idUp3: Int
-  ) {
-    daftarGangguanDanMaterialDipakai(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      distribusi: $idUid
-      area: $idUp3
-      posko: $posko
-    ) {
-      isi_laporan
-      nama_material
-      nama_pelanggan
-      nomor_gangguan
-      penyebab_gangguan
-      regu
-      satuan
-      sumber
-      volume
-      waktu_padam
-    }
-  }
-`
-const { onResult, onError, loading, refetch } = useQuery(daftarGangguanDanMaterialDipakai, {
-  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-  idUid: 0,
-  idUp3: 0,
-  posko: ''
-})
-const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { posko, idUid, idUp3 } = params
-  refetch({
+
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -206,22 +174,22 @@ const filterData = (params: any) => {
     idUid: idUid ? idUid.id : 0,
     idUp3: idUp3 ? idUp3.id : 0,
     posko: posko ? posko.id : 0
-  })
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      queryResult.data.daftarGangguanDanMaterialDipakai.forEach((item: any) => {
-        data.value = [
-          ...data.value,
-          {
-            ...item
   }
-        ]
+
-      })
+  loading.value = true
+  await requestGraphQl(queries.material.daftar.daftarGangguanDanMaterialDipakai, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.daftarGangguanDanMaterialDipakai
+      } else {
+        data.value = []
       }
-    console.log(queryResult.data)
     })
-  onError((error) => {
+    .catch((err) => {
-    console.log(error)
+      console.error(err)
+    })
+    .finally(() => {
+      loading.value = false
     })
 }
 const filters = ref()

src/components/Pages/Material/Rekap/Material_RPM.vue

@@ -112,78 +112,18 @@ import { Type14 } from '@/components/Form/FiltersType'
 import Filters from '@/components/Form/Filters.vue'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
+const loading = ref(false)
 
-const rekapitulasiPemakaianMaterial = gql`
+const filterData = async (params: any) => {
-  query DaftarrekapitulasiPemakaianMaterial(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $posko: String
-    $idUid: Int
-    $idUp3: Int
-  ) {
-    rekapitulasiPemakaianMaterial(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      distribusi: $idUid
-      area: $idUp3
-      posko: $posko
-    ) {
-      kode_material
-      nama_material
-      satuan
-      sumber_material
-      tgl1
-      tgl10
-      tgl11
-      tgl12
-      tgl13
-      tgl14
-      tgl15
-      tgl16
-      tgl17
-      tgl18
-      tgl19
-      tgl2
-      tgl20
-      tgl21
-      tgl22
-      tgl23
-      tgl24
-      tgl25
-      tgl26
-      tgl27
-      tgl28
-      tgl29
-      tgl3
-      tgl30
-      tgl31
-      tgl4
-      tgl5
-      tgl6
-      tgl7
-      tgl8
-      tgl9
-    }
-  }
-`
-const { onResult, onError, loading, refetch } = useQuery(rekapitulasiPemakaianMaterial, {
-  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-  idUid: 0,
-  idUp3: 0,
-  posko: 0
-})
-const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
-
   const { posko, idUid, idUp3 } = params
-
+  const query = {
-  refetch({
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -193,22 +133,22 @@ const filterData = (params: any) => {
     idUid: idUid ? idUid.id : 0,
     idUp3: idUp3 ? idUp3.id : 0,
     posko: posko ? posko.id : 0
-  })
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      queryResult.data.rekapitulasiPemakaianMaterial.forEach((item: any) => {
-        data.value = [
-          ...data.value,
-          {
-            ...item
   }
-        ]
+
-      })
+  loading.value = true
+  await requestGraphQl(queries.material.rekap.rekapitulasiPemakaianMaterial, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.rekapitulasiPemakaianMaterial
+      } else {
+        data.value = []
       }
-    console.log(queryResult.data)
     })
-  onError((error) => {
+    .catch((err) => {
-    console.log(error)
+      console.error(err)
+    })
+    .finally(() => {
+      loading.value = false
     })
 }
 const filters = ref()

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue

@@ -227,7 +227,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { getMonthName } from '@/utils/texts'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
@@ -283,11 +283,9 @@ const onExporting = (e: any) => {
   }
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
-  const { onResult, onError, loading, refetch } = useQuery(
+  const query = {
-    queries.monalisa.gangguan.rekap.dispatchingTimeGangguan,
-    {
     namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,
@@ -295,28 +293,29 @@ const filterData = (params: any) => {
     bulan: bulan ? bulan.id : currentMonth.value,
     tahun: bulan ? tahun.id : currentYear.value
   }
-  )
+  loadingData.value = true
+  await requestGraphQl(queries.monalisa.gangguan.rekap.dispatchingTimeGangguan, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaDispatchingTimeGangguan
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
   lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1
   lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id
   currentMonth.value = bulan.id
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.monalisaDispatchingTimeGangguan
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -332,23 +331,20 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
+  loadingSubData.value = true
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
-    query
+    .then((result) => {
-  )
+      if (result.data.data != undefined) {
-
+        dataSub.value = result.data.data.detailKeluhanAll
-  onResult((queryResult) => {
+      } else {
-    if (queryResult.data != undefined) {
+        dataSub.value = []
-      dataSub.value = queryResult.data.detailKeluhanAll
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingSubData.value = false
-    loadingSubData.value = value
     })
 }
 

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue

@@ -209,7 +209,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { getMonthName } from '@/utils/texts'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
@@ -236,7 +236,7 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
   lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1
   lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id
@@ -244,9 +244,7 @@ const filterData = (params: any) => {
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
+  const query = {
-    queries.monalisa.gangguan.rekap.rekapitulasiEnsGangguan,
-    {
     namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
@@ -254,20 +252,21 @@ const filterData = (params: any) => {
     bulan: bulan ? bulan.id : 10,
     tahun: bulan ? tahun.id : 2023
   }
-  )
 
-  onResult((queryResult) => {
+  loadingData.value = true
-    if (queryResult.data != undefined) {
+  await requestGraphQl(queries.monalisa.gangguan.rekap.rekapitulasiEnsGangguan, query)
-      data.value = queryResult.data.monalisaRekapitulasiEnsGangguan
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaRekapitulasiEnsGangguan
+      } else {
+        data.value = []
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingData.value = false
-    loadingData.value = value
     })
 }
 
@@ -300,7 +299,7 @@ const onExporting = (e: any) => {
   }
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -316,23 +315,20 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
+  loadingSubData.value = true
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
-    query
+    .then((result) => {
-  )
+      if (result.data.data != undefined) {
-
+        dataSub.value = result.data.data.detailKeluhanAll
-  onResult((queryResult) => {
+      } else {
-    if (queryResult.data != undefined) {
+        dataSub.value = []
-      dataSub.value = queryResult.data.detailKeluhanAll
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingSubData.value = false
-    loadingSubData.value = value
     })
 }
 

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue

@@ -453,7 +453,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 DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
@@ -483,15 +483,13 @@ const closeDialog = () => {
   dialogDetail.value = false
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
   currentMonth.value = bulan.id
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
+  const query = {
-    queries.monalisa.gangguan.rekap.gangguanBelumSelesai,
-    {
     regional: regional.name == 'Semua Regional' ? null : regional.id,
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
@@ -499,20 +497,21 @@ const filterData = (params: any) => {
     bulan: bulan ? bulan.id : 10,
     tahun: bulan ? tahun.id : 2023
   }
-  )
 
-  onResult((queryResult) => {
+  loadingData.value = true
-    if (queryResult.data != undefined) {
+  await requestGraphQl(queries.monalisa.gangguan.rekap.gangguanBelumSelesai, query)
-      data.value = queryResult.data.monalisaGangguanBelumSelesai
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaGangguanBelumSelesai
+      } else {
+        data.value = []
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingData.value = false
-    loadingData.value = value
     })
 }
 
@@ -545,7 +544,7 @@ const onExporting = (e: any) => {
   }
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -561,23 +560,20 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
+  loadingSubData.value = true
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
-    query
+    .then((result) => {
-  )
+      if (result.data.data != undefined) {
-
+        dataSub.value = result.data.data.detailKeluhanAll
-  onResult((queryResult) => {
+      } else {
-    if (queryResult.data != undefined) {
+        dataSub.value = []
-      dataSub.value = queryResult.data.detailKeluhanAll
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingSubData.value = false
-    loadingSubData.value = value
     })
 }
 

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue

@@ -165,7 +165,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 { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
@@ -188,12 +188,9 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
-
+  const query = {
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.monalisa.gangguan.rekap.gangguanPerJenisGangguan,
-    {
     namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
@@ -201,20 +198,21 @@ const filterData = (params: any) => {
     bulan: bulan ? bulan.id : 10,
     tahun: bulan ? tahun.id : 2023
   }
-  )
 
-  onResult((queryResult) => {
+  loadingData.value = true
-    if (queryResult.data != undefined) {
+  await requestGraphQl(queries.monalisa.gangguan.rekap.gangguanPerJenisGangguan, query)
-      data.value = queryResult.data.monalisaGangguanPerJenisGangguan
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaGangguanPerJenisGangguan
+      } else {
+        data.value = []
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingData.value = false
-    loadingData.value = value
     })
 }
 
@@ -246,7 +244,7 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -262,23 +260,20 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
+  loadingSubData.value = true
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
-    query
+    .then((result) => {
-  )
+      if (result.data.data != undefined) {
-
+        dataSub.value = result.data.data.detailKeluhanAll
-  onResult((queryResult) => {
+      } else {
-    if (queryResult.data != undefined) {
+        dataSub.value = []
-      dataSub.value = queryResult.data.detailKeluhanAll
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingSubData.value = false
-    loadingSubData.value = value
     })
 }
 

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue

@@ -385,7 +385,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { getMonthName } from '@/utils/texts'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
@@ -407,11 +407,9 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
-  const { onResult, onError, loading, refetch } = useQuery(
+  const query = {
-    queries.monalisa.gangguan.rekap.jumlahDurasiRptRctGangguan,
-    {
     namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
@@ -419,24 +417,24 @@ const filterData = (params: any) => {
     bulan: bulan ? bulan.id : 10,
     tahun: bulan ? tahun.id : 2023
   }
-  )
+  loadingData.value = true
+  await requestGraphQl(queries.monalisa.gangguan.rekap.jumlahDurasiRptRctGangguan, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaJumlahDurasiRptRctGangguan
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 
   currentMonth.value = bulan.id
   currentYear.value = tahun.id
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.monalisaJumlahDurasiRptRctGangguan
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
 }
 
 const onExporting = (e: any) => {
@@ -467,7 +465,7 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -483,23 +481,20 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
+  loadingSubData.value = true
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
-    query
+    .then((result) => {
-  )
+      if (result.data.data != undefined) {
-
+        dataSub.value = result.data.data.detailKeluhanAll
-  onResult((queryResult) => {
+      } else {
-    if (queryResult.data != undefined) {
+        dataSub.value = []
-      dataSub.value = queryResult.data.detailKeluhanAll
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingSubData.value = false
-    loadingSubData.value = value
     })
 }
 

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue

@@ -300,7 +300,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 { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
@@ -356,7 +356,7 @@ const currentYear = ref(new Date().getFullYear())
 const currentMonth = ref(new Date().getMonth())
 const lastYear = ref(currentYear.value - 1)
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
   lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1
   lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id
@@ -364,9 +364,7 @@ const filterData = (params: any) => {
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
+  const query = {
-    queries.monalisa.gangguan.rekap.jumlahKaliGangguan,
-    {
     namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,
@@ -374,23 +372,25 @@ const filterData = (params: any) => {
     bulan: bulan ? bulan.id : currentMonth.value,
     tahun: bulan ? tahun.id : currentYear.value
   }
-  )
+
-  onResult((queryResult) => {
+  loadingData.value = true
-    if (queryResult.data != undefined) {
+  await requestGraphQl(queries.monalisa.gangguan.rekap.jumlahKaliGangguan, query)
-      data.value = queryResult.data.monalisaJumlahKaliGangguan
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaJumlahKaliGangguan
+      } else {
+        data.value = []
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingData.value = false
-    loadingData.value = value
     })
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -406,23 +406,20 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
+  loadingSubData.value = true
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
-    query
+    .then((result) => {
-  )
+      if (result.data.data != undefined) {
-
+        dataSub.value = result.data.data.detailKeluhanAll
-  onResult((queryResult) => {
+      } else {
-    if (queryResult.data != undefined) {
+        dataSub.value = []
-      dataSub.value = queryResult.data.detailKeluhanAll
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingSubData.value = false
-    loadingSubData.value = value
     })
 }
 

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue

@@ -276,7 +276,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { getMonthName } from '@/utils/texts'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
@@ -303,7 +303,7 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
   lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1
   lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id
@@ -311,9 +311,7 @@ const filterData = (params: any) => {
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
+  const query = {
-    queries.monalisa.gangguan.rekap.laporUlangGangguan,
-    {
     namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
@@ -321,20 +319,21 @@ const filterData = (params: any) => {
     bulan: bulan ? bulan.id : 10,
     tahun: bulan ? tahun.id : 2023
   }
-  )
 
-  onResult((queryResult) => {
+  loadingData.value = true
-    if (queryResult.data != undefined) {
+  await requestGraphQl(queries.monalisa.gangguan.rekap.laporUlangGangguan, query)
-      data.value = queryResult.data.monalisaRekapitulasiLaporUlangGangguan
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaRekapitulasiLaporUlangGangguan
+      } else {
+        data.value = []
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingData.value = false
-    loadingData.value = value
     })
 }
 const onExporting = (e: any) => {
@@ -365,7 +364,7 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -381,23 +380,20 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
+  loadingSubData.value = true
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
-    query
+    .then((result) => {
-  )
+      if (result.data.data != undefined) {
-
+        dataSub.value = result.data.data.detailKeluhanAll
-  onResult((queryResult) => {
+      } else {
-    if (queryResult.data != undefined) {
+        dataSub.value = []
-      dataSub.value = queryResult.data.detailKeluhanAll
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingSubData.value = false
-    loadingSubData.value = value
     })
 }
 

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue

@@ -227,7 +227,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { getMonthName } from '@/utils/texts'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
@@ -254,7 +254,7 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
   lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1
   lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id
@@ -262,9 +262,7 @@ const filterData = (params: any) => {
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
+  const query = {
-    queries.monalisa.gangguan.rekap.recoveryTimeGangguan,
-    {
     namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,
@@ -272,20 +270,21 @@ const filterData = (params: any) => {
     bulan: bulan ? bulan.id : currentMonth.value,
     tahun: bulan ? tahun.id : currentYear.value
   }
-  )
 
-  onResult((queryResult) => {
+  loadingData.value = true
-    if (queryResult.data != undefined) {
+  await requestGraphQl(queries.monalisa.gangguan.rekap.recoveryTimeGangguan, query)
-      data.value = queryResult.data.monalisaRecoveryTimeGangguan
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaRecoveryTimeGangguan
+      } else {
+        data.value = []
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingData.value = false
-    loadingData.value = value
     })
 }
 
@@ -317,7 +316,7 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -333,23 +332,20 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
+  loadingSubData.value = true
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
-    query
+    .then((result) => {
-  )
+      if (result.data.data != undefined) {
-
+        dataSub.value = result.data.data.detailKeluhanAll
-  onResult((queryResult) => {
+      } else {
-    if (queryResult.data != undefined) {
+        dataSub.value = []
-      dataSub.value = queryResult.data.detailKeluhanAll
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingSubData.value = false
-    loadingSubData.value = value
     })
 }
 

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue

@@ -227,7 +227,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { getMonthName } from '@/utils/texts'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
@@ -254,7 +254,7 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
   lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1
   lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id
@@ -262,9 +262,7 @@ const filterData = (params: any) => {
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
+  const query = {
-    queries.monalisa.gangguan.rekap.responseTimeGangguan,
-    {
     namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,
@@ -272,20 +270,21 @@ const filterData = (params: any) => {
     bulan: bulan ? bulan.id : currentMonth.value,
     tahun: bulan ? tahun.id : currentYear.value
   }
-  )
 
-  onResult((queryResult) => {
+  loadingData.value = true
-    if (queryResult.data != undefined) {
+  await requestGraphQl(queries.monalisa.gangguan.rekap.responseTimeGangguan, query)
-      data.value = queryResult.data.monalisaResponseTimeGangguan
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaResponseTimeGangguan
+      } else {
+        data.value = []
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingData.value = false
-    loadingData.value = value
     })
 }
 
@@ -317,7 +316,7 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -333,23 +332,20 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
+  loadingSubData.value = true
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
-    query
+    .then((result) => {
-  )
+      if (result.data.data != undefined) {
-
+        dataSub.value = result.data.data.detailKeluhanAll
-  onResult((queryResult) => {
+      } else {
-    if (queryResult.data != undefined) {
+        dataSub.value = []
-      dataSub.value = queryResult.data.detailKeluhanAll
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingSubData.value = false
-    loadingSubData.value = value
     })
 }
 

src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue

@@ -152,7 +152,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
 
@@ -204,7 +204,7 @@ const onExporting = (e: any) => {
   }
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -220,23 +220,20 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
+  loadingSubData.value = true
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
-    query
+    .then((result) => {
-  )
+      if (result.data.data != undefined) {
-
+        dataSub.value = result.data.data.detailKeluhanAll
-  onResult((queryResult) => {
+      } else {
-    if (queryResult.data != undefined) {
+        dataSub.value = []
-      dataSub.value = queryResult.data.detailKeluhanAll
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingSubData.value = false
-    loadingSubData.value = value
     })
 }
 
@@ -264,15 +261,13 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
   currentYear.value = tahun.id
   currentMonth.value = bulan.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
+  const query = {
-    queries.monalisa.keluhan.rekap.gangguanPerJenisKeluhan,
-    {
     namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
@@ -280,20 +275,21 @@ const filterData = (params: any) => {
     bulan: bulan ? bulan.id : currentMonth.value,
     tahun: bulan ? tahun.id : currentYear.value
   }
-  )
 
-  onResult((queryResult) => {
+  loadingData.value = true
-    if (queryResult.data != undefined) {
+  await requestGraphQl(queries.monalisa.keluhan.rekap.gangguanPerJenisKeluhan, query)
-      data.value = queryResult.data.monalisaGangguanPerJenisKeluhan
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaGangguanPerJenisKeluhan
+      } else {
+        data.value = []
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingData.value = false
-    loadingData.value = value
     })
 }
 

src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue

@@ -376,7 +376,7 @@ import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { getMonthName } from '@/utils/texts'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
 
@@ -426,7 +426,7 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -442,23 +442,20 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
+  loadingSubData.value = true
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
-    query
+    .then((result) => {
-  )
+      if (result.data.data != undefined) {
-
+        dataSub.value = result.data.data.detailKeluhanAll
-  onResult((queryResult) => {
+      } else {
-    if (queryResult.data != undefined) {
+        dataSub.value = []
-      dataSub.value = queryResult.data.detailKeluhanAll
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingSubData.value = false
-    loadingSubData.value = value
     })
 }
 
@@ -486,16 +483,14 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
 
   currentYear.value = tahun.id
   currentMonth.value = bulan.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
+  const query = {
-    queries.monalisa.keluhan.rekap.jumlahDurasiRptRctKeluhan,
-    {
     namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
@@ -503,20 +498,21 @@ const filterData = (params: any) => {
     bulan: bulan ? bulan.id : currentMonth.value,
     tahun: bulan ? tahun.id : currentYear.value
   }
-  )
 
-  onResult((queryResult) => {
+  loadingData.value = true
-    if (queryResult.data != undefined) {
+  await requestGraphQl(queries.monalisa.keluhan.rekap.jumlahDurasiRptRctKeluhan, query)
-      data.value = queryResult.data.monalisaJumlahDurasiRptRctKeluhan
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaJumlahDurasiRptRctKeluhan
+      } else {
+        data.value = []
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingData.value = false
-    loadingData.value = value
     })
 }
 

src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue

@@ -282,7 +282,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 { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
@@ -338,7 +338,7 @@ const onExporting = (e: any) => {
   }
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
   lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1
   lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id
@@ -346,9 +346,7 @@ const filterData = (params: any) => {
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
+  const query = {
-    queries.monalisa.keluhan.rekap.jumlahKaliKeluhan,
-    {
     namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
@@ -356,24 +354,25 @@ const filterData = (params: any) => {
     bulan: bulan ? bulan.id : currentMonth.value,
     tahun: bulan ? tahun.id : currentYear.value
   }
-  )
 
-  onResult((queryResult) => {
+  loadingData.value = true
-    if (queryResult.data != undefined) {
+  await requestGraphQl(queries.monalisa.keluhan.rekap.jumlahKaliKeluhan, query)
-      data.value = queryResult.data.monalisaJumlahKaliKeluhan
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaJumlahKaliKeluhan
+      } else {
+        data.value = []
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingData.value = false
-    loadingData.value = value
     })
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -389,23 +388,20 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
+  loadingSubData.value = true
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
-    query
+    .then((result) => {
-  )
+      if (result.data.data != undefined) {
-
+        dataSub.value = result.data.data.detailKeluhanAll
-  onResult((queryResult) => {
+      } else {
-    if (queryResult.data != undefined) {
+        dataSub.value = []
-      dataSub.value = queryResult.data.detailKeluhanAll
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingSubData.value = false
-    loadingSubData.value = value
     })
 }
 

src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue

@@ -173,7 +173,7 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
-import { apolloClient, queries } from '@/utils/api/api.graphql'
+import { apolloClient, queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
 
 const client = apolloClient()
@@ -223,7 +223,7 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -239,23 +239,20 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
+  loadingSubData.value = true
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
-    query
+    .then((result) => {
-  )
+      if (result.data.data != undefined) {
-
+        dataSub.value = result.data.data.detailKeluhanAll
-  onResult((queryResult) => {
+      } else {
-    if (queryResult.data != undefined) {
+        dataSub.value = []
-      dataSub.value = queryResult.data.detailKeluhanAll
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingSubData.value = false
-    loadingSubData.value = value
     })
 }
 
@@ -283,16 +280,14 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
 
   currentMonth.value = bulan.id
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
+  const query = {
-    queries.monalisa.keluhan.rekap.keluhanBelumSelesai,
-    {
     namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
@@ -300,20 +295,21 @@ const filterData = (params: any) => {
     bulan: bulan ? bulan.id : currentMonth.value,
     tahun: bulan ? tahun.id : currentYear.value
   }
-  )
 
-  onResult((queryResult) => {
+  loadingData.value = true
-    if (queryResult.data != undefined) {
+  await requestGraphQl(queries.monalisa.keluhan.rekap.keluhanBelumSelesai, query)
-      data.value = queryResult.data.monalisaRekapitulasiKeluhanBelumSelesai
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaRekapitulasiKeluhanBelumSelesai
+      } else {
+        data.value = []
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingData.value = false
-    loadingData.value = value
     })
 }
 

src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue

@@ -277,7 +277,7 @@ import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 import { getMonthName } from '@/utils/texts'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
-import { apolloClient, queries } from '@/utils/api/api.graphql'
+import { apolloClient, queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
 
 const client = apolloClient()
@@ -331,7 +331,7 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -347,23 +347,20 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
+  loadingSubData.value = true
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
-    query
+    .then((result) => {
-  )
+      if (result.data.data != undefined) {
-
+        dataSub.value = result.data.data.detailKeluhanAll
-  onResult((queryResult) => {
+      } else {
-    if (queryResult.data != undefined) {
+        dataSub.value = []
-      dataSub.value = queryResult.data.detailKeluhanAll
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingSubData.value = false
-    loadingSubData.value = value
     })
 }
 
@@ -391,7 +388,7 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
   lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1
   lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id
@@ -399,9 +396,7 @@ const filterData = (params: any) => {
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
+  const query = {
-    queries.monalisa.keluhan.rekap.laporUlangKeluhan,
-    {
     namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
@@ -409,20 +404,21 @@ const filterData = (params: any) => {
     bulan: bulan ? bulan.id : currentMonth.value,
     tahun: bulan ? tahun.id : currentYear.value
   }
-  )
 
-  onResult((queryResult) => {
+  loadingData.value = true
-    if (queryResult.data != undefined) {
+  await requestGraphQl(queries.monalisa.keluhan.rekap.laporUlangKeluhan, query)
-      data.value = queryResult.data.monalisaRekapitulasiLaporUlangKeluhan
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaRekapitulasiLaporUlangKeluhan
+      } else {
+        data.value = []
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingData.value = false
-    loadingData.value = value
     })
 }
 

src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue

@@ -301,7 +301,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { getMonthName } from '@/utils/texts'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
@@ -357,7 +357,7 @@ const onExporting = (e: any) => {
   }
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
   lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1
   lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id
@@ -365,9 +365,7 @@ const filterData = (params: any) => {
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
+  const query = {
-    queries.monalisa.keluhan.rekap.recoveryTimeKeluhan,
-    {
     namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
@@ -375,24 +373,25 @@ const filterData = (params: any) => {
     bulan: bulan ? bulan.id : currentMonth.value,
     tahun: bulan ? tahun.id : currentYear.value
   }
-  )
 
-  onResult((queryResult) => {
+  loadingData.value = true
-    if (queryResult.data != undefined) {
+  await requestGraphQl(queries.monalisa.keluhan.rekap.recoveryTimeKeluhan, query)
-      data.value = queryResult.data.monalisaRecoveryTimeKeluhan
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaRecoveryTimeKeluhan
+      } else {
+        data.value = []
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingData.value = false
-    loadingData.value = value
     })
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -408,23 +407,20 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
+  loadingSubData.value = true
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
-    query
+    .then((result) => {
-  )
+      if (result.data.data != undefined) {
-
+        dataSub.value = result.data.data.detailKeluhanAll
-  onResult((queryResult) => {
+      } else {
-    if (queryResult.data != undefined) {
+        dataSub.value = []
-      dataSub.value = queryResult.data.detailKeluhanAll
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingSubData.value = false
-    loadingSubData.value = value
     })
 }
 

src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue

@@ -302,7 +302,7 @@ import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { getMonthName } from '@/utils/texts'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -354,7 +354,7 @@ const onExporting = (e: any) => {
   }
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
   lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1
   lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id
@@ -362,9 +362,7 @@ const filterData = (params: any) => {
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
+  const query = {
-    queries.monalisa.keluhan.rekap.responseTimeKeluhan,
-    {
     namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
@@ -372,24 +370,25 @@ const filterData = (params: any) => {
     bulan: bulan ? bulan.id : currentMonth.value,
     tahun: bulan ? tahun.id : currentYear.value
   }
-  )
 
-  onResult((queryResult) => {
+  loadingData.value = true
-    if (queryResult.data != undefined) {
+  await requestGraphQl(queries.monalisa.keluhan.rekap.responseTimeKeluhan, query)
-      data.value = queryResult.data.monalisaResponseTimeKeluhan
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaResponseTimeKeluhan
+      } else {
+        data.value = []
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingData.value = false
-    loadingData.value = value
     })
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -405,23 +404,20 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
+  loadingSubData.value = true
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
-    query
+    .then((result) => {
-  )
+      if (result.data.data != undefined) {
-
+        dataSub.value = result.data.data.detailKeluhanAll
-  onResult((queryResult) => {
+      } else {
-    if (queryResult.data != undefined) {
+        dataSub.value = []
-      dataSub.value = queryResult.data.detailKeluhanAll
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingSubData.value = false
-    loadingSubData.value = value
     })
 }
 

src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue

@@ -664,7 +664,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 { getMonthName, getMonthNameShort } from '@/utils/texts'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
@@ -720,7 +720,7 @@ const onExporting = (e: any) => {
   }
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -736,23 +736,20 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
+  loadingSubData.value = true
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
-    query
+    .then((result) => {
-  )
+      if (result.data.data != undefined) {
-
+        dataSub.value = result.data.data.detailKeluhanAll
-  onResult((queryResult) => {
+      } else {
-    if (queryResult.data != undefined) {
+        dataSub.value = []
-      dataSub.value = queryResult.data.detailKeluhanAll
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingSubData.value = false
-    loadingSubData.value = value
     })
 }
 
@@ -780,16 +777,14 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
 
   currentMonth.value = bulan.id
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
+  const query = {
-    queries.monalisa.laporan.bulanan.agingComplaintBulanan,
-    {
     namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,
@@ -797,20 +792,21 @@ const filterData = (params: any) => {
     bulan: bulan ? bulan.id : currentMonth.value,
     tahun: bulan ? tahun.id : currentYear.value
   }
-  )
 
-  onResult((queryResult) => {
+  loadingData.value = true
-    if (queryResult.data != undefined) {
+  await requestGraphQl(queries.monalisa.laporan.bulanan.agingComplaintBulanan, query)
-      data.value = queryResult.data.agingComplaintBulanan
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.agingComplaintBulanan
+      } else {
+        data.value = []
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingData.value = false
-    loadingData.value = value
     })
 }
 

src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue

@@ -278,7 +278,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 { getMonthName } from '@/utils/texts'
 import { apolloClient } from '@/utils/api/api.graphql'
@@ -331,7 +331,7 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -347,23 +347,20 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
+  loadingSubData.value = true
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
-    query
+    .then((result) => {
-  )
+      if (result.data.data != undefined) {
-
+        dataSub.value = result.data.data.detailKeluhanAll
-  onResult((queryResult) => {
+      } else {
-    if (queryResult.data != undefined) {
+        dataSub.value = []
-      dataSub.value = queryResult.data.detailKeluhanAll
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingSubData.value = false
-    loadingSubData.value = value
     })
 }
 
@@ -391,15 +388,13 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
   currentMonth.value = bulan.id
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
+  const query = {
-    queries.monalisa.laporan.bulanan.energyNotSalesBulanan,
-    {
     namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,
@@ -407,20 +402,21 @@ const filterData = (params: any) => {
     bulan: bulan ? bulan.id : currentMonth.value,
     tahun: bulan ? tahun.id : currentYear.value
   }
-  )
 
-  onResult((queryResult) => {
+  loadingData.value = true
-    if (queryResult.data != undefined) {
+  await requestGraphQl(queries.monalisa.laporan.bulanan.energyNotSalesBulanan, query)
-      data.value = queryResult.data.energyNotSalesBulanan
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.energyNotSalesBulanan
+      } else {
+        data.value = []
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingData.value = false
-    loadingData.value = value
     })
 }
 

src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue

@@ -290,7 +290,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 { getMonthNameShort } from '@/utils/texts'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
@@ -353,15 +353,13 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   clearSelection()
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
   currentMonth.value = bulan.id
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
+  const query = {
-    queries.monalisa.laporan.bulanan.kepatuhandanAkurasiDalamPelaporanBulanan,
-    {
     namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,
@@ -369,20 +367,24 @@ const filterData = (params: any) => {
     bulan: bulan ? bulan.id : currentMonth.value,
     tahun: bulan ? tahun.id : currentYear.value
   }
-  )
 
-  onResult((queryResult) => {
+  loadingData.value = true
-    if (queryResult.data != undefined) {
+  await requestGraphQl(
-      data.value = queryResult.data.kepatuhandanAkurasiDalamPelaporanBulanan
+    queries.monalisa.laporan.bulanan.kepatuhandanAkurasiDalamPelaporanBulanan,
+    query
+  )
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.kepatuhandanAkurasiDalamPelaporanBulanan
+      } else {
+        data.value = []
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingData.value = false
-    loadingData.value = value
     })
 }
 

src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue

@@ -989,7 +989,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { getMonthNameShort } from '@/utils/texts'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
@@ -1044,7 +1044,7 @@ const onExporting = (e: any) => {
   }
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -1060,23 +1060,20 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
+  loadingSubData.value = true
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
-    query
+    .then((result) => {
-  )
+      if (result.data.data != undefined) {
-
+        dataSub.value = result.data.data.detailKeluhanAll
-  onResult((queryResult) => {
+      } else {
-    if (queryResult.data != undefined) {
+        dataSub.value = []
-      dataSub.value = queryResult.data.detailKeluhanAll
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingSubData.value = false
-    loadingSubData.value = value
     })
 }
 
@@ -1104,16 +1101,14 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
 
   currentMonth.value = bulan.id
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
+  const query = {
-    queries.monalisa.laporan.bulanan.penurunanJumlahKomplainBulanan,
-    {
     namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,
@@ -1121,20 +1116,21 @@ const filterData = (params: any) => {
     bulan: bulan ? bulan.id : currentMonth.value,
     tahun: bulan ? tahun.id : currentYear.value
   }
-  )
 
-  onResult((queryResult) => {
+  loadingData.value = true
-    if (queryResult.data != undefined) {
+  await requestGraphQl(queries.monalisa.laporan.bulanan.penurunanJumlahKomplainBulanan, query)
-      data.value = queryResult.data.penurunanJumlahKomplainBulanan
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.penurunanJumlahKomplainBulanan
+      } else {
+        data.value = []
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingData.value = false
-    loadingData.value = value
     })
 }
 

src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue

@@ -362,7 +362,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 { getMonthName, getMonthNameShort } from '@/utils/texts'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 
@@ -409,7 +409,7 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -425,23 +425,20 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
+  loadingSubData.value = true
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
-    query
+    .then((result) => {
-  )
+      if (result.data.data != undefined) {
-
+        dataSub.value = result.data.data.detailKeluhanAll
-  onResult((queryResult) => {
+      } else {
-    if (queryResult.data != undefined) {
+        dataSub.value = []
-      dataSub.value = queryResult.data.detailKeluhanAll
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingSubData.value = false
-    loadingSubData.value = value
     })
 }
 
@@ -468,14 +465,12 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
   dataSubSelected.value = data
 }
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
   currentYear.value = tahun.id
   currentMonth.value = bulan.id
 
-  const { onResult, onError, loading, refetch } = useQuery(
+  const query = {
-    queries.monalisa.laporan.kumulatif.agingComplaintKumulatif,
-    {
     namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
@@ -483,20 +478,21 @@ const filterData = (params: any) => {
     bulan: bulan ? bulan.id : 10,
     tahun: bulan ? tahun.id : 2023
   }
-  )
 
-  onResult((queryResult) => {
+  loadingData.value = true
-    if (queryResult.data != undefined) {
+  await requestGraphQl(queries.monalisa.laporan.kumulatif.agingComplaintKumulatif, query)
-      data.value = queryResult.data.agingComplaintKumulatif
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.agingComplaintKumulatif
+      } else {
+        data.value = []
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingData.value = false
-    loadingData.value = value
     })
 }
 const filters = ref()

src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue

@@ -278,7 +278,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 { getMonthName } from '@/utils/texts'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
@@ -331,7 +331,7 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -347,23 +347,20 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
+  loadingSubData.value = true
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
-    query
+    .then((result) => {
-  )
+      if (result.data.data != undefined) {
-
+        dataSub.value = result.data.data.detailKeluhanAll
-  onResult((queryResult) => {
+      } else {
-    if (queryResult.data != undefined) {
+        dataSub.value = []
-      dataSub.value = queryResult.data.detailKeluhanAll
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingSubData.value = false
-    loadingSubData.value = value
     })
 }
 
@@ -391,16 +388,14 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
 
   currentMonth.value = bulan.id
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
+  const query = {
-    queries.monalisa.laporan.kumulatif.energyNotSalesKumulatif,
-    {
     namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
@@ -408,20 +403,21 @@ const filterData = (params: any) => {
     bulan: bulan ? bulan.id : currentMonth.value,
     tahun: bulan ? tahun.id : currentYear.value
   }
-  )
 
-  onResult((queryResult) => {
+  loadingData.value = true
-    if (queryResult.data != undefined) {
+  await requestGraphQl(queries.monalisa.laporan.kumulatif.energyNotSalesKumulatif, query)
-      data.value = queryResult.data.energyNotSalesKumulatif
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.energyNotSalesKumulatif
+      } else {
+        data.value = []
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingData.value = false
-    loadingData.value = value
     })
 }
 

src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue

@@ -290,7 +290,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 { getMonthNameShort } from '@/utils/texts'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
@@ -343,7 +343,7 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -359,23 +359,20 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
+  loadingSubData.value = true
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
-    query
+    .then((result) => {
-  )
+      if (result.data.data != undefined) {
-
+        dataSub.value = result.data.data.detailKeluhanAll
-  onResult((queryResult) => {
+      } else {
-    if (queryResult.data != undefined) {
+        dataSub.value = []
-      dataSub.value = queryResult.data.detailKeluhanAll
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingSubData.value = false
-    loadingSubData.value = value
     })
 }
 
@@ -403,16 +400,14 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
 
   currentMonth.value = bulan.id
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
+  const query = {
-    queries.monalisa.laporan.kumulatif.kepatuhandanAkurasiDalamPelaporanKumulatif,
-    {
     namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
@@ -420,20 +415,24 @@ const filterData = (params: any) => {
     bulan: bulan ? bulan.id : currentMonth.value,
     tahun: bulan ? tahun.id : currentYear.value
   }
-  )
 
-  onResult((queryResult) => {
+  loadingData.value = true
-    if (queryResult.data != undefined) {
+  await requestGraphQl(
-      data.value = queryResult.data.kepatuhandanAkurasiDalamPelaporanKumulatif
+    queries.monalisa.laporan.kumulatif.kepatuhandanAkurasiDalamPelaporanKumulatif,
+    query
+  )
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.kepatuhandanAkurasiDalamPelaporanKumulatif
+      } else {
+        data.value = []
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingData.value = false
-    loadingData.value = value
     })
 }
 

src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue

@@ -738,7 +738,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { getMonthName } from '@/utils/texts'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
@@ -790,7 +790,7 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -806,23 +806,20 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
+  loadingSubData.value = true
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
-    query
+    .then((result) => {
-  )
+      if (result.data.data != undefined) {
-
+        dataSub.value = result.data.data.detailKeluhanAll
-  onResult((queryResult) => {
+      } else {
-    if (queryResult.data != undefined) {
+        dataSub.value = []
-      dataSub.value = queryResult.data.detailKeluhanAll
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingSubData.value = false
-    loadingSubData.value = value
     })
 }
 
@@ -850,16 +847,14 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
 
   currentYear.value = tahun.id
   currentMonth.value = bulan.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
+  const query = {
-    queries.monalisa.laporan.kumulatif.penurunanJumlahKomplainKumulatif,
-    {
     namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
@@ -867,20 +862,21 @@ const filterData = (params: any) => {
     bulan: bulan ? bulan.id : currentMonth.value,
     tahun: bulan ? tahun.id : currentYear.value
   }
-  )
 
-  onResult((queryResult) => {
+  loadingData.value = true
-    if (queryResult.data != undefined) {
+  await requestGraphQl(queries.monalisa.laporan.kumulatif.penurunanJumlahKomplainKumulatif, query)
-      data.value = queryResult.data.penurunanJumlahKomplainKumulatif
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.penurunanJumlahKomplainKumulatif
+      } else {
+        data.value = []
       }
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingData.value = false
-    loadingData.value = value
     })
 }
 

src/components/Pages/PencarianData/PencarianData.vue

@@ -253,7 +253,7 @@ import {
 import { Type15 } from '@/components/Form/FiltersType'
 import Filters from '@/components/Form/Filters.vue'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
@@ -303,15 +303,11 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { type, keyword, searchBy } = params
 
-  const { onResult, onError, loading, refetch } = useQuery(
+  const query = {
-    filters.value.type == 'Gangguan'
-      ? queries.pencarian.pencarianGangguan
-      : queries.pencarian.pencarianKeluhan,
-    {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -324,23 +320,31 @@ const filterData = (params: any) => {
     alamatPelapor: searchBy == 'Alamat' ? keyword : '',
     pembuatLaporan: searchBy == 'Pembuat' ? keyword : ''
   }
+
+  loadingData.value = true
+  await requestGraphQl(
+    filters.value.type == 'Gangguan'
+      ? queries.pencarian.pencarianGangguan
+      : queries.pencarian.pencarianKeluhan,
+    query
   )
-
+    .then((result) => {
-  onResult((queryResult) => {
+      if (result.data.data != undefined) {
-    if (queryResult.data != undefined) {
+        data.value = result.data.data.agingComplaintKumulatif
         if (type == 'Gangguan') {
-        data.value = queryResult.data.pencarianDataReportNumberGangguan
+          data.value = result.data.data.pencarianDataReportNumberGangguan
         } else {
-        data.value = queryResult.data.pencarianDataReportNumberKeluhan
+          data.value = result.data.data.pencarianDataReportNumberKeluhan
         }
+      } else {
+        data.value = []
       }
     })
-  onError((error) => {
+    .catch((err) => {
-    console.log(error)
+      console.error(err)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingData.value = false
-    loadingData.value = value
     })
 }
 

src/utils/api/api.graphql.ts

@@ -3035,5 +3035,92 @@ export const queries = {
         }
       }
     `
+  },
+  material: {
+    daftar: {
+      daftarGangguanDanMaterialDipakai: gql`
+        query DaftardaftarGangguanDanMaterialDipakai(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: String
+          $idUid: Int
+          $idUp3: Int
+        ) {
+          daftarGangguanDanMaterialDipakai(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            distribusi: $idUid
+            area: $idUp3
+            posko: $posko
+          ) {
+            isi_laporan
+            nama_material
+            nama_pelanggan
+            nomor_gangguan
+            penyebab_gangguan
+            regu
+            satuan
+            sumber
+            volume
+            waktu_padam
+          }
+        }
+      `
+    },
+    rekap: {
+      rekapitulasiPemakaianMaterial: gql`
+        query DaftarrekapitulasiPemakaianMaterial(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: String
+          $idUid: Int
+          $idUp3: Int
+        ) {
+          rekapitulasiPemakaianMaterial(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            distribusi: $idUid
+            area: $idUp3
+            posko: $posko
+          ) {
+            kode_material
+            nama_material
+            satuan
+            sumber_material
+            tgl1
+            tgl10
+            tgl11
+            tgl12
+            tgl13
+            tgl14
+            tgl15
+            tgl16
+            tgl17
+            tgl18
+            tgl19
+            tgl2
+            tgl20
+            tgl21
+            tgl22
+            tgl23
+            tgl24
+            tgl25
+            tgl26
+            tgl27
+            tgl28
+            tgl29
+            tgl3
+            tgl30
+            tgl31
+            tgl4
+            tgl5
+            tgl6
+            tgl7
+            tgl8
+            tgl9
+          }
+        }
+      `
+    }
   }
 }