Refactor table cell templates in RGangguan_AlihPosko.vue

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

@@ -79,7 +79,7 @@
         data-field="posko_in"
         caption="Posko IN"
         css-class="custom-table-column"
-        cell-template="formatNumber"
+        cell-template="formatNumberPoskoIn"
       />
       <DxColumn
         :width="180"
@@ -87,7 +87,7 @@
         data-field="posko_out"
         caption="Posko OUT"
         css-class="custom-table-column"
-        cell-template="formatNumber"
+        cell-template="formatNumberPoskoOut"
       />
 
       <DxSummary>
@@ -96,6 +96,7 @@
           column="number"
           display-format="Total"
           css-class="!text-left"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="true"
@@ -103,6 +104,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="true"
@@ -110,17 +112,42 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
       </DxSummary>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
+        <p class="text-left cursor-pointer" @click="setPoskoSelected('')">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="setPoskoSelected('')">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberPoskoIn="{ data }">
+        <p class="text-right cursor-pointer" @click="setPoskoSelected('lama')">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberPoskoOut="{ data }">
+        <p class="text-right cursor-pointer" @click="setPoskoSelected('baru')">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -522,13 +549,17 @@ const reportMeta = ref({
   posko: { id: 0, name: 'Semua Posko' },
   periode: ''
 })
+const poskoSelected = ref('')
+const setPoskoSelected = (value: string) => {
+  poskoSelected.value = value
+}
 
 const getDetail = async () => {
   loadingSubData.value = true
   const dateValue = filters.value.periode.split(' s/d ')
   const ref = dataSelected.value
 
-  const query = {
+  var query: any = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -537,8 +568,8 @@ const getDetail = async () => {
       : new Date().toISOString().slice(0, 10),
     idUid: ref.id_uid,
     idUp3: ref.id_up3,
-    idPoskoLama: ref.id_posko_lama,
-    idPoskoBaru: ref.id_posko_baru
+    idPoskoLama: poskoSelected.value == 'baru' ? 0 : ref.id_posko_baru,
+    idPoskoBaru: poskoSelected.value == 'lama' ? 0 : ref.id_posko_lama
   }
 
   await requestGraphQl(queries.gangguan.rekap.gangguanAlihPoskoDetail, query)
@@ -567,8 +598,9 @@ const showDetail = () => {
   clearSelection()
   dataSub.value = []
   dataSubSelected.value = null
-  // dialogDetail.value = true
-  getDetail()
+  if (poskoSelected.value != '') {
+    getDetail()
+  }
 }
 
 const closeDialog = () => {