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

⚠️ refactor (medicine-method): simplify entry form and list configuration

Browse Source
This commit is contained in:
Abizrh
2025-09-07 20:37:24 +07:00
parent eb9c918141
commit c3c9154d0e
6 changed files with 24 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/app/medicine-method/entry-form.vue
+6 -59
View File
@@ -18,69 +18,16 @@ const data = computed({
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
<div class="flex flex-col justify-between">
<Block>
<FieldGroup :column="1">
<Label>Nama dan Gelar</Label>
<FieldGroup>
<Label>Nama</Label>
<Field>
<Input v-model="data.name" type="text" name="name" default-value="dr." />
</Field>
<Field>
<Input type="text" name="name" />
</Field>
<Field>
<Input type="text" name="name" />
<Input v-model="data.name" />
</Field>
</FieldGroup>
</Block>
<Block>
<FieldGroup :column="2">
<Label>NIK</Label>
<FieldGroup>
<Label>Kode</Label>
<Field>
<Input type="text" name="identity_number" />
</Field>
</FieldGroup>
<FieldGroup :column="2">
<Label>NO SIP</Label>
<Field name="sip_number">
<Input type="text" name="sip_no" />
</Field>
</FieldGroup>
</Block>
<Block>
<FieldGroup :column="2">
<Label>Telepon / HP</Label>
<Field name="phone">
<Input type="text" name="phone" />
</Field>
</FieldGroup>
<FieldGroup :column="2">
<Label>Kode BPJS</Label>
<Field>
<Input type="text" name="bpjs_code" />
</Field>
</FieldGroup>
</Block>
<Block>
<FieldGroup :column="2">
<Label>Fee Rajal</Label>
<Field>
<Input type="number" name="outPatient_rate" />
</Field>
</FieldGroup>
<FieldGroup :column="2">
<Label>Fee Ranap</Label>
<Field>
<Input type="number" name="inPatient_rate" />
</Field>
</FieldGroup>
</Block>
<Block>
<FieldGroup :column="3">
<Label>Status</Label>
<Field>
<Input type="select" name="status">
<option value="active">Aktif</option>
<option value="inactive">Tidak Aktif</option>
</Input>
<Input />
</Field>
</FieldGroup>
</Block>
app/components/app/medicine-method/list-cfg.ts
+4 -72
View File
@@ -8,85 +8,25 @@ import type {
} from '~/components/pub/custom-ui/data/types'
import { defineAsyncComponent } from 'vue'
type SmallDetailDto = any
const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
const _doctorStatus = {
0: 'Tidak Aktif',
1: 'Aktif',
}
export const cols: Col[] = [
{ width: 100 },
{ width: 250 },
{},
{ width: 100 },
{ width: 100 },
{},
{},
{},
{ width: 120 },
{ width: 100 },
{},
{},
]
export const cols: Col[] = [{}, {}, { width: 50 }]
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 header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Aksi' }]]
export const keys = [
'bpjs_code',
'name',
'identity_number',
'sip_no',
'ihs_number',
'phone',
'inPatient_itemPrice',
'outPatient_itemPrice',
'status',
'action',
]
export const keys = ['code', 'name', 'action']
export const delKeyNames: KeyLabel[] = [
{ key: 'code', label: 'Kode' },
{ key: 'name', label: 'Nama' },
]
export const funcParsed: RecStrFuncUnknown = {
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')
},
}
export const funcParsed: RecStrFuncUnknown = {}
export const funcComponent: RecStrFuncComponent = {
action(rec, idx) {
@@ -97,14 +37,6 @@ export const funcComponent: RecStrFuncComponent = {
}
return res
},
status(rec, idx) {
const res: RecComponent = {
idx,
rec: rec as object,
component: statusBadge,
}
return res
},
}
export const funcHtml: RecStrFuncUnknown = {
app/components/app/medicine-method/status-badge.vue
-29
View File
@@ -1,29 +0,0 @@
<script setup lang="ts">
import { Badge } from '~/components/pub/ui/badge'
const props = defineProps<{
rec: any
idx?: number
}>()
const doctorStatus = {
0: 'Tidak Aktif',
1: 'Aktif',
}
const statusText = computed(() => {
return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
})
const badgeVariant = computed(() => {
return props.rec.status_code === 1 ? 'default' : 'destructive'
})
</script>
<template>
<div class="flex justify-center">
<Badge :variant="badgeVariant">
{{ statusText }}
</Badge>
</div>
</template>
app/components/flow/medicine-method/add.vue
-9
View File
@@ -1,9 +0,0 @@
<script setup lang="ts"></script>
<template>
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
<Icon name="i-lucide-user" class="me-2" />
<span class="font-semibold">Tambah</span> Pasien
</div>
<AppPatientEntryForm />
</template>
app/components/flow/medicine-method/list.vue
+13 -63
View File
@@ -1,12 +1,11 @@
<script setup lang="ts">
import type { DataTableLoader } from '~/components/pub/base/data-table/type'
import type { Summary } from '~/components/pub/base/summary-card/type'
import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
import { Calendar, Hospital, UserCheck, UsersRound } from 'lucide-vue-next'
import SummaryCard from '~/components/pub/base/summary-card/summary-card.vue'
import Modal from '~/components/pub/base/modal/modal.vue'
import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
const data = ref([])
const entry = ref<any>({})
const refSearchNav: RefSearchNav = {
onClick: () => {
@@ -26,68 +25,24 @@ const isLoading = reactive<DataTableLoader>({
isTableLoading: false,
})
const isOpen = ref(false)
const recId = ref<number>(0)
const recAction = ref<string>('')
const recItem = ref<any>(null)
const hreaderPrep: HeaderPrep = {
title: 'Pasien',
icon: 'i-lucide-users',
title: 'Metode Pemberian',
icon: 'i-lucide-medicine-bottle',
addNav: {
label: 'Tambah',
onClick: () => navigateTo('/patient/add'),
onClick: () => (isOpen.value = true),
},
}
// Initial/default data structure
const summaryData: Summary[] = [
{
title: 'Total Pasien',
icon: UsersRound,
metric: 23,
trend: 15,
timeframe: 'daily',
},
{
title: 'Pasien Aktif',
icon: UserCheck,
metric: 100,
trend: 9,
timeframe: 'daily',
},
{
title: 'Kunjungan Hari Ini',
icon: Calendar,
metric: 52,
trend: 1,
timeframe: 'daily',
},
{
title: 'Peserta BPJS',
icon: Hospital,
metric: 71,
trend: -3,
timeframe: 'daily',
},
]
// API call function
async function getPatientSummary() {
try {
isLoading.summary = true
await new Promise((resolve) => setTimeout(resolve, 500))
} catch (error) {
console.error('Error fetching patient summary:', error)
// Keep default/existing data on error
} finally {
isLoading.summary = false
}
}
async function getPatientList() {
isLoading.isTableLoading = true
const resp = await xfetch('/api/v1/patient')
const resp = await xfetch('/api/v1/medicine-method')
if (resp.success) {
data.value = (resp.body as Record<string, any>).data
}
@@ -95,7 +50,6 @@ async function getPatientList() {
}
onMounted(() => {
getPatientSummary()
getPatientList()
})
@@ -108,14 +62,10 @@ provide('table_data_loader', isLoading)
<template>
<Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
<div class="my-4 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">
<template v-if="isLoading.summary">
<SummaryCard v-for="n in 4" :key="n" is-skeleton />
</template>
<template v-else>
<SummaryCard v-for="card in summaryData" :key="card.title" :stat="card" />
</template>
</div>
<AppPatientList :data="data" />
<AppMedicineMethodList :data="data" />
</div>
<Modal v-model:open="isOpen" title="Tambah Metode Pemberian" size="lg" prevent-outside>
<AppMedicineMethodEntryForm v-model="entry" />
</Modal>
</template>
app/pages/_dev/index.vue
+1 -1
View File
@@ -49,7 +49,7 @@ const navMenu = ref({
{
title: 'Test Medicine List',
icon: 'i-lucide-user',
component: defineAsyncComponent(() => import('~/components/flow/medicine-group/list.vue')),
component: defineAsyncComponent(() => import('~/components/flow/medicine-method/list.vue')),
},
],
})