feat/prescription: added group and flat list

app/components/app/prescription-item/mix-entry.vue

@@ -29,7 +29,7 @@ const emit = defineEmits<{
 }>()
 
 watch(medicines, (data) => {
-  medicineItems.value = CB.objectsToItem(data, 'code', 'name')
+  medicineItems.value = CB.objectsToItems(data, 'code', 'name')
 })
 
 function navClick(type: ClickType) {

app/components/app/prescription-item/non-mix-entry.vue

@@ -48,7 +48,7 @@ const emit = defineEmits<{
 }>()
 
 watch(medicines, (data) => {
-  medicineItems.value = CB.objectsToItem(data, 'code', 'name')
+  medicineItems.value = CB.objectsToItems(data, 'code', 'name')
 })
 
 function navClick(type: ClickType) {

app/components/app/prescription/flat-list.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import * as Table from '~/components/pub/ui/table'
+import * as DE from '~/components/pub/my-ui/doc-entry';
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import Nav from '~/components/pub/my-ui/nav-footer/ca-ed-su.vue'
+
+import type { Prescription } from '~/models/prescription';
+import PrescriptionItem from '~/components/app/prescription-item/list.vue';
+
+interface Props {
+  data: Prescription[]
+  paginationMeta: PaginationMeta
+}
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  cancel: [data: any]
+  edit: [data: any],
+  submit: [data: any]
+}>()
+
+function navClick(type: 'cancel' | 'edit' | 'submit', data: Prescription): void {
+  if (type === 'cancel') {
+    emit('cancel', data)
+  } else if (type === 'edit') {
+    emit('edit', data)
+  } else if (type === 'submit') {
+    emit('submit', data)
+  }
+}
+</script>
+
+<template>
+  <div v-if="data.length == 0" class="p-10 text-center">
+    <div class="mb-4 xl:mb-5">Belum Ada Data</div>
+    <div>
+      <Button>
+        <Icon name="i-lucide-plus" class="me-2 align-middle" />
+        Tambah Order
+      </Button>
+    </div>
+  </div>
+  <Table.Table>
+    <Table.TableHeader>
+      <Table.TableRow>
+        <Table.TableHead class="w-28">Tgl Order</Table.TableHead>
+        <Table.TableHead>DPJP</Table.TableHead>
+        <Table.TableHead>PPDS</Table.TableHead>
+        <Table.TableHead>Jenis Obat</Table.TableHead>
+        <Table.TableHead class="text-center">Status</Table.TableHead>
+        <Table.TableHead class="w-20"></Table.TableHead>
+      </Table.TableRow>
+    </Table.TableHeader>
+    <Table.TableBody>
+      <Table.TableRow v-for="item, idx in data">
+        <Table.TableCell>
+          {{ item.issuedAt?.substring(0, 10) || item.createdAt?.substring(0, 10) }}
+        </Table.TableCell>
+        <Table.TableCell>
+          {{ item.doctor?.employee?.person?.name || '-' }}
+        </Table.TableCell>
+        <Table.TableCell>
+        </Table.TableCell>
+        <Table.TableCell>
+          <div>
+            Racikan: {{ item.items.filter(function(element){ return element.isMix}).length }}
+          </div>
+          <div>
+            Non Racikan: {{ item.items.filter(function(element){ return !element.isMix}).length }}
+          </div>
+        </Table.TableCell>
+        <Table.TableCell class="text-center">
+          {{ item.status_code }}
+        </Table.TableCell>
+        <Table.TableCell class="text-end">
+          <Nav
+            v-if="item.status_code == 'new'"
+            :small-mode="true"
+            :default-class="'flex gap-1'"
+            @click="(type) => { navClick(type, item) }"
+          />
+        </Table.TableCell>
+      </Table.TableRow>
+    </Table.TableBody>
+  </Table.Table>
+  <template v-for="item, idx in data">
+  </template>
+</template>

app/components/content/prescription/list.vue

@@ -20,7 +20,8 @@ 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'
@@ -57,9 +58,25 @@ const {
   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 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,
@@ -161,7 +178,8 @@ async function handleActionSubmit(id: number, refresh: () => void, toast: ToastF
 
 <template>
   <Header :prep="{ ...headerPrep }" />
-  <List
+  <template v-if="!flatMode">
+    <Grouped 
       v-if="!isLoading.dataListLoading"
       :data="data"
       :pagination-meta="paginationMeta"
@@ -169,6 +187,17 @@ async function handleActionSubmit(id: number, refresh: () => void, toast: ToastF
       @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"