Refactor code to handle optional properties in RGangguan_ALL.vue, RGangguan_PerPosko.vue, RGangguan_BerdasarMedia.vue, RGangguan_AlihPosko.vue, RGangguan_JenisGangguanSE.vue, and RGangguan_RatingPerRegu.vue

src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue

@@ -1085,9 +1085,13 @@ const getDetail = () => {
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    posko: ref.id_posko,
+    posko: ref?.id_posko ? ref?.id_posko : 0,
-    idUid: ref.id_uid,
+    idUid: ref?.id_uid ? ref?.id_uid : 0,
-    idUp3: ref.id_up3
+    idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
+    idRegu: ref?.id_regu ? ref?.id_regu : 0,
+    idUlp: ref?.id_ulp ? ref?.id_ulp : 0,
+    namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
+    media: ref?.media ? ref?.media : ''
   }
 
   const { onResult, onError, loading, refetch } = useQuery(

src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue

@@ -301,7 +301,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="media"
             caption="Sumber Lapor"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -456,7 +456,7 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Sumber Lapor:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.media" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -543,7 +543,7 @@ const getDetail = () => {
   }
 
   const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.rekap.gangguanAllDetail,
+    queries.gangguan.rekap.gangguanAlihPoskoDetail,
     query
   )
 

src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue

@@ -522,9 +522,13 @@ const getDetail = () => {
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    posko: ref.id_posko,
+    posko: ref?.id_posko ? ref?.id_posko : 0,
-    idUid: ref.id_uid,
+    idUid: ref?.id_uid ? ref?.id_uid : 0,
-    idUp3: ref.id_up3
+    idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
+    idRegu: ref?.id_regu ? ref?.id_regu : 0,
+    idUlp: ref?.id_ulp ? ref?.id_ulp : 0,
+    namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
+    media: ref?.media ? ref?.media : ''
   }
 
   const { onResult, onError, loading, refetch } = useQuery(

src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue

@@ -546,7 +546,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="idpel_nometer"
+            data-field="id_pelnomormeter"
             caption="IDPEL/NO METER"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -700,7 +700,11 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">IDPEL/NO METER:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.idpel_nometer" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.id_pelnomormeter"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -883,11 +887,12 @@ const getDetail = () => {
       : new Date().toISOString().slice(0, 10),
     posko: ref.id_posko,
     idUid: ref.id_uid,
-    idUp3: ref.id_up3
+    idUp3: ref.id_up3,
+    idEquiment: ref?.id_fasilitas ? ref.id_fasilitas : 0
   }
 
   const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.rekap.gangguanAllDetail,
+    queries.gangguan.rekap.jenisGangguanSE004Detail,
     query
   )
 

src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue

