Refactor code to update version numbers and fix bugs in Gangguan and Monalisa components

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue

@@ -12,6 +12,7 @@
   <div id="data">
     <DxDataGrid
       ref="dataGridRef"
+      @cell-click="onCellClicked"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -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" />
@@ -1013,6 +1014,7 @@ import {
   exportToDOCX,
   exportDetailToDOCX
 } from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan'
+import { getDataRowGroup } from '@/utils/helper'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -1035,9 +1037,13 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const isDialogEnabled = ref(false)
 const dataType = ref('')
 const dataYear = ref(new Date().getFullYear())
 const dataMonth = ref(new Date().getMonth())
+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' },
@@ -1068,6 +1074,38 @@ const grouping = ref<any[]>([
   }
 ])
 
+const onCellClicked = (e: any) => {
+  if (e.rowType == 'group') {
+    groupDialog.value = true
+    groupIndex.value = e.row.groupIndex
+
+    setDialogStatus(e.column.caption)
+    groupData.value = getDataRowGroup(e.data)
+    showDetail()
+  } else {
+    groupDialog.value = false
+  }
+}
+
+const setDialogStatus = (column: string) => {
+  if (column == `${getMonthName(lastMonth.value)} ${lastYearMoM.value}`) {
+    isDialogEnabled.value = true
+    setRequirements('mom', lastMonth.value, lastYearMoM.value)
+  } else if (column == `${getMonthName(currentMonth.value)} ${currentYear.value}`) {
+    isDialogEnabled.value = true
+    setRequirements('mom', currentMonth.value, currentYear.value)
+  } else if (column == `s.d ${getMonthName(currentMonth.value)} ${lastYear.value}`) {
+    isDialogEnabled.value = true
+    setRequirements('yoy', currentMonth.value, lastYear.value)
+  } else if (column == `s.d ${getMonthName(currentMonth.value)} ${currentYear.value}`) {
+    isDialogEnabled.value = true
+    setRequirements('yoy', currentMonth.value, currentYear.value)
+  } else {
+    isDialogEnabled.value = false
+    setRequirements('', 0, 0)
+  }
+}
+
 let mom_bulan_kemarin = 0
 let count_mom_bulan_kemarin = 0
 let cal_mom_bulan_kemarin = 0
@@ -1217,6 +1255,12 @@ const setRequirements = (type: string, month: number, year: number) => {
   dataType.value = type
   dataYear.value = year
   dataMonth.value = month
+
+  if (dataType.value == 'yoy' || dataType.value == 'mom') {
+    isDialogEnabled.value = true
+  } else {
+    isDialogEnabled.value = false
+  }
 }
 
 const onExporting = (e: any) => {
@@ -1336,12 +1380,44 @@ const filterData = async (params: any) => {
 const getDetail = async () => {
   const selected = dataSelected.value
 
-  const query = {
+  var query = {
     bulan: dataMonth.value,
     tahun: dataYear.value,
-    idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
-    idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+    idUlp: 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 = {
+      bulan: dataMonth.value,
+      tahun: dataYear.value,
+      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: selected?.nama_regional ? selected?.nama_regional : ''
+    }
   }
 
   loadingSubData.value = true
@@ -1380,7 +1456,9 @@ const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
   if (dataType.value == 'yoy' || dataType.value == 'mom') {
-    getDetail()
+    if (isDialogEnabled.value) {
+      getDetail()
+    }
   }
 }
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {