feat/ap-lab-order-52: wip

app/components/app/ap-lab-order/list.cfg.ts

@@ -0,0 +1,58 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
+
+  headers: [[
+    { label: 'Tgl. Order' },
+    { label: 'No. Order' },
+    { label: 'Jadwal Pemeriksaan' },
+    { label: 'Lokalisasi' },
+    { label: 'Stadium' },
+    { label: 'Status' },
+    { label: 'Resume' },
+    { label: '' }]],
+
+  keys: [
+    'date',
+    'number',
+    'examinationDate',
+    'localization',
+    'stadium',
+    'resume',
+    '',
+  ],
+
+  delKeyNames: [
+    { key: 'date', label: 'Tanggal' },
+    { key: 'number', label: 'Nomor' },
+  ],
+
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}

app/components/app/ap-lab-order/list.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+// Components
+import DataTable from '~/components/pub/my-ui/data-table/data-table.vue'
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list.cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <DataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>

app/components/app/mcu-order/entry-for-ap.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import * as Cbx from '~/components/pub/my-ui/checkboxes'
+import { fi } from 'date-fns/locale';
+
+const substances = [
+  { value: 'biopsi', label: 'Biopsi'},
+  { value: 'operation', label: 'Operasi' },
+  { value: 'scraping', label: 'Kerokan' },
+  { value: 'cytology', label: 'Sitologi' },
+  { value: 'fnab', label: 'FNAB' },
+]
+
+const fications = [
+  { value: 'pa-formaline-10p', label: 'pA. Formalin 10%' },
+  { value: 'spt-alcohol-70p', label: 'Sputum Alkohol 70%' },
+  { value: 'urn-alcohol-50p', label: 'Urine Alkohol 50%' },
+  { value: 'vgn-smr-alcohol-95p', label: 'Vagibal Smear 95%' },
+]
+
+const prevAp = [
+  { value: 'clinical', label: 'Klinik' },
+  { value: 'ro', label: 'RO' },
+  { value: 'clinical-pat', label: 'Pat. Klinik' },
+  { value: 'operation', label: 'Operasi' },
+  { value: 'necropsy', label: 'Nekropsi' },
+]
+
+
+
+</script>
+
+<template>
+  <div class="header">Data Order</div>
+  <DE.Block :col-count="3" :cell-flex="false">
+    <DE.Cell>
+      <DE.Label>Tgl. Order</DE.Label>
+      <DE.Field>
+        <Input readonly />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>DPJP</DE.Label>
+      <DE.Field>
+        <Input readonly />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>PPDS</DE.Label>
+      <DE.Field>
+        <Input readonly />
+      </DE.Field>
+    </DE.Cell>
+  </DE.Block>
+
+  <div class="header">Bahan</div>
+  <DE.Block :cell-flex="false">
+    <DE.Cell>
+      <DE.Field>
+        <Cbx.Checkboxes :items="substances" :use-flex="true" />
+      </DE.Field>
+    </DE.Cell>
+  </DE.Block>
+
+  <div class="header">Fiksasi</div>
+  <DE.Block :cell-flex="false">
+    <DE.Cell>
+      <DE.Field>
+        <Cbx.Checkboxes :items="fications" :use-flex="true" />
+      </DE.Field>
+    </DE.Cell>
+  </DE.Block>
+
+  <div class="header">Data Klinis Pasien</div>
+  <DE.Block :col-count="6" :cell-flex="false">
+    <DE.Cell :col-span="3">
+      <DE.Label>Lokalisasi</DE.Label>
+      <DE.Field>
+        <Textarea />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell :col-span="3">
+      <DE.Label>Diagnosa Klinik</DE.Label>
+      <DE.Field>
+        <Textarea />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Stadium T</DE.Label>
+      <DE.Field>
+        <Input />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Stadium M</DE.Label>
+      <DE.Field>
+        <Input />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Stadium N</DE.Label>
+      <DE.Field>
+        <Input />
+      </DE.Field>
+    </DE.Cell>
+    <div class=""></div>
+    <DE.Cell :col-span="3">
+      <DE.Label>Keterangan Klinik</DE.Label>
+      <DE.Field>
+        <Textarea rows="2" />
+      </DE.Field>
+    </DE.Cell>
+  </DE.Block>
+
+  <div class="header">Riwayat Pemeriksaan</div>
+  <DE.Block :col-count="2" :cell-flex="false">
+    <DE.Cell>
+      <DE.Label>Riwayat Dulu</DE.Label>
+      <DE.Field>
+        <Textarea />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Riwayat Sekarang</DE.Label>
+      <DE.Field>
+        <Textarea />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Pemeriksaan PA Sebelumnya</DE.Label>
+      <DE.Field>
+        <Cbx.Checkboxes :items="prevAp" :use-flex="true" />
+      </DE.Field>
+    </DE.Cell>
+    <div></div>
+    <DE.Cell>
+      <DE.Label>Keterangan PA Sebelumnya</DE.Label>
+      <DE.Field>
+        <Textarea />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Pemeriksaan Penunjang</DE.Label>
+      <DE.Field>
+        <Textarea />
+      </DE.Field>
+    </DE.Cell>
+
+  </DE.Block>
+
+</template>
+
+<style>
+.header {
+  @apply mb-1.5 text-sm 2xl:text-base font-semibold
+}
+</style>

