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

src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.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"
@@ -66,7 +67,7 @@
           data-type="number"
           caption="Keluhan"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberKeluhan"
         />
         <DxColumn
           :width="150"
@@ -75,7 +76,7 @@
           data-type="number"
           caption="Informasi"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberInformasi"
         />
         <DxColumn
           :width="150"
@@ -150,7 +151,55 @@
       </DxSummary>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p
+          class="text-right"
+          @click="
+            setParameterRequest({
+              type: '',
+              value: data.text
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberKeluhan="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              type: 'Keluhan',
+              value: data.text
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberInformasi="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              type: 'Informasi',
+              value: data.text
+            })
+          "
+        >
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -162,16 +211,18 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="!text-left cursor-pointer">
+        <p
+          class="!text-left"
+          @click="
+            setParameterRequest({
+              type: '',
+              value: data.text
+            })
+          "
+        >
           {{ data.text }}
         </p>
       </template>
-
-      <template #formatPercentage="{ data }">
-        <p class="text-right cursor-pointer">
-          {{ parseFloat(data.text) ? formatPercentage(data.text) : '0%' }}
-        </p>
-      </template>
     </DxDataGrid>
   </div>
 
@@ -529,6 +580,7 @@ import {
   exportToDOCX,
   exportDetailToDOCX
 } from '@/report/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai'
+import { getDataRowGroup } from '@/utils/helper'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -548,6 +600,10 @@ const currentYear = ref(new Date().getFullYear())
 const currentMonth = ref(new Date().getMonth())
 const lastYear = ref(currentYear.value - 1)
 const filters = ref()
+const isDialogEnabled = 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' },
@@ -557,6 +613,10 @@ const reportMeta = ref({
   tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
   periode: ''
 })
+const parameterRequest = ref<any>({
+  type: '',
+  value: 0
+})
 
 const grouping = ref<any[]>([
   {
@@ -573,6 +633,46 @@ const grouping = ref<any[]>([
   }
 ])
 
+const setParameterRequest = (data: any) => {
+  parameterRequest.value = data
+  const parameter = parameterRequest.value
+  if (parameter.type == 'Keluhan' || parameter.type == 'Informasi') {
+    if (parameter.value != 0) {
+      isDialogEnabled.value = true
+    } else {
+      isDialogEnabled.value = false
+    }
+  } else {
+    isDialogEnabled.value = false
+  }
+}
+
+const onCellClicked = (e: any) => {
+  if (e.rowType == 'group') {
+    groupDialog.value = true
+    groupIndex.value = e.row.groupIndex
+
+    if (e.column.caption == 'Keluhan' || e.column.caption == 'Informasi') {
+      console.log(e.data)
+      console.log('columnIndex', e)
+      console.log('columnValue', e.data.aggregates[e.column.columnIndex])
+      if (e.data.aggregates[e.column.columnIndex] != 0) {
+        setParameterRequest({
+          type:
+            e.column.caption == 'Keluhan' || e.column.caption == 'Informasi'
+              ? e.column.caption
+              : '',
+          value: e.data.aggregates[e.column.columnIndex]
+        })
+        groupData.value = getDataRowGroup(e.data)
+        showDetail()
+      }
+    }
+  } else {
+    groupDialog.value = false
+  }
+}
+
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     exportToPDF(reportMeta.value, data.value)
@@ -596,13 +696,44 @@ const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
-  const query = {
-    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 : '',
+  var query = {
     bulan: currentMonth.value,
-    tahun: currentYear.value
+    tahun: currentYear.value,
+    idUlp: 0,
+    idUid: 0,
+    idUp3: 0,
+    namaRegional: '',
+    type: parameterRequest.value.type
+  }
+
+  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,
+      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
@@ -631,7 +762,9 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  getDetail()
+  if (isDialogEnabled.value) {
+    getDetail()
+  }
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {