Refactor useQuery in Anomali_LAPPGP.vue and Anomali_LAPPGU.vue

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

@@ -22,27 +22,35 @@ import { Type4 } from '@/components/Form/FiltersType'
 import Filters from '@/components/Form/Filters.vue'
 import { queries } from '@/utils/api/api.graphql'
 const data = ref<any[]>([])
-const loading = ref(false)
+const filters = ref({
+  jenisLaporan: {
+    id: 1,
+    name: 'Laporan Berulang Unit'
+  },
+  ulp: 0,
+  uid: 0,
+  up3: 0
+})
+
+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: new Date().toISOString().slice(0, 10),
+    // dateTo: new Date().toISOString().slice(0, 10),
+    idUlp: 0,
+    idUid: 0,
+    idUp3: 0
+  }
+)
 
 const filterData = (params: any) => {
   const { ulp, uid, up3, jenisLaporan } = params
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    jenisLaporan.name == 'Laporan Berulang Unit'
-      ? queries.anomali.gangguan.petugasBerulang
-      : jenisLaporan.name == 'Laporan Rating Negatif'
-        ? queries.anomali.gangguan.petugasRatingNegatif
-        : queries.anomali.gangguan.petugasSkipStep,
-    {
-      namaRegional: '',
-      // dateFrom: new Date().toISOString().slice(0, 10),
-      // dateTo: new Date().toISOString().slice(0, 10),
-      idUlp: 0,
-      idUid: 0,
-      idUp3: 0
-    }
-  )
-
   const dateValue = params.periode.split(' s/d ')
   refetch({
     namaRegional: '',
@@ -79,8 +87,6 @@ const filterData = (params: any) => {
   })
 }
 
-const filters = ref()
-
 onMounted(() => {
   if (import.meta.env.DEV) {
     data.value = [

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

@@ -22,27 +22,35 @@ import { useQuery } from '@vue/apollo-composable'
 import { onMounted, ref, watch } from 'vue'
 import { queries } from '@/utils/api/api.graphql'
 const data = ref<any[]>([])
-const loading = ref(false)
+const filters = ref({
+  jenisLaporan: {
+    id: 1,
+    name: 'Laporan Berulang Unit'
+  },
+  ulp: 0,
+  uid: 0,
+  up3: 0
+})
+
+const { onResult, onError, loading, refetch } = useQuery(
+  filters.value.jenisLaporan.name == 'Laporan Berulang Unit'
+    ? queries.anomali.gangguan.unitBerulang
+    : filters.value.jenisLaporan.name == 'Laporan Rating Negatif'
+      ? queries.anomali.gangguan.unitRatingNegatif
+      : queries.anomali.gangguan.unitSkipStep,
+  {
+    namaRegional: '',
+    // dateFrom: new Date().toISOString().slice(0, 10),
+    // dateTo: new Date().toISOString().slice(0, 10),
+    idUlp: 0,
+    idUid: 0,
+    idUp3: 0
+  }
+)
 
 const filterData = (params: any) => {
   const { ulp, uid, up3, jenisLaporan } = params
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    jenisLaporan.name == 'Laporan Berulang Unit'
-      ? queries.anomali.gangguan.unitBerulang
-      : jenisLaporan.name == 'Laporan Rating Negatif'
-        ? queries.anomali.gangguan.unitRatingNegatif
-        : queries.anomali.gangguan.unitSkipStep,
-    {
-      namaRegional: '',
-      // dateFrom: new Date().toISOString().slice(0, 10),
-      // dateTo: new Date().toISOString().slice(0, 10),
-      idUlp: 0,
-      idUid: 0,
-      idUp3: 0
-    }
-  )
-
   const dateValue = params.periode.split(' s/d ')
   refetch({
     namaRegional: '',
@@ -79,8 +87,6 @@ const filterData = (params: any) => {
   })
 }
 
-const filters = ref()
-
 onMounted(() => {
   if (import.meta.env.DEV) {
     data.value = [

src/components/Pages/PencarianData/PencarianData.vue

@@ -231,7 +231,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
@@ -263,7 +263,6 @@ const filters = ref({
   searchBy: '',
   periode: ''
 })
-const loading = ref(false)
 
 const closeDetail = () => {
   showDetail.value = false
@@ -278,6 +277,21 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   console.log(selectedRowsData[0])
 }
 
+const { onResult, onError, loading, refetch } = useQuery(
+  filters.value.type == 'Gangguan'
+    ? queries.pencarian.pencarianGangguan
+    : queries.pencarian.pencarianKeluhan,
+  {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    noLaporan: '',
+    namaPelapor: '',
+    noTelpPelapor: '',
+    alamatPelapor: '',
+    pembuatLaporan: ''
+  }
+)
+
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { type, keyword, searchBy } = params
@@ -4930,19 +4944,6 @@ const filterData = (params: any) => {
     }
   }
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    type == 'Gangguan' ? queries.pencarian.pencarianGangguan : queries.pencarian.pencarianKeluhan,
-    {
-      dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-      dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-      noLaporan: searchBy == 'Nomor Laporan' ? keyword : '',
-      namaPelapor: searchBy == 'Nama Pelapor' ? keyword : '',
-      noTelpPelapor: searchBy == 'No Telepon' ? keyword : '',
-      alamatPelapor: searchBy == 'Alamat' ? keyword : '',
-      pembuatLaporan: searchBy == 'Pembuat' ? keyword : ''
-    }
-  )
-
   refetch({
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
@@ -4972,6 +4973,10 @@ const filterData = (params: any) => {
   onError((error) => {
     console.log(error)
   })
+
+  watch(loading, (value) => {
+    loading.value = value
+  })
 }
 
 onMounted(() => {})