dev: hotfix, cleaning data-table

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

@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
@@ -18,97 +11,99 @@ const _doctorStatus = {
   1: 'Aktif',
 }
 
-export const cols: Col[] = [
-  { width: 100 },
-  { width: 250 },
-  {},
-  { width: 100 },
-  { width: 100 },
-  {},
-  {},
-  {},
-  { width: 120 },
-  { width: 100 },
-  {},
-  {},
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'Kode JKN' },
-    { label: 'Nama' },
-    { label: 'No KTP' },
-    { label: 'No SIP' },
-    { label: 'No IHS' },
-    { label: 'Telpon' },
-    { label: 'Fee Ranap' },
-    { label: 'Fee Rajal' },
-    { label: 'Status' },
-    { label: '' },
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 250 },
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    {},
+    {},
+    { width: 120 },
+    { width: 100 },
+    {},
+    {},
   ],
-]
 
-export const keys = [
-  'bpjs_code',
-  'name',
-  'identity_number',
-  'sip_no',
-  'ihs_number',
-  'phone',
-  'inPatient_itemPrice',
-  'outPatient_itemPrice',
-  'status',
-  'action',
-]
+  headers: [
+    [
+      { label: 'Kode JKN' },
+      { label: 'Nama' },
+      { label: 'No KTP' },
+      { label: 'No SIP' },
+      { label: 'No IHS' },
+      { label: 'Telpon' },
+      { label: 'Fee Ranap' },
+      { label: 'Fee Rajal' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: [
+    'bpjs_code',
+    'name',
+    'identity_number',
+    'sip_no',
+    'ihs_number',
+    'phone',
+    'inPatient_itemPrice',
+    'outPatient_itemPrice',
+    'status',
+    'action',
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+    },
+    identity_number: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+        return '(TANPA NIK)'
+      }
+      return recX.identity_number
+    },
+    inPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+    },
+    outPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+    },
   },
-  identity_number: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
-      return '(TANPA NIK)'
-    }
-    return recX.identity_number
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+    status(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+      return res
+    },
   },
-  inPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-  outPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-}
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-  status(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: statusBadge,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }

app/components/app/laborant/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[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>