Refactor table column rendering and add resetData function

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

@@ -63,7 +63,7 @@
         caption="UID"
         css-class="custom-table-column"
         group-index="0"
-        v-if="filters.groupBy"
+        v-if="isGroupBy"
       />
       <DxColumn
         :width="150"
@@ -89,7 +89,7 @@
           data-type="number"
           caption="Total"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberLaporanTotal"
         />
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn
@@ -99,7 +99,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlSelesai"
           />
           <DxColumn
             :width="70"
@@ -119,7 +119,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlBelumSelesai"
           />
           <DxColumn
             :width="70"
@@ -498,13 +498,13 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
+        <p class="text-left cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{ 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 == '%'
@@ -515,7 +515,43 @@
         </p>
       </template>
 
-      <template #formatTime="{ data }">
+      <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 == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatTime="{ data }" @click="setAgreementDialog(false, 0)">
         <p class="!text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
@@ -908,6 +944,14 @@ const reportMeta = ref({
   periode: '',
   groupBy: false
 })
+const agreeToShowDialog = ref(false)
+const progressSelected = ref(0)
+const isGroupBy = ref(false)
+
+const setAgreementDialog = (status: boolean, progress: number) => {
+  agreeToShowDialog.value = status
+  progressSelected.value = progress
+}
 
 const getDetail = async () => {
   const dateValue = filters.value?.periode.split(' s/d ')
@@ -927,7 +971,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: ''
   }
 
@@ -957,8 +1001,10 @@ const showDetail = () => {
   clearSelection()
   dataSub.value = []
   dataSubSelected.value = null
-  dialogDetail.value = true
-  getDetail()
+  if (agreeToShowDialog.value) {
+    dialogDetail.value = true
+    getDetail()
+  }
 }
 
 const closeDialog = () => {
@@ -1001,7 +1047,13 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   }
 }
 
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
 const filterData = async (params: any) => {
+  resetData()
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
 
@@ -1020,6 +1072,7 @@ const filterData = async (params: any) => {
   loadingData.value = true
   await requestGraphQl(queries.gangguan.rekap.gangguanPerRegu, query)
     .then((result) => {
+      isGroupBy.value = params.groupBy
       if (result.data.data != undefined) {
         data.value = result.data.data.rekapitulasiGangguanPerRegu
       } else {