@@ -898,9 +898,13 @@ const getDetail = () => {
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    posko: ref.id_posko,
+    posko: ref?.id_posko ? ref?.id_posko : 0,
-    idUid: ref.id_uid,
+    idUid: ref?.id_uid ? ref?.id_uid : 0,
-    idUp3: ref.id_up3
+    idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
+    idRegu: ref?.id_regu ? ref?.id_regu : 0,
+    idUlp: ref?.id_ulp ? ref?.id_ulp : 0,
+    namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
+    media: ref?.media ? ref?.media : ''
   }
 
   const { onResult, onError, loading, refetch } = useQuery(

src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue

@@ -296,7 +296,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="rating"
+            data-field="nilai_rating"
             caption="Rating"
             css-class="custom-table-column"
             cell-template="formatRating"
@@ -451,7 +451,7 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Rating:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.rating" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.nilai_rating" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -629,9 +629,13 @@ const getDetail = () => {
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    posko: ref.id_posko,
+    posko: ref?.id_posko ? ref?.id_posko : 0,
-    idUid: ref.id_uid,
+    idUid: ref?.id_uid ? ref?.id_uid : 0,
-    idUp3: ref.id_up3
+    idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
+    idRegu: ref?.id_regu ? ref?.id_regu : 0,
+    idUlp: ref?.id_ulp ? ref?.id_ulp : 0,
+    namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
+    media: ref?.media ? ref?.media : ''
   }
 
   const { onResult, onError, loading, refetch } = useQuery(

src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue

@@ -288,7 +288,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="rating"
+            data-field="nilai_rating"
             caption="Rating"
             css-class="custom-table-column"
             cell-template="formatRating"
@@ -443,7 +443,7 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Rating:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.rating" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.nilai_rating" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -621,9 +621,13 @@ const getDetail = () => {
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    posko: ref.id_posko,
+    posko: ref?.id_posko ? ref?.id_posko : 0,
-    idUid: ref.id_uid,
+    idUid: ref?.id_uid ? ref?.id_uid : 0,
-    idUp3: ref.id_up3
+    idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
+    idRegu: ref?.id_regu ? ref?.id_regu : 0,
+    idUlp: ref?.id_ulp ? ref?.id_ulp : 0,
+    namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
+    media: ref?.media ? ref?.media : ''
   }
 
   const { onResult, onError, loading, refetch } = useQuery(

src/utils/api/api.graphql.ts

@@ -938,6 +938,53 @@ export const queries = {
           }
         }
       `,
+      jenisGangguanSE004Detail: gql`
+        query detailGangguanJenisGangguanSE004(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $idEquipment: Int!
+        ) {
+          detailGangguanJenisGangguanSE004(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+            idEquipment: $idEquipment
+          ) {
+            id
+            nama_regional
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            id_posko
+            nama_posko
+            no_laporan
+            waktu_lapor
+            waktu_response
+            waktu_recovery
+            durasi_response_time
+            durasi_recovery_time
+            status_akhir
+            id_pelnomormeter
+            id_nomormeter
+            nama_pelapor
+            alamat_pelapor
+            no_telp_pelapor
+            keterangan_pelapor
+            tindakan
+            penyebab
+            is_masih_proses
+            kwh_lost
+          }
+        }
+      `,
       jenisGangguan: gql`
         query rekapitulasiPerJenisGangguan(
           $dateFrom: Date!
@@ -1148,12 +1195,16 @@ export const queries = {
         }
       `,
       gangguanAllDetail: gql`
-        query daftarGangguanDiselesaikanMobileAPKT(
+        query detailGangguan(
           $dateFrom: Date!
           $dateTo: Date!
           $posko: Int!
           $idUid: Int!
           $idUp3: Int!
+          $idRegu: Int!
+          $media: String!
+          $idUlp: Int!
+          $namaRegional: String!
         ) {
           detailGangguan(
             dateFrom: $dateFrom
@@ -1161,8 +1212,21 @@ export const queries = {
             posko: $posko
             idUid: $idUid
             idUp3: $idUp3
+            idRegu: $idRegu
+            idUlp: $idUlp
+            namaRegional: $namaRegional
+            media: $media
           ) {
             id
+            nama_regional
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            id_posko
+            nama_posko
             no_laporan
             pembuat_laporan
             waktu_lapor
@@ -1188,6 +1252,7 @@ export const queries = {
             tindakan
             kode_gangguan
             jenis_gangguan
+            nilai_rating
           }
         }
       `,
@@ -1216,6 +1281,59 @@ export const queries = {
             posko_out
           }
         }
+      `,
+      gangguanAlihPoskoDetail: gql`
+        query detailGangguanAlihPosko(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          detailGangguanAlihPosko(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            id
+            nama_regional
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            id_posko
+            nama_posko
+            no_laporan
+            pembuat_laporan
+            waktu_lapor
+            waktu_response
+            waktu_recovery
+            durasi_dispatch_time
+            durasi_response_time
+            durasi_recovery_time
+            status_akhir
+            is_marking
+            referensi_marking
+            idpel_nometer
+            nama_pelapor
+            alamat_pelapor
+            no_telp_pelapor
+            keterangan_pelapor
+            media
+            jarak_closing
+            dispatch_oleh
+            diselesaikan_oleh
+            penyebab
+            tindakan
+            kode_gangguan
+            jenis_gangguan
+            nilai_rating
+          }
+        }
       `
     },
     daftar: {