Add watch import and provide Apollo client***

***Update query parameters in filterData function

src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue

@@ -964,7 +964,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
@@ -993,7 +993,11 @@ import { queries } 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'
+import { apolloClient } from '@/utils/api/api.graphql'
+import { provideApolloClient } from '@vue/apollo-composable'
 
+const client = apolloClient()
+provideApolloClient(client)
 const currentYear = ref(new Date().getFullYear())
 const currentMonth = ref(new Date().getMonth())
 const lastYear = ref(currentYear.value - 1)
@@ -1041,32 +1045,39 @@ const onExporting = (e: any) => {
 }
 
 const getDetail = () => {
-  // loadingSubData.value = true
-
   const dateValue = filters.value.periode.split(' s/d ')
-  const ref = dataSelected.value
-  const query = {}
+  const selected = dataSelected.value
 
-  // const { onResult, onError, loading, refetch } = useQuery(
-  //   queries.gangguan.rekap.gangguanAllDetail,
-  //   query
-  // )
+  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: selected?.id_ulp ? selected?.id_ulp : 0,
+    idUid: selected?.id_uid ? selected?.id_uid : 0,
+    idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+  }
 
-  // refetch(query)
+  const { onResult, onError, loading } = useQuery(
+    queries.keluhan.rekap.rekapKeluhanAllDetail,
+    query
+  )
 
-  // onResult((queryResult) => {
-  //   if (queryResult.data != undefined) {
-  // dataSub.value = queryResult.data.detailGangguan
-  //   }
-  // })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      dataSub.value = queryResult.data.detailKeluhanAll
+    }
+  })
 
-  // onError((error) => {
-  //   console.log(error)
-  // })
+  onError((error) => {
+    console.log(error)
+  })
 
-  // watch(loading, (value) => {
-  //   loadingSubData.value = value
-  // })
+  watch(loading, (value) => {
+    loadingSubData.value = value
+  })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -1076,7 +1087,6 @@ const clearSelection = () => {
 }
 const showDetail = () => {
   clearSelection()
-  dataSub.value = []
   dataSubSelected.value = null
   dialogDetail.value = true
   getDetail()
@@ -1085,27 +1095,15 @@ const showDetail = () => {
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
-  }
     showDetail()
   }
+}
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
   dataSubSelected.value = data
 }
 
-const { onResult, onError, loading, refetch } = useQuery(
-  queries.monalisa.laporan.bulanan.penurunanJumlahKomplainBulanan,
-  {
-    // regional: 0,
-    idUp3: 0,
-    idUid: 0,
-    idUlp: 0,
-    bulan: currentMonth.value,
-    tahun: currentYear.value
-  }
-)
-
 const filterData = (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
 
@@ -1113,25 +1111,31 @@ const filterData = (params: any) => {
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  refetch({
-    // regional: regional,
+  const { onResult, onError, loading, refetch } = useQuery(
+    queries.monalisa.laporan.bulanan.penurunanJumlahKomplainBulanan,
+    {
+      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.penurunanJumlahKomplainBulanan
     }
-    console.log(queryResult.data)
   })
 
   onError((error) => {
     console.log(error)
   })
+
+  watch(loading, (value) => {
+    loadingData.value = value
+  })
 }
 
 onMounted(() => {

src/utils/api/api.graphql.ts

@@ -2383,7 +2383,7 @@ export const queries = {
       bulanan: {
         penurunanJumlahKomplainBulanan: gql`
           query penurunanJumlahKomplainBulanan(
-            #$regional: String
+            $namaRegional: String
             $idUid: Int
             $idUp3: Int
             $idUlp: Int
@@ -2391,13 +2391,14 @@ export const queries = {
             $tahun: Int
           ) {
             penurunanJumlahKomplainBulanan(
-              #regional: $regional
+              namaRegional: $namaRegional
               idUid: $idUid
               idUp3: $idUp3
               idUlp: $idUlp
               bulan: $bulan
               tahun: $tahun
             ) {
+              id
               nama_regional
               id_uid
               nama_uid