Refactor RKeluhan_PerFungsiBidang.vue to update getDetail function and remove unused variables

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

@@ -46,36 +46,15 @@
         cell-template="formatText"
       />
       <DxColumn
+        v-if="grouping.length > 0"
+        v-for="(group, index) in grouping"
+        :width="150"
         alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_regional"
-        caption="Regional"
+        :data-field="group.data"
+        :caption="group.caption"
         css-class="custom-table-column"
-        :group-index="0"
-        name="namaRegional"
-      />
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="id_uid"
-        caption="UIW"
-        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"
+        cell-template="formatText"
+        :group-index="index"
       />
       <DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
         <DxColumn
@@ -179,7 +158,7 @@
           show-in-column="total"
           column="total"
           css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
       </DxSummary>
     </DxDataGrid>
@@ -569,6 +548,21 @@ const reportMeta = ref({
   periode: ''
 })
 
+const grouping = ref<any[]>([
+  {
+    data: 'nama_regional',
+    caption: 'Regional'
+  },
+  {
+    data: 'nama_uid',
+    caption: 'UID'
+  },
+  {
+    data: 'nama_up3',
+    caption: 'UP3'
+  }
+])
+
 const closeDialog = () => {
   dialogDetail.value = false
 }
@@ -585,6 +579,46 @@ const filterData = async (params: any) => {
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
+  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,