Refactor grouping logic in RGangguan_PerTanggal.vue, Type13.vue, and RGangguan_PerRegu.vue

src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue

@@ -50,24 +50,15 @@
         cell-template="formatNumber"
       />
       <DxColumn
-        :width="120"
+        v-if="grouping.length > 0"
+        v-for="(group, index) in grouping"
+        :width="150"
         alignment="center"
-        data-field="nama_uid"
-        caption="UID"
+        :data-field="group.data"
+        :caption="group.caption"
         css-class="custom-table-column"
-        :group-index="0"
-        name="NamaUID"
-        v-if="isGroupBy"
-      />
-      <DxColumn
-        :width="120"
-        alignment="center"
-        data-field=""
-        caption="Seluruh Distribusi"
-        css-class="custom-table-column"
-        :group-index="0"
-        name="Distribusi"
-        v-else
+        cell-template="formatText"
+        :group-index="index"
       />
       <DxColumn
         :width="170"
@@ -872,6 +863,12 @@ const reportMeta = ref({
   periode: '',
   groupBy: false
 })
+const grouping = ref<any[]>([
+  {
+    data: '',
+    caption: 'Seluruh Distribusi'
+  }
+])
 
 let total = 0
 let total_selesai = 0
@@ -997,6 +994,67 @@ const filterData = async (params: any) => {
   resetData()
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
+  isGroupBy.value = params.groupBy
+  if (isGroupBy.value) {
+    if (uid.id != 0) {
+      grouping.value = [
+        {
+          data: 'nama_up3',
+          caption: 'UP3'
+        }
+      ]
+
+      if (up3.id != 0 || ulp.id != 0) {
+        grouping.value = [
+          {
+            data: 'nama_ulp',
+            caption: 'ULP'
+          }
+        ]
+      }
+    } else {
+      grouping.value = [
+        {
+          data: 'nama_uid',
+          caption: 'UID'
+        }
+      ]
+    }
+  } else {
+    if (uid.id != 0) {
+      grouping.value = [
+        {
+          data: 'nama_uid',
+          caption: 'UID'
+        }
+      ]
+
+      if (up3.id != 0) {
+        grouping.value = [
+          {
+            data: 'nama_up3',
+            caption: 'UP3'
+          }
+        ]
+
+        if (ulp.id != 0) {
+          grouping.value = [
+            {
+              data: 'nama_ulp',
+              caption: 'ULP'
+            }
+          ]
+        }
+      }
+    } else {
+      grouping.value = [
+        {
+          data: '',
+          caption: 'Seluruh Distribusi'
+        }
+      ]
+    }
+  }
 
   const query = {
     dateFrom: dateValue[0]
@@ -1018,7 +1076,6 @@ const filterData = async (params: any) => {
     query
   )
     .then((result) => {
-      isGroupBy.value = params.groupBy
       if (result.data.data != undefined) {
         data.value = isGroupBy.value
           ? result.data.data.rekapitulasiKeluhanPerKelompokKeluhanUid