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

feat(uom): integrate api for uom

Browse Source
This commit is contained in:
riefive
2025-09-26 15:46:22 +07:00
parent 5d41e4e60d
commit 867f93af31
17 changed files with 469 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/app/medicine-group/picker.vue
View File
app/components/app/medicine-group/search.vue
View File
app/components/app/medicine-group/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/app/medicine-method/picker.vue
View File
app/components/app/medicine-method/search.vue
View File
app/components/app/uom/entry-form.vue
+96
View File
@@ -0,0 +1,96 @@
<script setup lang="ts">
// Components
import Block from '~/components/pub/custom-ui/doc-entry/block.vue'
import Cell from '~/components/pub/custom-ui/doc-entry/cell.vue'
import Field from '~/components/pub/custom-ui/doc-entry/field.vue'
import Label from '~/components/pub/custom-ui/doc-entry/label.vue'
import Button from '~/components/pub/ui/button/Button.vue'
// Types
import type { UomFormData } from '~/schemas/uom.schema'
// Helpers
import type z from 'zod'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
interface Props {
schema?: z.ZodSchema<any>
values?: any
isLoading?: boolean
isReadonly?: boolean
}
const props = defineProps<Props>()
const isLoading = props.isLoading !== undefined ? props.isLoading : false
const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
const emit = defineEmits<{
submit: [values: UomFormData, resetForm: () => void]
cancel: [resetForm: () => void]
}>()
const { defineField, errors, meta } = useForm({
validationSchema: props.schema ? toTypedSchema(props.schema) : undefined,
initialValues: {
code: '',
name: '',
},
})
const [code, codeAttrs] = defineField('code')
const [name, nameAttrs] = defineField('name')
if (props.values) {
if (props.values.code !== undefined) code.value = props.values.code
if (props.values.name !== undefined) name.value = props.values.name
}
const resetForm = () => {
code.value = ''
name.value = ''
}
function onSubmitForm() {
const formData = {
name: name.value || '',
code: code.value || '',
}
emit('submit', formData, resetForm)
}
function onCancelForm() {
emit('cancel', resetForm)
}
</script>
<template>
<form id="form-medicine-method" @submit.prevent>
<Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
<Cell>
<Label height="">Kode</Label>
<Field :errMessage="errors.code">
<Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading || isReadonly" />
</Field>
</Cell>
<Cell>
<Label height="compact">Nama</Label>
<Field :errMessage="errors.name">
<Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" />
</Field>
</Cell>
</Block>
<div class="my-2 flex justify-end gap-2 py-2">
<Button type="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
<Button
v-if="!isReadonly"
type="button"
class="w-[120px]"
:disabled="isLoading || !meta.valid"
@click="onSubmitForm"
>
Simpan
</Button>
</div>
</form>
</template>
app/components/app/uom/list-cfg.ts
+46
View File
@@ -0,0 +1,46 @@
import type {
Col,
KeyLabel,
RecComponent,
RecStrFuncComponent,
RecStrFuncUnknown,
Th,
} from '~/components/pub/custom-ui/data/types'
import { defineAsyncComponent } from 'vue'
const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
const _doctorStatus = {
0: 'Tidak Aktif',
1: 'Aktif',
}
export const cols: Col[] = [{}, {}, { width: 50 }]
export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Aksi' }]]
export const keys = ['code', 'name', 'action']
export const delKeyNames: KeyLabel[] = [
{ key: 'code', label: 'Kode' },
{ key: 'name', label: 'Nama' },
]
export const funcParsed: RecStrFuncUnknown = {}
export const funcComponent: RecStrFuncComponent = {
action(rec, idx) {
const res: RecComponent = {
idx,
rec: rec as object,
component: action,
}
return res
},
}
export const funcHtml: RecStrFuncUnknown = {
patient_address(_rec) {
return '-'
},
}
app/components/app/uom/list.vue
+35
View File
@@ -0,0 +1,35 @@
<script setup lang="ts">
import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
interface Props {
data: any[]
paginationMeta: PaginationMeta
}
defineProps<Props>()
const emit = defineEmits<{
pageChange: [page: number]
}>()
function handlePageChange(page: number) {
emit('pageChange', page)
}
</script>
<template>
<div class="space-y-4">
<PubBaseDataTable
:rows="data"
:cols="cols"
:header="header"
:keys="keys"
:func-parsed="funcParsed"
:func-html="funcHtml"
:func-component="funcComponent"
/>
<PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
</div>
</template>
app/components/content/equipment/list.vue
+2 -2
View File
@@ -90,8 +90,8 @@ provide('table_data_loader', isLoading)
const getCurrentMaterialDetail = async (id: number | string) => {
const result = await getMaterialDetail(id)
if (result.success) {
const currentMaterial = result.body?.data || {}
recItem.value = currentMaterial
const currentValue = result.body?.data || {}
recItem.value = currentValue
isFormEntryDialogOpen.value = true
}
}
app/components/content/medicine-group/list.vue
+3 -3
View File
@@ -81,8 +81,8 @@ provide('table_data_loader', isLoading)
const getCurrentMedicineGroupDetail = async (id: number | string) => {
const result = await getMedicineGroupDetail(id)
if (result.success) {
const currentMaterial = result.body?.data || {}
recItem.value = currentMaterial
const currentValue = result.body?.data || {}
recItem.value = currentValue
isFormEntryDialogOpen.value = true
}
}
@@ -115,7 +115,7 @@ onMounted(async () => {
<div class="p-4">
<Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
<div class="rounded-md border p-4">
<AppMedicineMethodList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
<AppMedicineGroupList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
</div>
<Dialog
app/components/content/medicine-method/list.vue
+2 -2
View File
@@ -81,8 +81,8 @@ provide('table_data_loader', isLoading)
const getCurrentMedicineMethodDetail = async (id: number | string) => {
const result = await getMedicineMethodDetail(id)
if (result.success) {
const currentMaterial = result.body?.data || {}
recItem.value = currentMaterial
const currentValue = result.body?.data || {}
recItem.value = currentValue
isFormEntryDialogOpen.value = true
}
}
app/components/content/tools/list.vue
+2 -2
View File
@@ -90,8 +90,8 @@ provide('table_data_loader', isLoading)
const getCurrentToolsDetail = async (id: number | string) => {
const result = await getDeviceDetail(id)
if (result.success) {
const currentDevice = result.body?.data || {}
recItem.value = currentDevice
const currentValue = result.body?.data || {}
recItem.value = currentValue
}
}
app/components/content/uom/list.vue
+162
View File
@@ -0,0 +1,162 @@
<script setup lang="ts">
// Components
import Dialog from '~/components/pub/base/modal/dialog.vue'
import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
import AppMedicineMethodEntryForm from '~/components/app/medicine-method/entry-form.vue'
import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
// Helpers
import { usePaginatedList } from '~/composables/usePaginatedList'
import { toast } from '~/components/pub/ui/toast'
// Types
import { ActionEvents, type HeaderPrep } from '~/components/pub/custom-ui/data/types'
import { MedicineBaseSchema, type MedicineBaseFormData } from '~/schemas/medicine.schema'
// Handlers
import {
recId,
recAction,
recItem,
isReadonly,
isProcessing,
isFormEntryDialogOpen,
isRecordConfirmationOpen,
handleActionSave,
handleActionEdit,
handleActionRemove,
handleCancelForm,
} from '~/handlers/medicine-method.handler'
// Services
import { getMedicineMethods, getMedicineMethodDetail } from '~/services/medicine-method.service'
const title = ref('')
const {
data,
isLoading,
paginationMeta,
searchInput,
handlePageChange,
handleSearch,
fetchData: getMedicineMethodList,
} = usePaginatedList({
fetchFn: async ({ page, search }) => {
const result = await getMedicineMethods({ search, page })
return { success: result.success || false, body: result.body || {} }
},
entityName: 'medicine-method',
})
const headerPrep: HeaderPrep = {
title: 'Metode Obat',
icon: 'i-lucide-medicine-bottle',
refSearchNav: {
placeholder: 'Cari (min. 3 karakter)...',
minLength: 3,
debounceMs: 500,
showValidationFeedback: true,
onInput: (_val: string) => {},
onClick: () => {},
onClear: () => {},
},
addNav: {
label: 'Tambah',
icon: 'i-lucide-plus',
onClick: () => {
recItem.value = null
recId.value = 0
isFormEntryDialogOpen.value = true
isReadonly.value = false
},
},
}
provide('rec_id', recId)
provide('rec_action', recAction)
provide('rec_item', recItem)
provide('table_data_loader', isLoading)
const getCurrentMedicineMethodDetail = async (id: number | string) => {
const result = await getMedicineMethodDetail(id)
if (result.success) {
const currentMaterial = result.body?.data || {}
recItem.value = currentMaterial
isFormEntryDialogOpen.value = true
}
}
// Watch for row actions when recId or recAction changes
watch([recId, recAction], () => {
switch (recAction.value) {
case ActionEvents.showDetail:
getCurrentMedicineMethodDetail(recId.value)
title.value = 'Detail Metode Obat'
isReadonly.value = true
break
case ActionEvents.showEdit:
getCurrentMedicineMethodDetail(recId.value)
title.value = 'Edit Metode Obat'
isReadonly.value = false
break
case ActionEvents.showConfirmDelete:
isRecordConfirmationOpen.value = true
break
}
})
onMounted(async () => {
await getMedicineMethodList()
})
</script>
<template>
<div class="p-4">
<Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
<div class="rounded-md border p-4">
<AppMedicineMethodList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
</div>
<Dialog
v-model:open="isFormEntryDialogOpen"
:title="!!recItem ? title : 'Tambah Metode Obat'"
size="lg"
prevent-outside
>
<AppMedicineMethodEntryForm
:schema="MedicineBaseSchema"
:values="recItem"
:is-loading="isProcessing"
:is-readonly="isReadonly"
@submit="
(values: MedicineBaseFormData | Record<string, any>, resetForm: () => void) => {
if (recId > 0) {
handleActionEdit(recId, values, getMedicineMethodList, resetForm, toast)
return
}
handleActionSave(values, getMedicineMethodList, resetForm, toast)
}
"
@cancel="handleCancelForm"
/>
</Dialog>
<!-- Record Confirmation Modal -->
<RecordConfirmation
v-model:open="isRecordConfirmationOpen"
action="delete"
:record="recItem"
@confirm="() => handleActionRemove(recId, getMedicineMethodList, toast)"
@cancel=""
>
<template #default="{ record }">
<div class="text-sm">
<p><strong>ID:</strong> {{ record?.id }}</p>
<p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
<p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
</div>
</template>
</RecordConfirmation>
</div>
</template>