Refactor code and fix loading issue

src/components/Pages/Cico/LaporanCICO.vue

@@ -27,8 +27,7 @@
         :show-indicator="showIndicator"
         :show-pane="showPane"
         :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
+        v-model:visible="loadingData"
         :enabled="true"
       />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
@@ -217,8 +216,7 @@
             :show-indicator="showIndicator"
             :show-pane="showPane"
             :shading="shading"
-            v-if="loading"
-            v-model:visible="loading"
+            v-model:visible="loadingSubData"
             :enabled="true"
           />
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
@@ -787,7 +785,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -815,6 +813,12 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
+import { apolloClient } from '@/utils/api/api.graphql'
+import { provideApolloClient } from '@vue/apollo-composable'
+
+const client = apolloClient()
+provideApolloClient(client)
+
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -824,8 +828,57 @@ const dataSubSelected = ref<any>()
 const data = ref<any[]>([])
 const dataSub = ref<any[]>([])
 const dialogDataSelected = ref(false)
+const loadingData = ref(false)
+const loadingSubData = ref(false)
+
 const closeDialogDataSelected = () => (dialogDataSelected.value = false)
-const showDialogDataSelected = () => (dialogDataSelected.value = true)
+
+const getDetail = () => {
+  loadingSubData.value = true
+  const dateValue = filters.value.periode.split(' s/d ')
+  const ref = dataSelected.value
+
+  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),
+    posko: ref.id_posko,
+    idUid: ref.id_uid,
+    idUp3: ref.id_up3
+  }
+
+  const { onResult, onError, loading, refetch } = useQuery(
+    queries.gangguan.rekap.gangguanAllDetail,
+    query
+  )
+
+  refetch(query)
+
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      dataSub.value = queryResult.data.detailGangguan
+    }
+  })
+
+  onError((error) => {
+    console.log(error)
+  })
+
+  watch(loading, (value) => {
+    loadingSubData.value = value
+  })
+}
+const showDialogDataSelected = () => {
+  if (dataSelected.value != null) {
+    dataSub.value = []
+    dataSubSelected.value = null
+    dialogDataSelected.value = true
+    getDetail()
+  }
+}
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
@@ -857,13 +910,12 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
-  dataSelected.value = data
-  console.log(data)
+  dataSelected.value = selectedRowsData[0]
+  showDialogDataSelected()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
+  dataSubSelected.value = selectedRowsData[0]
   dataSubSelected.value = data
   console.log(data)
 }
@@ -871,7 +923,8 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
 const filterData = (params: any) => {
   const { posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
-  refetch({
+
+  const { onResult, onError, loading, refetch } = useQuery(queries.cico.laporanCheckInCheckOut, {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -882,6 +935,7 @@ const filterData = (params: any) => {
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   })
+
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.laporanCheckInCheckOut
@@ -893,14 +947,10 @@ const filterData = (params: any) => {
   onError((error) => {
     console.log(error)
   })
+  watch(loading, (value) => {
+    loadingData.value = value
+  })
 }
-const { onResult, onError, loading, refetch } = useQuery(queries.cico.laporanCheckInCheckOut, {
-  dateFrom: new Date().toISOString().slice(0, 10),
-  dateTo: new Date().toISOString().slice(0, 10),
-  idPosko: 0,
-  idUid: 0,
-  idUp3: 0
-})
 
 const filters = ref()