simrsx-fe/app/components/content/device-order/list.vue

<script setup lang="ts">
// Helpers
import { usePaginatedList } from '~/composables/usePaginatedList'

// Components
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'
import { toast } from '~/components/pub/ui/toast'

// Types
import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'

// Device order things
import {
  recId,
  recAction,
  recItem,
  isReadonly,
  handleActionSave,
  handleActionRemove,
} from '~/handlers/device-order.handler'
import { getList, submit } from '~/services/device-order.service'
import type { ToastFn } from '~/handlers/_handler'
import { type DeviceOrder } from "~/models/device-order";
import ConfirmationInfo from '~/components/app/device-order/confirmation-info.vue'

// Props
const props = defineProps<{
  encounter_id: number
}>()

const encounter_id = props.encounter_id

// Header
const voidFn = () => {}
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 () => {
      recItem.value = null
      recId.value = 0
      isReadonly.value = false
      const saveResp = await handleActionSave({ encounter_id }, voidFn, voidFn, voidFn)
      if (saveResp.success) {
        setQueryParams({
          'mode': 'entry',
          'id': saveResp.body?.data?.id.toString()
        })
      }
    },
  },
}

// List
const {
  data,
  isLoading,
  paginationMeta,
  searchInput,
  handlePageChange,
  handleSearch,
  fetchData: getMyList,
} = usePaginatedList({
  fetchFn: async (params: any) => {
    const result = await getList({
      'encounter-id': encounter_id,
      search: params.search,
      includes: 'doctor,doctor-employee,doctor-employee-person,items,items-device',
      page: params.page,
      'page-number': params['page-number'] || 0,
      'page-size': params['page-size'] || 10,
    })
    return { success: result.success || false, body: result.body || {} }
  },
  entityName: 'device-order',
})

// Selected item
const selectedItem = ref<DeviceOrder | null>()
const isSubmitConfirmationOpen = ref(false)
const isDeleteConfirmationOpen = ref(false)
const { setQueryParams } = useQueryParam()

provide('rec_id', recId)
provide('rec_action', recAction)
provide('rec_item', recItem)
provide('table_data_loader', isLoading)

watch([recId, recAction], () => {
  let item: DeviceOrder | null
  switch (recAction.value) {
    case ActionEvents.showDetail:
      setQueryParams({
        'mode': 'entry',
        'id': recId.value.toString()
      })
      break
    case ActionEvents.showConfirmSubmit:
      selectedItem.value = pickItem()
      isSubmitConfirmationOpen.value = true
      break
    case ActionEvents.showConfirmDelete:
      selectedItem.value = pickItem()
      isDeleteConfirmationOpen.value = true
      break
  }
  recAction.value = '';
})

async function handleActionSubmit(id: number, refresh: () => void, toast: ToastFn) {
  const result = await submit(id)
  if (result.success) {
    toast({ title: 'Berhasil', description: 'Resep telah di ajukan', variant: 'default' })
    setTimeout(refresh, 300)
  } else {
    toast({ title: 'Gagal', description: 'Gagal menjalankan perintah', variant: 'destructive' })
  }
}

function pickItem(): DeviceOrder | null {
  const item = data.value.find(item => item.id === recId.value)
  selectedItem.value = item
  return item
}
</script>

<template>
  <Header
    v-model="searchInput"
    :prep="headerPrep"
    :ref-search-nav="headerPrep.refSearchNav"
    @search="handleSearch"
  />

  <List
    v-if="!isLoading.dataListLoading"
    :data="data"
    :pagination-meta="paginationMeta"
    @page-change="handlePageChange"
  />
  <!-- 
    @cancel="cancel"
    @edit="edit"
    @submit="submit"
   -->

  <!-- Submit Record Confirmation Modal -->
  <RecordConfirmation
    v-model:open="isSubmitConfirmationOpen"
    customTitle="Ajukan Order"
    customMessage="Akan dilakukan pengajuan order alat kesehatan"
    customConfirmText="Ajukan"
    :record="recItem"
    @confirm="() => handleActionSubmit(recId, getMyList, toast)"
  >
    <ConfirmationInfo :data="selectedItem" />
  </RecordConfirmation>

  <!-- Del Record Confirmation Modal -->
  <RecordConfirmation
    v-model:open="isDeleteConfirmationOpen"
    action="delete"
    :record="recItem"
    @confirm="() => handleActionRemove(recId, getMyList, toast)"
  >
    <ConfirmationInfo :data="selectedItem" />
  </RecordConfirmation>
</template>