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

app/components/app/soapi/early-entry.vue

@@ -69,7 +69,6 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
 
 <template>
   <form id="entry-form">
-    {{ errors }}
     <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
       <Block>
         <Cell>
@@ -285,7 +284,7 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
             <Button
               class="rounded bg-orange-100 px-3 py-1 text-orange-600"
               type="button"
-              @click="emits('modal', 'diagnosa')"
+              @click="emit('modal', 'diagnosa')"
             >
               + Pilih Diagnosa
             </Button>
@@ -298,7 +297,7 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
             <Button
               class="rounded bg-orange-100 px-3 py-1 text-orange-600"
               type="button"
-              @click="emits('modal', 'prosedur')"
+              @click="emit('modal', 'prosedur')"
             >
               + Pilih Prosedur
             </Button>

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

@@ -3,23 +3,10 @@ import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
-const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.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: [
     [

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
+    <SoapiList v-if="mode === 'list'" />
-      v-if="mode === 'list'"
-      @add="openForm"
-    />
 
     <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)