156 lines
3.8 KiB
Vue
156 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
// Components
|
|
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
|
|
import Header from '~/components/pub/my-ui/nav-header/prep.vue'
|
|
import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
|
|
import List from '~/components/app/device-order/list.vue'
|
|
|
|
// Helpers
|
|
import { usePaginatedList } from '~/composables/usePaginatedList'
|
|
import { toast } from '~/components/pub/ui/toast'
|
|
// import { useQueryMode } from '~/composables/useQueryMode'
|
|
import { useQueryCRUDMode } from '~/composables/useQueryCRUD'
|
|
|
|
// Types
|
|
import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
|
|
import { type DeviceOrderFormData, DeviceOrderSchema } from '~/schemas/device-order.schema'
|
|
import type { DeviceOrder } from "~/models/device-order";
|
|
|
|
// Handlers
|
|
import {
|
|
recId,
|
|
recAction,
|
|
recItem,
|
|
isReadonly,
|
|
isProcessing,
|
|
isFormEntryDialogOpen,
|
|
isRecordConfirmationOpen,
|
|
onResetState,
|
|
handleActionSave,
|
|
handleActionEdit,
|
|
handleActionRemove,
|
|
handleCancelForm,
|
|
} from '~/handlers/device-order.handler'
|
|
|
|
//
|
|
import { getList } from '~/services/device-order.service'
|
|
import type { Encounter } from '~/models/encounter'
|
|
|
|
// Props
|
|
interface Props {
|
|
encounter: Encounter
|
|
}
|
|
const props = defineProps<Props>()
|
|
|
|
const route = useRoute()
|
|
const title = ref('')
|
|
|
|
// const { mode, openForm, backToList } = useQueryMode()
|
|
const { mode, goToEntry, backToList } = useQueryCRUDMode()
|
|
const { recordId } = useQueryCRUDRecordId()
|
|
|
|
const {
|
|
data,
|
|
isLoading,
|
|
paginationMeta,
|
|
searchInput,
|
|
handlePageChange,
|
|
handleSearch,
|
|
fetchData: getMyList,
|
|
} = usePaginatedList({
|
|
fetchFn: async (params: any) => {
|
|
const result = await getList({
|
|
search: params.search,
|
|
sort: 'createdAt:asc',
|
|
'page-number': params['page-number'] || 0,
|
|
'page-size': params['page-size'] || 10,
|
|
includes: 'encounter',
|
|
})
|
|
return { success: result.success || false, body: result.body || {} }
|
|
},
|
|
entityName: 'device-order',
|
|
})
|
|
|
|
const headerPrep: HeaderPrep = {
|
|
title: 'Order Alkes',
|
|
icon: 'i-lucide-box',
|
|
refSearchNav: {
|
|
placeholder: 'Cari (min. 3 karakter)...',
|
|
minLength: 3,
|
|
debounceMs: 500,
|
|
showValidationFeedback: true,
|
|
onInput: (value: string) => {
|
|
searchInput.value = value
|
|
},
|
|
onClick: () => {},
|
|
onClear: () => {},
|
|
},
|
|
addNav: {
|
|
label: 'Tambah',
|
|
icon: 'i-lucide-plus',
|
|
onClick: async () => {
|
|
const data = {
|
|
encounter_id: props.encounter.id,
|
|
}
|
|
const dateResp = await handleActionSave(data, getMyList, () => {}, () => {})
|
|
if (dateResp.success) {
|
|
const currentData = dateResp.body.data || []
|
|
// goToEntry()
|
|
}
|
|
},
|
|
},
|
|
}
|
|
|
|
provide('rec_id', recId)
|
|
provide('rec_action', recAction)
|
|
provide('rec_item', recItem)
|
|
provide('table_data_loader', isLoading)
|
|
|
|
// Watch for row actions when recId or recAction changes
|
|
onMounted(async () => {
|
|
await getMyList()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<Header
|
|
v-model="searchInput"
|
|
:prep="headerPrep"
|
|
:ref-search-nav="headerPrep.refSearchNav"
|
|
@search="handleSearch"
|
|
class="mb-4 xl:mb-5"
|
|
/>
|
|
|
|
<List
|
|
:data="data"
|
|
:pagination-meta="paginationMeta"
|
|
@page-change="handlePageChange"
|
|
/>
|
|
|
|
<!-- Record Confirmation Modal -->
|
|
<RecordConfirmation
|
|
v-model:open="isRecordConfirmationOpen"
|
|
action="delete"
|
|
:record="recItem"
|
|
@confirm="() => handleActionRemove(recId, getMyList, 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>
|
|
</template>
|