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`
-  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 filterData = async (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,23 +174,23 @@ 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
-          }
-        ]
-      })
-    }
-    console.log(queryResult.data)
-  })
-  onError((error) => {
-    console.log(error)
-  })
+  }
+
+  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 = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loading.value = false
+    })
 }
 const filters = ref()
 </script>