From f671f423dc82ce31e267c749eabebd90e3e4e938 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Sat, 30 Mar 2024 13:37:06 +0700
Subject: [PATCH] Refactor detail dialog in Gangguan pages

---
 .../Pages/Gangguan/Daftar/DGangguan_BM.vue    |  61 +++---
 .../Gangguan/Daftar/DGangguan_DMAPKT.vue      |  26 +--
 .../Rekap/RGangguan_JenisGangguan.vue         | 174 +++++++++---------
 3 files changed, 119 insertions(+), 142 deletions(-)

diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
index 9d50c19..8daefbc 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
@@ -182,17 +182,38 @@
     </DxDataGrid>
   </div>
 
-  <DetailDialog
-    :open="dialogDetail"
-    title="Daftar Gangguan Berdasarkan Media"
-    @on-close="closeDialog"
-  >
+  <DetailDialog :open="dialogDetail" title="Detail Gangguan" @on-close="closeDialog">
     <div class="w-full p-4 space-y-2 bg-white rounded-xl">
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
         <InputText :readonly="true" :value="dataSelected.no_laporan" class-name="flex-1" />
       </div>
 
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
+        <InputText :readonly="true" :value="dataSelected?.nama_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
+        <InputText :readonly="true" :value="dataSelected?.no_telp_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
+        <InputText :readonly="true" :value="dataSelected?.alamat_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
+        <InputText :readonly="true" :value="dataSelected?.keterangan_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status :</h3>
+        <InputText :readonly="true" :value="dataSelected?.status_akhir" class-name="flex-1" />
+      </div>
+
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
         <InputText :readonly="true" :value="dataSelected?.waktu_lapor" class-name="flex-1" />
@@ -234,36 +255,6 @@
         />
       </div>
 
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status :</h3>
-        <InputText :readonly="true" :value="dataSelected?.status_akhir" class-name="flex-1" />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NOMETER:</h3>
-        <InputText :readonly="true" :value="dataSelected?.idpel_nometer" class-name="flex-1" />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
-        <InputText :readonly="true" :value="dataSelected?.nama_pelapor" class-name="flex-1" />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-        <InputText :readonly="true" :value="dataSelected?.alamat_pelapor" class-name="flex-1" />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
-        <InputText :readonly="true" :value="dataSelected?.no_telp_pelapor" class-name="flex-1" />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
-        <InputText :readonly="true" :value="dataSelected?.keterangan_pelapor" class-name="flex-1" />
-      </div>
-
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumper Lapor:</h3>
         <InputText :readonly="true" :value="dataSelected?.media" class-name="flex-1" />
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
index 8bbac27..7286b1b 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
@@ -182,11 +182,7 @@
     </DxDataGrid>
   </div>
 
-  <DetailDialog
-    :open="dialogDetail"
-    title="Daftar Gangguan Diselesaikan Mobile APKT"
-    @on-close="closeDialog"
-  >
+  <DetailDialog :open="dialogDetail" title="Detail Gangguan" @on-close="closeDialog">
     <div class="w-full p-4 space-y-2 bg-white rounded-xl">
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
@@ -278,26 +274,6 @@
           class-name="flex-1"
         />
       </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab:</h3>
-        <InputText
-          :readonly="true"
-          type="textarea"
-          :value="dataSelected?.penyebab"
-          class-name="flex-1"
-        />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tindakan:</h3>
-        <InputText
-          :readonly="true"
-          type="textarea"
-          :value="dataSelected?.tindakan"
-          class-name="flex-1"
-        />
-      </div>
     </div>
   </DetailDialog>
 </template>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
index faaed93..18836d3 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
@@ -69,10 +69,13 @@
         :width="120"
         alignment="center"
         data-field="sub_kelompok"
-        caption="Kelompok"
         css-class="custom-table-column"
-        group-index="0"
+        :group-index="0"
+        caption=""
         cell-template="formatText"
+        :calculate-group-value="
+          (rowData: any) => `${rowData.sub_kelompok} (${rowData.nama_sub_kelompok})`
+        "
       />
       <DxColumn
         :width="150"
