From 1b919cf5464c5df7179c3b6ff0bd395da81f4245 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 29 Feb 2024 15:30:26 +0700
Subject: [PATCH] Refactor CSS and table template in RKeluhan_ALL.vue

---
 src/assets/css/style.css                      |  4 -
 .../Pages/Keluhan/Rekap/RKeluhan_ALL.vue      | 82 +++++++++++--------
 2 files changed, 46 insertions(+), 40 deletions(-)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 43b09f7..7e4268c 100755
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1373,10 +1373,6 @@ body {
   margin-top: 1.5rem;
 }
 
-.mb-5 {
-  margin-bottom: 1.25rem;
-}
-
 .mb-10 {
   margin-bottom: 2.5rem;
 }
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
index fbec8c7..f3703df 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
@@ -17,47 +17,57 @@
       <DxColumnFixing :enabled="true" />
 
       <DxColumn alignment="center" :width="170" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column"
-        cell-template="data" header-cell-template="title-header" />
-      <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
-          css-class="custom-table-column" cell-template="data" />
-        <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Selesai"
-          css-class="custom-table-column" cell-template="data" />
-        <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
-          css-class="custom-table-column" cell-template="data" />
-        <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="InProgress"
-          css-class="custom-table-column" cell-template="data" />
-        <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
-          css-class="custom-table-column" cell-template="data" />
-        <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
-          css-class="custom-table-column" cell-template="data" />
-        <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
-          css-class="custom-table-column" cell-template="data" />
-        <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
-          css-class="custom-table-column" cell-template="data" />
-        <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
-          caption="> SLA" css-class="custom-table-column" cell-template="data" />
-        <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
-          caption="≤ SLA" css-class="custom-table-column" cell-template="data" />
-      </DxColumn>
-      <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
-          css-class="custom-table-column" cell-template="data" />
-        <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
-          css-class="custom-table-column" cell-template="data" />
-        <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
-          css-class="custom-table-column" cell-template="data" />
-        <DxColumn :width="150" alignment="center" data-field="total_diatas_recovery" data-type="number" caption="> SLA"
-          css-class="custom-table-column" cell-template="data" />
-        <DxColumn :width="150" alignment="center" data-field="total_dibawah_recovery" data-type="number" caption="≤ SLA"
-          css-class="custom-table-column" cell-template="data" />
-      </DxColumn>
-      <template #data="{ data }">
+        cell-template="unitName" header-cell-template="title-header" />
+      <template #unitName="{ data }">
         <p class="text-left cursor-pointer" @click="showDialog()">
           {{ data.text }}
         </p>
       </template>
+      <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
+        <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
+          css-class="custom-table-column" cell-template="defaults" />
+        <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Selesai"
+          css-class="custom-table-column" cell-template="defaults" />
+        <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
+          css-class="custom-table-column" cell-template="percent" />
+        <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="InProgress"
+          css-class="custom-table-column" cell-template="defaults" />
+        <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
+          css-class="custom-table-column" cell-template="percent" />
+        <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
+          css-class="custom-table-column" cell-template="defaults" />
+        <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
+          css-class="custom-table-column" cell-template="defaults" />
+        <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
+          css-class="custom-table-column" cell-template="defaults" />
+        <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
+          caption="> SLA" css-class="custom-table-column" cell-template="defaults" />
+        <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
+          caption="≤ SLA" css-class="custom-table-column" cell-template="defaults" />
+      </DxColumn>
+      <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
+        <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
+          css-class="custom-table-column" cell-template="defaults" />
+        <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
+          css-class="custom-table-column" cell-template="defaults" />
+        <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
+          css-class="custom-table-column" cell-template="defaults" />
+        <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
+          caption="> SLA" css-class="custom-table-column" cell-template="defaults" />
+        <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
+          caption="≤ SLA" css-class="custom-table-column" cell-template="defaults" />
+      </DxColumn>
 
+      <template #percent="{ data }">
+        <p class="cursor-pointer" @click="showDialog()">
+          {{ data.text }}%
+        </p>
+      </template>
+      <template #defaults="{ data }">
+        <p class="cursor-pointer" @click="showDialog()">
+          {{ data.text }}
+        </p>
+      </template>
       <template #title-header="{ data }">
         <p class="w-full text-center">
           {{ data.column.caption }}