147 lines
5.0 KiB
Vue
147 lines
5.0 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
const data = ref({ name: '' })
|
|
|
|
const handleResponse = (response, form$) => {
|
|
console.log(response) // axios response
|
|
console.log(response.status) // HTTP status code
|
|
console.log(response.data) // response data
|
|
|
|
console.log(form$) // <Vueform> instance
|
|
}
|
|
</script>
|
|
<template>
|
|
<Vueform v-model="data" validate-on="change|step" endpoint="/api/practitioner/basic" method="post"
|
|
@response="handleResponse">
|
|
<StaticElement name="identifierTitle" tag="h3" content="Nomor Identitas" />
|
|
<FormLibIdentifier />
|
|
<StaticElement name="divider" tag="hr" />
|
|
<StaticElement name="nameTitle" tag="h4" content="Personal Info" />
|
|
<FormLibHumanName />
|
|
<RadiogroupElement name="gender" view="tabs" :items="[
|
|
{
|
|
value: 'unknown',
|
|
label: '⭕',
|
|
},
|
|
{
|
|
value: 'male',
|
|
label: '♂️',
|
|
},
|
|
{
|
|
value: 'female',
|
|
label: '♀️',
|
|
},
|
|
{
|
|
value: 'other',
|
|
label: '⚧️',
|
|
},
|
|
]" default="unknown" />
|
|
<SelectElement name="birthPlace" :search="true" :native="false" input-type="search" autocomplete="on"
|
|
placeholder="Tempat Lahir" :columns="{
|
|
sm: {
|
|
container: 6,
|
|
},
|
|
}" items="/jsondata/birth-place.json" value-prop="name" label-prop="name" search-param="name" />
|
|
<DateElement name="birthDate" placeholder="Tanggal Lahir" :columns="{
|
|
sm: {
|
|
container: 6,
|
|
},
|
|
}" />
|
|
<FileElement name="photo" accept="image/*" view="image" :rules="[
|
|
'mimetypes:image/jpeg,image/png,image/gif,image/webp,image/svg+xml,image/tiff',
|
|
]" :urls="{}" :drop="true" label="Pas Foto" />
|
|
<StaticElement name="divider_1" tag="hr" />
|
|
<StaticElement name="addressTitle" tag="h4" content="Alamat" />
|
|
<FormLibAddress />
|
|
<StaticElement name="divider_2" tag="hr" />
|
|
<StaticElement name="contactTitle" tag="h4" content="Kontak" />
|
|
<ListElement name="telecom">
|
|
<template #default="{ index }">
|
|
<ObjectElement :name="index">
|
|
<SelectElement name="system" :items="[
|
|
{
|
|
value: 'phone',
|
|
label: '📞',
|
|
},
|
|
{
|
|
value: 'email',
|
|
label: '📧',
|
|
},
|
|
{
|
|
value: 'url',
|
|
label: '🌐',
|
|
},
|
|
]" :search="true" :native="false" input-type="search" autocomplete="off" :can-deselect="false"
|
|
:can-clear="false" default="phone" :columns="{
|
|
default: {
|
|
container: 2,
|
|
},
|
|
sm: {
|
|
container: 1,
|
|
},
|
|
}" :caret="false" />
|
|
<SelectElement name="use" :items="[
|
|
{
|
|
value: 'home',
|
|
label: '🏠',
|
|
},
|
|
{
|
|
value: 'mobile',
|
|
label: '📱',
|
|
},
|
|
{
|
|
value: 'work',
|
|
label: '🏢',
|
|
},
|
|
]" :search="true" :native="false" input-type="search" autocomplete="off" :columns="{
|
|
default: {
|
|
container: 2,
|
|
},
|
|
sm: {
|
|
container: 1,
|
|
},
|
|
}" :caret="false" :can-deselect="false" :can-clear="false" default="home" />
|
|
<GroupElement name="value" :columns="{
|
|
default: {
|
|
container: 8,
|
|
},
|
|
sm: {
|
|
container: 10,
|
|
},
|
|
}">
|
|
<PhoneElement name="phone" :allow-incomplete="true" :unmask="true" default="+62"
|
|
:conditions="[['telecom.*.system', 'in', ['phone']]]" />
|
|
<TextElement name="email" input-type="email" :rules="['nullable', 'email']"
|
|
placeholder="eg. example@mail.com" :conditions="[['telecom.*.system', 'in', ['email']]]" />
|
|
<TextElement name="url" input-type="url" :rules="['nullable', 'url']" placeholder="eg. http(s)://domain.com"
|
|
:floating="false" :conditions="[['telecom.*.system', 'in', ['url']]]" />
|
|
</GroupElement>
|
|
</ObjectElement>
|
|
</template>
|
|
</ListElement>
|
|
<StaticElement name="divider_3" tag="hr" />
|
|
<StaticElement name="communicationTitle" tag="h4" content="Komunikasi" />
|
|
<ListElement name="communication">
|
|
<template #default="{ index }">
|
|
<ObjectElement :name="index">
|
|
<ObjectElement name="language">
|
|
<SelectElement name="text" :items="[
|
|
{
|
|
value: 'INDONESIA',
|
|
label: 'INDONESIA',
|
|
},
|
|
]" :search="true" :native="false" input-type="search" autocomplete="off" placeholder="Bahasa" />
|
|
</ObjectElement>
|
|
<HiddenElement name="preferred" :default="true" :meta="true" />
|
|
</ObjectElement>
|
|
</template>
|
|
</ListElement>
|
|
<ToggleElement name="active" text="Catatan praktisi ini digunakan secara aktif" :default="true" />
|
|
|
|
<ButtonElement name="submit" button-label="Submit" :submits="true" align="right" />
|
|
</Vueform>
|
|
<p>{{ data }}</p>
|
|
<!-- <p>{{ data.value.name }}</p> -->
|
|
</template>
|