simrsx-fe/app/components/content/soapi/list.vue

<script setup lang="ts">
import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
import { ActionEvents, type HeaderPrep, type RefSearchNav } from '~/components/pub/my-ui/data/types'
import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
import List from '~/components/app/soapi/list.vue'
import Header from '~/components/pub/my-ui/nav-header/prep.vue'

// Helpers
import { usePaginatedList } from '~/composables/usePaginatedList'
import { toast } from '~/components/pub/ui/toast'

import { handleActionRemove } from '~/handlers/soapi-early.handler'
// Services
import { getList, getDetail } from '~/services/soapi-early.service'

// Models
import type { Encounter } from '~/models/encounter'

// Props
interface Props {
  encounter: Encounter
  label: string
}
const route = useRoute()
const props = defineProps<Props>()
const emits = defineEmits(['add', 'edit'])

const data = ref([])
const encounterId = ref<number>(props?.encounter?.id || 0)
const title = ref('')
const recId = ref<number>(0)
const recAction = ref<string>('')
const recItem = ref<any>(null)
const isLoading = ref(false)
const isReadonly = ref(false)
const isRecordConfirmationOpen = ref(false)
const paginationMeta = ref<PaginationMeta>(null)

const refSearchNav: RefSearchNav = {
  onClick: () => {
    // open filter modal
  },
  onInput: (_val: string) => {
    // filter patient list
  },
  onClear: () => {
    // clear url param
  },
}

const typeCode = ref('')

const hreaderPrep: HeaderPrep = {
  title: props.label,
  icon: 'i-lucide-users',
  addNav: {
    label: 'Tambah',
    onClick: () => emits('add'),
  },
}

const { recordId } = useQueryCRUDRecordId()
const { goToEntry, backToList } = useQueryCRUDMode('mode')

const type = computed(() => (route.query.tab as string) || 'early-medical-assessment')

onMounted(async () => {
  await getMyList()
})

async function getMyList() {
  const url = `/api/v1/soapi?type-code=${typeCode.value}?includes=encounter`
  const resp = await xfetch(url)
  if (resp.success) {
    data.value = (resp.body as Record<string, any>).data
  }
}

function handlePageChange(page: number) {
  emits('pageChange', page)
}

function handleBack() {
  recordId.value = ''
  backToList()
}

watch(
  () => type.value,
  (val) => {
    if (val) {
      if (val === 'early-medical-assessment') {
        typeCode.value = 'early-medic'
      } else if (val === 'rehab-medical-assessment') {
        typeCode.value = 'early-rehab'
      } else if (val === 'function-assessment') {
        typeCode.value = 'function'
      }
      getMyList()
    }
  },
)

watch([recId, recAction], () => {
  switch (recAction.value) {
    case ActionEvents.showEdit:
      emits('edit')
      isReadonly.value = false
      router.replace({
        path: route.path,
        query: {
          ...route.query,
          mode: 'entry',
          'record-id': recId.value,
        },
      })
      break

    case ActionEvents.showDetail:
      emits('edit')
      isReadonly.value = true
      router.replace({
        path: route.path,
        query: {
          ...route.query,
          mode: 'entry',
          'record-id': recId.value,
        },
      })
      break

    case ActionEvents.showConfirmDelete:
      isRecordConfirmationOpen.value = true
      break

    case ActionEvents.showAdd:
      recordId.value = ''
      goToEntry()
      emits('add')
      break
  }
})

provide('rec_id', recId)
provide('rec_action', recAction)
provide('rec_item', recItem)
provide('table_data_loader', isLoading)
</script>

<template>
  <Header
    :prep="{ ...hreaderPrep }"
    :ref-search-nav="refSearchNav"
  />
  <List :data="data" />

  <PaginationView
    :pagination-meta="paginationMeta"
    @page-change="handlePageChange"
  />

  <RecordConfirmation
    v-model:open="isRecordConfirmationOpen"
    action="delete"
    :record="recItem"
    @confirm="() => handleActionRemove(recId, getMyList, toast)"
    @cancel=""
  >
    <template #default="{ record }">
      <div class="text-sm">
        <p>
          <strong>ID:</strong>
          {{ record?.id }}
        </p>
        <p v-if="record?.name">
          <strong>Nama:</strong>
          {{ record.name }}
        </p>
        <p v-if="record?.code">
          <strong>Kode:</strong>
          {{ record.code }}
        </p>
      </div>
    </template>
  </RecordConfirmation>
</template>