dev: hotfix, cleaning data-table

app/components/app/satusehat/list-cfg.ts

@@ -1,4 +1,4 @@
-import type { Col, KeyLabel, RecComponent, RecStrFuncComponent, RecStrFuncUnknown, Th } from '../../pub/nav/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
@@ -18,61 +18,61 @@ export const rowStatus = {
 const patientBadge = defineAsyncComponent(() => import('./badge-patient.vue'))
 const statusBadge = defineAsyncComponent(() => import('./badge-status.vue'))
 
-export const cols: Col[] = [
-  { width: 100 },
-  { width: 100 },
-  { width: 100 },
-  { width: 100 },
-  { width: 100 },
-  { width: 100 },
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'ID' },
-    { label: 'Jenis' },
-    { label: 'Pasien' },
-    { label: 'Status' },
-    { label: 'Terakhir Update' },
-    { label: 'FHIR ID' },
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
   ],
-]
 
-export const keys = ['id', 'resource_type', 'patient', 'status', 'updated_at', 'fhir_id']
+  headers: [
+    [
+      { label: 'ID' },
+      { label: 'Jenis' },
+      { label: 'Pasien' },
+      { label: 'Status' },
+      { label: 'Terakhir Update' },
+      { label: 'FHIR ID' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: ['id', 'resource_type', 'patient', 'status', 'updated_at', 'fhir_id'],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
-  },
-}
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcComponent: RecStrFuncComponent = {
-  patient(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: patientBadge,
-    }
-    return res
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+    },
   },
-  status(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: statusBadge,
-    }
-    return res
+
+  components: {
+    patient(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: patientBadge,
+      }
+    },
+    status(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+    },
   },
-}
 
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }

app/components/app/satusehat/list.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -7,8 +7,5 @@ defineProps<{
 </script>
 
 <template>
-  <PubMyUiDataTable
-:rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
-    :func-html="funcHtml" :func-component="funcComponent"
-/>
+  <PubMyUiDataTable v-bind="config" :rows="data" />
 </template>