app/components/content/ap-lab-order/entry.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import Nav from '~/components/pub/my-ui/nav-footer/ba-de-su.vue'
+import NavOk from '~/components/pub/my-ui/nav-footer/ok.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 { type HeaderPrep } from '~/components/pub/my-ui/data/types'
+
+// mcu src category
+import ScrCategorySwitcher from '~/components/app/mcu-src-category/switcher.vue'
+import { getList as getMcuCategoryList } from '~/services/mcu-src-category.service'
+
+// mcu src
+import { type McuSrc } from '~/models/mcu-src'
+import { getList as getMcuSrcList } from '~/services/mcu-src.service'
+import McuSrcPicker from '~/components/app/mcu-src/picker-accordion.vue'
+
+// mcu order
+import { getDetail } from '~/services/mcu-order.service'
+import Detail from '~/components/app/mcu-order/detail.vue'
+
+// mcu order item, manually not using composable
+import {
+  getList as getMcuOrderItemList,
+  create as createMcuOrderItem,
+  remove as removeMcuOrderItem,
+} from '~/services/mcu-order-item.service'
+import { type McuOrderItem } from '~/models/mcu-order-item'
+import Entry from '~/components/app/mcu-order/entry-for-ap.vue'
+
+// props
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+// declaration & flows
+
+// MCU Order
+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
+
+// MCU Sources
+const { backToList } = useQueryCRUDMode()
+
+const headerPrep: HeaderPrep = {
+  title: 'Entry Order LAB PA',
+  icon: 'i-lucide-box',
+}
+
+function navClick(type: 'back' | 'delete' | 'draft' | 'submit') {
+  if (type === 'back') {
+    backToList()
+  }
+}
+
+</script>
+
+<template>
+  <Header
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    class="mb-4 xl:mb-5"
+  />
+
+  <Entry />
+  <Separator class="my-5" />
+
+  <div class="w-full flex justify-center">
+    <Nav @click="navClick" />
+  </div>
+</template>

app/components/content/ap-lab-order/list.vue

@@ -0,0 +1,159 @@
+<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 RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionRemove,
+} from '~/handlers/mcu-order.handler'
+
+// Apps
+import { getList, getDetail } from '~/services/mcu-order.service'
+import List from '~/components/app/mcu-order/list.vue'
+import type { McuOrder } from '~/models/mcu-order'
+
+const route = useRoute()
+const { setQueryParams } = useQueryParam()
+const { crudQueryParams } = useQueryCRUD()
+
+const title = ref('')
+
+const plainEid = route.params.id
+const encounter_id = (plainEid && typeof plainEid == 'string') ? parseInt(plainEid) : 0 // here the
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMyList,
+} = usePaginatedList<McuOrder>({
+  fetchFn: async ({ page, search }) => {
+    const result = await getList({
+      search,
+      page,
+      'scope-code': "ap-lab",
+      'encounter-id': encounter_id,
+      includes: 'doctor,doctor-employee,doctor-employee-person',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'mcu-order'
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Order Lab PA',
+  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: () => {
+      recItem.value = null
+      recId.value = 0
+      crudQueryParams.value = { mode: 'entry', recordId: undefined }
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getMyDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getMyDetail(recId.value)
+      title.value = 'Detail Order Lab PK'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getMyDetail(recId.value)
+      title.value = 'Edit Order Lab PK'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+watch([isFormEntryDialogOpen], async () => {
+})
+
+onMounted(async () => {
+})
+
+function cancel(data: McuOrder) {
+  recId.value = data.id
+  recItem.value = data
+  isRecordConfirmationOpen.value = true
+}
+
+function edit(data: McuOrder) {
+  setQueryParams({
+    'mode': 'entry',
+    'id': data.id.toString()
+  })
+  recItem.value = data
+}
+
+function submit(data: McuOrder) {
+}
+</script>
+
+<template>
+  <Header :prep="{ ...headerPrep }" />
+
+  <List
+    v-if="!isLoading.dataListLoading"
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @cancel="cancel"
+    @edit="edit"
+    @submit="submit"
+  />
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMyList, toast)"
+    @cancel=""
+  />
+</template>

app/components/content/ap-lab-order/main.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+//
+import List from './list.vue'
+import Entry from './entry.vue'
+
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+const { mode } = useQueryCRUDMode()
+</script>
+
+<template>
+  <List v-if="mode === 'list'" :encounter_id="encounter_id" />
+  <Entry v-else :encounter_id="encounter_id" />
+</template>