75 lines
1.8 KiB
Vue
75 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import type { DataTableLoader } from '~/components/pub/base/data-table/type'
|
|
import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
|
|
import Modal from '~/components/pub/base/modal/modal.vue'
|
|
import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
|
|
import { getMedicineMethods } from '~/services/medicine-method.service'
|
|
|
|
const data = ref([])
|
|
const entry = ref<any>({})
|
|
|
|
const refSearchNav: RefSearchNav = {
|
|
onClick: () => {
|
|
// open filter modal
|
|
},
|
|
onInput: (_val: string) => {
|
|
// filter patient list
|
|
},
|
|
onClear: () => {
|
|
// clear url param
|
|
},
|
|
}
|
|
|
|
// Loading state management
|
|
const isLoading = reactive<DataTableLoader>({
|
|
summary: false,
|
|
isTableLoading: false,
|
|
})
|
|
|
|
const isOpen = ref(false)
|
|
|
|
const recId = ref<number>(0)
|
|
const recAction = ref<string>('')
|
|
const recItem = ref<any>(null)
|
|
|
|
const hreaderPrep: HeaderPrep = {
|
|
title: 'Metode Pemberian',
|
|
icon: 'i-lucide-medicine-bottle',
|
|
addNav: {
|
|
label: 'Tambah',
|
|
onClick: () => (isOpen.value = true),
|
|
},
|
|
}
|
|
|
|
async function getData() {
|
|
try {
|
|
isLoading.isTableLoading = true
|
|
data.value = await getMedicineMethods()
|
|
} catch (err) {
|
|
console.error(err)
|
|
} finally {
|
|
isLoading.isTableLoading = false
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
getData()
|
|
})
|
|
|
|
provide('rec_id', recId)
|
|
provide('rec_action', recAction)
|
|
provide('rec_item', recItem)
|
|
provide('table_data_loader', isLoading)
|
|
</script>
|
|
|
|
<template>
|
|
<Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
|
|
<div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
|
|
<AppMedicineMethodList :data="data" />
|
|
</div>
|
|
|
|
<Modal v-model:open="isOpen" title="Tambah Metode Pemberian" size="lg" prevent-outside>
|
|
<AppMedicineMethodEntryForm v-model="entry" />
|
|
</Modal>
|
|
</template>
|