feat/prescription-56: wip

app/components/content/prescription/entry.vue

@@ -1,24 +1,87 @@
 <script setup lang="ts">
-import Nav from '~/components/pub/my-ui/nav-footer/ba-su.vue'
+import Nav from '~/components/pub/my-ui/nav-footer/ba-de-su.vue'
 import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 
 import { useQueryCRUDMode } from '~/composables/useQueryCRUD'
-
-import ItemListEntry from '~/components/app/device-order-item/list-entry.vue'
 import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
 
+import { getDetail } from '~/services/prescription.service'
+import Detail from '~/components/app/prescription/detail.vue'
+import { getList as getPrescriptionItemList } from '~/services/prescription-item.service'
+import ItemListEntry from '~/components/app/prescription-item/list-entry.vue'
+import { type PrescriptionItem } from '~/models/prescription-item'
+
+import MixItemEntry from '~/components/app/prescription-item/mix-entry.vue'
+import { create } from '~/services/prescription-item.service';
+
+import NonMixItemEntry from '~/components/app/prescription-item/non-mix-entry.vue'
+
+import {
+  recItem,
+} from '~/handlers/prescription-item.handler'
+
+// props
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+// declaration & flows
+// const route = useRoute()
+const { getQueryParam } = useQueryParam()
+const id = getQueryParam('id')
+const dataRes = await getDetail(
+  typeof id === 'string' ? parseInt(id) : 0,
+  { includes: 'encounter,doctor,doctor-employee,doctor-employee-person' }
+)
+const data = dataRes.body?.data || null
+const items = ref(data?.items || [])
+
+const {
+  data: prescriptionItems,
+  fetchData: getMyList,
+} = usePaginatedList<PrescriptionItem> ({
+  fetchFn: async ({ page, search }) => {
+    const result = await getPrescriptionItemList({ 'prescription-id': id, search, page })
+    if (result.success) {
+      data.value = result.body.data
+    }
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'prescription-item',
+})
+
 const { backToList } = useQueryCRUDMode()
 
 const headerPrep: HeaderPrep = {
-  title: 'Tambah Order Alkes',
+  title: 'Tambah Order Obat / Resep',
   icon: 'i-lucide-box',
 }
 
-  function navClick(type: 'cancel' | 'submit') {
-    if (type === 'cancel') {
-      backToList()
-    }
+const mixDialogOpen = ref(false)
+const nonMixDialogOpen = ref(false)
+
+function navClick(type: 'back' | 'delete' | 'draft' | 'submit') {
+  if (type === 'back') {
+    backToList()
   }
+}
+
+function addItem(mode: 'mix' | 'non-mix') {
+  if (mode === 'mix') {
+    mixDialogOpen.value = true
+  } else if (mode === 'non-mix') {
+    nonMixDialogOpen.value = true
+  }
+}
+
+function saveMix() {
+  create({data})
+}
+
+function saveNonMix(data: PrescriptionItem) {
+  create({data})
+}
 </script>
 
 <template>
@@ -28,10 +91,42 @@ const headerPrep: HeaderPrep = {
     class="mb-4 xl:mb-5"
   />
 
-  <ItemListEntry />
+  <Detail :data="data" />
+
+  <ItemListEntry
+    :data="prescriptionItems"
+    @add="addItem"/>
   <Separator class="my-5" />
 
   <div class="w-full flex justify-center">
     <Nav @click="navClick" />
   </div>
+
+  <Dialog
+    v-model:open="mixDialogOpen"
+    :title="recItem?.id ? 'Edit Racikan' : 'Tambah Racikan'"
+    size="xl"
+    prevent-outside
+  >
+    <MixItemEntry
+      :data="data"
+      :items="items"
+      @close="mixDialogOpen = false"
+      @save="saveMix"
+    />
+  </Dialog>
+
+  <Dialog
+    v-model:open="nonMixDialogOpen"
+    :title="recItem?.id ? 'Edit Non Racikan' : 'Tambah Non Racikan'"
+    size="xl"
+    prevent-outside
+  >
+    <NonMixItemEntry
+      :data="data"
+      :items="items"
+      @close="mixDialogOpen = false"
+      @save="saveNonMix"
+    />
+  </Dialog>
 </template>

app/components/content/prescription/list.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import Header from '~/components/pub/my-ui/nav-header/prep.vue'
-
 import { usePaginatedList } from '~/composables/usePaginatedList'
-import { toast } from '~/components/pub/ui/toast'
 
+import { toast } from '~/components/pub/ui/toast'
 import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
 
 // Handlers
 import {
@@ -14,6 +14,7 @@ import {
   isReadonly,
   isFormEntryDialogOpen,
   isRecordConfirmationOpen,
+  handleActionRemove,
   handleActionSave,
 } from '~/handlers/prescription.handler'
 
@@ -21,14 +22,13 @@ import {
 import { getList, getDetail } from '~/services/prescription.service'
 import List from '~/components/app/prescription/list.vue'
 import type { Prescription } from '~/models/prescription'
-// import { getList as getUnitList } from '~/services/unit.service' // previously uses getList
-// import { getValueLabelList } from '~/services/unit.service'
 
 const props = defineProps<{
   encounter_id: number
 }>()
 
 const route = useRoute()
+const { setQueryParams } = useQueryParam()
 
 const title = ref('')
 
@@ -40,15 +40,14 @@ const {
   isLoading,
   paginationMeta,
   searchInput,
-  handlePageChange,
-  handleSearch,
   fetchData: getMyList,
 } = usePaginatedList<Prescription>({
   fetchFn: async ({ page, search }) => {
     const result = await getList({
       search,
       page,
-      'encounter-id': encounter_id
+      'encounter-id': encounter_id,
+      includes: 'doctor,doctor-employee,doctor-employee-person',
     })
     return { success: result.success || false, body: result.body || {} }
   },
@@ -109,26 +108,59 @@ watch([recId, recAction], () => {
       isReadonly.value = false
       break
     case ActionEvents.showConfirmDelete:
-      isRecordConfirmationOpen.value = true
       break
   }
 })
 
-watch([isFormEntryDialogOpen], () => {
+watch([isFormEntryDialogOpen], async () => {
   if (isFormEntryDialogOpen.value) {
     isFormEntryDialogOpen.value = false;
-    handleActionSave({
-      encounter_id,
-    }, getMyList, () =>{}, toast)
+    const saveResp = await handleActionSave({ encounter_id }, getMyList, () =>{}, toast)
+    if (saveResp.success) {
+      setQueryParams({
+        'mode': 'entry',
+        'id': saveResp.body?.data?.id.toString()
+      })
+    }
   }
 })
 
-onMounted(async () => {
-})
+function cancel(data: Prescription) {
+  recId.value = data.id
+  recItem.value = data
+  isRecordConfirmationOpen.value = true
+}
+
+function edit(data: Prescription) {
+  setQueryParams({
+    'mode': 'entry',
+    'id': data.id.toString()
+  })
+  recItem.value = data
+}
+
+function submit(data: Prescription) {
+}
+
 </script>
 
 <template>
   <Header :prep="{ ...headerPrep }" />
+  <List
+    v-if="!isLoading.dataListLoading"
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @cancel="cancel"
+    @edit="edit"
+    @submit="submit"
+  />
 
-  <List v-if="!isLoading.dataListLoading" :data="data" :pagination-meta="paginationMeta" />
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMyList, toast)"
+    @cancel=""
+  >
+  </RecordConfirmation>
 </template>

app/components/content/prescription/main.vue

@@ -7,10 +7,10 @@ const props = defineProps<{
   encounter_id: number
 }>()
 
-const { mode } = useQueryMode()
+const { mode } = useQueryCRUDMode()
 </script>
 
 <template>
   <List v-if="mode === 'list'" :encounter_id="encounter_id" />
-  <Entry v-else />
+  <Entry v-else :encounter_id="encounter_id" />
 </template>