⚠️ refactor (soapi): refactor form component to use usequerycrudmode and update api call

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,
@@ -24,10 +24,7 @@ const ActiveForm = computed(() => formMap[type.value] || EarlyForm)
 
 <template>
   <div>
-    <SoapiList
-      v-if="mode === 'list'"
-      @add="openForm"
-    />
+    <SoapiList v-if="mode === 'list'" />
 
     <component
       v-else

app/components/content/soapi/form.vue

@@ -7,6 +7,8 @@ import { EarlySchema } from '~/schemas/soapi.schema'
 import { toast } from '~/components/pub/ui/toast'
 import { handleActionSave, handleActionEdit } from '~/handlers/soapi-early.handler'
 
+const { goToEntry, backToList } = useQueryCRUDMode('mode')
+const { recordId } = useQueryCRUDMode('record-id')
 const route = useRoute()
 const isOpen = ref(false)
 const data = ref([])
@@ -40,7 +42,7 @@ const isLoading = reactive<DataTableLoader>({
 
 async function getPatientList() {
   isLoading.isTableLoading = true
-  const resp = await xfetch('/api/v1/patient')
+  const resp = await xfetch(`/api/v1/soapi/${recordId}`)
   if (resp.success) {
     data.value = (resp.body as Record<string, any>).data
   }
@@ -59,6 +61,11 @@ function handleOpen(type: string) {
 const entryRef = ref()
 async function actionHandler(type: string) {
   console.log(type)
+  // if(type === ''
+  if (type === 'back') {
+    backToList()
+    return
+  }
   const result = await entryRef.value?.validate()
   if (result?.valid) {
     console.log('data', result.data)

app/components/content/soapi/list.vue

@@ -8,7 +8,9 @@ const props = defineProps<{
   label: string
 }>()
 
-const emits = defineEmits(['add', 'edit'])
+const { goToEntry } = useQueryCRUDMode('mode')
+const router = useRouter()
+const route = useRoute()
 
 const data = ref([])
 
@@ -37,21 +39,40 @@ const hreaderPrep: HeaderPrep = {
   icon: 'i-lucide-users',
   addNav: {
     label: 'Tambah',
-    onClick: () => emits('add'),
+    onClick: () => goToEntry(),
   },
 }
 
 async function getPatientList() {
-  const resp = await xfetch('/api/v1/patient')
+  const resp = await xfetch(`/api/v1/soapi?encounter_id=${route.params.id}?include=encounter`)
   if (resp.success) {
     data.value = (resp.body as Record<string, any>).data
   }
 }
 
+const goEdit = (id: string) => {
+  router.replace({
+    path: route.path,
+    query: {
+      ...route.query,
+      mode: 'entry',
+      'record-id': id,
+    },
+  })
+}
+
 onMounted(() => {
   getPatientList()
 })
 
+watch(recId, () => {
+  console.log('recId', recId.value)
+  console.log('recIdaacin', recAction.value)
+  if (recAction.value === 'showEdit') {
+    goEdit(recId.value)
+  }
+})
+
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)