Refactor grouping logic in MonalisaLB_AgingComplaint.vue and MonalisaLK_AgingComplaint.vue

src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue

@@ -45,36 +45,15 @@
         css-class="custom-table-column"
       >
         <DxColumn
+          v-if="grouping.length > 0"
+          v-for="(group, index) in grouping"
+          :width="150"
           alignment="center"
-          :min-width="170"
+          :data-field="group.data"
-          data-type="text"
+          :caption="group.caption"
-          data-field="nama_regional"
-          caption="Regional"
           css-class="custom-table-column"
-          :group-index="0"
+          cell-template="formatText"
-          name="namaRegional"
+          :group-index="index"
-        />
-        <DxColumn
-          alignment="center"
-          :min-width="170"
-          data-type="text"
-          data-field="id_uid"
-          caption="UID"
-          css-class="custom-table-column"
-          :group-index="1"
-          name="namaUID"
-          :calculate-group-value="(rowData: any) => rowData.nama_uid"
-        />
-        <DxColumn
-          alignment="center"
-          :min-width="170"
-          data-type="text"
-          data-field="id_up3"
-          caption="UP3"
-          css-class="custom-table-column"
-          :group-index="1"
-          name="namaUID"
-          :calculate-group-value="(rowData: any) => rowData.nama_up3"
         />
         <DxColumn
           alignment="center"
@@ -630,7 +609,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
@@ -638,7 +617,6 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
-  DxLoadPanel,
   DxPaging,
   DxScrolling,
   DxSearchPanel,
@@ -694,6 +672,20 @@ const reportMeta = ref({
   currentMonth: currentMonth.value,
   currentYear: currentYear.value
 })
+const grouping = ref<any[]>([
+  {
+    data: 'nama_regional',
+    caption: 'Regional'
+  },
+  {
+    data: 'nama_uid',
+    caption: 'UID'
+  },
+  {
+    data: 'nama_up3',
+    caption: 'UP3'
+  }
+])
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
@@ -781,6 +773,46 @@ const filterData = async (params: any) => {
   resetData()
   const { regional, ulp, uid, up3, bulan, tahun } = params
 
+  var groupList: any[] = [
+    {
+      data: 'nama_regional',
+      caption: 'Regional'
+    },
+    {
+      data: 'nama_uid',
+      caption: 'UID'
+    },
+    {
+      data: 'nama_up3',
+      caption: 'UP3'
+    }
+  ]
+
+  if (uid?.id != 0) {
+    groupList.forEach((item, index) => {
+      if (item.caption == 'Regional') {
+        groupList.splice(index, 1)
+      }
+    })
+
+    if (up3?.id != 0) {
+      groupList.forEach((item, index) => {
+        if (item.caption == 'UID') {
+          groupList.splice(index, 1)
+        }
+      })
+
+      if (ulp?.id != 0) {
+        groupList.forEach((item, index) => {
+          if (item.caption == 'UP3') {
+            groupList.splice(index, 1)
+          }
+        })
+      }
+    }
+  }
+  grouping.value = groupList
+
   currentMonth.value = bulan.id
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1

src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue

@@ -45,36 +45,15 @@
         css-class="custom-table-column"
       >
         <DxColumn
+          v-if="grouping.length > 0"
+          v-for="(group, index) in grouping"
+          :width="150"
           alignment="center"
-          :min-width="170"
+          :data-field="group.data"
-          data-type="text"
+          :caption="group.caption"
-          data-field="nama_regional"
-          caption="Regional"
           css-class="custom-table-column"
-          :group-index="0"
+          cell-template="formatText"
-          name="namaRegional"
+          :group-index="index"
-        />
-        <DxColumn
-          alignment="center"
-          :min-width="170"
-          data-type="text"
-          data-field="id_uid"
-          caption="UID"
-          css-class="custom-table-column"
-          :group-index="1"
-          name="namaUID"
-          :calculate-group-value="(rowData: any) => rowData.nama_uid"
-        />
-        <DxColumn
-          alignment="center"
-          :min-width="170"
-          data-type="text"
-          data-field="id_up3"
-          caption="UP3"
-          css-class="custom-table-column"
-          :group-index="1"
-          name="namaUID"
-          :calculate-group-value="(rowData: any) => rowData.nama_up3"
         />
         <DxColumn
           alignment="center"
@@ -336,7 +315,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
@@ -344,7 +323,6 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
-  DxLoadPanel,
   DxPaging,
   DxScrolling,
   DxSearchPanel,
@@ -390,6 +368,21 @@ const reportMeta = ref({
   currentYear: currentYear.value
 })
 
+const grouping = ref<any[]>([
+  {
+    data: 'nama_regional',
+    caption: 'Regional'
+  },
+  {
+    data: 'nama_uid',
+    caption: 'UID'
+  },
+  {
+    data: 'nama_up3',
+    caption: 'UP3'
+  }
+])
+
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     exportToPDF(reportMeta.value, data.value)
@@ -466,6 +459,46 @@ const filterData = async (params: any) => {
   currentYear.value = tahun.id
   currentMonth.value = bulan.id
 
+  var groupList: any[] = [
+    {
+      data: 'nama_regional',
+      caption: 'Regional'
+    },
+    {
+      data: 'nama_uid',
+      caption: 'UID'
+    },
+    {
+      data: 'nama_up3',
+      caption: 'UP3'
+    }
+  ]
+
+  if (uid?.id != 0) {
+    groupList.forEach((item, index) => {
+      if (item.caption == 'Regional') {
+        groupList.splice(index, 1)
+      }
+    })
+
+    if (up3?.id != 0) {
+      groupList.forEach((item, index) => {
+        if (item.caption == 'UID') {
+          groupList.splice(index, 1)
+        }
+      })
+
+      if (ulp?.id != 0) {
+        groupList.forEach((item, index) => {
+          if (item.caption == 'UP3') {
+            groupList.splice(index, 1)
+          }
+        })
+      }
+    }
+  }
+  grouping.value = groupList
+
   const query = {
     namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
     idUlp: ulp ? ulp.id : 0,