feat/prescription: added group and flat list

app/components/content/prescription/list.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+// Composables
 import { usePaginatedList } from '~/composables/usePaginatedList'
 
+// Pubs component
 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'
@@ -20,15 +22,12 @@ import {
 
 // Services
 import { getList, getDetail } from '~/services/prescription.service'
-import List from '~/components/app/prescription/list.vue'
+import FlatList from '~/components/app/prescription/flat-list.vue'
+import Grouped from '~/components/app/prescription/grouped-list.vue'
 import type { Prescription } from '~/models/prescription'
 import { submit } from '~/services/prescription.service'
 import type { ToastFn } from '~/handlers/_handler'
 
-const props = defineProps<{
-  encounter_id: number
-}>()
-
 const route = useRoute()
 const { setQueryParams } = useQueryParam()
 
@@ -45,21 +44,40 @@ const {
   searchInput,
   fetchData: getMyList,
 } = usePaginatedList<Prescription>({
-  fetchFn: async ({ page, search }) => {
+  fetchFn: async (params: any) => {
     const result = await getList({
-      search,
-      page,
       'encounter-id': encounter_id,
       includes: 'doctor,doctor-employee,doctor-employee-person,items,items-medicine,items-medicine-medicineForm',
+      search: params.search,
+      page: params.page,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
     })
     return { success: result.success || false, body: result.body || {} }
   },
   entityName: 'prescription'
 })
 
+function updateProvidedVal(val: boolean) {
+  flatMode.value = val
+}
+const flatMode = ref(false)
+const flatModeLabel = ref('Mode Flat: Tidak')
+provide('flatMode', { flatMode, updateProvidedVal })
+watch(flatMode, (newVal) => {
+  flatModeLabel.value = newVal ? 'Mode Flat: Ya' : 'Mode Flat: Tidak'
+})
+
+const voidFn = () => {}
 const headerPrep: HeaderPrep = {
   title: 'Order Obat',
   icon: 'i-lucide-box',
+  components: [
+    {
+      component: defineAsyncComponent(() => import('~/components/pub/my-ui/toggle/provided-toggle.vue')),
+      props: { variant: 'outline', label: flatModeLabel, providedKey: 'flatMode' }
+    },
+  ],
   refSearchNav: {
     placeholder: 'Cari (min. 3 karakter)...',
     minLength: 3,
@@ -74,11 +92,17 @@ const headerPrep: HeaderPrep = {
   addNav: {
     label: 'Tambah',
     icon: 'i-lucide-plus',
-    onClick: () => {
+    onClick: async () => {
       recItem.value = null
       recId.value = 0
-      isFormEntryDialogOpen.value = true
       isReadonly.value = false
+      const saveResp = await handleActionSave({ encounter_id }, voidFn, voidFn, voidFn)
+      if (saveResp.success) {
+        setQueryParams({
+          'mode': 'entry',
+          'id': saveResp.body?.data?.id.toString()
+        })
+      }
     },
   },
 }
@@ -88,6 +112,28 @@ provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getMyDetail(recId.value)
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getMyDetail(recId.value)
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      break
+  }
+})
+
+// watch([isFormEntryDialogOpen], async () => {
+//   if (isFormEntryDialogOpen.value) {
+//   }
+// })
+
+// Functions
 const getMyDetail = async (id: number | string) => {
   const result = await getDetail(id)
   if (result.success) {
@@ -161,14 +207,26 @@ async function handleActionSubmit(id: number, refresh: () => void, toast: ToastF
 
 <template>
   <Header :prep="{ ...headerPrep }" />
-  <List
-    v-if="!isLoading.dataListLoading"
-    :data="data"
-    :pagination-meta="paginationMeta"
-    @cancel="confirmCancel"
-    @edit="goToEdit"
-    @submit="confirmSubmit"
-  />
+  <template v-if="!flatMode">
+    <Grouped 
+      v-if="!isLoading.dataListLoading"
+      :data="data"
+      :pagination-meta="paginationMeta"
+      @cancel="confirmCancel"
+      @edit="goToEdit"
+      @submit="confirmSubmit"
+    />
+  </template>
+  <template v-else>
+    <FlatList
+      v-if="!isLoading.dataListLoading"
+      :data="data"
+      :pagination-meta="paginationMeta"
+      @cancel="confirmCancel"
+      @edit="goToEdit"
+      @submit="confirmSubmit"
+    />
+  </template>
 
   <RecordConfirmation
     v-model:open="isRecordConfirmationOpen"