wip: select regency paginated

todo: search reactive

wip: paginated regency

todo: search bind

wip gess

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

@@ -10,6 +10,7 @@ import RadioDisability from './_common/radio-disability.vue'
 import RadioGender from './_common/radio-gender.vue'
 import RadioNationality from './_common/radio-nationality.vue'
 import RadioNewborn from './_common/radio-newborn.vue'
+import SelectBirthPlace from '~/components/app/person/_common/select-birth-place.vue'
 import SelectDisability from './_common/select-disability.vue'
 import SelectDob from './_common/select-dob.vue'
 import SelectEducation from './_common/select-education.vue'
@@ -66,12 +67,19 @@ defineExpose({
         />
       </div>
       <div class="grid grid-cols-1 md:grid-cols-3">
-        <InputBase
+        <!-- <InputBase
           field-name="birthPlace"
           label="Tempat Lahir"
           placeholder="Malang"
           :errors="errors"
           is-required
+        /> -->
+        <SelectBirthPlace
+          field-name="birthPlace"
+          label="Tempat Lahir"
+          placeholder="Pilih tempat lahir"
+          :errors="errors"
+          is-required
         />
         <SelectDob
           label="Tanggal Lahir"

app/components/app/person/_common/select-birth-place.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import ComboboxPaginated from '~/components/pub/my-ui/combobox/combobox-paginated.vue'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  fieldName?: string
+  isDisabled?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'birthPlace',
+  placeholder = 'Pilih tempat lahir',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+} = props
+
+// Gunakan composable untuk mengelola data regencies
+const {
+  fetchRegencies,
+  regencyOptions,
+  isLoading,
+  error,
+  paginationMeta,
+  nextPage,
+  prevPage,
+  setSearch,
+} = useRegencies({ enablePagination: true, pageSize: 10,enableSearch:true })
+
+// Computed untuk menentukan placeholder berdasarkan state
+const dynamicPlaceholder = computed(() => {
+  if (isLoading.value) return 'Memuat data tempat lahir...'
+  if (error.value) return 'Gagal memuat data'
+  return placeholder
+})
+
+// Computed untuk menentukan apakah field disabled
+const isFieldDisabled = computed(() => {
+  return props.isDisabled || isLoading.value || !!error.value
+})
+
+onMounted(() => {
+  fetchRegencies()
+})
+
+function onSearchChange(query: string) {
+  setSearch(query)
+}
+</script>
+
+<template>
+  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <Label :label-for="fieldName" :is-required="isRequired">
+      Tempat Lahir
+    </Label>
+    <Field :id="fieldName" :errors="errors" :class="cn('select-field-wrapper')">
+      <FormField v-slot="{ componentField }" :name="fieldName">
+        <FormItem>
+          <FormControl>
+            <ComboboxPaginated :id="fieldName" v-bind="componentField" :items="regencyOptions"
+              :placeholder="dynamicPlaceholder" :is-disabled="isFieldDisabled" search-placeholder="Cari tempat lahir..."
+              empty-message="Tempat lahir tidak ditemukan"
+              :page="paginationMeta.page"
+              :total-page="paginationMeta.totalPage"
+              :has-next="paginationMeta.hasNext"
+              :has-prev="paginationMeta.hasPrev"
+              :is-loading="isLoading"
+              @update:searchText="onSearchChange"
+              @next="nextPage()"
+              @prev="prevPage()"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </Field>
+  </FieldGroup>
+</template>