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

app/components/app/soapi/list-cfg.ts

@@ -6,94 +6,28 @@ type SmallDetailDto = any
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
 export const config: Config = {
-  cols: [
+  cols: [{}, {}, {}, { width: 100 }, { width: 120 }, {}, {}, {}, { width: 100 }, { width: 100 }, {}, { width: 50 }],
-    {},
-    {},
-    {},
-    { width: 100 },
-    { width: 120 },
-    {},
-    {},
-    {},
-    { width: 100 },
-    { width: 100 },
-    {},
-    { width: 50 },
-  ],
 
   headers: [
     [
-      { label: 'Nama' },
+      { label: 'Tanggal' },
-      { label: 'Rekam Medis' },
+      { label: 'DPJP' },
-      { label: 'KTP' },
+      { label: 'Keluhan & Riwayat' },
-      { label: 'Tgl Lahir' },
+      { label: 'Pemeriksaan' },
-      { label: 'Umur' },
+      { label: 'Diagnosa' },
-      { label: 'JK' },
-      { label: 'Pendidikan' },
       { label: 'Status' },
-      { label: '' },
+      { label: 'Aksi' },
     ],
   ],
 
-  keys: [
+  keys: ['time', 'employee_id', 'main_complaint', 'examination', 'diagnose', 'status', 'action'],
-    'name',
-    'medicalRecord_number',
-    'identity_number',
-    'birth_date',
-    'patient_age',
-    'gender',
-    'education',
-    'status',
-    'action',
-  ],
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },
     { key: 'name', label: 'Nama' },
   ],
 
-  parses: {
+  parses: {},
-    name: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
-    },
-    identity_number: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      if (recX.identity_number?.substring(0, 5) === 'BLANK') {
-        return '(TANPA NIK)'
-      }
-      return recX.identity_number
-    },
-    birth_date: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      if (typeof recX.birth_date === 'object' && recX.birth_date) {
-        return (recX.birth_date as Date).toLocaleDateString()
-      } else if (typeof recX.birth_date === 'string') {
-        return recX.birth_date.substring(0, 10)
-      }
-      return recX.birth_date
-    },
-    patient_age: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      return recX.birth_date?.split('T')[0]
-    },
-    gender: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
-        return 'Tidak Diketahui'
-      }
-      return recX.gender_code
-    },
-    education: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      if (typeof recX.education_code === 'number' && recX.education_code >= 0) {
-        return recX.education_code
-      } else if (typeof recX.education_code !== 'undefined') {
-        return recX.education_code
-      }
-      return '-'
-    },
-  },
 
   components: {
     action(rec, idx) {

app/components/content/encounter/process.vue

@@ -38,13 +38,24 @@ const data = dataResBody?.data ?? null
 
 const tabs: TabItem[] = [
   { value: 'status', label: 'Status Masuk/Keluar', component: Status, props: { encounter: data } },
-  { value: 'early-medical-assessment', label: 'Pengkajian Awal Medis', component: EarlyMedicalAssesmentList },
+  {
+    value: 'early-medical-assessment',
+    label: 'Pengkajian Awal Medis',
+    component: EarlyMedicalAssesmentList,
+    props: { encounter: data, type: 'early-medic', label: 'Pengkajian Awal Medis' },
+  },
   {
     value: 'rehab-medical-assessment',
     label: 'Pengkajian Awal Medis Rehabilitasi Medis',
     component: EarlyMedicalRehabList,
+    props: { encounter: data, type: 'early-rehab', label: 'Pengkajian Awal Medis Rehabilitasi Medis' },
+  },
+  {
+    value: 'function-assessment',
+    label: 'Asesmen Fungsi',
+    component: AssesmentFunctionList,
+    props: { encounter: data, type: 'function', label: 'Asesmen Fungsi' },
   },
-  { value: 'function-assessment', label: 'Asesmen Fungsi', component: AssesmentFunctionList },
   { value: 'therapy-protocol', label: 'Protokol Terapi' },
   { value: 'education-assessment', label: 'Asesmen Kebutuhan Edukasi' },
   { value: 'consent', label: 'General Consent' },

app/components/content/soapi/entry.vue

@@ -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

app/components/content/soapi/form-function.vue

@@ -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 (

app/components/content/soapi/form-rehab.vue

@@ -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) {

app/components/content/soapi/form.vue

@@ -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) {

app/components/content/soapi/list.vue

@@ -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 type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
-import AssesmentFunctionList from '~/components/app/soapi/list.vue'
+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<{
+// Helpers
-  label: string
+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 typeCode = ref('')
-const isLoading = reactive<DataTableLoader>({
-  isTableLoading: false,
-})
-const recId = ref<number>(0)
-const recAction = ref<string>('')
-const recItem = ref<any>(null)
 
 const hreaderPrep: HeaderPrep = {
   title: props.label,
@@ -41,15 +60,86 @@ const hreaderPrep: HeaderPrep = {
   },
 }
 
-async function getPatientList() {
+const { recordId } = useQueryCRUDRecordId()
-  const resp = await xfetch('/api/v1/patient')
+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(() => {
+function handlePageChange(page: number) {
-  getPatientList()
+  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>

app/components/pub/my-ui/comp-tab/comp-tab.vue

@@ -12,14 +12,14 @@ const emit = defineEmits<{
 }>()
 
 function changeTab(value: string) {
-  activeTab.value = value;
+  activeTab.value = value
-  emit('changeTab', value);
+  emit('changeTab', value)
 }
 </script>
 
 <template>
   <!-- Tabs -->
-  <div class="mt-4 flex flex-wrap gap-2 rounded-md border bg-white dark:bg-neutral-950 p-4 shadow-sm">
+  <div class="mt-4 flex flex-wrap gap-2 rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
     <Button
       v-for="tab in data"
       :key="tab.value"
@@ -34,10 +34,12 @@ function changeTab(value: string) {
   <!-- Active Tab Content -->
   <div class="mt-4 rounded-md border p-4">
     <component
-      v-if="data.find((t) => t.value === activeTab)?.component"
       :is="data.find((t) => t.value === activeTab)?.component"
-      :label="data.find((t) => t.value === activeTab)?.label"
+      v-bind="data.find((t) => t.value === activeTab)?.props"
-      v-bind="data.find((t) => t.value === activeTab)?.props || {}"
     />
+    <!-- v-if="data.find((t) => t.value === activeTab)?.component" -->
+    <!-- :is="data.find((t) => t.value === activeTab)?.component" -->
+    <!-- v-bind="data.find((t) => t.value === activeTab)?.props || {}" -->
+    <!-- :label="data.find((t) => t.value === activeTab)?.label" -->
   </div>
-</template>
+</template>