Add GraphQL queries for material-related data

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,40 +283,39 @@ 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(
-    queries.monalisa.gangguan.rekap.dispatchingTimeGangguan,
-    {
-      namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0,
-      idUlp: ulp ? ulp.id : 0,
-      bulan: bulan ? bulan.id : currentMonth.value,
-      tahun: bulan ? tahun.id : currentYear.value
-    }
-  )
+  const query = {
+    namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    idUlp: ulp ? ulp.id : 0,
+    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,24 +331,21 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)

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,31 +244,30 @@ const filterData = (params: any) => {
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.monalisa.gangguan.rekap.rekapitulasiEnsGangguan,
-    {
-      namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
-      idUlp: ulp ? ulp.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0,
-      bulan: bulan ? bulan.id : 10,
-      tahun: bulan ? tahun.id : 2023
-    }
-  )
+  const query = {
+    namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.monalisaRekapitulasiEnsGangguan
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.monalisa.gangguan.rekap.rekapitulasiEnsGangguan, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaRekapitulasiEnsGangguan
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 const onExporting = (e: any) => {
@@ -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,24 +315,21 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)

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,37 +483,36 @@ 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(
-    queries.monalisa.gangguan.rekap.gangguanBelumSelesai,
-    {
-      regional: regional.name == 'Semua Regional' ? null : regional.id,
-      idUlp: ulp ? ulp.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0,
-      bulan: bulan ? bulan.id : 10,
-      tahun: bulan ? tahun.id : 2023
-    }
-  )
+  const query = {
+    regional: regional.name == 'Semua Regional' ? null : regional.id,
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.monalisaGangguanBelumSelesai
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.monalisa.gangguan.rekap.gangguanBelumSelesai, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaGangguanBelumSelesai
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 const onExporting = (e: any) => {
@@ -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,24 +560,21 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)

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,34 +188,32 @@ 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 = {
+    namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  }
 
-  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,
-      idUp3: up3 ? up3.id : 0,
-      bulan: bulan ? bulan.id : 10,
-      tahun: bulan ? tahun.id : 2023
-    }
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.monalisaGangguanPerJenisGangguan
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.monalisa.gangguan.rekap.gangguanPerJenisGangguan, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaGangguanPerJenisGangguan
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 const onExporting = (e: any) => {
@@ -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,24 +260,21 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)

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,36 +407,34 @@ 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(
-    queries.monalisa.gangguan.rekap.jumlahDurasiRptRctGangguan,
-    {
-      namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
-      idUlp: ulp ? ulp.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0,
-      bulan: bulan ? bulan.id : 10,
-      tahun: bulan ? tahun.id : 2023
-    }
-  )
+  const query = {
+    namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    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,24 +481,21 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)

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,33 +364,33 @@ const filterData = (params: any) => {
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.monalisa.gangguan.rekap.jumlahKaliGangguan,
-    {
-      namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0,
-      idUlp: ulp ? ulp.id : 0,
-      bulan: bulan ? bulan.id : currentMonth.value,
-      tahun: bulan ? tahun.id : currentYear.value
-    }
-  )
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.monalisaJumlahKaliGangguan
-    }
-  })
+  const query = {
+    namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    idUlp: ulp ? ulp.id : 0,
+    bulan: bulan ? bulan.id : currentMonth.value,
+    tahun: bulan ? tahun.id : currentYear.value
+  }
 
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.monalisa.gangguan.rekap.jumlahKaliGangguan, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaJumlahKaliGangguan
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -406,24 +406,21 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)

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,31 +311,30 @@ const filterData = (params: any) => {
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.monalisa.gangguan.rekap.laporUlangGangguan,
-    {
-      namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
-      idUlp: ulp ? ulp.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0,
-      bulan: bulan ? bulan.id : 10,
-      tahun: bulan ? tahun.id : 2023
-    }
-  )
+  const query = {
+    namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.monalisaRekapitulasiLaporUlangGangguan
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.monalisa.gangguan.rekap.laporUlangGangguan, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaRekapitulasiLaporUlangGangguan
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
@@ -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,24 +380,21 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)

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,31 +262,30 @@ const filterData = (params: any) => {
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.monalisa.gangguan.rekap.recoveryTimeGangguan,
-    {
-      namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0,
-      idUlp: ulp ? ulp.id : 0,
-      bulan: bulan ? bulan.id : currentMonth.value,
-      tahun: bulan ? tahun.id : currentYear.value
-    }
-  )
+  const query = {
+    namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    idUlp: ulp ? ulp.id : 0,
+    bulan: bulan ? bulan.id : currentMonth.value,
+    tahun: bulan ? tahun.id : currentYear.value
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.monalisaRecoveryTimeGangguan
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.monalisa.gangguan.rekap.recoveryTimeGangguan, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaRecoveryTimeGangguan
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 const onExporting = (e: any) => {
@@ -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,24 +332,21 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)

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,31 +262,30 @@ const filterData = (params: any) => {
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.monalisa.gangguan.rekap.responseTimeGangguan,
-    {
-      namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0,
-      idUlp: ulp ? ulp.id : 0,
-      bulan: bulan ? bulan.id : currentMonth.value,
-      tahun: bulan ? tahun.id : currentYear.value
-    }
-  )
+  const query = {
+    namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    idUlp: ulp ? ulp.id : 0,
+    bulan: bulan ? bulan.id : currentMonth.value,
+    tahun: bulan ? tahun.id : currentYear.value
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.monalisaResponseTimeGangguan
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.monalisa.gangguan.rekap.responseTimeGangguan, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaResponseTimeGangguan
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 const onExporting = (e: any) => {
@@ -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,24 +332,21 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)