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

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

@@ -47,37 +47,17 @@
         css-class="custom-table-column"
         cell-template="formatText"
       />
+
       <DxColumn
+        v-if="grouping.length > 0"
+        v-for="(group, index) in grouping"
+        :width="150"
         alignment="center"
-        data-field=""
-        caption="NASIONAL"
+        :data-field="group.data"
+        :caption="group.caption"
         css-class="custom-table-column"
         cell-template="formatText"
-        :group-index="0"
-      />
-      <DxColumn
-        alignment="center"
-        data-field="nama_regional"
-        caption="Regional"
-        css-class="custom-table-column"
-        cell-template="formatText"
-        :group-index="0"
-      />
-      <DxColumn
-        alignment="center"
-        data-field="nama_uid"
-        caption="UID"
-        css-class="custom-table-column"
-        cell-template="formatText"
-        :group-index="1"
-      />
-      <DxColumn
-        alignment="center"
-        data-field="nama_up3"
-        caption="UP3"
-        css-class="custom-table-column"
-        cell-template="formatText"
-        :group-index="2"
+        :group-index="index"
       />
       <DxColumn
         alignment="center"
@@ -230,12 +210,13 @@
         </DxColumn>
       </DxColumn>
 
-      <DxSummary>
+      <DxSummary :calculate-custom-summary="calculateCustomSummary">
         <DxGroupItem
           :show-in-group-footer="false"
           :align-by-column="true"
-          summary-type="sum"
+          summary-type="custom"
           show-in-column="total_durasi_response_time_bulan_ini"
+          name="total_durasi_response_time_bulan_ini"
           column="total_durasi_response_time_bulan_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
@@ -243,8 +224,9 @@
         <DxGroupItem
           :show-in-group-footer="false"
           :align-by-column="true"
-          summary-type="sum"
+          summary-type="custom"
           show-in-column="count_durasi_response_time_bulan_ini"
+          name="count_durasi_response_time_bulan_ini"
           column="count_durasi_response_time_bulan_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
@@ -252,8 +234,9 @@
         <DxGroupItem
           :show-in-group-footer="false"
           :align-by-column="true"
-          summary-type="sum"
+          summary-type="custom"
           show-in-column="avg_durasi_response_time_bulan_ini"
+          name="avg_durasi_response_time_bulan_ini"
           column="avg_durasi_response_time_bulan_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
@@ -261,8 +244,9 @@
         <DxGroupItem
           :show-in-group-footer="false"
           :align-by-column="true"
-          summary-type="sum"
+          summary-type="custom"
           show-in-column="total_durasi_recovery_time_bulan_ini"
+          name="total_durasi_recovery_time_bulan_ini"
           column="total_durasi_recovery_time_bulan_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
@@ -270,8 +254,9 @@
         <DxGroupItem
           :show-in-group-footer="false"
           :align-by-column="true"
-          summary-type="sum"
+          summary-type="custom"
           show-in-column="count_durasi_recovery_time_bulan_ini"
+          name="count_durasi_recovery_time_bulan_ini"
           column="count_durasi_recovery_time_bulan_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
@@ -279,8 +264,9 @@
         <DxGroupItem
           :show-in-group-footer="false"
           :align-by-column="true"
-          summary-type="sum"
+          summary-type="custom"
           show-in-column="avg_durasi_recovery_time_bulan_ini"
+          name="avg_durasi_recovery_time_bulan_ini"
           column="avg_durasi_recovery_time_bulan_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
@@ -288,8 +274,9 @@
         <DxGroupItem
           :show-in-group-footer="false"
           :align-by-column="true"
-          summary-type="sum"
+          summary-type="custom"
           show-in-column="total_durasi_response_time_tahun_ini"
+          name="total_durasi_response_time_tahun_ini"
           column="total_durasi_response_time_tahun_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
@@ -297,8 +284,9 @@
         <DxGroupItem
           :show-in-group-footer="false"
           :align-by-column="true"
-          summary-type="sum"
+          summary-type="custom"
           show-in-column="count_durasi_response_time_tahun_ini"
+          name="count_durasi_response_time_tahun_ini"
           column="count_durasi_response_time_tahun_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
@@ -306,8 +294,9 @@
         <DxGroupItem
           :show-in-group-footer="false"
           :align-by-column="true"
-          summary-type="sum"
+          summary-type="custom"
           show-in-column="avg_durasi_response_time_tahun_ini"
+          name="avg_durasi_response_time_tahun_ini"
           column="avg_durasi_response_time_tahun_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
@@ -315,8 +304,9 @@
         <DxGroupItem
           :show-in-group-footer="false"
           :align-by-column="true"
-          summary-type="sum"
+          summary-type="custom"
           show-in-column="total_durasi_recovery_time_tahun_ini"
+          name="total_durasi_recovery_time_tahun_ini"
           column="total_durasi_recovery_time_tahun_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
@@ -324,8 +314,9 @@
         <DxGroupItem
           :show-in-group-footer="false"
           :align-by-column="true"
-          summary-type="sum"
+          summary-type="custom"
           show-in-column="count_durasi_recovery_time_tahun_ini"
+          name="count_durasi_recovery_time_tahun_ini"
           column="count_durasi_recovery_time_tahun_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
@@ -333,8 +324,9 @@
         <DxGroupItem
           :show-in-group-footer="false"
           :align-by-column="true"
-          summary-type="sum"
+          summary-type="custom"
           show-in-column="avg_durasi_recovery_time_tahun_ini"
+          name="avg_durasi_recovery_time_tahun_ini"
           column="avg_durasi_recovery_time_tahun_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
