Refactor table column rendering and add resetData function

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

@@ -91,7 +91,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
@@ -101,7 +101,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlSelesai"
           />
           <DxColumn
             :width="70"
@@ -121,7 +121,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlBelumSelesai"
           />
           <DxColumn
             :width="70"
@@ -256,13 +256,49 @@
       </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 #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 == '%'
@@ -274,7 +310,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>
@@ -815,6 +851,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 closeDialog = () => {
   dialogDetail.value = false
@@ -838,7 +881,13 @@ const onExportingDetail = (e: 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
 
@@ -888,7 +937,8 @@ const getDetail = async () => {
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,
-    idEquipment: ref?.kode ? parseInt(ref.kode) : 0
+    idEquipment: ref?.kode ? parseInt(ref.kode) : 0,
+    isSelesai: progressSelected.value
   }
 
   loadingSubData.value = true
@@ -918,9 +968,11 @@ const showDetail = () => {
   clearSelection()
   dataSub.value = []
   dataSubSelected.value = null
+  if (agreeToShowDialog.value) {
     dialogDetail.value = true
     getDetail()
   }
+}
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {

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

@@ -85,7 +85,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
@@ -95,7 +95,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlSelesai"
           />
           <DxColumn
             :width="70"
@@ -115,7 +115,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlBelumSelesai"
           />
           <DxColumn
             :width="70"
@@ -488,13 +488,49 @@
       </DxSummary>
 
       <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 == '%'
+                ? 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 == '%'
@@ -506,7 +542,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>
@@ -898,6 +934,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 ')
@@ -917,7 +960,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: ''
   }
 
@@ -947,9 +990,11 @@ const showDetail = () => {
   clearSelection()
   dataSub.value = []
   dataSubSelected.value = null
+  if (agreeToShowDialog.value) {
     dialogDetail.value = true
     getDetail()
   }
+}
 
 const closeDialog = () => {
   dialogDetail.value = false
@@ -986,7 +1031,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
 

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,9 +1001,11 @@ const showDetail = () => {
   clearSelection()
   dataSub.value = []
   dataSubSelected.value = null
+  if (agreeToShowDialog.value) {
     dialogDetail.value = true
     getDetail()
   }
+}
 
 const closeDialog = () => {
   dialogDetail.value = false
@@ -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 {

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

@@ -64,7 +64,7 @@
         caption="Nama UID"
         css-class="custom-table-column"
         group-index="0"
-        v-if="filters.groupBy"
+        v-if="isGroupBy"
       />
       <DxColumn
         :width="170"
@@ -81,7 +81,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
@@ -91,7 +91,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlSelesai"
           />
           <DxColumn
             :width="70"
@@ -111,7 +111,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlBelumSelesai"
           />
           <DxColumn
             :width="70"
@@ -246,13 +246,49 @@
       </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 #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 == '%'
@@ -264,7 +300,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,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 ')
@@ -678,7 +722,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: ''
   }
 
@@ -708,9 +752,11 @@ const showDetail = () => {
   clearSelection()
   dataSub.value = []
   dataSubSelected.value = null
+  if (agreeToShowDialog.value) {
     dialogDetail.value = true
     getDetail()
   }
+}
 
 const closeDialog = () => {
   dialogDetail.value = false
@@ -752,7 +798,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
 
@@ -771,6 +823,7 @@ const filterData = async (params: any) => {
   loadingData.value = true
   await requestGraphQl(queries.gangguan.rekap.gangguanPerTanggal, query)
     .then((result) => {
+      isGroupBy.value = params.groupBy
       if (result.data.data != undefined) {
         data.value = result.data.data.rekapitulasiGangguanPerTanggal
       } else {

src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue

@@ -64,7 +64,7 @@
         css-class="custom-table-column"
         :group-index="0"
         name="NamaUID"
-        v-if="filters.groupBy"
+        v-if="isGroupBy"
       />
       <DxColumn
         :width="120"
@@ -830,13 +830,20 @@ const loadingData = ref(false)
 const loadingSubData = ref(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 resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
 const filterData = async (params: any) => {
+  resetData()
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
 
@@ -856,6 +863,7 @@ const filterData = async (params: any) => {
   await requestGraphQl(queries.keluhan.rekap.keluhanPenyelesaianPerFungsiBIidang, query)
     .then((result) => {
       if (result.data.data != undefined) {
+        isGroupBy.value = params.groupBy
         if (filters.value.groupBy) {
           data.value = [...result.data.data.rekapitulasiKeluhanPenyelesaianPerFungsiBidang]
             .sort((a, b) => a.nama_uid.localeCompare(b.nama_uid))