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

src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.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"
@@ -27,7 +28,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
+      <DxGrouping expand-mode="" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -674,7 +675,7 @@
           @click="
             setParameterRequest({
               type: 'keluhan',
-              tahun: lastYear,
+              tahun: currentYear,
               bulan: currentMonth
             })
           "
@@ -695,7 +696,7 @@
           @click="
             setParameterRequest({
               type: 'gangguan',
-              tahun: lastYear,
+              tahun: currentYear,
               bulan: currentMonth
             })
           "
@@ -1172,6 +1173,7 @@ import {
   exportToDOCX
 } from '@/report/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
+import { getDataRowGroup } from '@/utils/helper'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -1192,6 +1194,9 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 const agreeToShowDialog = ref(false)
+const groupIndex = ref(0)
+const groupDialog = ref(false)
+const groupData = ref<any>(null)
 const reportMeta = ref({
   regional: { id: 0, name: 'Semua Regional' },
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
@@ -1224,6 +1229,49 @@ const parameterRequest = ref<any>({
   bulan: new Date().getMonth()
 })
 
+const onCellClicked = (e: any) => {
+  if (e.rowType == 'group') {
+    groupDialog.value = true
+    groupIndex.value = e.row.groupIndex
+    console.table(e.column.dataField)
+    if (e.column.dataField == 'total_gangguan_tahun_ini') {
+      setParameterRequest({
+        type: 'gangguan',
+        tahun: currentYear,
+        bulan: currentMonth
+      })
+    } else if (e.column.dataField == 'total_keluhan_tahun_ini') {
+      setParameterRequest({
+        type: 'keluhan',
+        tahun: currentYear,
+        bulan: currentMonth
+      })
+    } else if (e.column.dataField == 'total_gangguan_tahun_sebelumnya') {
+      setParameterRequest({
+        type: 'gangguan',
+        tahun: lastYear,
+        bulan: currentMonth
+      })
+    } else if (e.column.dataField == 'total_keluhan_tahun_sebelumnya') {
+      setParameterRequest({
+        type: 'keluhan',
+        tahun: lastYear,
+        bulan: currentMonth
+      })
+    } else {
+      setParameterRequest({
+        type: null,
+        tahun: lastYear,
+        bulan: currentMonth
+      })
+    }
+    groupData.value = getDataRowGroup(e.data)
+    showDetail()
+  } else {
+    groupDialog.value = false
+  }
+}
+
 const setParameterRequest = (data: any) => {
   parameterRequest.value = data
   const parameter = parameterRequest.value
@@ -1257,13 +1305,43 @@ const onExportingDetail = (e: any) => {
 const getDetail = async () => {
   const selected = dataSelected.value
 
-  const query = {
+  var query = {
     bulan: parameterRequest.value.bulan,
     tahun: parameterRequest.value.tahun,
-    namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
-    idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
-    idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+    namaRegional: '',
+    idUlp: 0,
+    idUid: 0,
+    idUp3: 0
+  }
+
+  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,
+      namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
+      idUlp: 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