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

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>