Refactor data grid components

src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -358,6 +359,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          ref="dataGridRef"
           :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
@@ -764,21 +766,23 @@ const getDetail = () => {
   // })
 }
 
-const currentDataSelected = ref<any>(null)
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
-  if (currentDataSelected.value === dataSelected.value) {
-    dataSub.value = []
-    dataSubSelected.value = null
-    dialogDetail.value = true
-
-    getDetail()
-  }
+  clearSelection()
+  dataSub.value = []
+  dataSubSelected.value = null
+  dialogDetail.value = true
+  getDetail()
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
-  dataSelected.value = data
-
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
   showDetail()
 }
 

src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -316,10 +317,14 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  console.log(data)
+  clearSelection()
 }
 
 const { onResult, onError, loading, refetch } = useQuery(

src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -338,10 +339,14 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  console.log(data)
+  clearSelection()
 }
 
 const { onResult, onError, loading, refetch } = useQuery(

src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -652,7 +653,7 @@
       </DxSummary>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showDetail()">
+        <p class="text-right cursor-pointer">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -664,13 +665,13 @@
       </template>
 
       <template #formatPercentage="{ data }">
-        <p class="text-right cursor-pointer" @click="showDetail()">
+        <p class="text-right cursor-pointer">
           {{ parseFloat(data.text) ? formatPercentage(data.text) : '0%' }}
         </p>
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDetail()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
@@ -686,6 +687,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          ref="dataGridRef"
           :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
@@ -1092,21 +1094,23 @@ const getDetail = () => {
   // })
 }
 
-const currentDataSelected = ref<any>(null)
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
-  if (currentDataSelected.value === dataSelected.value) {
-    dataSub.value = []
-    dataSubSelected.value = null
-    dialogDetail.value = true
-
-    getDetail()
-  }
+  clearSelection()
+  dataSub.value = []
+  dataSubSelected.value = null
+  dialogDetail.value = true
+  getDetail()
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
-  dataSelected.value = data
-
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
   showDetail()
 }
 

src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -416,10 +417,14 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  console.log(data)
+  clearSelection()
 }
 
 const { onResult, onError, loading, refetch } = useQuery(

src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -316,10 +317,14 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  console.log(data)
+  clearSelection()
 }
 
 const { onResult, onError, loading, refetch } = useQuery(

src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -338,10 +339,14 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  console.log(data)
+  clearSelection()
 }
 
 const { onResult, onError, loading, refetch } = useQuery(

src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -803,10 +804,14 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  console.log(data)
+  clearSelection()
 }
 
 const { onResult, onError, loading, refetch } = useQuery(