Refactor showData to showDetail and add loadingData

src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue

@@ -26,8 +26,7 @@
         :show-indicator="showIndicator"
         :show-pane="showPane"
         :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
+        v-model:visible="loadingData"
         :enabled="true"
       />
 
@@ -272,19 +271,19 @@
       </DxSummary>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showData()">
+        <p class="text-left cursor-pointer" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatPercentage="{ data }">
-        <p class="text-right cursor-pointer" @click="showData()">
+        <p class="text-right cursor-pointer" @click="showDetail()">
           {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showData()">
+        <p class="text-right cursor-pointer" @click="showDetail()">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -304,7 +303,7 @@
   </div>
 
   <DetailDialog
-    :open="showDetail"
+    :open="dialogDetail"
     title="Detail Rekapitulasi Koreksi Transaksi Individual"
     @on-close="closeDetail"
     :full-width="true"
@@ -962,7 +961,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type18 from '@/components/Form/FiltersType/Type18.vue'
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -989,7 +988,11 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 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 position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -998,15 +1001,62 @@ const data = ref<any[]>([])
 const dataSub = ref<any[]>([])
 const dataSelected = ref()
 const dataSubSelected = ref()
-const showDetail = ref(false)
+const dialogDetail = ref(false)
+const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const showData = () => {
-  showDetail.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 ? ref?.id_posko : 0,
+    idUid: ref?.id_uid ? ref?.id_uid : 0,
+    idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
+    idRegu: ref?.id_regu ? ref?.id_regu : 0,
+    idUlp: ref?.id_ulp ? ref?.id_ulp : 0,
+    namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
+    media: ref?.media ? ref?.media : ''
+  }
+
+  const { onResult, onError, loading, refetch } = useQuery(
+    queries.gangguan.rekap.gangguanAllDetail,
+    query
+  )
+
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      dataSub.value = queryResult.data.detailGangguan
+    }
+  })
+
+  onError((error) => {
+    console.log(error)
+  })
+
+  watch(loading, (value) => {
+    loadingSubData.value = value
+  })
+}
+
+const showDetail = () => {
+  if (dataSelected.value != null) {
+    dataSub.value = []
+    dataSubSelected.value = null
+    dialogDetail.value = true
+    getDetail()
+  }
 }
 
 const closeDetail = () => {
-  showDetail.value = false
+  dialogDetail.value = false
 }
 
 const onExporting = (e: any) => {
@@ -1040,38 +1090,31 @@ const onExporting = (e: any) => {
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   dataSelected.value = selectedRowsData[0]
-  console.log(data)
+  showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = selectedRowsData[0]
-  console.log(dataSubSelected)
 }
 
-const { onResult, onError, loading, refetch } = useQuery(
-  queries.gangguan.rekap.gangguanKoreksiTransaksiIndividual,
-  {
-    dateFrom: new Date().toISOString().slice(0, 10),
-    dateTo: new Date().toISOString().slice(0, 10),
-    posko: 0,
-    idUid: 0,
-    idUp3: 0
-  }
-)
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
-  refetch({
-    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: posko ? posko.id : 0,
-    idUid: uid ? uid.id : 0,
-    idUp3: up3 ? up3.id : 0
-  })
+
+  const { onResult, onError, loading, refetch } = useQuery(
+    queries.gangguan.rekap.gangguanKoreksiTransaksiIndividual,
+    {
+      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),
+      idPosko: posko ? posko.id : 0,
+      idUid: uid ? uid.id : 0,
+      idUp3: up3 ? up3.id : 0
+    }
+  )
 
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
@@ -1081,10 +1124,16 @@ const filterData = (params: any) => {
     console.log(queryResult.loading)
     console.log(queryResult.networkStatus)
   })
+
   onError((error) => {
     console.log(error)
   })
+
+  watch(loading, (value) => {
+    loadingData.value = value
+  })
 }
+
 const filters = ref()
 onMounted(() => {
   if (import.meta.env.DEV) {