Refactor data grid components

src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue

@@ -3,6 +3,7 @@
     <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan Total</h1>
   </div>
   <DxDataGrid
+    ref="dataGridRef"
     :allow-column-reordering="true"
     class="max-h-[calc(100vh-140px)] mb-10"
     :show-column-lines="true"
@@ -214,7 +215,7 @@
     </DxColumn>
 
     <template #formatNumber="{ data }">
-      <p class="text-right cursor-pointer" @click="showDetail()">
+      <p class="text-right cursor-pointer">
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -226,18 +227,18 @@
     </template>
 
     <template #formatPercentage="{ data }">
-      <p class="text-right cursor-pointer" @click="showDetail()">
+      <p class="text-right cursor-pointer">
         {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
       </p>
     </template>
 
     <template #formatText="{ data }">
-      <p class="text-left cursor-pointer" @click="showDetail()">
+      <p class="text-left cursor-pointer">
         {{ data.text }}
       </p>
     </template>
 
-    <template #formatTime="{ data }" @click="showDetail()">
+    <template #formatTime="{ data }">
       <p class="!text-right">
         {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
       </p>
@@ -392,7 +393,13 @@ const dataSub = ref<any[]>([])
 const dataSelected = ref<any>({})
 const dataSubSelected = ref<any>({})
 const dialogDetail = ref(false)
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
+  clearSelection()
   dialogDetail.value = true
 }
 const closeDialog = () => {
@@ -429,10 +436,10 @@ const onExporting = (e: any) => {
   }
 }
 
-const currentDataSelected = ref<any>(null)
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSelected.value = selectedRowsData[0]
-  currentDataSelected.value = selectedRowsData[0]
-  console.log(data)
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  showDetail()
 }
 </script>