✨ feat (encounter): add patient search and add functionality to entry form

app/components/app/encounter/entry-form.vue

@@ -39,6 +39,7 @@ const props = defineProps<{
 const emit = defineEmits<{
   submit: [values: DivisionFormData, resetForm: () => void]
   cancel: [resetForm: () => void]
+  click: (e: Event) => void
 }>()
 
 const relationshipOpts = mapToComboboxOptList(relationshipCodes)
@@ -112,6 +113,20 @@ function onAddSep() {
           <div class="p-2">
             <h2 class="text-md font-semibold">Data Pasien</h2>
           </div>
+          <div class="my-2 flex gap-6 p-2 text-sm">
+            <span>
+              Sudah pernah terdaftar sebagai pasien?
+              <Button class="bg-primary" size="sm" @click.prevent="emit('click', 'search')">
+                <Icon name="i-lucide-search" class="mr-1" /> Cari Pasien
+              </Button>
+            </span>
+            <span>
+              Belum pernah terdaftar sebagai pasien?
+              <Button class="bg-primary" size="sm" @click.prevent="emit('click', 'add')">
+                <Icon name="i-lucide-plus" class="mr-1" /> Tambah Pasien Baru
+              </Button>
+            </span>
+          </div>
           <Block>
             <FieldGroup :column="3">
               <Label label-for="patient_name">Nama Pasien</Label>

app/components/app/patient/picker.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+defineProps<{ data: any[] }>()
+const modelValue = defineModel<any | null>()
+</script>
+
+<template>
+  <PubBaseDataTable
+    v-model="modelValue"
+    select-mode="single"
+    :rows="data"
+    :cols="cols"
+    :header="header"
+    :keys="keys"
+    :func-parsed="funcParsed"
+    :func-html="funcHtml"
+    :func-component="funcComponent"
+  />
+</template>

app/components/content/encounter/entry.vue

@@ -1,8 +1,40 @@
 <script setup lang="ts">
+import Dialog from '~/components/pub/base/modal/dialog.vue'
+
 const props = defineProps<{
   id: number
   formType: string
 }>()
+
+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 onClick(e: 'search' | 'add') {
+  console.log('click', e)
+  if (e === 'search') {
+    isOpen.value = true
+  } else if (e === 'add') {
+    navigateTo('/client/patient/add')
+  }
+}
+
+provide('table_data_loader', isLoading)
 </script>
 
 <template>
@@ -10,6 +42,10 @@ const props = defineProps<{
     <Icon name="i-lucide-user" class="me-2" />
     <span class="font-semibold">{{ props.formType }}</span> Kunjungan
   </div>
-  <AppEncounterEntryForm />
+  <AppEncounterEntryForm @click="onClick" />
   <AppSepSmallEntry v-if="props.id" />
+
+  <Dialog v-model:open="isOpen" title="Cari Pasien" size="xl" prevent-outside>
+    <AppPatientPicker :data="data" />
+  </Dialog>
 </template>