✨ feat (soapi): implement soapi entry with form and list

2025-11-02 23:20:38 +07:00
parent da80d1a206
commit 6bb881d248
8 changed files with 189 additions and 107 deletions
@@ -11,7 +11,7 @@ import FunctionForm from './form-function.vue'
 const route = useRoute()
 const type = computed(() => (route.query.tab as string) || 'early-medical-assessment')

-const { mode, openForm, backToList } = useQueryMode('mode')
+const { mode, goToEntry, backToList } = useQueryCRUDMode('mode')

 const formMap = {
  'early-medical-assessment': EarlyForm,
@@ -26,7 +26,8 @@ const ActiveForm = computed(() => formMap[type.value] || EarlyForm)
  <div>
    <SoapiList
      v-if="mode === 'list'"
-      @add="openForm"
+      @add="goToEntry"
+      @edit="goToEntry"
    />

    <component
@@ -7,6 +7,7 @@ import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 import { FunctionSoapiSchema } from '~/schemas/soapi.schema'
 import { toast } from '~/components/pub/ui/toast'
 import { handleActionSave, handleActionEdit } from '~/handlers/soapi-early.handler'
+const { backToList } = useQueryMode('mode')

 const route = useRoute()
 const isOpenProcedure = ref(false)
@@ -102,7 +103,10 @@ function handleClick(type: string) {
 }
 const entryRehabRef = ref()
 async function actionHandler(type: string) {
-  console.log(type)
+  if (type === 'back') {
+    backToList()
+    return
+  }
  const result = await entryRehabRef.value?.validate()
  if (result?.valid) {
    if (
@@ -7,6 +7,7 @@ import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 import { EarlyRehabSchema } from '~/schemas/soapi.schema'
 import { toast } from '~/components/pub/ui/toast'
 import { handleActionSave, handleActionEdit } from '~/handlers/soapi-early.handler'
+const { backToList } = useQueryMode('mode')

 const route = useRoute()
 const isOpenProcedure = ref(false)
@@ -101,7 +102,10 @@ function handleOpen(type: string) {

 const entryRehabRef = ref()
 async function actionHandler(type: string) {
-  console.log(type)
+  if (type === 'back') {
+    backToList()
+    return
+  }
  const result = await entryRehabRef.value?.validate()
  if (result?.valid) {
    if (selectedDiagnose.value?.length > 0) {
@@ -8,6 +8,7 @@ import { EarlySchema } from '~/schemas/soapi.schema'
 import { toast } from '~/components/pub/ui/toast'
 import { handleActionSave, handleActionEdit } from '~/handlers/soapi-early.handler'

+const { backToList } = useQueryMode('mode')
 const route = useRoute()
 const isOpenProcedure = ref(false)
 const isOpenDiagnose = ref(false)
@@ -76,7 +77,10 @@ function handleOpen(type: string) {

 const entryRef = ref()
 async function actionHandler(type: string) {
-  console.log(type)
+  if (type === 'back') {
+    backToList()
+    return
+  }
  const result = await entryRef.value?.validate()
  if (result?.valid) {
    if (selectedProcedure.value?.length > 0 || selectedDiagnose.value?.length > 0) {
@@ -1,16 +1,41 @@
 <script setup lang="ts">
 import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
-import AssesmentFunctionList from '~/components/app/soapi/list.vue'
+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'

-const props = defineProps<{
-  label: string
-}>()
+// 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: () => {
@@ -24,13 +49,7 @@ const refSearchNav: RefSearchNav = {
  },
 }

-// Loading state management
-const isLoading = reactive<DataTableLoader>({
-  isTableLoading: false,
-})
-const recId = ref<number>(0)
-const recAction = ref<string>('')
-const recItem = ref<any>(null)
+const typeCode = ref('')

 const hreaderPrep: HeaderPrep = {
  title: props.label,
@@ -41,15 +60,86 @@ const hreaderPrep: HeaderPrep = {
  },
 }

-async function getPatientList() {
-  const resp = await xfetch('/api/v1/patient')
+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}`
+  const resp = await xfetch(url)
  if (resp.success) {
    data.value = (resp.body as Record<string, any>).data
  }
 }

-onMounted(() => {
-  getPatientList()
+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)
@@ -59,7 +149,39 @@ provide('table_data_loader', isLoading)
 </script>

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

-  <AssesmentFunctionList :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>