From da05b43d3c94bf14e7c4a9a192dea563fb06bb31 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 14 Mar 2024 19:53:37 +0700
Subject: [PATCH] Refactor RGangguan_ALL.vue component

---
 .../Pages/Gangguan/Rekap/RGangguan_ALL.vue    | 27 +++++++++++++------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
index 4e6cb21..c82a53f 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
@@ -18,13 +18,13 @@
       :row-alternation-enabled="true"
       :hover-state-enabled="true"
       @selection-changed="onDataSelectionChanged"
-      :column-width="100"
       @exporting="onExporting"
       :allow-column-resizing="true"
       column-resizing-mode="widget"
     >
+      <DxGrouping :auto-expand-all="false" />
       <DxSelection mode="single" />
-      <DxPaging :page-size="40" :enabled="true" />
+      <!-- <DxPaging :page-size="40" :enabled="true" />
       <DxPager
         :visible="true"
         :allowed-page-sizes="[20, 40, 60]"
@@ -32,7 +32,7 @@
         :show-page-size-selector="true"
         :show-info="true"
         :show-navigation-buttons="true"
-      />
+      /> -->
       <DxLoadPanel
         :position="position"
         :show-indicator="showIndicator"
@@ -65,6 +65,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"
@@ -72,7 +81,7 @@
         caption="Regional"
         css-class="custom-table-column"
         cell-template="formatText"
-        :group-index="0"
+        :group-index="1"
       />
       <DxColumn
         :width="150"
@@ -81,7 +90,7 @@
         caption="UID"
         css-class="custom-table-column"
         cell-template="formatText"
-        :group-index="1"
+        :group-index="2"
       />
       <DxColumn
         :width="150"
@@ -90,7 +99,7 @@
         caption="UP3"
         css-class="custom-table-column"
         cell-template="formatText"
-        :group-index="2"
+        :group-index="3"
       />
       <!-- <DxColumn
         :width="150"
@@ -998,7 +1007,8 @@ import {
   DxSearchPanel,
   DxSelection,
   DxSummary,
-  DxGroupItem
+  DxGroupItem,
+  DxGrouping
 } from 'devextreme-vue/data-grid'
 import { onMounted, ref, watch } from 'vue'
 import { jsPDF } from 'jspdf'
@@ -1020,7 +1030,7 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataSub = ref<any[]>([])
 const dataSelected = ref<any>(null)
-const dataSubSelected = ref<any>()
+const dataSubSelected = ref<any>(null)
 const dialogDataSelected = ref(false)
 const closeDialogDataSelected = () => (dialogDataSelected.value = false)
 const loadingData = ref(false)
@@ -1108,6 +1118,7 @@ const getDetail = () => {
 const showDialogDataSelected = () => {
   if (dataSelected.value != null) {
     dataSub.value = []
+    dataSubSelected.value = null
     dialogDataSelected.value = true
     getDetail()
   }