Update calculateCellValue to calculate-display-value in multiple files

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

@@ -49,7 +49,7 @@
 
       <DxColumn
         css-class="custom-table-column"
-        :width="100"
+        :width="50"
         alignment="center"
         data-type="number"
         data-field="number"
@@ -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"
@@ -247,17 +247,16 @@
 
       <DxSummary>
         <DxGroupItem
-          summary-type="sum"
           display-format="Total"
-          show-in-column="no"
-          css-class="text-white !text-right"
+          show-in-column="Jenis Keluhan"
+          css-class="!text-left"
           :show-in-group-footer="true"
         />
         <DxGroupItem
           summary-type="sum"
           display-format="{0}"
           column="total"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -265,7 +264,7 @@
           summary-type="sum"
           display-format="{0}"
           column="total_selesai"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -273,7 +272,7 @@
           summary-type="avg"
           display-format="{0}%"
           column="persen_selesai"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatPercentage(e.value)"
         />
@@ -281,7 +280,7 @@
           summary-type="sum"
           display-format="{0}"
           column="total_inproses"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -289,7 +288,7 @@
           summary-type="avg"
           display-format="{0}%"
           column="persen_inproses"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatPercentage(e.value)"
         />
@@ -297,7 +296,7 @@
           summary-type="sum"
           display-format="{0}"
           column="total_durasi_response"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -305,7 +304,7 @@
           summary-type="avg"
           display-format="{0}"
           column="avg_durasi_response"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -313,7 +312,7 @@
           summary-type="min"
           display-format="{0}"
           column="min_durasi_response"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
@@ -321,7 +320,7 @@
           summary-type="max"
           display-format="{0}"
           column="max_durasi_response"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
@@ -329,7 +328,7 @@
           summary-type="sum"
           display-format="{0}"
           column="total_diatas_sla_response"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -337,7 +336,7 @@
           summary-type="sum"
           display-format="{0}"
           column="total_dibawah_sla_response"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -345,7 +344,7 @@
           summary-type="sum"
           display-format="{0}"
           column="total_durasi_recovery"
-          css-class="text-white !text-right"
+          css-class="text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -353,7 +352,7 @@
           summary-type="avg"
           display-format="{0}"
           column="avg_durasi_recovery"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -361,7 +360,7 @@
           summary-type="min"
           display-format="{0}"
           column="min_durasi_recovery"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
@@ -369,7 +368,7 @@
           summary-type="max"
           display-format="{0}"
           column="max_durasi_recovery"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
@@ -377,7 +376,7 @@
           summary-type="sum"
           display-format="{0}"
           column="total_diatas_sla_recovery"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -385,16 +384,15 @@
           summary-type="sum"
           display-format="{0}"
           column="total_dibawah_sla_recovery"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
 
         <DxTotalItem
-          summary-type="sum"
           display-format="Total"
-          show-in-column="no"
-          css-class="text-white !text-right"
+          show-in-column="Jenis Keluhan"
+          css-class="text-white !text-left"
         />
         <DxTotalItem
           summary-type="sum"
@@ -518,13 +516,13 @@
       </DxSummary>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right">
+        <p class="cursor-pointer !text-right" @click="setAgreementDialog(false, 0)">
           {{ parseInt(data.text) ? formatWaktu(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 == '%'
@@ -535,7 +533,43 @@
         </p>
       </template>
 
-      <template #formatText="{ 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 #formatText="{ data }" @click="setAgreementDialog(false, 0)">
         <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
@@ -596,7 +630,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -620,7 +654,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_response"
             caption="Dalam Proses Bidang"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -629,7 +663,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_recovery"
             caption="Selesai Bidang Unit"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -656,7 +690,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="status_akhir"
             caption="Status"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -710,7 +744,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_ulp"
             caption="Rayon"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -719,7 +753,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="uraian"
             caption="Uraian"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -728,7 +762,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="respon_pelanggan"
             caption="Respon Pelanggan"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -772,7 +806,7 @@
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Dalam Proses Bidang:</h3>
           <InputText
             :readonly="true"
-            :value="dataSubSelected?.dalam_proses_bidang"
+            :value="dataSubSelected?.waktu_response"
             class-name="flex-1"
           />
         </div>
@@ -781,7 +815,7 @@
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Selesai Bidang Unit:</h3>
           <InputText
             :readonly="true"
-            :value="dataSubSelected?.selesai_bidang_unit"
+            :value="dataSubSelected?.waktu_recovery"
             class-name="flex-1"
           />
         </div>
@@ -857,7 +891,7 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Rayon:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.rayon" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.nama_ulp" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -875,7 +909,7 @@
           <InputText
             :readonly="true"
             type="textarea"
-            :value="dataSubSelected?.response_pelanggan"
+            :value="dataSubSelected?.respon_pelanggan"
             class-name="flex-1"
           />
         </div>
@@ -932,6 +966,13 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const agreeToShowDialog = ref(false)
+const progressSelected = ref(0)
+
+const setAgreementDialog = (status: boolean, progress: number) => {
+  agreeToShowDialog.value = status
+  progressSelected.value = progress
+}
 
 const filterData = async (params: any) => {
   const dateValue = params.periode.split(' s/d ')
@@ -986,7 +1027,13 @@ const getDetail = async () => {
       : new Date().toISOString().slice(0, 10),
     idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
     idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+    namaRegional: '',
+    isSelesai: progressSelected.value,
+    media: '',
+    tanggal: '',
+    namaIssuetype: '',
+    namaSubissuetype: ''
   }
 
   loadingSubData.value = true
@@ -1014,8 +1061,10 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
-  getDetail()
+  if (agreeToShowDialog.value) {
+    dialogDetail.value = true
+    getDetail()
+  }
 }
 
 const onExporting = (e: any) => {