Merge branch 'dev' of https://github.com/dikstub-rssa/simrs-fe into fe-integrasi-device-material-65
This commit is contained in:
riefive
@@ -113,7 +113,7 @@ onMounted(() => {
|
||||
<div class="mt-4 flex flex-wrap items-center justify-between gap-2">
|
||||
<h2 class="text-2xl font-bold tracking-tight">Dashboard SIMRS</h2>
|
||||
<div class="flex items-center gap-4 space-x-2">
|
||||
<div class="bg-primary rounded-xl border p-1 text-white">Status: Aktif</div>
|
||||
<div class="rounded-xl border bg-primary p-1 text-white">Status: Aktif</div>
|
||||
<Button class="bg-primary p-2 text-white" size="lg">
|
||||
<Icon name="i-lucide-refresh-ccw" class="h-6 w-6" />
|
||||
Sinkronisasi
|
||||
@@ -121,10 +121,10 @@ onMounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
<main class="my-6 flex flex-1 flex-col gap-4 md:gap-8">
|
||||
<div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
|
||||
<div class="dashboard-grid">
|
||||
<PubBaseSummaryCard v-for="card in summaryData" :key="card.title" :stat="card" />
|
||||
</div>
|
||||
<div class="grid gap-4 md:gap-8 lg:grid-cols-1 xl:grid-cols-3">
|
||||
<div class="dashboard-grid">
|
||||
<Card v-for="n in 3" :key="n">
|
||||
<CardHeader>
|
||||
<CardTitle>Recent Sales</CardTitle>
|
||||
@@ -143,7 +143,7 @@ onMounted(() => {
|
||||
<p class="text-sm font-medium leading-none">
|
||||
{{ recentSales.name }}
|
||||
</p>
|
||||
<p class="text-muted-foreground text-sm">
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{{ recentSales.email }}
|
||||
</p>
|
||||
</div>
|
||||
@@ -156,19 +156,19 @@ onMounted(() => {
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<Icon name="i-lucide-activity" class="text-primary me-2 h-6 w-6" />
|
||||
<Icon name="i-lucide-activity" class="me-2 h-6 w-6 text-primary" />
|
||||
<h2 class="text-xl font-semibold tracking-tight">Aksi Cepat</h2>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent class="grid cursor-pointer gap-8 md:grid-cols-4 md:gap-8">
|
||||
<CardContent class="grid cursor-pointer gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-5">
|
||||
<Card
|
||||
v-for="item in linkItems"
|
||||
:key="item.title"
|
||||
class="border-primary hover:bg-primary my-2 h-32 border transition-colors duration-200 hover:bg-gray-200"
|
||||
>
|
||||
v-for="item in linkItems"
|
||||
:key="item.title"
|
||||
class="my-2 h-32 border border-primary transition-colors duration-200 hover:bg-gray-200 hover:bg-primary"
|
||||
>
|
||||
<NuxtLink :to="item.link">
|
||||
<CardContent class="my-2 grid h-full grid-rows-2 place-items-center">
|
||||
<Icon :name="item.icon" class="text-primary h-9 w-[60px]" />
|
||||
<Icon :name="item.icon" class="h-9 w-[60px] text-primary" />
|
||||
<h1>{{ item.title }}</h1>
|
||||
</CardContent>
|
||||
</NuxtLink>
|
||||
|
||||
@@ -1,58 +1,145 @@
|
||||
import type { TreeItem } from '~/components/pub/base/select-tree/type'
|
||||
import * as z from 'zod'
|
||||
|
||||
export const division = {
|
||||
export const divisionConf = {
|
||||
msg: {
|
||||
placeholder: '---pilih divisi utama',
|
||||
search: 'kode, nama divisi',
|
||||
empty: 'divisi tidak ditemukan',
|
||||
},
|
||||
items: [
|
||||
{ value: '1', label: 'Medical', code: 'MED' },
|
||||
{ value: '2', label: 'Nursing', code: 'NUR' },
|
||||
{ value: '3', label: 'Admin', code: 'ADM' },
|
||||
{ value: '4', label: 'Support', code: 'SUP' },
|
||||
{ value: '5', label: 'Education', code: 'EDU' },
|
||||
{ value: '6', label: 'Pharmacy', code: 'PHA' },
|
||||
{ value: '7', label: 'Radiology', code: 'RAD' },
|
||||
{ value: '8', label: 'Laboratory', code: 'LAB' },
|
||||
{ value: '9', label: 'Finance', code: 'FIN' },
|
||||
{ value: '10', label: 'Human Resources', code: 'HR' },
|
||||
{ value: '11', label: 'IT Services', code: 'ITS' },
|
||||
{ value: '12', label: 'Maintenance', code: 'MNT' },
|
||||
{ value: '13', label: 'Catering', code: 'CAT' },
|
||||
{ value: '14', label: 'Security', code: 'SEC' },
|
||||
{ value: '15', label: 'Emergency', code: 'EMR' },
|
||||
{ value: '16', label: 'Surgery', code: 'SUR' },
|
||||
{ value: '17', label: 'Outpatient', code: 'OUT' },
|
||||
{ value: '18', label: 'Inpatient', code: 'INP' },
|
||||
{ value: '19', label: 'Rehabilitation', code: 'REB' },
|
||||
{ value: '20', label: 'Research', code: 'RSH' },
|
||||
{ value: '1', label: 'Medical' },
|
||||
{ value: '2', label: 'Nursing' },
|
||||
{ value: '3', label: 'Admin' },
|
||||
{ value: '4', label: 'Support' },
|
||||
{ value: '5', label: 'Education' },
|
||||
{ value: '6', label: 'Pharmacy' },
|
||||
{ value: '7', label: 'Radiology' },
|
||||
{ value: '8', label: 'Laboratory' },
|
||||
{ value: '9', label: 'Finance' },
|
||||
{ value: '10', label: 'Human Resources' },
|
||||
{ value: '11', label: 'IT Services' },
|
||||
{ value: '12', label: 'Maintenance' },
|
||||
{ value: '13', label: 'Catering' },
|
||||
{ value: '14', label: 'Security' },
|
||||
{ value: '15', label: 'Emergency' },
|
||||
{ value: '16', label: 'Surgery' },
|
||||
{ value: '17', label: 'Outpatient' },
|
||||
{ value: '18', label: 'Inpatient' },
|
||||
{ value: '19', label: 'Rehabilitation' },
|
||||
{ value: '20', label: 'Research' },
|
||||
],
|
||||
}
|
||||
|
||||
export const schema = z.object({
|
||||
name: z.string({
|
||||
required_error: 'Nama wajib diisi',
|
||||
}).min(1, 'Nama divisi wajib diisi'),
|
||||
name: z
|
||||
.string({
|
||||
required_error: 'Nama wajib diisi',
|
||||
})
|
||||
.min(1, 'Nama divisi wajib diisi'),
|
||||
|
||||
code: z.string({
|
||||
required_error: 'Kode wajib diisi',
|
||||
}).min(1, 'Kode divisi wajib diisi'),
|
||||
code: z
|
||||
.string({
|
||||
required_error: 'Kode wajib diisi',
|
||||
})
|
||||
.min(1, 'Kode divisi wajib diisi'),
|
||||
|
||||
parentId: z.preprocess(
|
||||
(input: unknown) => {
|
||||
if (typeof input === 'string') {
|
||||
// Handle empty string case
|
||||
if (input.trim() === '') {
|
||||
return undefined
|
||||
}
|
||||
return Number(input)
|
||||
}
|
||||
|
||||
return input
|
||||
},
|
||||
z.number({
|
||||
required_error: 'Kelompok wajib dipilih',
|
||||
}).min(1, 'Kelompok wajib dipilih'),
|
||||
),
|
||||
parentId: z.string().optional(),
|
||||
})
|
||||
|
||||
// State untuk tree data divisi - dimulai dengan data level atas
|
||||
const divisionTreeData = ref<TreeItem[]>([
|
||||
{ value: '1', label: 'Medical', hasChildren: true },
|
||||
{ value: '2', label: 'Nursing', hasChildren: true },
|
||||
{ value: '3', label: 'Admin', hasChildren: false },
|
||||
{ value: '4', label: 'Support', hasChildren: true },
|
||||
{ value: '5', label: 'Education', hasChildren: false },
|
||||
{ value: '6', label: 'Pharmacy', hasChildren: true },
|
||||
{ value: '7', label: 'Radiology', hasChildren: false },
|
||||
{ value: '8', label: 'Laboratory', hasChildren: true },
|
||||
])
|
||||
|
||||
// Helper function untuk mencari dan menyisipkan data anak ke dalam tree
|
||||
function findAndInsertChildren(nodes: TreeItem[], parentId: string, newChildren: TreeItem[]): boolean {
|
||||
for (const node of nodes) {
|
||||
if (node.value === parentId) {
|
||||
node.children = newChildren
|
||||
return true
|
||||
}
|
||||
if (node.children && findAndInsertChildren(node.children as TreeItem[], parentId, newChildren)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
// Fungsi untuk fetch data anak divisi (lazy loading)
|
||||
async function handleFetchDivisionChildren(parentId: string): Promise<void> {
|
||||
console.log(`Mengambil data sub-divisi untuk parent: ${parentId}`)
|
||||
|
||||
// Simulasi delay API call
|
||||
await new Promise((resolve) => setTimeout(resolve, 800))
|
||||
|
||||
let childrenData: TreeItem[] = []
|
||||
|
||||
// Sample data berdasarkan parent ID
|
||||
switch (parentId) {
|
||||
case '1': // Medical
|
||||
childrenData = [
|
||||
{ value: '1-1', label: 'Cardiology', hasChildren: true },
|
||||
{ value: '1-2', label: 'Neurology', hasChildren: false },
|
||||
{ value: '1-3', label: 'Oncology', hasChildren: false },
|
||||
]
|
||||
break
|
||||
case '2': // Nursing
|
||||
childrenData = [
|
||||
{ value: '2-1', label: 'ICU Nursing', hasChildren: false },
|
||||
{ value: '2-2', label: 'ER Nursing', hasChildren: false },
|
||||
{ value: '2-3', label: 'Ward Nursing', hasChildren: true },
|
||||
]
|
||||
break
|
||||
case '4': // Support
|
||||
childrenData = [
|
||||
{ value: '4-1', label: 'IT Support', hasChildren: false },
|
||||
{ value: '4-2', label: 'Maintenance', hasChildren: false },
|
||||
]
|
||||
break
|
||||
case '6': // Pharmacy
|
||||
childrenData = [
|
||||
{ value: '6-1', label: 'Inpatient Pharmacy', hasChildren: false },
|
||||
{ value: '6-2', label: 'Outpatient Pharmacy', hasChildren: false },
|
||||
]
|
||||
break
|
||||
case '8': // Laboratory
|
||||
childrenData = [
|
||||
{ value: '8-1', label: 'Clinical Lab', hasChildren: false },
|
||||
{ value: '8-2', label: 'Pathology Lab', hasChildren: false },
|
||||
]
|
||||
break
|
||||
case '1-1': // Cardiology sub-divisions
|
||||
childrenData = [
|
||||
{ value: '1-1-1', label: 'Cardiac Surgery', hasChildren: false },
|
||||
{ value: '1-1-2', label: 'Cardiac Cathlab', hasChildren: false },
|
||||
]
|
||||
break
|
||||
case '2-3': // Ward Nursing sub-divisions
|
||||
childrenData = [
|
||||
{ value: '2-3-1', label: 'Pediatric Ward', hasChildren: false },
|
||||
{ value: '2-3-2', label: 'Surgical Ward', hasChildren: false },
|
||||
]
|
||||
break
|
||||
}
|
||||
|
||||
// Insert data ke dalam tree state
|
||||
findAndInsertChildren(divisionTreeData.value, parentId, childrenData)
|
||||
}
|
||||
|
||||
export const divisionTreeConfig = computed(() => ({
|
||||
msg: {
|
||||
placeholder: '--- Pilih divisi induk',
|
||||
search: 'Cari divisi...',
|
||||
empty: 'Divisi tidak ditemukan',
|
||||
},
|
||||
data: divisionTreeData.value,
|
||||
onFetchChildren: handleFetchDivisionChildren,
|
||||
}))
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import type { HeaderPrep } from '~/components/pub/custom-ui/data/types'
|
||||
import AppDivisonEntryForm from '~/components/app/divison/entry-form.vue'
|
||||
import AppDivisionEntryForm from '~/components/app/divison/entry-form.vue'
|
||||
import Dialog from '~/components/pub/base/modal/dialog.vue'
|
||||
import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
|
||||
import { ActionEvents } from '~/components/pub/custom-ui/data/types'
|
||||
import Header from '~/components/pub/custom-ui/nav-header/header.vue'
|
||||
import { usePaginatedList } from '~/composables/usePaginatedList'
|
||||
import { division as divisionConf, schema as schemaConf } from './entry'
|
||||
|
||||
import { divisionConf, divisionTreeConfig, schema } from './entry'
|
||||
// #region State & Computed
|
||||
// Dialog state
|
||||
const isFormEntryDialogOpen = ref(false)
|
||||
@@ -18,8 +17,8 @@ const recId = ref<number>(0)
|
||||
const recAction = ref<string>('')
|
||||
const recItem = ref<any>(null)
|
||||
|
||||
async function fetchDivisionData(params: any) {
|
||||
const endpoint = transform('/api/v1/patient', params)
|
||||
async function fetchDivisionData(_params: any) {
|
||||
const endpoint = '/api/v1/_dev/division/list'
|
||||
return await xfetch(endpoint)
|
||||
}
|
||||
|
||||
@@ -182,17 +181,19 @@ function handleCancelConfirmation() {
|
||||
<AppDivisonList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||
|
||||
<Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Divisi" size="lg" prevent-outside>
|
||||
<AppDivisonEntryForm
|
||||
:division="divisionConf" :schema="schemaConf"
|
||||
|
||||
<AppDivisionEntryForm
|
||||
:division="divisionConf" :division-tree="divisionTreeConfig" :schema="schema"
|
||||
:initial-values="{ name: '', code: '', parentId: '' }" @submit="onSubmitForm" @cancel="onCancelForm"
|
||||
/>
|
||||
/>
|
||||
|
||||
</Dialog>
|
||||
|
||||
<!-- Record Confirmation Modal -->
|
||||
<RecordConfirmation
|
||||
v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
|
||||
@confirm="handleConfirmDelete" @cancel="handleCancelConfirmation"
|
||||
>
|
||||
v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
|
||||
@confirm="handleConfirmDelete" @cancel="handleCancelConfirmation"
|
||||
>
|
||||
<template #default="{ record }">
|
||||
<div class="text-sm">
|
||||
<p><strong>ID:</strong> {{ record?.id }}</p>
|
||||
|
||||
Reference in New Issue
Block a user