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

app/components/pub/my-ui/data-table/data-table.vue

@@ -1,21 +1,10 @@
 <script setup lang="ts">
-import type { DataTableLoader } from './type'
-import type { Col, RecStrFuncComponent, RecStrFuncUnknown, Th } from '~/components/pub/my-ui/data/types'
+import type { DataTableLoader } from '~/components/pub/my-ui/data/types'
+import type { Config } from './index'
 import { Info } from 'lucide-vue-next'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~/components/pub/ui/table'
 
-const props = defineProps<{
-  skeletonSize?: number
-  rows: unknown[]
-  cols: Col[]
-  header: Th[][]
-  keys: string[]
-  funcParsed?: RecStrFuncUnknown
-  funcHtml?: RecStrFuncUnknown
-  funcComponent?: RecStrFuncComponent
-  selectMode?: 'single' | 'multiple'
-  modelValue?: any[] | any
-}>()
+const props = defineProps<Config & { rows: unknown[] }>()
 
 const emit = defineEmits<{
   (e: 'update:modelValue', val: any[] | any): void
@@ -62,10 +51,10 @@ function handleActionCellClick(event: Event, _cellRef: string) {
 
 <template>
   <Table>
-    <TableHeader class="bg-gray-50 dark:bg-gray-800">
+    <TableHeader v-if="headers" class="bg-gray-50 dark:bg-gray-800">
       <TableRow>
         <TableHead
-          v-for="(h, idx) in header[0]"
+          v-for="(h, idx) in headers[0]"
           :key="`head-${idx}`"
           class="border"
           :style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }"
@@ -75,7 +64,7 @@ function handleActionCellClick(event: Event, _cellRef: string) {
       </TableRow>
     </TableHeader>
 
-    <TableBody v-if="loader.isTableLoading">
+    <TableBody v-if="loader?.isTableLoading">
       <!-- Loading state with 5 skeleton rows -->
       <TableRow v-for="n in getSkeletonSize" :key="`skeleton-${n}`">
         <TableCell v-for="(key, cellIndex) in keys" :key="`cell-skel-${n}-${cellIndex}`" class="border">
@@ -118,16 +107,16 @@ function handleActionCellClick(event: Event, _cellRef: string) {
         <TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`" class="border">
           <!-- existing cell renderer -->
           <component
-            :is="funcComponent?.[key]?.(row, rowIndex).component"
-            v-if="funcComponent?.[key]"
+            :is="components?.[key]?.(row, rowIndex).component"
+            v-if="components?.[key]"
             :rec="row"
             :idx="rowIndex"
-            v-bind="funcComponent[key]?.(row, rowIndex).props"
+            v-bind="components[key]?.(row, rowIndex).props"
           />
           <template v-else>
-            <div v-if="funcHtml?.[key]" v-html="funcHtml?.[key]?.(row, rowIndex)"></div>
+            <div v-if="htmls?.[key]" v-html="htmls?.[key]?.(row, rowIndex)"></div>
             <template v-else>
-              {{ funcParsed?.[key]?.(row, rowIndex) ?? (row as any)[key] }}
+              {{ parses?.[key]?.(row, rowIndex) ?? (row as any)[key] }}
             </template>
           </template>
         </TableCell>

app/components/pub/my-ui/data-table/index.ts

@@ -0,0 +1,3 @@
+export * from './type'
+
+export { default as DataTable } from './data-table.vue'

app/components/pub/my-ui/data-table/type.ts

@@ -1,3 +1,59 @@
+export type ComponentType = Component
+
+export interface Col {
+  span?: number
+  classVal?: string
+  style?: string
+  width?: number // specific for width
+  widthUnit?: string // specific for width
+}
+
+export interface Th {
+  label: string
+  colSpan?: number
+  rowSpan?: number
+  classVal?: string
+  childClassVal?: string
+  style?: string
+  childStyle?: string
+  hideOnSm?: boolean
+}
+
+export interface KeyLabel {
+  key: string
+  label: string
+}
+
+export interface RecComponent {
+  idx?: number
+  rec: object
+  props?: any
+  component: ComponentType
+}
+
+export type FuncRecUnknown = (rec: unknown, idx: number) => unknown
+export type FuncComponent = (rec: unknown, idx: number) => RecComponent
+export type RecStrFuncUnknown = Record<string, FuncRecUnknown>
+export type RecStrFuncComponent = Record<string, FuncComponent>
+
+export interface KeyNames {
+  key: string
+  label: string
+}
+
+export type Config = {
+  headers?: Th[][]
+  cols: Col[]
+  keys: string[]
+  delKeyNames?: KeyLabel[]
+  parses?: RecStrFuncUnknown
+  components?: RecStrFuncComponent
+  htmls?: RecStrFuncUnknown
+  skeletonSize?: number
+  selectMode?: 'single' | 'multiple'
+  modelValue?: any[] | any
+}
+
 export interface DataTableLoader {
   isTableLoading: boolean
   [key: string]: boolean

app/components/pub/my-ui/data/types.ts

@@ -9,32 +9,6 @@ export interface ListItemDto {
 
 export type ComponentType = Component
 
-export interface RecComponent {
-  idx?: number
-  rec: object
-  props?: any
-  component: ComponentType
-}
-
-export interface Col {
-  span?: number
-  classVal?: string
-  style?: string
-  width?: number // specific for width
-  widthUnit?: string // specific for width
-}
-
-export interface Th {
-  label: string
-  colSpan?: number
-  rowSpan?: number
-  classVal?: string
-  childClassVal?: string
-  style?: string
-  childStyle?: string
-  hideOnSm?: boolean
-}
-
 export interface ButtonNav {
   variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
   classVal?: string
@@ -82,10 +56,6 @@ export interface KeyLabel {
   key: string
   label: string
 }
-export type FuncRecUnknown = (rec: unknown, idx: number) => unknown
-export type FuncComponent = (rec: unknown, idx: number) => RecComponent
-export type RecStrFuncUnknown = Record<string, FuncRecUnknown>
-export type RecStrFuncComponent = Record<string, FuncComponent>
 
 export interface KeyNames {
   key: string
@@ -107,3 +77,8 @@ export const ActionEvents = {
   showDetail: 'showDetail',
   showProcess: 'showProcess',
 }
+
+export interface DataTableLoader {
+  isTableLoading: boolean
+  [key: string]: boolean
+}