diff --git a/app/components/app/person-address/_common/select-postal.vue b/app/components/app/person-address/_common/select-postal.vue index 84df7b33..66eb3c5e 100644 --- a/app/components/app/person-address/_common/select-postal.vue +++ b/app/components/app/person-address/_common/select-postal.vue @@ -8,6 +8,7 @@ import { cn } from '~/lib/utils' const props = defineProps<{ fieldName: string + villageCode?: string isDisabled?: boolean placeholder?: string errors?: FormErrors @@ -26,17 +27,19 @@ const { fieldGroupClass, } = props -const postalCodeOptions = [ - { label: '65120', value: '65120' }, - { label: '65121', value: '65121' }, - { label: '65123', value: '65123' }, - { label: '65124', value: '65124' }, - { label: '65125', value: '65125' }, - { label: '65126', value: '65126' }, - { label: '65127', value: '65127' }, - { label: '65128', value: '65128' }, - { label: '65129', value: '65129' }, -] +const villageCodeRef = toRef(props, 'villageCode') +const { postalCodeOptions, isLoading, error } = usePostalCodes(villageCodeRef) + +const dynamicPlaceholder = computed(() => { + if (!props.villageCode) return 'Pilih kelurahan terlebih dahulu' + if (isLoading.value) return 'Memuat kode pos...' + if (error.value) return 'Gagal memuat data' + return placeholder +}) + +const isFieldDisabled = computed(() => { + return props.isDisabled || !props.villageCode || isLoading.value || !!error.value +})