Refactor RKeluhan_ALL.vue and RGangguan_CTTM.vue to improve code readability and remove unused variables

src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.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"
@@ -26,7 +27,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping :auto-expand-all="false" expand-mode="rowClick" />
+      <DxGrouping :auto-expand-all="false" expand-mode="" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -461,6 +462,7 @@ import {
   exportDetailToDOCX
 } from '@/report/Gangguan/Rekap/RGangguan_CTTM'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
+import { getDataRowGroup } from '@/utils/helper'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -478,6 +480,9 @@ const loadingData = ref(false)
 const loadingSubData = ref(false)
 const monthSelected = ref<any>(null)
 const agreeToShowDialog = ref(false)
+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' },
@@ -503,9 +508,22 @@ const grouping = ref<any[]>([
   }
 ])
 
+const onCellClicked = (e: any) => {
+  if (e.rowType == 'group') {
+    groupDialog.value = true
+    groupIndex.value = e.row.groupIndex
+
+    setMonth(e.column.caption)
+    groupData.value = getDataRowGroup(e.data)
+    showDetail()
+  } else {
+    groupDialog.value = false
+  }
+}
+
 const setMonth = (month: any) => {
   if (month != '') {
-    monthSelected.value = getMonthNumber(month)
+    monthSelected.value = getMonthNumber(month) == 0 ? null : getMonthNumber(month)
   } else {
     monthSelected.value = null
   }
@@ -606,12 +624,42 @@ const getDetail = async () => {
   const selected = dataSelected.value
   const compDate = dateValue[0].split('-').reverse().join('-').split('-')
 
-  const query = {
+  var query = {
     bulan: monthSelected.value,
     tahun: parseInt(compDate[0]),
-    posko: selected?.id_ulp ? selected?.id_ulp : 0,
-    idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+    posko: 0,
+    idUid: 0,
+    idUp3: 0,
+    namaRegional: ''
+  }
+
+  if (groupDialog.value) {
+    if (grouping.value[groupIndex.value].data == 'nama_regional') {
+      query = {
+        ...query,
+        namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+      }
+    } else if (grouping.value[groupIndex.value].data == 'nama_uid') {
+      query = {
+        ...query,
+        idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
+        namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+      }
+    } else if (grouping.value[groupIndex.value].data == 'nama_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 : ''
+      }
+    }
+  } else {
+    query = {
+      ...query,
+      posko: selected?.id_ulp ? selected?.id_ulp : 0,
+      idUid: selected?.id_uid ? selected?.id_uid : 0,
+      idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+    }
   }
 
   loadingSubData.value = true