From ec13f001f195d7d0d900c27d238e44a5aa7b668e Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Thu, 29 Feb 2024 16:26:02 +0700
Subject: [PATCH] Add cell-template "data-waktu" to custom-table-column

---
 .../Pages/Gangguan/Rekap/RGangguan_ALL.vue          | 13 +++++++++++++
 .../Gangguan/Rekap/RGangguan_JenisGangguan.vue      | 11 +++++++++++
 .../Gangguan/Rekap/RGangguan_JenisGangguanSE.vue    | 12 +++++++++++-
 .../Pages/Gangguan/Rekap/RGangguan_PerPosko.vue     | 11 +++++++++++
 .../Pages/Gangguan/Rekap/RGangguan_PerRegu.vue      | 11 +++++++++++
 .../Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue   | 13 +++++++++++++
 6 files changed, 70 insertions(+), 1 deletion(-)

diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
index e2b5372..ad665e3 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
@@ -126,6 +126,7 @@
           caption="Max"
           :allow-resizing="false"
           css-class="custom-table-column"
+          cell-template="data-waktu"
         />
         <DxColumn
           :width="150"
@@ -135,6 +136,7 @@
           caption="Min"
           :allow-resizing="false"
           css-class="custom-table-column"
+          cell-template="data-waktu"
         />
         <DxColumn
           :width="150"
@@ -173,6 +175,7 @@
           caption="Max"
           :allow-resizing="false"
           css-class="custom-table-column"
+          cell-template="data-waktu"
         />
         <DxColumn
           :width="150"
@@ -182,6 +185,7 @@
           caption="Min"
           :allow-resizing="false"
           css-class="custom-table-column"
+          cell-template="data-waktu"
         />
         <DxColumn
           :width="150"
@@ -220,6 +224,7 @@
           caption="Max"
           :allow-resizing="false"
           css-class="custom-table-column"
+          cell-template="data-waktu"
         />
         <DxColumn
           :width="150"
@@ -229,6 +234,7 @@
           caption="Min"
           :allow-resizing="false"
           css-class="custom-table-column"
+          cell-template="data-waktu"
         />
         <DxColumn
           :width="150"
@@ -249,6 +255,12 @@
           css-class="custom-table-column"
         />
       </DxColumn>
