first commit

pages/forms/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <IndexPage />
+</template>

pages/forms/patient.vue

@@ -0,0 +1,25 @@
+<script>
+import { VCard } from 'vuetify/components'
+
+definePageMeta({
+  title: 'Vue Form',
+  icon: 'mdi-account-injury-outline',
+  drawerIndex: 2,
+})
+</script>
+<template>
+  <v-card
+    class="mx-auto"
+    prepend-icon="mdi-account-injury-outline"
+    subtitle="Isi dan lengkapi dengan data yang sesuai"
+    width="600"
+  >
+    <template v-slot:title>
+      <span class="font-weight-black">Formulir Pasien Baru</span>
+    </template>
+
+    <v-card-text class="bg-surface-light pt-4">
+      <FormPatient />
+    </v-card-text>
+  </v-card>
+</template>

pages/forms/practitioner-basic.vue

@@ -0,0 +1,25 @@
+<script>
+import { VCard } from 'vuetify/components'
+
+definePageMeta({
+  title: 'Practitioner Basic',
+  icon: 'mdi-account-injury-outline',
+  drawerIndex: 4,
+})
+</script>
+<template>
+  <v-card
+    class="mx-auto"
+    prepend-icon="mdi-account-injury-outline"
+    subtitle="Isi dan lengkapi dengan data yang sesuai"
+    width="80%"
+  >
+    <template v-slot:title>
+      <span class="font-weight-black">Formulir Praktisi Baru</span>
+    </template>
+
+    <v-card-text class="bg-surface-light pt-4">
+      <FormPractitionerBasic />
+    </v-card-text>
+  </v-card>
+</template>

pages/forms/vue-form.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+definePageMeta({
+  title: 'Vue Form',
+  icon: 'mdi-checkbox-blank-off-outline',
+  drawerIndex: 0,
+})
+
+const data = ref({})
+const humanName = ref({})
+const onChange = () => {
+  humanName.value = parseName(data.value.nama)
+}
+
+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>
+  <div class="ma-4">
+    <Vueform
+      v-model="data"
+      @change="onChange"
+      endpoint="/api/practitioner/test"
+      method="post"
+      @response="handleResponse"
+      sync
+    >
+      <TextElement
+        name="nama"
+        placeholder="Nama Lengkap"
+        :rules="['required', 'min:3', 'max:100']"
+      />
+      <StaticElement name="parsed-name" size="sm">
+        <div class="d-flex flex-row">
+          <v-chip
+            v-for="prefix in humanName.prefix"
+            size="x-small"
+            class="mr-1 bg-indigo-lighten-3"
+            >{{ prefix }}</v-chip
+          ><v-chip
+            v-for="given in humanName.given"
+            size="x-small"
+            class="mr-1 bg-blue-darken-3"
+            >{{ given }}</v-chip
+          >
+          <v-chip
+            v-show="humanName.family"
+            size="x-small"
+            class="mr-1 bg-blue"
+            >{{ humanName.family }}</v-chip
+          >
+          <v-chip
+            v-for="suffix in humanName.suffix"
+            size="x-small"
+            class="mr-1 bg-indigo-lighten-3"
+            >{{ suffix }}</v-chip
+          >
+        </div>
+      </StaticElement>
+      <RadiogroupElement
+        name="gender"
+        view="tabs"
+        label="Jenis Kelamin"
+        :items="[
+          {
+            value: 'unknown',
+            label: '⭕',
+          },
+          {
+            value: 'male',
+            label: '♂️ Laki-laki',
+          },
+          {
+            value: 'female',
+            label: '♀️ Perempuan',
+          },
+          {
+            value: 'other',
+            label: '⚧️ Lainnya',
+          },
+        ]"
+        default="unknown"
+      />
+
+      <ButtonElement
+        name="submit"
+        button-label="Submit"
+        :submits="true"
+        align="right"
+      />
+    </Vueform>
+  </div>
+  <span>{{ data }}</span>
+</template>