Refactor code to improve readability and fix bugs in Gangguan and Monalisa components

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

@@ -325,7 +325,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="pembuat_laporan"
             caption="Nama Petugas"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -333,7 +333,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_posko_lama"
             caption="Posko Asal"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -341,7 +341,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_posko_baru"
             caption="Posko Tujuan"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -477,17 +477,29 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Nama Petugas:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.pembuat_laporan"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Posko Asal:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.nama_posko_lama"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Posko Tujuan:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.nama_posko_baru"
+            class-name="flex-1"
+          />
         </div>
       </div>
     </div>

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

@@ -334,13 +334,13 @@
       </DxColumn>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
+        <p class="text-left" @click="setAgreementDialog(data.column.caption)">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(data.column.caption)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -352,13 +352,13 @@
       </template>
 
       <template #formatPercentage="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right" @click="setAgreementDialog(data.column.caption)">
           {{ parseFloat(data.text) ? formatPercentage(data.text) : '0%' }}
         </p>
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right cursor-pointer">
+        <p class="!text-right" @click="setAgreementDialog(data.column.caption)">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -796,6 +796,8 @@ const dataSubSelected = ref<any>()
 const dialogDetail = ref(false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const progressSelected = ref(0)
+const agreeToShowDialog = ref(false)
 const reportMeta = ref({
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
   up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
@@ -803,6 +805,21 @@ const reportMeta = ref({
   periode: ''
 })
 
+const setAgreementDialog = (column: string) => {
+  if (column == 'd=(e+g)' || column == 'e' || column == 'g') {
+    agreeToShowDialog.value = true
+    if (column == 'd=(e+g)') {
+      progressSelected.value = 0
+    } else if (column == 'e') {
+      progressSelected.value = 1
+    } else {
+      progressSelected.value = 2
+    }
+  } else {
+    agreeToShowDialog.value = false
+  }
+}
+
 const getDetail = async () => {
   loadingSubData.value = true
   const dateValue = filters.value.periode.split(' s/d ')
@@ -819,7 +836,8 @@ const getDetail = async () => {
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,
-    idRegu: ref.id_regu
+    idRegu: ref?.id_regu ? ref.id_regu : 0,
+    isSelesai: progressSelected.value
   }
 
   await requestGraphQl(queries.gangguan.rekap.gangguanDiselesaikanMobileAPKTDetail, query)
@@ -846,10 +864,11 @@ const clearSelection = () => {
 }
 const showDetail = () => {
   clearSelection()
-  dataSub.value = []
-  dataSubSelected.value = null
-  // dialogDetail.value = true
-  getDetail()
+  if (agreeToShowDialog.value) {
+    dataSub.value = []
+    dataSubSelected.value = null
+    getDetail()
+  }
 }
 
 const closeDialog = () => {