+
+      <template #data-waktu="{ data }">
+        <p>
+          {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+        </p>
+      </template>
     </DxDataGrid>
   </div>
 </template>
@@ -256,6 +268,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
index 0146ff9..b10066d 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
@@ -146,6 +146,7 @@
             data-type="number"
             caption="Max"
             css-class="custom-table-column"
+            cell-template="data-waktu"
           />
           <DxColumn
             :width="120"
@@ -154,6 +155,7 @@
             data-type="number"
             caption="Min"
             css-class="custom-table-column"
+            cell-template="data-waktu"
           />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@@ -200,6 +202,7 @@
             data-type="number"
             caption="Max"
             css-class="custom-table-column"
+            cell-template="data-waktu"
           />
           <DxColumn
             :width="120"
@@ -208,6 +211,7 @@
             data-type="number"
             caption="Min"
             css-class="custom-table-column"
+            cell-template="data-waktu"
           />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@@ -335,6 +339,12 @@
           display-format="{0}"
         />
       </DxSummary>
+
+      <template #data-waktu="{ data }">
+        <p>
+          {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+        </p>
+      </template>
     </DxDataGrid>
   </div>
 </template>
@@ -342,6 +352,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
index bc70ce0..822fb9b 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
@@ -138,6 +138,7 @@
             data-type="number"
             caption="Max"
             css-class="custom-table-column"
+            cell-template="data-waktu"
           />
           <DxColumn
             :width="120"
@@ -146,6 +147,7 @@
             data-type="number"
             caption="Min"
             css-class="custom-table-column"
+            cell-template="data-waktu"
           />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@@ -192,6 +194,7 @@
             data-type="number"
             caption="Max"
             css-class="custom-table-column"
+            cell-template="data-waktu"
           />
           <DxColumn
             :width="120"
@@ -200,6 +203,7 @@
             data-type="number"
             caption="Min"
             css-class="custom-table-column"
+            cell-template="data-waktu"
           />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@@ -221,6 +225,12 @@
           />
         </DxColumn>
       </DxColumn>
+
+      <template #data-waktu="{ data }">
+        <p>
+          {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+        </p>
+      </template>
     </DxDataGrid>
   </div>
 </template>
@@ -229,7 +239,7 @@
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { ref } from 'vue'
-
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
index 3994895..b31477f 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
@@ -139,6 +139,7 @@
             data-type="number"
             caption="Max"
             css-class="custom-table-column"
+            cell-template="data-waktu"
           />
           <DxColumn
             :width="120"
@@ -147,6 +148,7 @@
             data-type="number"
             caption="Min"
             css-class="custom-table-column"
+            cell-template="data-waktu"
           />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@@ -193,6 +195,7 @@
             data-type="number"
             caption="Max"
             css-class="custom-table-column"
+            cell-template="data-waktu"
           />
           <DxColumn
             :width="120"
@@ -201,6 +204,7 @@
             data-type="number"
             caption="Min"
             css-class="custom-table-column"
+            cell-template="data-waktu"
           />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@@ -438,12 +442,19 @@
           css-class="text-white"
         />
       </DxSummary>
+
+      <template #data-waktu="{ data }">
+        <p>
+          {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+        </p>
+      </template>
     </DxDataGrid>
   </div>
 </template>
 
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import Type8 from '@/components/Form/FiltersType/Type8.vue'
 import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
index 1cf5b15..f886ed0 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
@@ -143,6 +143,7 @@
             data-type="number"
             caption="Max"
             css-class="custom-table-column"
+            cell-template="data-waktu"
           />
           <DxColumn
             :width="120"
@@ -151,6 +152,7 @@
             data-type="number"
             caption="Min"
             css-class="custom-table-column"
+            cell-template="data-waktu"
           />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@@ -197,6 +199,7 @@
             data-type="number"
             caption="Max"
             css-class="custom-table-column"
+            cell-template="data-waktu"
           />
           <DxColumn
             :width="120"
@@ -205,6 +208,7 @@
             data-type="number"
             caption="Min"
             css-class="custom-table-column"
+            cell-template="data-waktu"
           />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@@ -338,6 +342,12 @@
           css-class="text-white"
         />
       </DxSummary>
+
+      <template #data-waktu="{ data }">
+        <p>
+          {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+        </p>
+      </template>
     </DxDataGrid>
   </div>
 </template>
@@ -345,6 +355,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type9 from '@/components/Form/FiltersType/Type9.vue'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
index 39478a0..434b15d 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
@@ -135,6 +135,7 @@
             data-type="number"
             caption="Max"
             css-class="custom-table-column"
+            cell-template="data-waktu"
           />
           <DxColumn
             :width="120"
@@ -143,6 +144,7 @@
             data-type="number"
             caption="Min"
             css-class="custom-table-column"
+            cell-template="data-waktu"
           />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@@ -189,6 +191,7 @@
             data-type="number"
             caption="Max"
             css-class="custom-table-column"
+            cell-template="data-waktu"
           />
           <DxColumn
             :width="120"
@@ -197,6 +200,7 @@
             data-type="number"
             caption="Min"
             css-class="custom-table-column"
+            cell-template="data-waktu"
           />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@@ -218,6 +222,12 @@
           />
         </DxColumn>
       </DxColumn>
+
+      <template #data-waktu="{ data }">
+        <p>
+          {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+        </p>
+      </template>
     </DxDataGrid>
   </div>
 </template>
@@ -225,6 +235,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type9 from '@/components/Form/FiltersType/Type9.vue'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
@@ -312,6 +323,8 @@ const GET_REKAPITULASI_GANGGUAN_PER_TANGGAL = gql`
       persen_selesai
       tanggal
       total
+      total_durasi_response
+      total_durasi_recovery
       total_diatas_sla_recovery
       total_diatas_sla_response
       total_dibawah_sla_recovery