fix: refactor entry form of encounter

app/components/content/encounter/entry.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
 // Components
+import AppEncounterEntryForm from '~/components/app/encounter/entry-form.vue'
 import AppViewPatient from '~/components/app/patient/view-patient.vue'
 
 // Types
 import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
-import type { PatientEntity } from '~/models/patient'
+
+// Constants
+import { paymentTypes, sepRefTypeCodes, participantGroups } from '~/lib/constants.vclaim'
 
 // Handlers
 import {
@@ -26,18 +29,9 @@ const openPatient = ref(false)
 const isLoading = reactive<DataTableLoader>({
   isTableLoading: false,
 })
-
-const division = {
-  msg: {
-    placeholder: 'Pilih Divisi',
-    search: 'Cari Divisi',
-    empty: 'Divisi tidak ditemukan',
-  },
-}
-
-const items = ref([{ value: '1', label: 'Division 1', code: 'DIV1' }])
-
-const schema = {}
+const paymentsList = ref<Array<{ value: string; label: string }>>([])
+const sepsList = ref<Array<{ value: string; label: string }>>([])
+const participantGroupsList = ref<Array<{ value: string; label: string }>>([])
 
 function handleSavePatient() {
   selectedPatientObject.value = null
@@ -47,7 +41,7 @@ function handleSavePatient() {
 }
 
 function toKebabCase(str: string): string {
-  return str.replace(/_/g, '-').toLowerCase()
+  return str.replace(/([A-Z])/g, '-$1').toLowerCase()
 }
 
 function toNavigateSep(values: any) {
@@ -60,32 +54,43 @@ function toNavigateSep(values: any) {
   navigateTo('/integration/bpjs/sep/add' + `?${queryParams.toString()}`)
 }
 
-function onSubmit(values: any, resetForm: () => void) {
-  console.log('submit', values)
-  resetForm()
-}
-
-function onCancel(resetForm: () => void) {
-  console.log('cancel')
-  resetForm()
-}
-
-function onClick(e: 'search' | 'add' | 'add-sep', formValues?: any) {
-  console.log('click', e)
-  if (e === 'search') {
+function handleEvent(menu: string, value?: any) {
+  if (menu === 'search') {
     getPatientsList({ 'page-size': 10, includes: 'person' }).then(() => {
       openPatient.value = true
     })
-  } else if (e === 'add') {
+  } else if (menu === 'add') {
     navigateTo('/client/patient/add')
-  } else if (e === 'add-sep') {
-    selectedPatientObject.value = {} as PatientEntity
-    console.log('formValues', formValues)
-    toNavigateSep({ resource: 'encounter', is_service: 'false', ...formValues })
+  } else if (menu === 'add-sep') {
+    console.log('formValues', value)
+    toNavigateSep({ resource: 'encounter', isService: 'false', ...value })
+  } else if (menu === 'save') {
+    console.log('Save encounter:', value)
+  } else if (menu === 'cancel') {
+    console.log('Cancel')
   }
 }
 
+async function handleInit() {
+  paymentsList.value = Object.keys(paymentTypes).map((item) => ({
+    value: item.toString(),
+    label: paymentTypes[item],
+  })) as any
+  sepsList.value = Object.keys(sepRefTypeCodes).map((item) => ({
+    value: item.toString(),
+    label: sepRefTypeCodes[item],
+  })) as any
+  participantGroupsList.value = Object.keys(participantGroups).map((item) => ({
+    value: item.toString(),
+    label: participantGroups[item],
+  })) as any
+}
+
 provide('table_data_loader', isLoading)
+
+onMounted(async () => {
+  await handleInit()
+})
 </script>
 
 <template>
@@ -99,15 +104,12 @@ provide('table_data_loader', isLoading)
   </div>
 
   <AppEncounterEntryForm
-    :division="division"
-    :items="items"
-    :schema="schema"
-    :selected-patient-object="selectedPatientObject"
-    @click="onClick"
-    @submit="onSubmit"
-    @cancel="onCancel"
+    :payments="paymentsList"
+    :seps="sepsList"
+    :participant-groups="participantGroupsList"
+    :patient="selectedPatientObject"
+    @event="handleEvent"
   />
-  <AppSepSmallEntry v-if="props.id" />
 
   <AppViewPatient
     v-model:open="openPatient"