Refactor useQuery in Anomali_LAPPGP.vue and Anomali_LAPPGU.vue

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

@@ -22,15 +22,20 @@ 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: {
-const filterData = (params: any) => {
+    id: 1,
-  const { ulp, uid, up3, jenisLaporan } = params
+    name: 'Laporan Berulang Unit'
+  },
+  ulp: 0,
+  uid: 0,
+  up3: 0
+})
 
 const { onResult, onError, loading, refetch } = useQuery(
-    jenisLaporan.name == 'Laporan Berulang Unit'
+  filters.value.jenisLaporan.name == 'Laporan Berulang Unit'
     ? queries.anomali.gangguan.petugasBerulang
-      : jenisLaporan.name == 'Laporan Rating Negatif'
+    : filters.value.jenisLaporan.name == 'Laporan Rating Negatif'
       ? queries.anomali.gangguan.petugasRatingNegatif
       : queries.anomali.gangguan.petugasSkipStep,
   {
@@ -43,6 +48,9 @@ const filterData = (params: any) => {
   }
 )
 
+const filterData = (params: any) => {
+  const { ulp, uid, up3, jenisLaporan } = params
+
   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,15 +22,20 @@ 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: {
-const filterData = (params: any) => {
+    id: 1,
-  const { ulp, uid, up3, jenisLaporan } = params
+    name: 'Laporan Berulang Unit'
+  },
+  ulp: 0,
+  uid: 0,
+  up3: 0
+})
 
 const { onResult, onError, loading, refetch } = useQuery(
-    jenisLaporan.name == 'Laporan Berulang Unit'
+  filters.value.jenisLaporan.name == 'Laporan Berulang Unit'
     ? queries.anomali.gangguan.unitBerulang
-      : jenisLaporan.name == 'Laporan Rating Negatif'
+    : filters.value.jenisLaporan.name == 'Laporan Rating Negatif'
       ? queries.anomali.gangguan.unitRatingNegatif
       : queries.anomali.gangguan.unitSkipStep,
   {
@@ -43,6 +48,9 @@ const filterData = (params: any) => {
   }
 )
 
+const filterData = (params: any) => {
+  const { ulp, uid, up3, jenisLaporan } = params
+
   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(() => {})