munawwirul_jamal/simrsx-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' of github.com:dikstub-rssa/simrs-fe into feat/clinical-src-119

Browse Source
This commit is contained in:
Khafid Prayoga
2025-10-17 09:21:54 +07:00
parent 586c043411 61a3e8597b
commit c4593eba09
7 changed files with 203 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/pub/my-ui/data-table/data-table.vue
+24 -5
View File
@@ -1,4 +1,5 @@
<script setup lang="ts">
import { isRef } from 'vue';
import type { DataTableLoader } from '~/components/pub/my-ui/data/types'
import type { Config } from './index'
import { Info } from 'lucide-vue-next'
@@ -33,6 +34,24 @@ function toggleSelection(row: any) {
}
}
function deepFetch(data: Record<string, any>, key: string): string {
let result = '';
const keys = key.split('.')
let lastVal: any = isRef(data) ? {...(data.value as any)} : data
for (let i = 0; i < keys.length; i++) {
let idx = keys[i] || ''
if (typeof lastVal[idx] != undefined && lastVal[idx] != null) {
if (i == keys.length - 1) {
return lastVal[idx];
} else {
lastVal = isRef(lastVal[idx]) ? {...(lastVal[idx].value as any)} : lastVal[idx]
}
}
}
return result;
}
function handleActionCellClick(event: Event, _cellRef: string) {
// Prevent event if clicked directly on the button/dropdown
const target = event.target as HTMLElement
@@ -52,14 +71,14 @@ function handleActionCellClick(event: Event, _cellRef: string) {
<template>
<Table>
<TableHeader v-if="headers" class="bg-gray-50 dark:bg-gray-800">
<TableRow>
<TableRow v-for="(hr, hrIdx) in headers">
<TableHead
v-for="(h, idx) in headers[0]"
v-for="(th, idx) in headers[hrIdx]"
:key="`head-${idx}`"
class="border"
:class="`border ${th.classVal || ''}`"
:style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }"
>
{{ h.label }}
{{ th.label }}
</TableHead>
</TableRow>
</TableHeader>
@@ -116,7 +135,7 @@ function handleActionCellClick(event: Event, _cellRef: string) {
<template v-else>
<div v-if="htmls?.[key]" v-html="htmls?.[key]?.(row, rowIndex)"></div>
<template v-else>
{{ parses?.[key]?.(row, rowIndex) ?? (row as any)[key] }}
{{ parses?.[key]?.(row, rowIndex) ?? deepFetch((row as any), key) }}
</template>
</template>
</TableCell>
app/components/pub/my-ui/nav-header/prep.vue
+2 -3
View File
@@ -31,7 +31,7 @@ function btnClick() {
<div class="font-semibold text-gray-900 md:text-base xl:text-lg">
<Icon
:name="props.prep.icon!"
class="mr-2 size-4 align-middle md:size-6"
class="mr-2 align-middle md:size-6"
/>
{{ props.prep.title }}
</div>
@@ -44,7 +44,6 @@ function btnClick() {
<Input
type="text"
placeholder="Search"
class="sm:text-sm"
@click="emitSearchNavClick"
@input="onInput"
/>
@@ -59,7 +58,7 @@ function btnClick() {
>
<Icon
name="i-lucide-plus"
class="mr-2 h-4 w-4 align-middle"
class="align-middle"
/>
{{ prep.addNav.label }}
</Button>
app/components/pub/ui/badge/index.ts
+21 -9
View File
@@ -3,19 +3,31 @@ import { cva } from 'class-variance-authority'
export { default as Badge } from './Badge.vue'
export type Variants = | 'default' | 'secondary' | 'fresh' | 'positive' | 'negative' | 'warning' | 'destructive' | 'outline'
const variants: Record<Variants, string> = {
default:
'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
secondary:
'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
fresh:
'border-transparent bg-teal-400 text-primary-foreground shadow hover:bg-teal-400/80',
positive:
'border-transparent bg-sky-400 text-primary-foreground shadow hover:bg-sky-400/80',
negative:
'border-transparent bg-neutral-400 text-destructive-foreground shadow hover:bg-neutral-400/80',
warning:
'border-transparent bg-orange-400 text-destructive-foreground shadow hover:bg-orange-400/80',
destructive:
'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
outline: 'text-foreground',
}
export const badgeVariants = cva(
'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
{
variants: {
variant: {
default:
'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
secondary:
'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
destructive:
'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
outline: 'text-foreground',
},
variant: variants,
},
defaultVariants: {
variant: 'default',
app/lib/date.ts
+44
View File
@@ -0,0 +1,44 @@
export function getAge(dateString: string, comparedDate?: string): { idFormat: string; extFormat: string } {
const birthDate = new Date(dateString);
const today = new Date();
if (comparedDate) {
const comparedDateObj = new Date(comparedDate);
today.setFullYear(comparedDateObj.getFullYear());
today.setMonth(comparedDateObj.getMonth());
today.setDate(comparedDateObj.getDate());
}
// Format the date part
const options: Intl.DateTimeFormatOptions = { day: 'numeric', month: 'long', year: 'numeric' };
const idFormat = birthDate.toLocaleDateString('id-ID', options);
// Calculate age
let years = today.getFullYear() - birthDate.getFullYear();
let months = today.getMonth() - birthDate.getMonth();
let days = today.getDate() - birthDate.getDate();
if (months < 0 || (months === 0 && days < 0)) {
years--;
months += 12;
}
if (days < 0) {
const prevMonth = new Date(today.getFullYear(), today.getMonth() - 1, 0);
days += prevMonth.getDate();
months--;
}
// Format the age part
let extFormat = '';
if ([years, months, days].filter(Boolean).join(' ')) {
extFormat = `${years} Tahun ${months} Bulan ${days} Hari`;
} else {
extFormat = '0';
}
return {
idFormat,
extFormat
};
}
app/pages/_dev/data-table/index.cfg.ts
+37
View File
@@ -0,0 +1,37 @@
import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
import { defineAsyncComponent } from 'vue'
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
export const config: Config = {
cols: [{ width: 120}, {}, {}, { width: 50 }],
headers: [[
{ label: 'No.RM.' },
{ label: 'Nama Pasien' },
{ label: 'Tempat Lahir' },
{ label: '' },
]],
keys: ['number', 'person.name', 'person.birthPlace_regency.name', 'action'],
delKeyNames: [
{ key: 'code', label: 'Kode' },
{ key: 'name', label: 'Nama' },
],
parses: {},
components: {
action(rec, idx) {
const res: RecComponent = {
idx,
rec: rec as object,
component: action,
}
return res
},
},
htmls: {},
}
app/pages/_dev/data-table/index.data.ts
+67
View File
@@ -0,0 +1,67 @@
export interface Regency {
id: number
code: string
name: string
}
export interface Person {
id: number
name: string
residentIdentityNumber?: string
birthDate?: string
birthPlace_regency_code: string
birthPlace_regency: Regency
}
export interface Patient {
id: number
number: string
person: Person
}
export const regencies: Regency[] = [
{
id: 1,
code: '3522',
name: 'Bojonegoro',
},
{
id: 2,
code: '3579',
name: 'Batu',
},
]
export const people: Person[] = [
{
id: 1,
name: 'Abdul Manap',
residentIdentityNumber: '1234567890',
birthDate: '1990-01-01',
birthPlace_regency_code: '3522',
birthPlace_regency: regencies[0],
},
{
id: 2,
name: 'Abdul Gofur',
residentIdentityNumber: '1234567890',
birthDate: '1990-01-01',
birthPlace_regency_code: '3522',
birthPlace_regency: regencies[1],
},
]
export const data: Patient[] = [
{
id: 1,
number: 'RM-0000001',
person_id: 1,
person: people[0],
},
{
id: 2,
number: 'RM-0000002',
person_id: 2,
person: people[1],
}
]
app/pages/_dev/data-table/index.vue
+8
View File
@@ -0,0 +1,8 @@
<script setup lang="ts">
import { config } from './index.cfg'
import { data } from './index.data'
</script>
<template>
<PubMyUiDataTable v-bind="config" :rows="data" />
</template>