@@ -366,7 +358,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -374,7 +366,6 @@ import {
   DxExport,
   DxGroupItem,
   DxGrouping,
-  DxLoadPanel,
   DxPaging,
   DxScrolling,
   DxSearchPanel,
@@ -391,7 +382,6 @@ import {
   exportToPDF,
   exportToXLSX,
   exportToDOCX
-
 } from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan'
 
 const client = apolloClient()
@@ -422,6 +412,139 @@ const reportMeta = ref({
   currentYear: currentYear.value
 })
 
+const grouping = ref<any[]>([
+  {
+    data: '',
+    caption: 'NASIONAL'
+  },
+  {
+    data: 'nama_regional',
+    caption: 'Regional'
+  },
+  {
+    data: 'nama_uid',
+    caption: 'UID'
+  },
+  {
+    data: 'nama_up3',
+    caption: 'UP3'
+  }
+])
+
+let total_durasi_response_time_bulan_ini = 0
+let count_durasi_response_time_bulan_ini = 0
+let total_durasi_recovery_time_bulan_ini = 0
+let count_durasi_recovery_time_bulan_ini = 0
+let total_durasi_response_time_tahun_ini = 0
+let count_durasi_response_time_tahun_ini = 0
+let total_durasi_recovery_time_tahun_ini = 0
+let count_durasi_recovery_time_tahun_ini = 0
+const calculateCustomSummary = (options: any) => {
+  if (options.name === 'total_durasi_response_time_bulan_ini') {
+    if (options.summaryProcess === 'calculate') {
+      total_durasi_response_time_bulan_ini += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = total_durasi_response_time_bulan_ini
+    }
+  }
+
+  if (options.name === 'count_durasi_response_time_bulan_ini') {
+    if (options.summaryProcess === 'calculate') {
+      count_durasi_response_time_bulan_ini += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = count_durasi_response_time_bulan_ini
+    }
+  }
+
+  if (options.name === 'avg_durasi_response_time_bulan_ini') {
+    if (options.summaryProcess === 'start') {
+      total_durasi_response_time_bulan_ini = 0
+      count_durasi_response_time_bulan_ini = 0
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue =
+        total_durasi_response_time_bulan_ini / count_durasi_response_time_bulan_ini
+    }
+  }
+
+  if (options.name === 'total_durasi_recovery_time_bulan_ini') {
+    if (options.summaryProcess === 'calculate') {
+      total_durasi_recovery_time_bulan_ini += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = total_durasi_recovery_time_bulan_ini
+    }
+  }
+
+  if (options.name === 'count_durasi_recovery_time_bulan_ini') {
+    if (options.summaryProcess === 'calculate') {
+      count_durasi_recovery_time_bulan_ini += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = count_durasi_recovery_time_bulan_ini
+    }
+  }
+
+  if (options.name === 'avg_durasi_recovery_time_bulan_ini') {
+    if (options.summaryProcess === 'start') {
+      total_durasi_recovery_time_bulan_ini = 0
+      count_durasi_recovery_time_bulan_ini = 0
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue =
+        total_durasi_recovery_time_bulan_ini / count_durasi_recovery_time_bulan_ini
+    }
+  }
+
+  if (options.name === 'total_durasi_response_time_tahun_ini') {
+    if (options.summaryProcess === 'calculate') {
+      total_durasi_response_time_tahun_ini += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = total_durasi_response_time_tahun_ini
+    }
+  }
+
+  if (options.name === 'count_durasi_response_time_tahun_ini') {
+    if (options.summaryProcess === 'calculate') {
+      count_durasi_response_time_tahun_ini += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = count_durasi_response_time_tahun_ini
+    }
+  }
+
+  if (options.name === 'avg_durasi_response_time_tahun_ini') {
+    if (options.summaryProcess === 'start') {
+      total_durasi_response_time_tahun_ini = 0
+      count_durasi_response_time_tahun_ini = 0
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue =
+        total_durasi_response_time_tahun_ini / count_durasi_response_time_tahun_ini
+    }
+  }
+
+  if (options.name === 'total_durasi_recovery_time_tahun_ini') {
+    if (options.summaryProcess === 'calculate') {
+      total_durasi_recovery_time_tahun_ini += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = total_durasi_recovery_time_tahun_ini
+    }
+  }
+
+  if (options.name === 'count_durasi_recovery_time_tahun_ini') {
+    if (options.summaryProcess === 'calculate') {
+      count_durasi_recovery_time_tahun_ini += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = count_durasi_recovery_time_tahun_ini
+    }
+  }
+
+  if (options.name === 'avg_durasi_recovery_time_tahun_ini') {
+    if (options.summaryProcess === 'start') {
+      total_durasi_recovery_time_tahun_ini = 0
+      count_durasi_recovery_time_tahun_ini = 0
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue =
+        total_durasi_recovery_time_tahun_ini / count_durasi_recovery_time_tahun_ini
+    }
+  }
+}
+
 const resetData = () => {
   data.value = []
   dataSub.value = []
@@ -430,6 +553,59 @@ const resetData = () => {
 const filterData = async (params: any) => {
   resetData()
   const { regional, ulp, uid, up3, bulan, tahun } = params
+
+  var groupList: any[] = [
+    {
+      data: '',
+      caption: 'NASIONAL'
+    },
+    {
+      data: 'nama_regional',
+      caption: 'Regional'
+    },
+    {
+      data: 'nama_uid',
+      caption: 'UID'
+    },
+    {
+      data: 'nama_up3',
+      caption: 'UP3'
+    }
+  ]
+
+  if (regional?.id != 0) {
+    groupList.forEach((item, index) => {
+      if (item.caption == 'NASIONAL') {
+        groupList.splice(index, 1)
+      }
+    })
+
+    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,