From 9896746b7300e72870b8e91f7277fd9a3142bfa3 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 8 Nov 2023 13:29:27 +0700
Subject: [PATCH] Adjust column width and summary display in Table_9.vue

---
 src/components/Pages/Gangguan/Table_9.vue | 120 ++++++++++++++++++++--
 1 file changed, 114 insertions(+), 6 deletions(-)

diff --git a/src/components/Pages/Gangguan/Table_9.vue b/src/components/Pages/Gangguan/Table_9.vue
index 30f8e46..beb714c 100644
--- a/src/components/Pages/Gangguan/Table_9.vue
+++ b/src/components/Pages/Gangguan/Table_9.vue
@@ -14,7 +14,7 @@
             <DxGroupPanel :visible="true" />
             <DxGrouping :auto-expand-all="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="no" caption="NO" css-class="custom-table-column" />
+            <DxColumn :width="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column" />
             <DxColumn :width="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="jenisGangguan" caption="Jenis Gangguan"
                 css-class="custom-table-column" :group-index="0" />
@@ -71,13 +71,41 @@
                 </DxColumn>
             </DxColumn>
 
-            <DxSummary css-class="!bg-primary-500">
-                <DxGroupItem :show-in-group-footer="true" column="laporan.total" summary-type="sum" display-format="{0}"
-                    css-class="text-white" />
+            <DxSummary>
+                <DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" />
+                <DxGroupItem :show-in-group-footer="true" column="laporan.total" summary-type="sum" display-format="{0}" />
                 <DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.jml" summary-type="sum"
-                    display-format="{0}" css-class="text-white" />
+                    display-format="{0}" />
                 <DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.persen" summary-type="sum"
-                    display-format="{0}" css-class="text-white" />
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.jml" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.persen" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.total" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.rataRata" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.max" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.min" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.lebihSla" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.kurangSla" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.total" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.rataRata" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.max" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.min" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.lebihSla" summary-type="sum"
+                    display-format="{0}" />
+                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.kurangSla" summary-type="sum"
+                    display-format="{0}" />
             </DxSummary>
         </DxDataGrid>
     </div>
@@ -169,6 +197,86 @@ const data = [
             },
         }
     },
+    {
+        no: 2,
+        kode: 'A',
+        jenisGangguan: 'Gangguan A',
+        laporan: {
+            total: 10,
+            sudahSelesai: {
+                jml: 5,
+                persen: 50,
+            },
+            belumSelesai: {
+                jml: 5,
+                persen: 50,
+            },
+        },
+        responseTime: {
+            menit: {
+                total: 10,
+                rataRata: 10,
+                max: 10,
+                min: 10,
+            },
+            laporan: {
+                lebihSla: 5,
+                kurangSla: 5,
+            },
+        },
+        recoveryTime: {
+            menit: {
+                total: 10,
+                rataRata: 10,
+                max: 10,
+                min: 10,
+            },
+            laporan: {
+                lebihSla: 5,
+                kurangSla: 5,
+            },
+        }
+    },
+    {
+        no: 3,
+        kode: 'B',
+        jenisGangguan: 'Gangguan B',
+        laporan: {
+            total: 10,
+            sudahSelesai: {
+                jml: 5,
+                persen: 50,
+            },
+            belumSelesai: {
+                jml: 5,
+                persen: 50,
+            },
+        },
+        responseTime: {
+            menit: {
+                total: 10,
+                rataRata: 10,
+                max: 10,
+                min: 10,
+            },
+            laporan: {
+                lebihSla: 5,
+                kurangSla: 5,
+            },
+        },
+        recoveryTime: {
+            menit: {
+                total: 10,
+                rataRata: 10,
+                max: 10,
+                min: 10,
+            },
+            laporan: {
+                lebihSla: 5,
+                kurangSla: 5,
+            },
+        }
+    },
 ]
 
 onMounted(() => {