Refactor RGangguan_ALL.vue and RGangguan_KTI.vue components, and add getDataRowGroup function

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

@@ -69,7 +69,6 @@
         css-class="custom-table-column"
         cell-template="formatText"
         :group-index="0"
-        v-if="filters?.uid ? filters?.uid.id == 0 : 0"
       />
       <DxColumn
         :width="150"
@@ -78,7 +77,7 @@
         caption="Regional"
         css-class="custom-table-column"
         cell-template="formatText"
-        :group-index="filters?.uid.id != 0 ? 0 : 1"
+        :group-index="1"
       />
       <DxColumn
         :width="150"
@@ -87,7 +86,7 @@
         caption="UID"
         css-class="custom-table-column"
         cell-template="formatText"
-        :group-index="filters?.uid.id != 0 ? 0 : 2"
+        :group-index="2"
       />
       <DxColumn
         :width="150"
@@ -96,7 +95,7 @@
         caption="UP3"
         css-class="custom-table-column"
         cell-template="formatText"
-        :group-index="filters?.uid.id != 0 ? 0 : 3"
+        :group-index="3"
       />
       <!-- <DxColumn
         :width="150"
@@ -1082,6 +1081,7 @@ import {
   exportDetailToPDF,
   exportDetailToXLSX
 } from '@/report/Gangguan/Rekap/RGangguan_ALL'
+import { getDataRowGroup } from '@/utils/data'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -1109,59 +1109,44 @@ const reportMeta = ref({
   periode: ''
 })
 
-const getDataRowGroup = (data: any): any => {
-  if (data.items) {
-    if (Array.isArray(data.items)) {
-      return getDataRowGroup(data.items)
-    } else {
-      if (data.items.collapsedItems) {
-      }
-    }
-  } else if (data.collapsedItems) {
-    return {}
-  } else {
-    return {}
-  }
-}
-
 const onCellClicked = (e: any) => {
-  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)
     const data = getDataRowGroup(e.data)
-    console.log('data', data)
+    console.table(data)
-    if (e.row.groupIndex == 0) {
+    groupData.value = data
-      //
-    } else if (e.row.groupIndex == 1) {
-      if (e.row.isExpanded) {
-        const data = e.data.items[0].collapsedItems[0].items[0]
-        groupData.value = data
-      } else {
-        const data = e.data.collapsedItems[0].items[0].items[0]
-        groupData.value = data
-      }
-    } else if (e.row.groupIndex == 2) {
-      if (e.row.isExpanded) {
-        const data = e.data.items[0].collapsedItems[0]
-        groupData.value = data
-      } else {
-        const data = e.data.collapsedItems[0].items[0]
-        groupData.value = data
-      }
-    } else if (e.row.groupIndex == 3) {
-      if (e.row.isExpanded) {
-        const data = e.data.items[0]
-        groupData.value = data
-      } else {
-        const data = e.data.collapsedItems[0]
-        groupData.value = data
-      }
-    }
     showDetail()
+    // if (e.row.groupIndex == 0) {
+    //   //
+    // } else if (e.row.groupIndex == 1) {
+    //   if (e.row.isExpanded) {
+    //     const data = e.data.items[0].collapsedItems[0].items[0]
+    //     groupData.value = data
+    //   } else {
+    //     const data = e.data.collapsedItems[0].items[0].items[0]
+    //     groupData.value = data
+    //   }
+    // } else if (e.row.groupIndex == 2) {
+    //   if (e.row.isExpanded) {
+    //     const data = e.data.items[0].collapsedItems[0]
+    //     groupData.value = data
+    //   } else {
+    //     const data = e.data.collapsedItems[0].items[0]
+    //     groupData.value = data
+    //   }
+    // } else if (e.row.groupIndex == 3) {
+    //   if (e.row.isExpanded) {
+    //     const data = e.data.items[0]
+    //     groupData.value = data
+    //   } else {
+    //     const data = e.data.collapsedItems[0]
+    //     groupData.value = data
+    //   }
+    // }
+    // showDetail()
   } else {
     groupDialog.value = false
   }
@@ -1267,12 +1252,28 @@ const getDetail = async () => {
     tanggal: ''
   }
   if (groupDialog.value) {
-    if (groupIndex.value == 0) {
+    // if (groupColumnCaption.value != 'Semua Unit') {
-      query = {
+    //   if (groupColumnCaption.value == 'Regional') {
-        ...query,
+    //     query = {
-        isSelesai: progressSelected.value
+    //       ...query,
-      }
+    //       namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
-    } else if (groupIndex.value == 1) {
+    //     }
+    //   } else if (groupColumnCaption.value == 'UID') {
+    //     query = {
+    //       ...query,
+    //       idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
+    //       namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+    //     }
+    //   } else if (groupColumnCaption.value == 'UP3') {
+    //     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 : ''
+    //     }
+    //   }
+    // }
+    if (groupIndex.value == 1) {
       query = {
         ...query,
         namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''

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

@@ -1134,7 +1134,7 @@ import {
   exportDetailToXLSX
 } from '@/report/Gangguan/Rekap/RGangguan_KTI'
 import { getMonthNumber } from '@/utils/texts'
-
+import { getDataRowGroup } from '@/utils/data'
 const client = apolloClient()
 provideApolloClient(client)
 const position = { of: '#data' }
@@ -1155,43 +1155,16 @@ const reportMeta = ref({
   posko: { id: 0, name: 'Semua Posko' },
   periode: ''
 })
-const groupIndex = ref(0)
 const groupDialog = ref(false)
 const groupData = ref<any>(null)
 
 const onCellClicked = (e: any) => {
-  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
+    if (e.row.groupIndex != 0) {
-    if (e.row.groupIndex == 0) {
+      const data = getDataRowGroup(e.data)
-      //
+      console.table(data)
-    } else if (e.row.groupIndex == 1) {
+      groupData.value = data
-      if (e.row.isExpanded) {
-        const data = e.data.items[0].collapsedItems[0].items[0]
-        groupData.value = data
-      } else {
-        const data = e.data.collapsedItems[0].items[0].items[0]
-        groupData.value = data
-      }
-    } else if (e.row.groupIndex == 2) {
-      if (e.row.isExpanded) {
-        const data = e.data.items[0].collapsedItems[0]
-        groupData.value = data
-      } else {
-        const data = e.data.collapsedItems[0].items[0]
-        groupData.value = data
-      }
-    } else if (e.row.groupIndex == 3) {
-      if (e.row.isExpanded) {
-        const data = e.data.items[0]
-        groupData.value = data
-      } else {
-        const data = e.data.collapsedItems[0]
-        groupData.value = data
-      }
     }
     showDetail()
   } else {

src/utils/api/api.graphql.ts

@@ -678,6 +678,11 @@ export const queries = {
             persen_selesai
             total_inproses
             persen_inproses
+            avg_durasi_dispatch
+            min_durasi_dispatch
+            max_durasi_dispatch
+            total_dibawah_sla_dispatch
+            total_diatas_sla_dispatch
             total_durasi_response
             avg_durasi_response
             min_durasi_response