adding cell action

src/assets/css/style.css

@@ -1124,6 +1124,10 @@ select {
   margin-top: 0.75rem;
 }
 
+.mt-3\.5 {
+  margin-top: 0.875rem;
+}
+
 .mt-4 {
   margin-top: 1rem;
 }
@@ -1136,10 +1140,6 @@ select {
   margin-top: 1.5rem;
 }
 
-.mt-3\.5 {
-  margin-top: 0.875rem;
-}
-
 .line-clamp-1 {
   overflow: hidden;
   display: -webkit-box;
@@ -1231,6 +1231,10 @@ select {
   height: calc(100% - 64px);
 }
 
+.h-\[calc\(90vh-24px\)\] {
+  height: calc(90vh - 24px);
+}
+
 .h-fit {
   height: -moz-fit-content;
   height: fit-content;
@@ -1244,18 +1248,6 @@ select {
   height: 80vh;
 }
 
-.h-screen {
-  height: 100vh;
-}
-
-.h-\[90vh\] {
-  height: 90vh;
-}
-
-.h-\[calc\(90vh-24px\)\] {
-  height: calc(90vh - 24px);
-}
-
 .max-h-0 {
   max-height: 0px;
 }

src/components/Pages/Gangguan/Daftar/Daftar_1.vue

@@ -12,7 +12,9 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
 
             <DxColumn :width="40" alignment="center" data-field="number" data-type="number" caption="No" />
-            <DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan" />
+            <DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan"
+                cell-template="no-laporan" />
+
             <DxColumn :width="150" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan" />
             <DxColumn :width="150" alignment="center" data-field="tanggal_laporan" caption="Tgl Lapor" />
             <DxColumn :width="150" alignment="center" data-field="tanggal_dialihkan" caption="Tgl Dialihkan" />
@@ -31,6 +33,12 @@
             <DxColumn :width="150" alignment="center" data-field="sumber_laporan" caption="Sumber Lapor" />
             <DxColumn :width="170" alignment="center" data-field="posko" caption="Posko" />
 
+            <template #no-laporan="{ data }">
+                <span class="cursor-pointer" @click="showData(data.text)">
+                    {{ data.text }}
+                </span>
+            </template>
+
         </DxDataGrid>
     </div>
 </template>
@@ -45,8 +53,10 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import type { Data1 } from '@/types/gangguan'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import { readDataJson, writeDataJson } from '@/utils/storage'
+import { writeDataJson } from '@/utils/storage'
+import { useDialogStore } from '@/stores/dialog'
 
+const dialog = useDialogStore()
 const data = ref<Data1[]>([])
 
 const onExporting = (e: any) => {
@@ -108,7 +118,15 @@ const createDummy = () => {
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
-};
+}
+
+const showData = (data: string) => {
+    dialog.type = 'success'
+    dialog.title = 'Detail Data'
+    dialog.content = data
+    dialog.confirmText = 'Tutup'
+    dialog.open = true
+}
 
 onMounted(() => {
     createDummy()