From 3612a6cf66f6d7479aa1ea0288d5a70118d7ebce Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Sun, 31 Mar 2024 00:17:31 +0700
Subject: [PATCH] Update table cell templates in RGangguan_RatingPerPosko.vue

---
 .../Rekap/RGangguan_RatingPerPosko.vue        | 72 +++++++++++++++---
 .../Rekap/RGangguan_RatingPerRegu.vue         | 74 ++++++++++++++++---
 2 files changed, 123 insertions(+), 23 deletions(-)

diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
index 36d0a6f..9dbbdba 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
@@ -98,7 +98,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumberLaporanJmlSelesai"
+            cell-template="formatNumberLaporanJmlBelumSelesai"
           />
           <DxColumn
             alignment="center"
@@ -116,7 +116,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumberLaporanJmlBelumSelesai"
+            cell-template="formatNumberLaporanJmlSelesai"
           />
           <DxColumn
             alignment="center"
@@ -209,19 +209,55 @@
       </DxColumn>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
+        <p class="text-left cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatPercentage="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanTotal="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlBelumSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -233,7 +269,7 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right cursor-pointer">
+        <p class="!text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -659,6 +695,13 @@ const reportMeta = ref({
   up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
   periode: ''
 })
+const agreeToShowDialog = ref(false)
+const progressSelected = ref(0)
+
+const setAgreementDialog = (status: boolean, progress: number) => {
+  agreeToShowDialog.value = status
+  progressSelected.value = progress
+}
 
 const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
@@ -678,7 +721,7 @@ const getDetail = async () => {
     idUlp: ref?.id_ulp ? ref?.id_ulp : 0,
     namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
     media: ref?.media ? ref?.media : '',
-    isSelesai: 0,
+    isSelesai: progressSelected.value,
     tanggal: '',
     namaIssuetype: '',
     namaSubissuetype: ''
@@ -710,8 +753,10 @@ const showDetail = () => {
   clearSelection()
   dataSub.value = []
   dataSubSelected.value = null
-  dialogDetail.value = true
-  getDetail()
+  if (agreeToShowDialog.value) {
+    dialogDetail.value = true
+    getDetail()
+  }
 }
 const closeDialog = () => {
   dialogDetail.value = false
@@ -738,18 +783,23 @@ const onExportingDetail = (e: any) => {
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
+    showDetail()
   }
-  showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSubSelected.value = selectedRowsData[0]
   }
-  console.log(dataSubSelected)
+}
+
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
 }
 
 const filterData = async (params: any) => {
+  resetData()
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
index f284c90..5aae0ea 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
@@ -77,7 +77,7 @@
           data-type="number"
           caption="Total"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberLaporanTotal"
         />
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
           <DxColumn
@@ -86,7 +86,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlBelumSelesai"
           />
           <DxColumn
             alignment="center"
@@ -104,7 +104,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlSelesai"
           />
           <DxColumn
             alignment="center"
@@ -199,19 +199,55 @@
       </DxColumn>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
+        <p class="text-left cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatPercentage="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{ parseFloat(data.text) ? formatPercentage(data.text) : '0%' }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanTotal="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlBelumSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -223,7 +259,7 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right cursor-pointer">
+        <p class="!text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -650,6 +686,13 @@ const reportMeta = ref({
   posko: { id: 0, name: 'Semua Posko' },
   periode: ''
 })
+const agreeToShowDialog = ref(false)
+const progressSelected = ref(0)
+
+const setAgreementDialog = (status: boolean, progress: number) => {
+  agreeToShowDialog.value = status
+  progressSelected.value = progress
+}
 
 const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
@@ -669,7 +712,7 @@ const getDetail = async () => {
     idUlp: ref?.id_ulp ? ref?.id_ulp : 0,
     namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
     media: ref?.media ? ref?.media : '',
-    isSelesai: 0,
+    isSelesai: progressSelected.value,
     tanggal: '',
     namaIssuetype: '',
     namaSubissuetype: ''
@@ -703,8 +746,10 @@ const showDetail = () => {
   clearSelection()
   dataSub.value = []
   dataSubSelected.value = null
-  dialogDetail.value = true
-  getDetail()
+  if (agreeToShowDialog.value) {
+    dialogDetail.value = true
+    getDetail()
+  }
 }
 
 const closeDialog = () => {
@@ -732,18 +777,23 @@ const onExportingDetail = (e: any) => {
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
+    showDetail()
   }
-  showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSubSelected.value = selectedRowsData[0]
   }
-  console.log(dataSubSelected)
+}
+
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
 }
 
 const filterData = async (params: any) => {
+  resetData()
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params