Merge branch 'dev' of https://github.com/dikstub-rssa/simrs-fe into feat/user

app/components/pub/base/data-table/data-table.vue

@@ -1,19 +1,39 @@
 <script setup lang="ts">
 import type { DataTableLoader } from './type'
+import type { Col, RecStrFuncComponent, RecStrFuncUnknown, Th } from '~/components/pub/custom-ui/data/types'
 import { Info } from 'lucide-vue-next'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~/components/pub/ui/table'
 
-defineProps<{
+const props = defineProps<{
+  skeletonSize?: number
   rows: unknown[]
-  cols: any[]
-  header: any[]
+  cols: Col[]
+  header: Th[][]
   keys: string[]
-  funcParsed: Record<string, (row: any) => any>
-  funcHtml: Record<string, (row: any) => string>
-  funcComponent: Record<string, (row: any, idx: number) => any>
+  funcParsed: RecStrFuncUnknown
+  funcHtml: RecStrFuncUnknown
+  funcComponent: RecStrFuncComponent
 }>()
 
+const getSkeletonSize = computed(() => {
+  return props.skeletonSize || 5
+})
 const loader = inject('table_data_loader') as DataTableLoader
+
+function handleActionCellClick(event: Event, _cellRef: string) {
+  // Prevent event if clicked directly on the button/dropdown
+  const target = event.target as HTMLElement
+  if (target.closest('button') || target.closest('[role="button"]')) {
+    return
+  }
+
+  // Find the dropdown trigger button and click it
+  const cell = event.currentTarget as HTMLElement
+  const triggerButton = cell.querySelector('button[data-state]') || cell.querySelector('button')
+  if (triggerButton) {
+    ;(triggerButton as HTMLButtonElement).click()
+  }
+}
 </script>
 
 <template>
@@ -33,7 +53,7 @@ const loader = inject('table_data_loader') as DataTableLoader
 
     <TableBody v-if="loader.isTableLoading">
       <!-- Loading state with 5 skeleton rows -->
-      <TableRow v-for="n in 5" :key="`skeleton-${n}`">
+      <TableRow v-for="n in getSkeletonSize" :key="`skeleton-${n}`">
         <TableCell v-for="(key, cellIndex) in keys" :key="`cell-skel-${n}-${cellIndex}`" class="border">
           <Skeleton class="h-6 w-full animate-pulse bg-gray-100 text-muted-foreground" />
         </TableCell>
@@ -51,20 +71,33 @@ const loader = inject('table_data_loader') as DataTableLoader
     </TableBody>
     <TableBody v-else>
       <TableRow v-for="(row, rowIndex) in rows" :key="`row-${rowIndex}`">
-        <TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`" class="border">
+        <TableCell
+          v-for="(key, cellIndex) in keys"
+          :key="`cell-${rowIndex}-${cellIndex}`"
+          class="border"
+          :class="{ 'cursor-pointer': key === 'action' && funcComponent[key] }"
+          @click="
+            key === 'action' && funcComponent[key]
+              ? handleActionCellClick($event, `cell-${rowIndex}-${cellIndex}`)
+              : null
+          "
+        >
           <!-- If funcComponent has a renderer -->
           <component
-            :is="funcComponent[key](row, rowIndex).component"
+            :is="funcComponent[key]?.(row, rowIndex).component"
             v-if="funcComponent[key]"
-            v-bind="funcComponent[key](row, rowIndex)"
+            :ref="key === 'action' ? `actionComponent-${rowIndex}-${cellIndex}` : undefined"
+            :rec="row"
+            :idx="rowIndex"
+            v-bind="funcComponent[key]?.(row, rowIndex).props"
           />
           <!-- If funcParsed or funcHtml returns a value -->
           <template v-else>
             <!-- Use v-html for funcHtml to render HTML content -->
-            <div v-if="funcHtml[key]" v-html="funcHtml[key]?.(row)"></div>
+            <div v-if="funcHtml[key]" v-html="funcHtml[key]?.(row, rowIndex)"></div>
             <!-- Use normal interpolation for funcParsed and regular data -->
             <template v-else>
-              {{ funcParsed[key]?.(row) ?? (row as any)[key] }}
+              {{ funcParsed[key]?.(row, rowIndex) ?? (row as any)[key] }}
             </template>
           </template>
         </TableCell>