✨ feat (soapi): introduce early rehab and function forms

app/components/content/encounter/process.vue

@@ -8,8 +8,10 @@ import CompTab from '~/components/pub/my-ui/comp-tab/comp-tab.vue'
 import type { TabItem } from '~/components/pub/my-ui/comp-tab/type'
 
 import Status from '~/components/app/encounter/status.vue'
-import AssesmentFunctionList from '~/components/content/assesment-function/list.vue'
+// import AssesmentFunctionList from '~/components/content/assesment-function/list.vue'
 import EarlyMedicalAssesmentList from '~/components/content/soapi/entry.vue'
+import EarlyMedicalRehabList from '~/components/content/soapi/entry.vue'
+import AssesmentFunctionList from '~/components/content/soapi/entry.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -38,7 +40,11 @@ const data = {
 const tabs: TabItem[] = [
   { value: 'status', label: 'Status Masuk/Keluar', component: Status },
   { value: 'early-medical-assessment', label: 'Pengkajian Awal Medis', component: EarlyMedicalAssesmentList },
-  { value: 'rehab-medical-assessment', label: 'Pengkajian Awal Medis Rehabilitasi Medis' },
+  {
+    value: 'rehab-medical-assessment',
+    label: 'Pengkajian Awal Medis Rehabilitasi Medis',
+    component: EarlyMedicalRehabList,
+  },
   { value: 'function-assessment', label: 'Asesmen Fungsi', component: AssesmentFunctionList },
   { value: 'therapy-protocol', label: 'Protokol Terapi' },
   { value: 'education-assessment', label: 'Asesmen Kebutuhan Edukasi' },
@@ -66,6 +72,10 @@ const tabs: TabItem[] = [
       <PubMyUiNavContentBa label="Kembali ke Daftar Kunjungan" />
     </div>
     <AppEncounterQuickInfo :data="data" />
-    <CompTab :data="tabs" :initial-active-tab="activeTab" @change-tab="activeTab = $event" />
+    <CompTab
+      :data="tabs"
+      :initial-active-tab="activeTab"
+      @change-tab="activeTab = $event"
+    />
   </div>
 </template>

app/components/content/soapi/entry.vue

@@ -1,16 +1,38 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
+import { useQueryMode } from '@/composables/useQueryMode' // asumsikan ini ada
 
-import EarlyMedicalAssesmentList from './list.vue'
-import EarlyMedicalAssesmentForm from './form.vue'
+import SoapiList from './list.vue'
+import EarlyForm from './form.vue'
+import RehabForm from './form-rehab.vue'
+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 formMap = {
+  'early-medical-assessment': EarlyForm,
+  'rehab-medical-assessment': RehabForm,
+  'function-assessment': FunctionForm,
+}
+
+const ActiveForm = computed(() => formMap[type.value] || EarlyForm)
 </script>
 
 <template>
   <div>
-    <EarlyMedicalAssesmentList v-if="mode === 'list'" @add="openForm" />
-    <EarlyMedicalAssesmentForm v-else @back="backToList" />
+    <SoapiList
+      v-if="mode === 'list'"
+      @add="openForm"
+    />
+
+    <component
+      v-else
+      :is="ActiveForm"
+      @back="backToList"
+    />
   </div>
 </template>

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

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import Entry from '~/components/app/soapi/entry.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+
+const isOpen = ref(false)
+const data = ref([])
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+async function getPatientList() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/patient')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+onMounted(() => {
+  getPatientList()
+})
+
+function handleClick(type: string) {
+  console.log(type)
+  isOpen.value = true
+}
+
+provide('table_data_loader', isLoading)
+</script>
+<template>
+  <Entry
+    type="function"
+    :exclude-fields="['prim-compl', 'sec-compl']"
+    @click="handleClick"
+  />
+  <Dialog
+    v-model:open="isOpen"
+    title="Pilih Prosedur"
+    size="xl"
+    prevent-outside
+  >
+    <AppIcdMultiselectPicker :data="data" />
+  </Dialog>
+</template>

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

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import Entry from '~/components/app/soapi/entry.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+
+const isOpen = ref(false)
+const data = ref([])
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+async function getPatientList() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/patient')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+onMounted(() => {
+  getPatientList()
+})
+
+function handleClick(type: string) {
+  console.log(type)
+  isOpen.value = true
+}
+
+provide('table_data_loader', isLoading)
+</script>
+<template>
+  <Entry
+    type="early-rehab"
+    :exclude-fields="['prim-compl', 'sec-compl']"
+    @click="handleClick"
+  />
+  <Dialog
+    v-model:open="isOpen"
+    title="Pilih Prosedur"
+    size="xl"
+    prevent-outside
+  >
+    <AppIcdMultiselectPicker :data="data" />
+  </Dialog>
+</template>