Refactor Select.vue and Type4.vue components

src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue

@@ -20,7 +20,7 @@ import { Anomali_LAPPGP_LPT, Anomali_LAPPGP_LPP } from '../.'
 import { useQuery } from '@vue/apollo-composable'
 import { Type4 } from '@/components/Form/FiltersType'
 import Filters from '@/components/Form/Filters.vue'
-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'
 
@@ -44,50 +44,58 @@ const filters = ref({
   up3: 0
 })
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { ulp, uid, up3, jenisLaporan } = params
+  console.table('LAPPGP', jenisLaporan)
 
   const dateValue = params.periode.split(' s/d ')
+  const query = {
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    namaRegional: ''
+  }
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    filters.value.jenisLaporan.name == 'Laporan Berulang Unit'
-      ? queries.anomali.gangguan.petugasBerulang
-      : filters.value.jenisLaporan.name == 'Laporan Rating Negatif'
-        ? queries.anomali.gangguan.petugasRatingNegatif
-        : queries.anomali.gangguan.petugasSkipStep,
-    {
-      namaRegional: '',
-      // dateFrom: dateValue[0]
-      //   ? dateValue[0].split('-').reverse().join('-')
-      //   : new Date().toISOString().slice(0, 10),
-      // dateTo: dateValue[1]
-      //   ? dateValue[1].split('-').reverse().join('-')
-      //   : new Date().toISOString().slice(0, 10),
-      idUlp: ulp ? ulp.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0
-    }
+  loadingData.value = true
+  await requestGraphQl(
+    jenisLaporan.name == 'Laporan Berulang Unit'
+      ? queries.anomali.gangguan.unitBerulang
+      : jenisLaporan.name == 'Laporan Rating Negatif'
+        ? queries.anomali.gangguan.unitRatingNegatif
+        : queries.anomali.gangguan.unitSkipStep,
+    query
   )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      if (jenisLaporan.name == 'Laporan Berulang Unit') {
-        data.value = queryResult.data.anomaliPenangananPengaduanGangguanPetugasBerulang
-      } else if (jenisLaporan.name == 'Laporan Rating Negatif') {
-        data.value = queryResult.data.anomaliPenangananPengaduanGangguanPetugasRatingNegatif
+    .then((result) => {
+      if (result.data.data != undefined) {
+        if (jenisLaporan.name == 'Laporan Berulang Unit') {
+          data.value = result.data.data.anomaliPenangananPengaduanGangguanUnitBerulang
+        } else if (jenisLaporan.name == 'Laporan Rating Negatif') {
+          data.value = result.data.data.anomaliPenangananPengaduanGangguanUnitRatingNegatif
+        } else {
+          data.value = result.data.data.anomaliPenangananPengaduanGangguanUnitSkipStep
+        }
       } else {
-        data.value = queryResult.data.anomaliPenangananPengaduanGangguanPetugasSkipStep
+        data.value = []
       }
-    }
-    console.log(queryResult.data)
-  })
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 onMounted(() => {

src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue

@@ -52,26 +52,27 @@ const resetData = () => {
 const filterData = async (params: any) => {
   resetData()
   const { ulp, uid, up3, jenisLaporan } = params
+  console.table('LAPPGU', jenisLaporan)
 
   const dateValue = params.periode.split(' s/d ')
   const query = {
-    namaRegional: '',
-    // dateFrom: dateValue[0]
-    //   ? dateValue[0].split('-').reverse().join('-')
-    //   : new Date().toISOString().slice(0, 10),
-    // dateTo: dateValue[1]
-    //   ? dateValue[1].split('-').reverse().join('-')
-    //   : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
-    idUp3: up3 ? up3.id : 0
+    idUp3: up3 ? up3.id : 0,
+    namaRegional: ''
   }
 
   loadingData.value = true
   await requestGraphQl(
-    filters.value.jenisLaporan.name == 'Laporan Berulang Unit'
+    jenisLaporan.name == 'Laporan Berulang Unit'
       ? queries.anomali.gangguan.unitBerulang
-      : filters.value.jenisLaporan.name == 'Laporan Rating Negatif'
+      : jenisLaporan.name == 'Laporan Rating Negatif'
         ? queries.anomali.gangguan.unitRatingNegatif
         : queries.anomali.gangguan.unitSkipStep,
     query