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

src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue

@@ -49,13 +49,15 @@
         :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
       />
       <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"
-        v-if="isGroupBy"
+        cell-template="formatText"
+        :group-index="index"
       />
       <DxColumn
         :width="150"
@@ -1006,6 +1008,12 @@ const reportMeta = ref({
   periode: '',
   groupBy: false
 })
+const grouping = ref<any[]>([
+  {
+    data: '',
+    caption: 'Seluruh Unit'
+  }
+])
 const agreeToShowDialog = ref(false)
 const progressSelected = ref(0)
 const isGroupBy = ref(false)
@@ -1225,6 +1233,67 @@ const filterData = async (params: any) => {
   resetData()
   const dateValue = params.periode.split(' s/d ')
   const { posko, 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 || posko.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 (posko.id != 0) {
+          grouping.value = [
+            {
+              data: 'nama_ulp',
+              caption: 'ULP'
+            }
+          ]
+        }
+      }
+    } else {
+      grouping.value = [
+        {
+          data: '',
+          caption: 'Seluruh Unit'
+        }
+      ]
+    }
+  }
 
   const query = {
     dateFrom: dateValue[0]
@@ -1241,7 +1310,7 @@ const filterData = async (params: any) => {
   loadingData.value = true
   await requestGraphQl(queries.gangguan.rekap.gangguanPerRegu, query)
     .then((result) => {
-      isGroupBy.value = params.groupBy
+      
       if (result.data.data != undefined) {
         data.value = result.data.data.rekapitulasiGangguanPerRegu
       } else {

src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue

@@ -58,6 +58,15 @@
         group-index="0"
         v-if="isGroupBy"
       />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field=""
+        caption="Seluruh Unit"
+        css-class="custom-table-column"
+        group-index="0"
+        v-else
+      />
       <DxColumn
         :width="170"
         alignment="center"
@@ -849,6 +858,20 @@ const reportMeta = ref({
   periode: '',
   groupBy: false
 })
+const grouping = ref<any[]>([
+  {
+    data: '',
+    caption: 'Seluruh Unit'
+  },
+  {
+    data: 'nama_uid',
+    caption: 'UID'
+  },
+  {
+    data: 'nama_up3',
+    caption: 'UP3'
+  }
+])
 const agreeToShowDialog = ref(false)
 const progressSelected = ref(0)
 const isGroupBy = ref(false)
@@ -958,6 +981,7 @@ const filterData = async (params: any) => {
   resetData()
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
+  isGroupBy.value = params.groupBy
 
   const query = {
     dateFrom: dateValue[0]
@@ -974,7 +998,6 @@ const filterData = async (params: any) => {
   loadingData.value = true
   await requestGraphQl(queries.gangguan.rekap.gangguanPerTanggal, query)
     .then((result) => {
-      isGroupBy.value = params.groupBy
       if (result.data.data != undefined) {
         data.value = result.data.data.rekapitulasiGangguanPerTanggal
       } else {