@@ -562,6 +565,7 @@ const filterData = async (params: any) => {
             return {
               no: ++index,
               sub_kelompok: item.sub_kelompok,
+              nama_sub_kelompok: item.nama_sub_kelompok,
               kode: item.kode,
               jenisGangguan: item.tipe_permasalahan,
               laporan: {
@@ -620,119 +624,125 @@ onMounted(() => {
   if (import.meta.env.DEV) {
     data.value = [
       {
-        id: 0,
-        kode: '01a',
+        nama_sub_kelompok: 'Kelompok sambungan tenaga listrik dan APP ',
+        sub_kelompok: '00',
+        avg_durasi_recovery: 0.0,
+        avg_durasi_response: 0.0,
+        max_durasi_recovery: 0,
+        max_durasi_response: 0,
+        min_durasi_recovery: 0,
+        min_durasi_response: 0,
+        persen_inproses: 0.0,
+        persen_selesai: 0.0,
         tipe_permasalahan: 'Pelebur pembatas putus/rusak',
         total: 0,
-        total_selesai: 0,
-        persen_selesai: 0,
-        total_inproses: 0,
-        persen_inproses: 0,
-        total_durasi_response: 0,
-        avg_durasi_response: 0,
-        min_durasi_response: 0,
-        max_durasi_response: 0,
-        total_dibawah_sla_response: 0,
-        total_diatas_sla_response: 0,
+        kode: '01a',
         total_durasi_recovery: 0,
-        avg_durasi_recovery: 0,
-        min_durasi_recovery: 0,
-        max_durasi_recovery: 0,
+        total_durasi_response: 0,
+        total_diatas_sla_recovery: 0,
+        total_diatas_sla_response: 0,
         total_dibawah_sla_recovery: 0,
-        total_diatas_sla_recovery: 0
+        total_dibawah_sla_response: 0,
+        total_inproses: 0,
+        total_selesai: 0
       },
       {
-        id: 1,
-        kode: '01b',
+        nama_sub_kelompok: 'Kelompok sambungan tenaga listrik dan APP ',
+        sub_kelompok: '00',
+        avg_durasi_recovery: 0.0,
+        avg_durasi_response: 0.0,
+        max_durasi_recovery: 0,
+        max_durasi_response: 0,
+        min_durasi_recovery: 0,
+        min_durasi_response: 0,
+        persen_inproses: 0.0,
+        persen_selesai: 0.0,
         tipe_permasalahan: 'MCB pembatas rusak',
         total: 0,
-        total_selesai: 0,
-        persen_selesai: 0,
-        total_inproses: 0,
-        persen_inproses: 0,
-        total_durasi_response: 0,
-        avg_durasi_response: 0,
-        min_durasi_response: 0,
-        max_durasi_response: 0,
-        total_dibawah_sla_response: 0,
-        total_diatas_sla_response: 0,
+        kode: '01b',
         total_durasi_recovery: 0,
-        avg_durasi_recovery: 0,
-        min_durasi_recovery: 0,
-        max_durasi_recovery: 0,
+        total_durasi_response: 0,
+        total_diatas_sla_recovery: 0,
+        total_diatas_sla_response: 0,
         total_dibawah_sla_recovery: 0,
-        total_diatas_sla_recovery: 0
+        total_dibawah_sla_response: 0,
+        total_inproses: 0,
+        total_selesai: 0
       },
       {
-        id: 2,
-        kode: '01c',
+        nama_sub_kelompok: 'Kelompok sambungan tenaga listrik dan APP ',
+        sub_kelompok: '00',
+        avg_durasi_recovery: 0.0,
+        avg_durasi_response: 0.0,
+        max_durasi_recovery: 0,
+        max_durasi_response: 0,
+        min_durasi_recovery: 0,
+        min_durasi_response: 0,
+        persen_inproses: 0.0,
+        persen_selesai: 0.0,
         tipe_permasalahan: 'RELAY dan / atau CB rusak',
         total: 0,
-        total_selesai: 0,
-        persen_selesai: 0,
-        total_inproses: 0,
-        persen_inproses: 0,
-        total_durasi_response: 0,
-        avg_durasi_response: 0,
-        min_durasi_response: 0,
-        max_durasi_response: 0,
-        total_dibawah_sla_response: 0,
-        total_diatas_sla_response: 0,
+        kode: '01c',
         total_durasi_recovery: 0,
-        avg_durasi_recovery: 0,
-        min_durasi_recovery: 0,
-        max_durasi_recovery: 0,
+        total_durasi_response: 0,
+        total_diatas_sla_recovery: 0,
+        total_diatas_sla_response: 0,
         total_dibawah_sla_recovery: 0,
-        total_diatas_sla_recovery: 0
+        total_dibawah_sla_response: 0,
+        total_inproses: 0,
+        total_selesai: 0
       },
       {
-        id: 3,
-        kode: '01d',
+        nama_sub_kelompok: 'Kelompok sambungan tenaga listrik dan APP ',
+        sub_kelompok: '00',
+        avg_durasi_recovery: 0.0,
+        avg_durasi_response: 0.0,
+        max_durasi_recovery: 0,
+        max_durasi_response: 0,
+        min_durasi_recovery: 0,
+        min_durasi_response: 0,
+        persen_inproses: 0.0,
+        persen_selesai: 0.0,
         tipe_permasalahan: 'Pelebur putus dan LBS jatuh atau rusak',
         total: 0,
-        total_selesai: 0,
-        persen_selesai: 0,
-        total_inproses: 0,
-        persen_inproses: 0,
-        total_durasi_response: 0,
-        avg_durasi_response: 0,
-        min_durasi_response: 0,
-        max_durasi_response: 0,
-        total_dibawah_sla_response: 0,
-        total_diatas_sla_response: 0,
+        kode: '01d',
         total_durasi_recovery: 0,
-        avg_durasi_recovery: 0,
-        min_durasi_recovery: 0,
-        max_durasi_recovery: 0,
+        total_durasi_response: 0,
+        total_diatas_sla_recovery: 0,
+        total_diatas_sla_response: 0,
         total_dibawah_sla_recovery: 0,
-        total_diatas_sla_recovery: 0
+        total_dibawah_sla_response: 0,
+        total_inproses: 0,
+        total_selesai: 0
       },
       {
-        id: 4,
-        kode: '06a',
+        nama_sub_kelompok: 'Kelompok sambungan tenaga listrik dan APP ',
+        sub_kelompok: '00',
+        avg_durasi_recovery: 0.0,
+        avg_durasi_response: 0.0,
+        max_durasi_recovery: 0,
+        max_durasi_response: 0,
+        min_durasi_recovery: 0,
+        min_durasi_response: 0,
+        persen_inproses: 0.0,
+        persen_selesai: 0.0,
         tipe_permasalahan: 'Kubikel APP/komponennya rusak atau gagal bekerja',
         total: 0,
-        total_selesai: 0,
-        persen_selesai: 0,
-        total_inproses: 0,
-        persen_inproses: 0,
-        total_durasi_response: 0,
-        avg_durasi_response: 0,
-        min_durasi_response: 0,
-        max_durasi_response: 0,
-        total_dibawah_sla_response: 0,
-        total_diatas_sla_response: 0,
+        kode: '06a',
         total_durasi_recovery: 0,
-        avg_durasi_recovery: 0,
-        min_durasi_recovery: 0,
-        max_durasi_recovery: 0,
+        total_durasi_response: 0,
+        total_diatas_sla_recovery: 0,
+        total_diatas_sla_response: 0,
         total_dibawah_sla_recovery: 0,
-        total_diatas_sla_recovery: 0
+        total_dibawah_sla_response: 0,
+        total_inproses: 0,
+        total_selesai: 0
       }
     ].map((item: any, index: number) => {
       return {
         no: ++index,
         sub_kelompok: item.sub_kelompok,
+        nama_sub_kelompok: item.nama_sub_kelompok,
         kode: item.kode,
         jenisGangguan: item.tipe_permasalahan,
         laporan: {