Add cell-click event handler and related variables

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

@@ -11,6 +11,7 @@
 
   <div id="data">
     <DxDataGrid
+      @cell-click="onCellClicked"
       ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
@@ -1101,6 +1102,9 @@ const loadingData = ref(false)
 const loadingSubData = ref(false)
 const agreeToShowDialog = ref(false)
 const progressSelected = ref(0)
+const groupIndex = ref(0)
+const groupDialog = ref(false)
+const groupData = ref<any>(null)
 const reportMeta = ref({
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
   up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
@@ -1108,9 +1112,36 @@ const reportMeta = ref({
   periode: ''
 })
 
-const setAgreementDialog = (column: string) => {
+const onCellClicked = (e: any) => {
-  console.log('column', column)
+  //   console.log('cell clicked', e)
+  //   console.log('group cell clicked', e.column.caption)
+  //   console.log('value', e.values[e.row.groupIndex])
+  if (e.rowType == 'group') {
+    groupDialog.value = true
+    groupIndex.value = e.row.groupIndex
+    setAgreementDialog(e.column.caption)
+    if (e.row.groupIndex == 0) {
+      //
+    } else if (e.row.groupIndex == 1) {
+      const data = e.data.collapsedItems[0].items[0].items[0]
+      groupData.value = data
+      console.table(data)
+    } else if (e.row.groupIndex == 2) {
+      const data = e.data.collapsedItems[0].items[0]
+      groupData.value = data
+      console.table(data)
+    } else if (e.row.groupIndex == 3) {
+      const data = e.data.collapsedItems[0]
+      groupData.value = data
+      console.table(data)
+    }
+    showDetail()
+  } else {
+    groupDialog.value = false
+  }
+}
 
+const setAgreementDialog = (column: string) => {
   if (column == 'Total' || column == 'Selesai' || column == 'In Progress') {
     agreeToShowDialog.value = true
     if (column == 'Total') {
@@ -1151,13 +1182,12 @@ const resetData = () => {
   dataSubSelected.value = null
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   resetData()
-  loadingData.value = true
   const { posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
 
-  const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.gangguanAll, {
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -1167,22 +1197,19 @@ const filterData = (params: any) => {
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
-  })
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiAllGangguan
   }
 
+  loadingData.value = true
+  await requestGraphQl(queries.gangguan.rekap.gangguanAll, query)
+    .then((result) => {
+      dataSub.value = result.data.data.rekapitulasiAllGangguan
       reportMeta.value = filters.value
     })
-
+    .catch((err) => {
-  onError((error) => {
+      console.error(err)
-    console.log(error)
     })
-
+    .finally(() => {
-  watch(loading, (value) => {
+      loadingData.value = false
-    loadingData.value = value
     })
 }
 
@@ -1191,7 +1218,50 @@ const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
-  const query = {
+  var 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: 0,
+    idUid: 0,
+    idUp3: 0,
+    idRegu: 0,
+    idUlp: 0,
+    namaRegional: '',
+    media: '',
+    isSelesai: progressSelected.value,
+    tanggal: ''
+  }
+  if (groupDialog.value) {
+    if (groupIndex.value == 0) {
+      query = {
+        ...query,
+        isSelesai: progressSelected.value
+      }
+    } else if (groupIndex.value == 1) {
+      query = {
+        ...query,
+        namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+      }
+    } else if (groupIndex.value == 2) {
+      query = {
+        ...query,
+        idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
+        namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+      }
+    } else if (groupIndex.value == 3) {
+      query = {
+        ...query,
+        idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
+        idUp3: groupData.value?.id_up3 ? groupData.value?.id_up3 : 0,
+        namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+      }
+    }
+  } else {
+    query = {
       dateFrom: dateValue[0]
         ? dateValue[0].split('-').reverse().join('-')
         : new Date().toISOString().slice(0, 10),
@@ -1208,39 +1278,19 @@ const getDetail = async () => {
       isSelesai: progressSelected.value,
       tanggal: ''
     }
+  }
+  console.table(query)
 
-  await requestGraphQl(queries.gangguan.rekap.gangguanAllDetail.loc?.source.body!, query)
+  await requestGraphQl(queries.gangguan.rekap.gangguanAllDetail, query)
     .then((result) => {
       dataSub.value = result.data.data.detailGangguan
     })
     .catch((err) => {
-      console.log(err)
+      console.error(err)
     })
     .finally(() => {
       loadingSubData.value = false
     })
-
-  // const { onResult, onError, refetch, loading } = useQuery(
-  //   queries.gangguan.rekap.gangguanAllDetail,
-  //   query,
-  //   {
-  //     fetchPolicy: 'network-only'
-  //   }
-  // )
-
-  // onResult((queryResult) => {
-  //   if (queryResult.data != undefined) {
-  //     dataSub.value = queryResult.data.detailGangguan
-  //   }
-  // })
-
-  // onError((error) => {
-  //   console.log(error)
-  // })
-
-  // watch(loading, (value) => {
-  //   loadingSubData.value = value
-  // })
 }
 const dataGridRef = ref<DxDataGrid | null>(null)
 const clearSelection = () => {

src/utils/api/api.graphql.ts

@@ -1,5 +1,11 @@
 //deploy vm
-import { ApolloClient, createHttpLink, gql, InMemoryCache } from '@apollo/client/core'
+import {
+  ApolloClient,
+  createHttpLink,
+  gql,
+  InMemoryCache,
+  type DocumentNode
+} from '@apollo/client/core'
 import axios from 'axios'
 const controller = new AbortController()
 const url = import.meta.env.VITE_APP_GRAPHQL_ENDPOINT
@@ -13,9 +19,11 @@ const instance = axios.create({
   signal: controller.signal
 })
 
-export const requestGraphQl = async (query: string, data: any) => {
+export const getQueryString = (query: DocumentNode) => query.loc?.source.body!
+
+export const requestGraphQl = async (query: DocumentNode, data: any) => {
   return await instance.post('', {
-    query: query,
+    query: getQueryString(query),
     variables: data
   })
 }