vitify-nuxt/components/Form/Patient/Create.vue

<script>
import { FormLibAddress, FormLibHumanName, FormLibTelecom } from '#components'
import Identifier from '../Lib/Identifier.vue'

const data = ref('')
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/patient/create" method="post"
    @response="handleResponse">
    <StaticElement name="identifierTitle" tag="h2" content="Nomor Identitas" />
    <FormLibIdentifier />
    <StaticElement name="divider" tag="hr" />
    <StaticElement name="personalInfoTitle" tag="h2" content="Personal Info" />
    <FormLibHumanName />
    <!-- <ListElement name="nestedList" :controls="{
      add: false,
      remove: false,
    }">
      <template #default="{ index }">
        <ObjectElement :name="index">
          <SelectElement name="humanNameUse" :items="[
            {
              value: 'official',
              label: '👨‍💼  Resmi',
            },
            {
              value: 'usual',
              label: '👨‍🦱  Biasa',
            },
            {
              value: 'temp',
              label: '🦲  Sementara',
            },
            // {
            //   value: 'nickname',
            //   label: '🙋‍♂️  Panggilan',
            // },
            // {
            //   value: 'anonymous',
            //   label: '👤  Anonim',
            // },
            // {
            //   value: 'old',
            //   label: '💇‍♂️  Nama Lama',
            // },
            // {
            //   value: 'maiden',
            //   label: '👧  Nama Gadis',
            // },
          ]" :columns="{
            default: {
              container: 5,
            },
            sm: {
              container: 3,
            },
            lg: {
              container: 2,
            },
          }" :rules="['required']" :native="false" :can-deselect="false" :can-clear="false" :close-on-select="false"
            :caret="false" default="official" />
          <TextElement name="text" :columns="{
            default: {
              container: 7,
            },
            sm: {
              container: 9,
            },
            lg: {
              container: 10,
            },
          }" placeholder="Nama Lengkap" />
        </ObjectElement>
      </template>
</ListElement> -->
    <GroupElement name="container2">
      <GroupElement name="column1" :columns="{
        container: 6,
      }">
        <RadiogroupElement name="gender" view="tabs" label="Jenis Kelamin" :items="[
          {
            value: 'male',
            label: 'Laki-laki',
          },
          {
            value: 'female',
            label: 'Perempuan',
          },
          // {
          //   value: 'other',
          //   label: 'Lainnya',
          // },
          // {
          //   value: 'unknown',
          //   label: ' ',
          // },
        ]" default="unknown" />
      </GroupElement>
      <GroupElement name="column_2" :columns="{
        container: 6,
      }">
        <ListElement name="maritalStatus" :controls="{
          add: false,
          remove: false,
        }">
          <template #default="{ index }">
            <ObjectElement :name="index">
              <ListElement name="coding" :controls="{
                add: false,
                remove: false,
              }">
                <template #default="{ index }">
                  <ObjectElement :name="index">
                    <SelectElement name="select" :items="[
                      {
                        value: 'UNK',
                        label: 'Tidak Tahu',
                      },
                      {
                        value: 'U',
                        label: 'Belum Menikah',
                      },
                      {
                        value: 'M',
                        label: 'Menikah',
                      },
                      {
                        value: 'D',
                        label: 'Cerai Hidup',
                      },
                      {
                        value: 'W',
                        label: 'Cerai Mati',
                      },
                    ]" :search="true" :native="false" label="Status Perkawinan" input-type="search" autocomplete="off"
                      :can-deselect="false" :can-clear="false" default="UNK" />
                    <HiddenElement name="system" default="http://terminology.hl7.org/CodeSystem/v3-MaritalStatus" />
                  </ObjectElement>
                </template>
              </ListElement>
            </ObjectElement>
          </template>
        </ListElement>
      </GroupElement>
    </GroupElement>
    <SelectElement name="birthPlace" :search="true" :native="false" input-type="search" autocomplete="on" :items="[
      {
        value: 'malang',
        label: 'Malang',
      },
      {
        value: 'surabaya',
        label: 'Surabaya',
      },
    ]" placeholder="Tempat Lahir" :columns="{
      sm: {
        container: 6,
      },
      lg: {
        container: 6,
      },
    }" />
    <DateElement name="birthDate" placeholder="Tanggal Lahir" :columns="{
      sm: {
        container: 6,
      },
      lg: {
        container: 6,
      },
    }" />
    <StaticElement name="divider_1" tag="hr" />
    <StaticElement name="addressTitle" tag="h2" content="Alamat" />
    <FormLibAddress />

    <StaticElement name="divider_2" tag="hr" />
    <StaticElement name="contactTitle" tag="h4" content="Kontak" />
    <FormLibTelecom />
    <StaticElement name="divider_3" tag="hr" />
    <StaticElement name="communicationTitle" tag="h2" content="Komunikasi" />
    <FormLibCommunication />
    <GroupElement name="container" :columns="{
      default: {
        container: 7,
      },
      sm: {
        container: 8,
      },
      lg: {
        container: 9,
      },
    }" />
    <GroupElement name="container2_3" :columns="{
      default: {
        container: 5,
      },
      sm: {
        container: 4,
      },
      lg: {
        container: 3,
      },
    }">
      <GroupElement name="column1" :columns="{
        container: 6,
      }">
        <ButtonElement name="secondaryButton" button-label="Batal" :secondary="true" align="center" size="lg" />
      </GroupElement>
      <GroupElement name="column2" :columns="{
        container: 6,
      }">
        <ButtonElement name="submit" button-label="Simpan" :submits="true" align="center" size="lg" />
      </GroupElement>
    </GroupElement>
  </Vueform>
</template>