✨ feat (app): add person form
This commit is contained in:
Abizrh
@@ -0,0 +1,170 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import Block from '~/components/pub/custom-ui/form/block.vue'
|
||||
import Combobox from '~/components/pub/custom-ui/form/combobox.vue'
|
||||
import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
|
||||
import Field from '~/components/pub/custom-ui/form/field.vue'
|
||||
import Label from '~/components/pub/custom-ui/form/label.vue'
|
||||
import { educationCodes, genderCodes, occupationCodes, religionCodes } from '~/lib/constants'
|
||||
import { mapToComboboxOptList } from '~/lib/utils'
|
||||
|
||||
interface DivisionFormData {
|
||||
name: string
|
||||
code: string
|
||||
parentId: string
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
division: {
|
||||
msg: {
|
||||
placeholder: string
|
||||
search: string
|
||||
empty: string
|
||||
}
|
||||
}
|
||||
items: {
|
||||
value: string
|
||||
label: string
|
||||
code: string
|
||||
}[]
|
||||
schema: any
|
||||
initialValues?: Partial<DivisionFormData>
|
||||
errors?: FormErrors
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
submit: [values: DivisionFormData, resetForm: () => void]
|
||||
cancel: [resetForm: () => void]
|
||||
}>()
|
||||
|
||||
const educationOpts = mapToComboboxOptList(educationCodes)
|
||||
const occupationOpts = mapToComboboxOptList(occupationCodes)
|
||||
const religionOpts = mapToComboboxOptList(religionCodes)
|
||||
const genderOpts = mapToComboboxOptList(genderCodes)
|
||||
|
||||
const formSchema = toTypedSchema(props.schema)
|
||||
|
||||
// Form submission handler
|
||||
function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
|
||||
const formData: DivisionFormData = {
|
||||
name: values.name || '',
|
||||
code: values.code || '',
|
||||
parentId: values.parentId || '',
|
||||
}
|
||||
emit('submit', formData, resetForm)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Form
|
||||
v-slot="{ handleSubmit, resetForm }"
|
||||
as=""
|
||||
keep-values
|
||||
:validation-schema="formSchema"
|
||||
:initial-values="initialValues"
|
||||
>
|
||||
<form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
|
||||
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
|
||||
<div class="flex flex-col justify-between">
|
||||
<Block>
|
||||
<!-- LocationType -->
|
||||
<FieldGroup>
|
||||
<Label label-for="locationType">Jenis Alamat</Label>
|
||||
<Field id="locationType" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="locationType">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Select id="locationType" v-bind="componentField" :items="genderOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Address -->
|
||||
<FieldGroup>
|
||||
<Label label-for="address">Alamat</Label>
|
||||
<Field id="address" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="address">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="address"
|
||||
type="text"
|
||||
placeholder="Masukkan alamat lengkap"
|
||||
autocomplete="off"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Rt -->
|
||||
<FieldGroup>
|
||||
<Label label-for="rt">RT</Label>
|
||||
<Field id="rt" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="rt">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="rt"
|
||||
type="text"
|
||||
maxlength="2"
|
||||
placeholder="01"
|
||||
autocomplete="off"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Rw -->
|
||||
<FieldGroup>
|
||||
<Label label-for="rw">RW</Label>
|
||||
<Field id="rw" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="rw">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="rw"
|
||||
type="text"
|
||||
maxlength="2"
|
||||
placeholder="01"
|
||||
autocomplete="off"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Village_Code -->
|
||||
<FieldGroup>
|
||||
<Label label-for="villageCode">Desa/Kelurahan</Label>
|
||||
<Field id="villageCode" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="villageCode">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Combobox id="villageCode" v-bind="componentField" :items="genderOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</Block>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</template>
|
||||
@@ -0,0 +1,111 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import Block from '~/components/pub/custom-ui/form/block.vue'
|
||||
import Combobox from '~/components/pub/custom-ui/form/combobox.vue'
|
||||
import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
|
||||
import Field from '~/components/pub/custom-ui/form/field.vue'
|
||||
import Label from '~/components/pub/custom-ui/form/label.vue'
|
||||
import { educationCodes, genderCodes, occupationCodes, religionCodes } from '~/lib/constants'
|
||||
import { mapToComboboxOptList } from '~/lib/utils'
|
||||
|
||||
interface DivisionFormData {
|
||||
name: string
|
||||
code: string
|
||||
parentId: string
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
division: {
|
||||
msg: {
|
||||
placeholder: string
|
||||
search: string
|
||||
empty: string
|
||||
}
|
||||
}
|
||||
items: {
|
||||
value: string
|
||||
label: string
|
||||
code: string
|
||||
}[]
|
||||
schema: any
|
||||
initialValues?: Partial<DivisionFormData>
|
||||
errors?: FormErrors
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
submit: [values: DivisionFormData, resetForm: () => void]
|
||||
cancel: [resetForm: () => void]
|
||||
}>()
|
||||
|
||||
const educationOpts = mapToComboboxOptList(educationCodes)
|
||||
const occupationOpts = mapToComboboxOptList(occupationCodes)
|
||||
const religionOpts = mapToComboboxOptList(religionCodes)
|
||||
const genderOpts = mapToComboboxOptList(genderCodes)
|
||||
|
||||
const formSchema = toTypedSchema(props.schema)
|
||||
|
||||
// Form submission handler
|
||||
function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
|
||||
const formData: DivisionFormData = {
|
||||
name: values.name || '',
|
||||
code: values.code || '',
|
||||
parentId: values.parentId || '',
|
||||
}
|
||||
emit('submit', formData, resetForm)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Form
|
||||
v-slot="{ handleSubmit, resetForm }"
|
||||
as=""
|
||||
keep-values
|
||||
:validation-schema="formSchema"
|
||||
:initial-values="initialValues"
|
||||
>
|
||||
<form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
|
||||
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
|
||||
<div class="flex flex-col justify-between">
|
||||
<Block>
|
||||
<!-- LocationType -->
|
||||
<FieldGroup>
|
||||
<Label label-for="type">Tipe</Label>
|
||||
<Field id="type" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="type">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Select id="type" v-bind="componentField" :items="genderOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Address -->
|
||||
<FieldGroup>
|
||||
<Label label-for="value">Value</Label>
|
||||
<Field id="value" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="value">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="value"
|
||||
type="text"
|
||||
placeholder="Masukkan alamat lengkap"
|
||||
autocomplete="off"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</Block>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</template>
|
||||
@@ -0,0 +1,234 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import Block from '~/components/pub/custom-ui/form/block.vue'
|
||||
import Combobox from '~/components/pub/custom-ui/form/combobox.vue'
|
||||
import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
|
||||
import Field from '~/components/pub/custom-ui/form/field.vue'
|
||||
import Label from '~/components/pub/custom-ui/form/label.vue'
|
||||
import { educationCodes, genderCodes, occupationCodes, religionCodes, relationshipCodes } from '~/lib/constants'
|
||||
import { mapToComboboxOptList } from '~/lib/utils'
|
||||
|
||||
interface DivisionFormData {
|
||||
name: string
|
||||
code: string
|
||||
parentId: string
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
division: {
|
||||
msg: {
|
||||
placeholder: string
|
||||
search: string
|
||||
empty: string
|
||||
}
|
||||
}
|
||||
items: {
|
||||
value: string
|
||||
label: string
|
||||
code: string
|
||||
}[]
|
||||
schema: any
|
||||
initialValues?: Partial<DivisionFormData>
|
||||
errors?: FormErrors
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
submit: [values: DivisionFormData, resetForm: () => void]
|
||||
cancel: [resetForm: () => void]
|
||||
}>()
|
||||
|
||||
const relationshipOpts = mapToComboboxOptList(relationshipCodes)
|
||||
const educationOpts = mapToComboboxOptList(educationCodes)
|
||||
const occupationOpts = mapToComboboxOptList(occupationCodes)
|
||||
const genderOpts = mapToComboboxOptList(genderCodes)
|
||||
|
||||
const formSchema = toTypedSchema(props.schema)
|
||||
|
||||
// Form submission handler
|
||||
function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
|
||||
const formData: DivisionFormData = {
|
||||
name: values.name || '',
|
||||
code: values.code || '',
|
||||
parentId: values.parentId || '',
|
||||
}
|
||||
emit('submit', formData, resetForm)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Form
|
||||
v-slot="{ handleSubmit, resetForm }"
|
||||
as=""
|
||||
keep-values
|
||||
:validation-schema="formSchema"
|
||||
:initial-values="initialValues"
|
||||
>
|
||||
<form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
|
||||
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
|
||||
<div class="flex flex-col justify-between">
|
||||
<Block>
|
||||
<!-- Relationship_Code -->
|
||||
<FieldGroup>
|
||||
<Label label-for="relationshipCode">Hubungan</Label>
|
||||
<Field id="relationshipCode" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="relationshipCode">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Select id="relationshipCode" v-bind="componentField" :items="relationshipOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Name -->
|
||||
<FieldGroup>
|
||||
<Label label-for="relativeName">Nama</Label>
|
||||
<Field id="relativeName" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="relativeName">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="relativeName"
|
||||
type="text"
|
||||
placeholder="Masukkan nama kerabat"
|
||||
autocomplete="off"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Address -->
|
||||
<FieldGroup>
|
||||
<Label label-for="relativeAddress">Alamat</Label>
|
||||
<Field id="relativeAddress" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="relativeAddress">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="relativeAddress"
|
||||
type="text"
|
||||
placeholder="Alamat kerabat"
|
||||
autocomplete="off"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Village_Code -->
|
||||
<FieldGroup>
|
||||
<Label label-for="relativeVillageCode">Desa/Kelurahan</Label>
|
||||
<Field id="relativeVillageCode" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="relativeVillageCode">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Combobox id="relativeVillageCode" v-bind="componentField" :items="genderOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Gender_Code -->
|
||||
<FieldGroup>
|
||||
<Label label-for="relativeGender">Jenis Kelamin</Label>
|
||||
<Field id="relativeGender" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="relativeGender">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Select id="relativeGender" v-bind="componentField" :items="genderOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- PhoneNumber -->
|
||||
<FieldGroup>
|
||||
<Label label-for="phoneNumber">Nomor Telepon</Label>
|
||||
<Field id="phoneNumber" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="phoneNumber">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="phoneNumber"
|
||||
type="text"
|
||||
placeholder="0812xxxxxx"
|
||||
autocomplete="off"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Education_Code -->
|
||||
<FieldGroup>
|
||||
<Label label-for="relativeEducation">Pendidikan</Label>
|
||||
<Field id="relativeEducation" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="relativeEducation">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Select id="relativeEducation" v-bind="componentField" :items="educationOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Occupation_Code -->
|
||||
<FieldGroup>
|
||||
<Label label-for="relativeOccupationCode">Pekerjaan</Label>
|
||||
<Field id="relativeOccupationCode" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="relativeOccupationCode">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Select id="relativeOccupationCode" v-bind="componentField" :items="occupationOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Occupation_Name -->
|
||||
<FieldGroup>
|
||||
<Label label-for="relativeOccupationName">Nama Pekerjaan</Label>
|
||||
<Field id="relativeOccupationName" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="relativeOccupationName">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="relativeOccupationName"
|
||||
type="text"
|
||||
placeholder="Contoh: Guru, Dokter, Petani"
|
||||
autocomplete="off"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</Block>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</template>
|
||||
@@ -0,0 +1,340 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import Block from '~/components/pub/custom-ui/form/block.vue'
|
||||
import Combobox from '~/components/pub/custom-ui/form/combobox.vue'
|
||||
import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
|
||||
import Field from '~/components/pub/custom-ui/form/field.vue'
|
||||
import Label from '~/components/pub/custom-ui/form/label.vue'
|
||||
import { educationCodes, genderCodes, occupationCodes, religionCodes } from '~/lib/constants'
|
||||
import { mapToComboboxOptList } from '~/lib/utils'
|
||||
|
||||
interface DivisionFormData {
|
||||
name: string
|
||||
code: string
|
||||
parentId: string
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
division: {
|
||||
msg: {
|
||||
placeholder: string
|
||||
search: string
|
||||
empty: string
|
||||
}
|
||||
}
|
||||
items: {
|
||||
value: string
|
||||
label: string
|
||||
code: string
|
||||
}[]
|
||||
schema: any
|
||||
initialValues?: Partial<DivisionFormData>
|
||||
errors?: FormErrors
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
submit: [values: DivisionFormData, resetForm: () => void]
|
||||
cancel: [resetForm: () => void]
|
||||
}>()
|
||||
|
||||
const educationOpts = mapToComboboxOptList(educationCodes)
|
||||
const occupationOpts = mapToComboboxOptList(occupationCodes)
|
||||
const religionOpts = mapToComboboxOptList(religionCodes)
|
||||
const genderOpts = mapToComboboxOptList(genderCodes)
|
||||
|
||||
const formSchema = toTypedSchema(props.schema)
|
||||
|
||||
// Form submission handler
|
||||
function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
|
||||
const formData: DivisionFormData = {
|
||||
name: values.name || '',
|
||||
code: values.code || '',
|
||||
parentId: values.parentId || '',
|
||||
}
|
||||
emit('submit', formData, resetForm)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Form
|
||||
v-slot="{ handleSubmit, resetForm }"
|
||||
as=""
|
||||
keep-values
|
||||
:validation-schema="formSchema"
|
||||
:initial-values="initialValues"
|
||||
>
|
||||
<form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
|
||||
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
|
||||
<div class="flex flex-col justify-between">
|
||||
<Block>
|
||||
<FieldGroup>
|
||||
<Label label-for="residentIdentityNumber">KTP</Label>
|
||||
<Field id="residentIdentityNumber" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="residentIdentityNumber">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="residentIdentityNumber"
|
||||
type="text"
|
||||
maxlength="16"
|
||||
placeholder="Nomor KTP"
|
||||
autocomplete="off"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- FrontTitle -->
|
||||
<FieldGroup :column="3">
|
||||
<Label label-for="frontTitle">Gelar Depan</Label>
|
||||
<Field id="frontTitle" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="frontTitle">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="frontTitle"
|
||||
type="text"
|
||||
placeholder="Dr., Ir., dll"
|
||||
autocomplete="off"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<FieldGroup :column="3">
|
||||
<Label label-for="name" position="dynamic">Nama</Label>
|
||||
<Field id="name" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="name">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="name"
|
||||
type="text"
|
||||
placeholder="Nama lengkap"
|
||||
autocomplete="off"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- EndTitle -->
|
||||
<FieldGroup :column="3">
|
||||
<Label label-for="endTitle" position="dynamic">Gelar Belakang</Label>
|
||||
<Field id="endTitle" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="endTitle">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="endTitle"
|
||||
type="text"
|
||||
placeholder="S.Kom, M.Kes, dll"
|
||||
autocomplete="off"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- BirthDate -->
|
||||
<FieldGroup :column="2">
|
||||
<Label label-for="birthDate">Tanggal Lahir</Label>
|
||||
<Field id="birthDate" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="birthDate">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input id="birthDate" type="date" v-bind="componentField" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- BirthRegency_Code -->
|
||||
<FieldGroup :column="2">
|
||||
<Label label-for="birthRegencyCode">Tempat Lahir</Label>
|
||||
<Field id="birthRegencyCode" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="birthRegencyCode">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Combobox id="parentId" v-bind="componentField" :items="educationOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Gender_Code -->
|
||||
<FieldGroup>
|
||||
<Label label-for="genderCode">Jenis Kelamin</Label>
|
||||
<Field id="genderCode" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="genderCode">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Combobox id="genderCode" v-bind="componentField" :items="genderOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- PassportNumber -->
|
||||
<FieldGroup :column="2">
|
||||
<Label label-for="passportNumber">Paspor</Label>
|
||||
<Field id="passportNumber" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="passportNumber">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="passportNumber"
|
||||
type="text"
|
||||
placeholder="Nomor Paspor"
|
||||
autocomplete="off"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- DrivingLicenseNumber -->
|
||||
<FieldGroup :column="2">
|
||||
<Label label-for="drivingLicenseNumber">SIM</Label>
|
||||
<Field id="drivingLicenseNumber" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="drivingLicenseNumber">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="drivingLicenseNumber"
|
||||
type="text"
|
||||
placeholder="Nomor SIM"
|
||||
autocomplete="off"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Religion_Code -->
|
||||
<FieldGroup :column="2">
|
||||
<Label label-for="religionCode">Agama</Label>
|
||||
<Field id="religionCode" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="religionCode">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Combobox id="religionCode" v-bind="componentField" :items="religionOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<FieldGroup :column="2">
|
||||
<Label label-for="ethnicCode">Suku</Label>
|
||||
<Field id="ethnicCode" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="ethnicCode">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Combobox id="ethnicCode" v-bind="componentField" :items="occupationOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Language_Code -->
|
||||
<FieldGroup :column="2">
|
||||
<Label label-for="languageCode">Bahasa</Label>
|
||||
<Field id="languageCode" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="languageCode">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Combobox id="parentId" v-bind="componentField" :items="educationOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Education_Code -->
|
||||
<FieldGroup :column="2">
|
||||
<Label label-for="educationCode">Pendidikan</Label>
|
||||
<Field id="educationCode" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="educationCode">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Combobox id="educationCode" v-bind="componentField" :items="educationOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Occupation_Code -->
|
||||
<FieldGroup :column="2">
|
||||
<Label label-for="occupationCode">Pekerjaan</Label>
|
||||
<Field id="occupationCode" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="occupationCode">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Combobox id="occupationCode" v-bind="componentField" :items="occupationOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Occupation_Name -->
|
||||
<FieldGroup :column="2">
|
||||
<Label label-for="occupationName">Detail Pekerjaan</Label>
|
||||
<Field id="occupationName" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="occupationName">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="occupationName"
|
||||
type="text"
|
||||
placeholder="Contoh: Guru SMP, Petani"
|
||||
autocomplete="off"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</Block>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</template>
|
||||
Reference in New Issue
Block a user