Add DxGrouping component and update DxColumn properties

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

@@ -23,6 +23,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -51,6 +52,15 @@
         cell-template="formatText"
       />
 
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field=""
+        caption="Semua Unit"
+        css-class="custom-table-column"
+        cell-template="formatText"
+        :group-index="0"
+      />
       <DxColumn
         :width="150"
         alignment="center"
@@ -58,7 +68,7 @@
         caption="Regional"
         css-class="custom-table-column"
         cell-template="formatText"
-        :group-index="0"
+        :group-index="1"
       />
       <DxColumn
         :width="150"
@@ -67,7 +77,7 @@
         caption="UID"
         css-class="custom-table-column"
         cell-template="formatText"
-        :group-index="1"
+        :group-index="2"
       />
       <DxColumn
         :width="150"
@@ -76,7 +86,7 @@
         caption="UP3"
         css-class="custom-table-column"
         cell-template="formatText"
-        :group-index="2"
+        :group-index="3"
       />
 
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
@@ -768,7 +778,8 @@ import {
   DxSearchPanel,
   DxSelection,
   DxSummary,
-  DxGroupItem
+  DxGroupItem,
+  DxGrouping
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'

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

@@ -549,7 +549,7 @@
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
           class="max-h-[calc(100vh-140px)]"
-          :data-source="data"
+          :data-source="dataSub"
           :show-column-lines="true"
           :show-row-lines="false"
           :show-borders="true"
@@ -590,9 +590,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="
-              (item: any) => dummyData.gangguan.rekap.detailGangguan.findIndex((i) => i == item) + 1
-            "
+            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -968,7 +966,7 @@ const filterData = (params: any) => {
 }
 
 const getDetail = () => {
-  dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerUnit
+  // dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerUnit
 }
 
 const showDialogDataSelected = () => {

src/utils/api/api.graphql.ts

@@ -328,8 +328,6 @@ export const queries = {
             persen_selesai
             total_inproses
             persen_inproses
-            total_durasi_response
-            total_durasi_recovery
             avg_durasi_response
             min_durasi_response
             max_durasi_response