feat/patient-63: cleaning and resolve conflict
This commit is contained in:
@@ -174,7 +174,7 @@ body {
|
||||
}
|
||||
|
||||
body, table, label {
|
||||
@apply md:!text-xs 2xl:!text-sm;
|
||||
@apply md:!text-xs 2xl:!text-sm;
|
||||
}
|
||||
|
||||
/* Container */
|
||||
|
||||
@@ -108,248 +108,246 @@ function onAddSep() {
|
||||
: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">
|
||||
<div class="p-2">
|
||||
<h2 class="text-md font-semibold">Data Pasien</h2>
|
||||
</div>
|
||||
<div class="my-2 flex gap-6 p-2 text-sm">
|
||||
<span>
|
||||
Sudah pernah terdaftar sebagai pasien?
|
||||
<Button class="bg-primary" size="sm" @click.prevent="emit('click', 'search')">
|
||||
<Icon name="i-lucide-search" class="mr-1" /> Cari Pasien
|
||||
</Button>
|
||||
</span>
|
||||
<span>
|
||||
Belum pernah terdaftar sebagai pasien?
|
||||
<Button class="bg-primary" size="sm" @click.prevent="emit('click', 'add')">
|
||||
<Icon name="i-lucide-plus" class="mr-1" /> Tambah Pasien Baru
|
||||
</Button>
|
||||
</span>
|
||||
</div>
|
||||
<Block :colCount="3">
|
||||
<Cell>
|
||||
<Label label-for="patient_name">Nama Pasien</Label>
|
||||
<Field id="patient_name" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="patient_name">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="patient_name"
|
||||
v-bind="componentField"
|
||||
disabled
|
||||
placeholder="Tambah data pasien terlebih dahulu"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<!-- NIK -->
|
||||
<Cell :cosSpan="3">
|
||||
<Label label-for="nik">NIK</Label>
|
||||
<Field id="nik" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="nik">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input id="nik" v-bind="componentField" disabled placeholder="Otomatis" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label label-for="rm">No. RM</Label>
|
||||
<Field id="rm" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="rm">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input id="rm" v-bind="componentField" disabled placeholder="RM99222" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
<Separator />
|
||||
|
||||
<div class="p-2">
|
||||
<h2 class="text-md font-semibold">Data Kunjungan</h2>
|
||||
</div>
|
||||
|
||||
<Block :colCount="3">
|
||||
<!-- Dokter (Combobox) -->
|
||||
<Cell :cosSpan="3">
|
||||
<Label label-for="doctor_id">Dokter</Label>
|
||||
<Field id="doctor_id" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="doctor_id">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Combobox id="doctor_id" v-bind="componentField" :items="doctorOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<!-- Tanggal Daftar (DatePicker) -->
|
||||
<Cell :cosSpan="3">
|
||||
<Label label-for="register_date">Tanggal Daftar</Label>
|
||||
<Field id="register_date" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="register_date">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<DatepickerSingle v-bind="componentField" placeholder="Pilih tanggal" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<!-- Jenis Pembayaran (Combobox) -->
|
||||
<Cell :cosSpan="3">
|
||||
<Label label-for="payment_type">Jenis Pembayaran</Label>
|
||||
<Field id="payment_type" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="payment_type">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<!-- <Combobox id="payment_type" v-bind="componentField" :items="paymentOpts" /> -->
|
||||
<Select id="payment_type" v-bind="componentField" :items="paymentOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
|
||||
<Block :colCount="3">
|
||||
<Cell :cosSpan="3">
|
||||
<Label label-for="bpjs_number">Kelompok Peserta</Label>
|
||||
<Field id="bpjs_number" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="bpjs_number">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="bpjs_number"
|
||||
v-bind="componentField"
|
||||
placeholder="Pilih jenis pembayaran terlebih dahulu"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<!-- No. Kartu BPJS -->
|
||||
<Cell :cosSpan="3">
|
||||
<Label label-for="bpjs_number">No. Kartu BPJS</Label>
|
||||
<Field id="bpjs_number" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="bpjs_number">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="bpjs_number"
|
||||
v-bind="componentField"
|
||||
placeholder="Pilih jenis pembayaran terlebih dahulu"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<!-- Jenis SEP -->
|
||||
<Cell :cosSpan="3">
|
||||
<Label label-for="sep_type">Jenis SEP</Label>
|
||||
<Field id="sep_type" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="sep_type">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Select id="sep_type" v-bind="componentField" :items="sepOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
|
||||
<Block :colCount="3">
|
||||
<!-- No. SEP (input + tombol +) -->
|
||||
<Cell :cosSpan="3">
|
||||
<Label label-for="sep_number">No. SEP</Label>
|
||||
<Field id="sep_number" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="sep_number">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<div class="flex gap-2">
|
||||
<Input
|
||||
id="sep_number"
|
||||
v-bind="componentField"
|
||||
placeholder="Tambah SEP terlebih dahulu"
|
||||
class="flex-1"
|
||||
/>
|
||||
<Button class="bg-primary" size="sm" variant="outline" @click.prevent="onAddSep">+</Button>
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<!-- Dokumen SEP (file) -->
|
||||
<Cell :cosSpan="3">
|
||||
<Label label-for="sep_file">Dokumen SEP</Label>
|
||||
<Field id="sep_file" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="sep_file">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<div class="flex items-center gap-2">
|
||||
<input ref="sepFileInput" type="file" class="hidden" @change="onSepFileChange" />
|
||||
<Button class="bg-primary" size="sm" variant="ghost" @click.prevent="pickSepFile"
|
||||
>Pilih Berkas</Button
|
||||
>
|
||||
<Input readonly v-bind="componentField" placeholder="Unggah dokumen SEP" />
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<!-- Dokumen SIPP (file) -->
|
||||
<Cell :cosSpan="3" labelSize="thin">
|
||||
<Label label-for="sipp_file">Dokumen SIPP</Label>
|
||||
<Field id="sipp_file" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="sipp_file">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<div class="flex items-center gap-2">
|
||||
<input ref="sippFileInput" type="file" class="hidden" @change="onSippFileChange" />
|
||||
<Button class="bg-primary" size="sm" variant="ghost" @click.prevent="pickSippFile"
|
||||
>Pilih Berkas</Button
|
||||
>
|
||||
<Input readonly v-bind="componentField" placeholder="Unggah dokumen SIPP" />
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
<div class="flex flex-col justify-between">
|
||||
<div class="mb-2 2xl:mb-3 text-sm 2xl:text-base font-semibold">
|
||||
Data Pasien
|
||||
</div>
|
||||
<div class="flex gap-6 mb-2 2xl:mb-2">
|
||||
<span>
|
||||
Sudah pernah terdaftar sebagai pasien?
|
||||
<Button class="bg-primary" size="sm" @click.prevent="emit('click', 'search')">
|
||||
<Icon name="i-lucide-search" class="mr-1" /> Cari Pasien
|
||||
</Button>
|
||||
</span>
|
||||
<span>
|
||||
Belum pernah terdaftar sebagai pasien?
|
||||
<Button class="bg-primary" size="sm" @click.prevent="emit('click', 'add')">
|
||||
<Icon name="i-lucide-plus" class="mr-1" /> Tambah Pasien Baru
|
||||
</Button>
|
||||
</span>
|
||||
</div>
|
||||
<Block :colCount="3">
|
||||
<Cell>
|
||||
<Label label-for="patient_name">Nama Pasien</Label>
|
||||
<Field id="patient_name" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="patient_name">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="patient_name"
|
||||
v-bind="componentField"
|
||||
disabled
|
||||
placeholder="Tambah data pasien terlebih dahulu"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<!-- NIK -->
|
||||
<Cell :cosSpan="3">
|
||||
<Label label-for="nik">NIK</Label>
|
||||
<Field id="nik" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="nik">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input id="nik" v-bind="componentField" disabled placeholder="Otomatis" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label label-for="rm">No. RM</Label>
|
||||
<Field id="rm" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="rm">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input id="rm" v-bind="componentField" disabled placeholder="RM99222" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
|
||||
<Separator class="my-4 2xl:my-5" />
|
||||
|
||||
<div class="mb-2 2xl:mb-3 text-sm 2xl:text-base font-semibold">
|
||||
Data Kunjungan
|
||||
</div>
|
||||
<Block :colCount="3">
|
||||
<!-- Dokter (Combobox) -->
|
||||
<Cell :cosSpan="3">
|
||||
<Label label-for="doctor_id">Dokter</Label>
|
||||
<Field id="doctor_id" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="doctor_id">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Combobox id="doctor_id" v-bind="componentField" :items="doctorOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<!-- Tanggal Daftar (DatePicker) -->
|
||||
<Cell :cosSpan="3">
|
||||
<Label label-for="register_date">Tanggal Daftar</Label>
|
||||
<Field id="register_date" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="register_date">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<DatepickerSingle v-bind="componentField" placeholder="Pilih tanggal" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<!-- Jenis Pembayaran (Combobox) -->
|
||||
<Cell :cosSpan="3">
|
||||
<Label label-for="payment_type">Jenis Pembayaran</Label>
|
||||
<Field id="payment_type" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="payment_type">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<!-- <Combobox id="payment_type" v-bind="componentField" :items="paymentOpts" /> -->
|
||||
<Select id="payment_type" v-bind="componentField" :items="paymentOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
|
||||
<Block :colCount="3">
|
||||
<Cell :cosSpan="3">
|
||||
<Label label-for="bpjs_number">Kelompok Peserta</Label>
|
||||
<Field id="bpjs_number" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="bpjs_number">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="bpjs_number"
|
||||
v-bind="componentField"
|
||||
placeholder="Pilih jenis pembayaran terlebih dahulu"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<!-- No. Kartu BPJS -->
|
||||
<Cell :cosSpan="3">
|
||||
<Label label-for="bpjs_number">No. Kartu BPJS</Label>
|
||||
<Field id="bpjs_number" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="bpjs_number">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="bpjs_number"
|
||||
v-bind="componentField"
|
||||
placeholder="Pilih jenis pembayaran terlebih dahulu"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<!-- Jenis SEP -->
|
||||
<Cell :cosSpan="3">
|
||||
<Label label-for="sep_type">Jenis SEP</Label>
|
||||
<Field id="sep_type" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="sep_type">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Select id="sep_type" v-bind="componentField" :items="sepOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
|
||||
<Block :colCount="3">
|
||||
<!-- No. SEP (input + tombol +) -->
|
||||
<Cell :cosSpan="3">
|
||||
<Label label-for="sep_number">No. SEP</Label>
|
||||
<Field id="sep_number" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="sep_number">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<div class="flex gap-2">
|
||||
<Input
|
||||
id="sep_number"
|
||||
v-bind="componentField"
|
||||
placeholder="Tambah SEP terlebih dahulu"
|
||||
class="flex-1"
|
||||
/>
|
||||
<Button class="bg-primary" size="sm" variant="outline" @click.prevent="onAddSep">+</Button>
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<!-- Dokumen SEP (file) -->
|
||||
<Cell :cosSpan="3">
|
||||
<Label label-for="sep_file">Dokumen SEP</Label>
|
||||
<Field id="sep_file" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="sep_file">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<div class="flex items-center gap-2">
|
||||
<input ref="sepFileInput" type="file" class="hidden" @change="onSepFileChange" />
|
||||
<Button class="bg-primary" size="sm" variant="ghost" @click.prevent="pickSepFile"
|
||||
>Pilih Berkas</Button
|
||||
>
|
||||
<Input readonly v-bind="componentField" placeholder="Unggah dokumen SEP" />
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<!-- Dokumen SIPP (file) -->
|
||||
<Cell :cosSpan="3" labelSize="thin">
|
||||
<Label label-for="sipp_file">Dokumen SIPP</Label>
|
||||
<Field id="sipp_file" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="sipp_file">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<div class="flex items-center gap-2">
|
||||
<input ref="sippFileInput" type="file" class="hidden" @change="onSippFileChange" />
|
||||
<Button class="bg-primary" size="sm" variant="ghost" @click.prevent="pickSippFile"
|
||||
>Pilih Berkas</Button
|
||||
>
|
||||
<Input readonly v-bind="componentField" placeholder="Unggah dokumen SIPP" />
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
|
||||
import Field from '~/components/pub/my-ui/form/field.vue'
|
||||
import Label from '~/components/pub/my-ui/form/label.vue'
|
||||
import Select from '~/components/pub/my-ui/form/select.vue'
|
||||
import { Input } from '~/components/pub/ui/input'
|
||||
import { cn } from '~/lib/utils'
|
||||
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
|
||||
defineProps<{
|
||||
fieldNameInput: string
|
||||
placeholder: string
|
||||
@@ -21,15 +21,15 @@ defineProps<{
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FieldGroup>
|
||||
<Label
|
||||
<DE.Cell :col-span="2">
|
||||
<DE.Label
|
||||
:label-for="fieldNameInput"
|
||||
:is-required="isRequired"
|
||||
>
|
||||
{{ labelForInput }}
|
||||
</Label>
|
||||
</DE.Label>
|
||||
|
||||
<Field
|
||||
<DE.Field
|
||||
:id="fieldNameInput"
|
||||
:errors="errors"
|
||||
>
|
||||
@@ -49,6 +49,6 @@ defineProps<{
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</template>
|
||||
|
||||
@@ -7,6 +7,8 @@ import { Label as RadioLabel } from '~/components/pub/ui/label'
|
||||
import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
|
||||
import { cn } from '~/lib/utils'
|
||||
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
|
||||
const props = defineProps<{
|
||||
fieldName?: string
|
||||
label?: string
|
||||
@@ -35,18 +37,19 @@ const genderOptions = [
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FieldGroup :class="cn('radio-group-field', containerClass)">
|
||||
<Label
|
||||
<DE.Cell :class="cn('radio-group-field', containerClass)">
|
||||
<DE.Label
|
||||
:label-for="fieldName"
|
||||
:is-required="isRequired"
|
||||
height="compact"
|
||||
>
|
||||
{{ label }}
|
||||
</Label>
|
||||
<Field
|
||||
</DE.Label>
|
||||
<DE.Field
|
||||
:id="fieldName"
|
||||
:errors="errors"
|
||||
>
|
||||
class="pt-0.5"
|
||||
>
|
||||
<FormField
|
||||
v-slot="{ componentField }"
|
||||
:name="fieldName"
|
||||
@@ -67,7 +70,7 @@ const genderOptions = [
|
||||
:value="option.value"
|
||||
:class="
|
||||
cn(
|
||||
'relative h-4 w-4 rounded-full border-2 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
|
||||
'relative h-4 w-4 rounded-full border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
|
||||
containerClass,
|
||||
)
|
||||
"
|
||||
@@ -76,7 +79,7 @@ const genderOptions = [
|
||||
:for="`${fieldName}-${index}`"
|
||||
:class="
|
||||
cn(
|
||||
'cursor-pointer select-none text-xs font-medium leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
|
||||
'cursor-pointer select-none font-normal text-xs leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
|
||||
labelClass,
|
||||
)
|
||||
"
|
||||
@@ -89,6 +92,6 @@ const genderOptions = [
|
||||
<FormMessage class="ml-0 mt-1" />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</template>
|
||||
|
||||
@@ -7,6 +7,8 @@ import { Label as RadioLabel } from '~/components/pub/ui/label'
|
||||
import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
|
||||
import { cn } from '~/lib/utils'
|
||||
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
|
||||
const props = defineProps<{
|
||||
fieldName?: string
|
||||
label?: string
|
||||
@@ -35,17 +37,18 @@ const dissabilityOptions = [
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FieldGroup :class="cn('radio-group-field', containerClass)">
|
||||
<Label
|
||||
<DE.Cell :class="cn('radio-group-field', containerClass)">
|
||||
<DE.Label
|
||||
:label-for="fieldName"
|
||||
:is-required="isRequired"
|
||||
height="compact"
|
||||
>
|
||||
{{ label }}
|
||||
</Label>
|
||||
<Field
|
||||
</DE.Label>
|
||||
<DE.Field
|
||||
:id="fieldName"
|
||||
:errors="errors"
|
||||
class="pt-0.5"
|
||||
>
|
||||
<FormField
|
||||
v-slot="{ componentField }"
|
||||
@@ -67,7 +70,7 @@ const dissabilityOptions = [
|
||||
:value="option.value"
|
||||
:class="
|
||||
cn(
|
||||
'relative h-4 w-4 rounded-full border-2 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
|
||||
'relative h-4 w-4 rounded-full border-1 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
|
||||
containerClass,
|
||||
)
|
||||
"
|
||||
@@ -76,7 +79,7 @@ const dissabilityOptions = [
|
||||
:for="`${fieldName}-${index}`"
|
||||
:class="
|
||||
cn(
|
||||
'cursor-pointer select-none text-xs font-medium leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
|
||||
'cursor-pointer select-none text-xs !font-normal leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
|
||||
labelClass,
|
||||
)
|
||||
"
|
||||
@@ -89,6 +92,6 @@ const dissabilityOptions = [
|
||||
<FormMessage class="ml-0 mt-1" />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</template>
|
||||
|
||||
@@ -8,6 +8,8 @@ import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
|
||||
import { genderCodes } from '~/lib/constants'
|
||||
import { cn, mapToComboboxOptList } from '~/lib/utils'
|
||||
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
|
||||
const props = defineProps<{
|
||||
fieldName?: string
|
||||
label?: string
|
||||
@@ -33,15 +35,15 @@ const genderOptions = mapToComboboxOptList(genderCodes)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FieldGroup :class="cn('radio-group-field', containerClass)">
|
||||
<Label
|
||||
<DE.Cell :class="cn('radio-group-field', containerClass)" :col-span="4">
|
||||
<DE.Label
|
||||
:label-for="fieldName"
|
||||
:is-required="isRequired"
|
||||
height="compact"
|
||||
>
|
||||
{{ label }}
|
||||
</Label>
|
||||
<Field
|
||||
</DE.Label>
|
||||
<DE.Field
|
||||
:id="fieldName"
|
||||
:errors="errors"
|
||||
>
|
||||
@@ -65,7 +67,7 @@ const genderOptions = mapToComboboxOptList(genderCodes)
|
||||
:value="option.value"
|
||||
:class="
|
||||
cn(
|
||||
'relative h-4 w-4 rounded-full border-2 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
|
||||
'relative h-4 w-4 rounded-full border-1 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
|
||||
containerClass,
|
||||
)
|
||||
"
|
||||
@@ -74,7 +76,7 @@ const genderOptions = mapToComboboxOptList(genderCodes)
|
||||
:for="`${fieldName}-${index}`"
|
||||
:class="
|
||||
cn(
|
||||
'cursor-pointer select-none text-xs font-medium leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
|
||||
'cursor-pointer select-none text-xs 2xl:text-sm leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 !font-normal',
|
||||
labelClass,
|
||||
)
|
||||
"
|
||||
@@ -87,6 +89,6 @@ const genderOptions = mapToComboboxOptList(genderCodes)
|
||||
<FormMessage class="ml-0 mt-1" />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</template>
|
||||
|
||||
@@ -7,6 +7,8 @@ import { Label as RadioLabel } from '~/components/pub/ui/label'
|
||||
import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
|
||||
import { cn } from '~/lib/utils'
|
||||
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
|
||||
const props = defineProps<{
|
||||
fieldName?: string
|
||||
label?: string
|
||||
@@ -35,17 +37,18 @@ const nationalityOptions = [
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FieldGroup :class="cn('radio-group-field', containerClass)">
|
||||
<Label
|
||||
<DE.Cell :class="cn('radio-group-field', containerClass)">
|
||||
<DE.Label
|
||||
:label-for="fieldName"
|
||||
:is-required="isRequired"
|
||||
height="compact"
|
||||
>
|
||||
{{ label }}
|
||||
</Label>
|
||||
<Field
|
||||
</DE.Label>
|
||||
<DE.Field
|
||||
:id="fieldName"
|
||||
:errors="errors"
|
||||
class="pt-0.5"
|
||||
>
|
||||
<FormField
|
||||
v-slot="{ componentField }"
|
||||
@@ -67,7 +70,7 @@ const nationalityOptions = [
|
||||
:value="option.value"
|
||||
:class="
|
||||
cn(
|
||||
'relative h-4 w-4 rounded-full border-2 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
|
||||
'relative h-4 w-4 rounded-full border-1 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
|
||||
containerClass,
|
||||
)
|
||||
"
|
||||
@@ -76,7 +79,7 @@ const nationalityOptions = [
|
||||
:for="`${fieldName}-${index}`"
|
||||
:class="
|
||||
cn(
|
||||
'cursor-pointer select-none text-xs font-medium leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
|
||||
'cursor-pointer select-none text-xs !font-normal leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
|
||||
labelClass,
|
||||
)
|
||||
"
|
||||
@@ -89,6 +92,6 @@ const nationalityOptions = [
|
||||
<FormMessage class="ml-0 mt-1" />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</template>
|
||||
|
||||
@@ -7,6 +7,8 @@ import { Label as RadioLabel } from '~/components/pub/ui/label'
|
||||
import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
|
||||
import { cn } from '~/lib/utils'
|
||||
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
|
||||
const props = defineProps<{
|
||||
fieldName?: string
|
||||
label?: string
|
||||
@@ -35,14 +37,14 @@ const newbornOptions = [
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FieldGroup :class="cn('radio-group-field', containerClass)">
|
||||
<Label
|
||||
<DE.Cell :class="cn('radio-group-field', containerClass)" :col-span="2">
|
||||
<DE.Label
|
||||
:label-for="fieldName"
|
||||
:is-required="isRequired"
|
||||
>
|
||||
{{ label }}
|
||||
</Label>
|
||||
<Field
|
||||
</DE.Label>
|
||||
<DE.Field
|
||||
:id="fieldName"
|
||||
:errors="errors"
|
||||
>
|
||||
@@ -59,14 +61,14 @@ const newbornOptions = [
|
||||
<div
|
||||
v-for="(option, index) in newbornOptions"
|
||||
:key="option.value"
|
||||
:class="cn('flex min-w-fit items-center space-x-2', radioItemClass)"
|
||||
:class="cn('flex min-w-fit items-center space-x-2 pt-1', radioItemClass)"
|
||||
>
|
||||
<RadioGroupItem
|
||||
:id="`${fieldName}-${index}`"
|
||||
:value="option.value"
|
||||
:class="
|
||||
cn(
|
||||
'relative h-4 w-4 rounded-full border-2 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
|
||||
'relative h-4 w-4 rounded-full border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
|
||||
containerClass,
|
||||
)
|
||||
"
|
||||
@@ -75,7 +77,7 @@ const newbornOptions = [
|
||||
:for="`${fieldName}-${index}`"
|
||||
:class="
|
||||
cn(
|
||||
'cursor-pointer select-none text-xs font-medium leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
|
||||
'cursor-pointer select-none text-xs font-normal leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
|
||||
labelClass,
|
||||
)
|
||||
"
|
||||
@@ -88,6 +90,6 @@ const newbornOptions = [
|
||||
<FormMessage class="ml-0 mt-1" />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</template>
|
||||
|
||||
@@ -6,6 +6,8 @@ import Label from '~/components/pub/my-ui/form/label.vue'
|
||||
import Select from '~/components/pub/my-ui/form/select.vue'
|
||||
import { cn } from '~/lib/utils'
|
||||
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
|
||||
const props = defineProps<{
|
||||
fieldName?: string
|
||||
label?: string
|
||||
@@ -40,14 +42,14 @@ const disabilityOptions = [
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<Label
|
||||
<DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<DE.Label
|
||||
label-for="fieldName"
|
||||
:is-required="isRequired"
|
||||
>
|
||||
{{ label }}
|
||||
</Label>
|
||||
<Field
|
||||
</DE.Label>
|
||||
<DE.Field
|
||||
:id="fieldName"
|
||||
:errors="errors"
|
||||
:class="cn('select-field-wrapper')"
|
||||
@@ -76,6 +78,6 @@ const disabilityOptions = [
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</template>
|
||||
|
||||
@@ -7,6 +7,8 @@ import Label from '~/components/pub/my-ui/form/label.vue'
|
||||
import { Input } from '~/components/pub/ui/input'
|
||||
import { cn } from '~/lib/utils'
|
||||
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
|
||||
const props = defineProps<{
|
||||
fieldName?: string
|
||||
label?: string
|
||||
@@ -76,15 +78,15 @@ function calculateAge(birthDate: string | Date | undefined): string {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<Label
|
||||
<DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<DE.Label
|
||||
:label-for="fieldName"
|
||||
:class="cn('select-field-label', labelClass)"
|
||||
:is-required="isRequired"
|
||||
>
|
||||
{{ label }}
|
||||
</Label>
|
||||
<Field
|
||||
</DE.Label>
|
||||
<DE.Field
|
||||
:id="fieldName"
|
||||
:errors="errors"
|
||||
:class="cn('select-field-wrapper')"
|
||||
@@ -113,12 +115,11 @@ function calculateAge(birthDate: string | Date | undefined): string {
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
<FieldGroup>
|
||||
<Label label-for="patientAge">Usia</Label>
|
||||
|
||||
<Field id="patientAge">
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell>
|
||||
<DE.Label label-for="patientAge">Usia</DE.Label>
|
||||
<DE.Field id="patientAge">
|
||||
<FormField name="patientAge">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
@@ -137,6 +138,6 @@ function calculateAge(birthDate: string | Date | undefined): string {
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</template>
|
||||
|
||||
@@ -7,6 +7,8 @@ import Select from '~/components/pub/my-ui/form/select.vue'
|
||||
import { educationCodes } from '~/lib/constants'
|
||||
import { cn, mapToComboboxOptList } from '~/lib/utils'
|
||||
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
|
||||
const props = defineProps<{
|
||||
fieldName?: string
|
||||
label?: string
|
||||
@@ -46,15 +48,15 @@ const educationOptions = [
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<Label
|
||||
<DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<DE.Label
|
||||
:label-for="fieldName"
|
||||
:class="cn('select-field-label', labelClass)"
|
||||
:is-required="isRequired && !isDisabled"
|
||||
>
|
||||
{{ label }}
|
||||
</Label>
|
||||
<Field
|
||||
</DE.Label>
|
||||
<DE.Field
|
||||
:id="fieldName"
|
||||
:errors="errors"
|
||||
:class="cn('select-field-wrapper')"
|
||||
@@ -83,6 +85,6 @@ const educationOptions = [
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</template>
|
||||
|
||||
@@ -6,6 +6,8 @@ import Field from '~/components/pub/my-ui/form/field.vue'
|
||||
import Label from '~/components/pub/my-ui/form/label.vue'
|
||||
import { cn } from '~/lib/utils'
|
||||
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
|
||||
const props = defineProps<{
|
||||
fieldName?: string
|
||||
label?: string
|
||||
@@ -49,15 +51,15 @@ const ethnicOptions = [
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<Label
|
||||
<DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<DE.Label
|
||||
:label-for="fieldName"
|
||||
:class="cn('select-field-label', labelClass)"
|
||||
:is-required="isRequired && !isDisabled"
|
||||
>
|
||||
{{ label }}
|
||||
</Label>
|
||||
<Field
|
||||
</DE.Label>
|
||||
<DE.Field
|
||||
:id="fieldName"
|
||||
:errors="errors"
|
||||
:class="cn('select-field-wrapper')"
|
||||
@@ -81,6 +83,6 @@ const ethnicOptions = [
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,79 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
|
||||
import Field from '~/components/pub/my-ui/form/field.vue'
|
||||
import Label from '~/components/pub/my-ui/form/label.vue'
|
||||
import Select from '~/components/pub/my-ui/form/select.vue'
|
||||
import { cn } from '~/lib/utils'
|
||||
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
|
||||
const props = defineProps<{
|
||||
fieldName?: string
|
||||
label?: string
|
||||
isDisabled?: boolean
|
||||
isRequired?: boolean
|
||||
placeholder?: string
|
||||
errors?: FormErrors
|
||||
class?: string
|
||||
selectClass?: string
|
||||
fieldGroupClass?: string
|
||||
}>()
|
||||
|
||||
const {
|
||||
fieldName = 'disabilityType',
|
||||
placeholder = 'Pilih jenis disabilitas',
|
||||
errors,
|
||||
class: containerClass,
|
||||
selectClass,
|
||||
fieldGroupClass,
|
||||
} = props
|
||||
|
||||
const disabilityOptions = [
|
||||
{ label: 'Laki', value: 'male' },
|
||||
{ label: 'Perempuan', value: 'female' },
|
||||
{ label: 'Tidak Disebutkan', value: 'not-stated' },
|
||||
{ label: 'Tidak Diketahui', value: 'unknown' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<DE.Label
|
||||
label-for="fieldName"
|
||||
:is-required="isRequired"
|
||||
>
|
||||
{{ label }}
|
||||
</DE.Label>
|
||||
<DE.Field
|
||||
:id="fieldName"
|
||||
:errors="errors"
|
||||
:class="cn('select-field-wrapper')"
|
||||
>
|
||||
<FormField
|
||||
v-slot="{ componentField }"
|
||||
:name="fieldName"
|
||||
>
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Select
|
||||
:id="fieldName"
|
||||
:is-disabled="isDisabled"
|
||||
v-bind="componentField"
|
||||
:items="disabilityOptions"
|
||||
:placeholder="placeholder"
|
||||
:preserve-order="false"
|
||||
:class="
|
||||
cn(
|
||||
'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
|
||||
selectClass,
|
||||
)
|
||||
"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</template>
|
||||
@@ -7,6 +7,8 @@ import Label from '~/components/pub/my-ui/form/label.vue'
|
||||
import { cn, mapToComboboxOptList } from '~/lib/utils'
|
||||
import { occupationCodes } from '~/lib/constants'
|
||||
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
|
||||
const props = defineProps<{
|
||||
fieldName?: string
|
||||
label?: string
|
||||
@@ -34,15 +36,15 @@ const jobOptions = mapToComboboxOptList(occupationCodes)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<Label
|
||||
<DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<DE.Label
|
||||
:label-for="fieldName"
|
||||
:class="cn('select-field-label', labelClass)"
|
||||
:is-required="isRequired"
|
||||
>
|
||||
{{ label }}
|
||||
</Label>
|
||||
<Field
|
||||
</DE.Label>
|
||||
<DE.Field
|
||||
:id="fieldName"
|
||||
:errors="errors"
|
||||
:class="cn('select-field-wrapper')"
|
||||
@@ -65,6 +67,6 @@ const jobOptions = mapToComboboxOptList(occupationCodes)
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</template>
|
||||
|
||||
@@ -6,6 +6,8 @@ import Label from '~/components/pub/my-ui/form/label.vue'
|
||||
import Select from '~/components/pub/my-ui/form/select.vue'
|
||||
import { cn } from '~/lib/utils'
|
||||
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
|
||||
const props = defineProps<{
|
||||
fieldName?: string
|
||||
label?: string
|
||||
@@ -41,15 +43,15 @@ const langOptions = [
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<Label
|
||||
<DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<DE.Label
|
||||
:label-for="fieldName"
|
||||
:class="cn('select-field-label', labelClass)"
|
||||
:is-required="isRequired"
|
||||
>
|
||||
{{ label }}
|
||||
</Label>
|
||||
<Field
|
||||
</DE.Label>
|
||||
<DE.Field
|
||||
:id="fieldName"
|
||||
:errors="errors"
|
||||
:class="cn('select-field-wrapper')"
|
||||
@@ -77,6 +79,6 @@ const langOptions = [
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</template>
|
||||
|
||||
@@ -6,6 +6,8 @@ import Label from '~/components/pub/my-ui/form/label.vue'
|
||||
import Select from '~/components/pub/my-ui/form/select.vue'
|
||||
import { cn } from '~/lib/utils'
|
||||
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
|
||||
const props = defineProps<{
|
||||
fieldName?: string
|
||||
label?: string
|
||||
@@ -37,15 +39,15 @@ const maritalStatusOptions = [
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<Label
|
||||
<DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<DE.Label
|
||||
:label-for="fieldName"
|
||||
:class="cn('select-field-label', labelClass)"
|
||||
:is-required="isRequired"
|
||||
>
|
||||
{{ label }}
|
||||
</Label>
|
||||
<Field
|
||||
</DE.Label>
|
||||
<DE.Field
|
||||
:id="fieldName"
|
||||
:errors="errors"
|
||||
:class="cn('select-field-wrapper')"
|
||||
@@ -73,6 +75,6 @@ const maritalStatusOptions = [
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</template>
|
||||
|
||||
@@ -7,6 +7,8 @@ import Select from '~/components/pub/my-ui/form/select.vue'
|
||||
import { religionCodes } from '~/lib/constants'
|
||||
import { cn, mapToComboboxOptList } from '~/lib/utils'
|
||||
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
|
||||
const props = defineProps<{
|
||||
fieldName?: string
|
||||
label?: string
|
||||
@@ -45,15 +47,15 @@ const religionOptions = [
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<Label
|
||||
<DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<DE.Label
|
||||
:label-for="fieldName"
|
||||
:class="cn('select-field-label', labelClass)"
|
||||
:is-required="isRequired"
|
||||
>
|
||||
{{ label }}
|
||||
</Label>
|
||||
<Field
|
||||
</DE.Label>
|
||||
<DE.Field
|
||||
:id="fieldName"
|
||||
:errors="errors"
|
||||
:class="cn('select-field-wrapper')"
|
||||
@@ -81,6 +83,6 @@ const religionOptions = [
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</template>
|
||||
|
||||
@@ -7,7 +7,7 @@ import FileUpload from '~/components/pub/my-ui/form/file-field.vue'
|
||||
import InputName from './_common/input-name.vue'
|
||||
import RadioCommunicationBarrier from './_common/radio-communication-barrier.vue'
|
||||
import RadioDisability from './_common/radio-disability.vue'
|
||||
import RadioGender from './_common/radio-gender.vue'
|
||||
import SelectGender from './_common/select-gender.vue'
|
||||
import RadioNationality from './_common/radio-nationality.vue'
|
||||
import RadioNewborn from './_common/radio-newborn.vue'
|
||||
import SelectBirthPlace from '~/components/app/person/_common/select-birth-place.vue'
|
||||
@@ -19,6 +19,9 @@ import SelectJob from './_common/select-job.vue'
|
||||
import SelectLanguage from './_common/select-lang.vue'
|
||||
import SelectMaritalStatus from './_common/select-marital-status.vue'
|
||||
import SelectReligion from './_common/select-religion.vue'
|
||||
import Separator from '~/components/pub/ui/separator/Separator.vue'
|
||||
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
|
||||
const props = defineProps<{
|
||||
schema: any
|
||||
@@ -48,205 +51,161 @@ defineExpose({
|
||||
validation-mode="onSubmit"
|
||||
:initial-values="initialValues ? initialValues : {}"
|
||||
>
|
||||
<div class="mb-3 border-b border-b-slate-300">
|
||||
<p class="text-md mt-1 font-semibold">Data Diri Pasien</p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-[1fr_1fr]">
|
||||
<InputName
|
||||
field-name-input="fullName"
|
||||
label-for-input="Nama Lengkap"
|
||||
placeholder="Masukkan nama lengkap pasien"
|
||||
:errors="errors"
|
||||
is-required
|
||||
/>
|
||||
<RadioNewborn
|
||||
field-name="isNewBorn"
|
||||
label="Pasien Bayi"
|
||||
placeholder="Pilih status pasien"
|
||||
:errors="errors"
|
||||
is-required
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3">
|
||||
<!-- <InputBase
|
||||
field-name="birthPlace"
|
||||
label="Tempat Lahir"
|
||||
placeholder="Malang"
|
||||
:errors="errors"
|
||||
is-required
|
||||
/> -->
|
||||
<SelectBirthPlace
|
||||
field-name="birthPlace"
|
||||
label="Tempat Lahir"
|
||||
placeholder="Pilih tempat lahir"
|
||||
:errors="errors"
|
||||
is-required
|
||||
/>
|
||||
<SelectDob
|
||||
label="Tanggal Lahir"
|
||||
:errors="errors"
|
||||
is-required
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3">
|
||||
<RadioGender
|
||||
field-name="gender"
|
||||
label="Jenis Kelamin"
|
||||
placeholder="Pilih jenis kelamin"
|
||||
:errors="errors"
|
||||
is-required
|
||||
/>
|
||||
<RadioNationality
|
||||
field-name="nationality"
|
||||
label="Kebangsaan"
|
||||
placeholder="Pilih kebangsaan"
|
||||
:errors="errors"
|
||||
is-required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm 2xl:text-base mb-2 2xl:mb-3 font-semibold">Data Diri Pasien</p>
|
||||
<DE.Block :col-count="4" :cell-flex="false">
|
||||
<InputBase
|
||||
field-name="identityNumber"
|
||||
label="No. KTP"
|
||||
placeholder="Masukkan NIK"
|
||||
:errors="errors"
|
||||
numeric-only
|
||||
/>
|
||||
<InputBase
|
||||
field-name="drivingLicenseNumber"
|
||||
label="No. SIM"
|
||||
placeholder="Masukkan nomor SIM"
|
||||
numeric-only
|
||||
:max-length="20"
|
||||
:errors="errors"
|
||||
/>
|
||||
<InputBase
|
||||
field-name="passportNumber"
|
||||
label="No. Paspor"
|
||||
placeholder="Masukkan nomor paspor"
|
||||
:max-length="20"
|
||||
:errors="errors"
|
||||
/>
|
||||
<InputName
|
||||
field-name-alias="alias"
|
||||
field-name-input="fullName"
|
||||
label-for-input="Nama Lengkap"
|
||||
placeholder="Masukkan nama lengkap pasien"
|
||||
:errors="errors"
|
||||
is-required
|
||||
/>
|
||||
<RadioNewborn
|
||||
field-name="isNewBorn"
|
||||
label="Pasien Bayi"
|
||||
placeholder="Pilih status pasien"
|
||||
:errors="errors"
|
||||
is-required
|
||||
/>
|
||||
<SelectGender
|
||||
field-name="gender"
|
||||
label="Jenis Kelamin"
|
||||
placeholder="Pilih jenis kelamin"
|
||||
:errors="errors"
|
||||
is-required
|
||||
/>
|
||||
<SelectBirthPlace
|
||||
field-name="birthPlace"
|
||||
label="Tempat Lahir"
|
||||
placeholder="Pilih tempat lahir"
|
||||
:errors="errors"
|
||||
is-required
|
||||
/>
|
||||
<SelectDob
|
||||
label="Tanggal Lahir"
|
||||
:errors="errors"
|
||||
is-required
|
||||
/>
|
||||
<SelectEducation
|
||||
field-name="education"
|
||||
label="Pendidikan"
|
||||
placeholder="Pilih pendidikan"
|
||||
:errors="errors"
|
||||
is-required
|
||||
/>
|
||||
<SelectJob
|
||||
field-name="job"
|
||||
label="Pekerjaan"
|
||||
placeholder="Pilih pekerjaan"
|
||||
:errors="errors"
|
||||
is-required
|
||||
/>
|
||||
<SelectMaritalStatus
|
||||
field-name="maritalStatus"
|
||||
label="Status Perkawinan"
|
||||
placeholder="Pilih status Perkawinan"
|
||||
:errors="errors"
|
||||
is-required
|
||||
/>
|
||||
<DE.Cell />
|
||||
<RadioNationality
|
||||
field-name="nationality"
|
||||
label="Kebangsaan"
|
||||
placeholder="Pilih kebangsaan"
|
||||
:errors="errors"
|
||||
is-required
|
||||
/>
|
||||
<SelectEthnicity
|
||||
field-name="ethnicity"
|
||||
label="Suku"
|
||||
placeholder="Pilih suku bangsa"
|
||||
:errors="errors"
|
||||
:is-disabled="values.nationality !== 'WNI'"
|
||||
/>
|
||||
<SelectLanguage
|
||||
field-name="language"
|
||||
label="Bahasa"
|
||||
placeholder="Pilih preferensi bahasa"
|
||||
:errors="errors"
|
||||
is-required
|
||||
/>
|
||||
<SelectReligion
|
||||
field-name="religion"
|
||||
label="Agama"
|
||||
placeholder="Pilih agama"
|
||||
:errors="errors"
|
||||
is-required
|
||||
/>
|
||||
<RadioCommunicationBarrier
|
||||
field-name="communicationBarrier"
|
||||
label="Hambatan Berkomunikasi"
|
||||
:errors="errors"
|
||||
is-required
|
||||
/>
|
||||
<RadioDisability
|
||||
field-name="disability"
|
||||
label="Disabilitas"
|
||||
:errors="errors"
|
||||
is-required
|
||||
/>
|
||||
<SelectDisability
|
||||
label="Jenis Disabilitas"
|
||||
field-name="disabilityType"
|
||||
:errors="errors"
|
||||
:is-disabled="values.disability !== 'YA'"
|
||||
:is-required="values.disability === 'YA'"
|
||||
/>
|
||||
<InputBase
|
||||
field-name="note"
|
||||
label="Kepercayaan"
|
||||
placeholder="Contoh: tidak ingin diperiksa oleh dokter laki-laki"
|
||||
:errors="errors"
|
||||
/>
|
||||
</DE.Block>
|
||||
|
||||
<div class="mb-3 border-b border-b-slate-300">
|
||||
<p class="text-md mt-1 font-semibold">Dokumen Identitas</p>
|
||||
<div class="h-6"></div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3">
|
||||
<!-- <InputBase
|
||||
field-name="identityNumber"
|
||||
label="No. KTP"
|
||||
placeholder="Masukkan NIK"
|
||||
:errors="errors"
|
||||
numeric-only
|
||||
:max-length="16"
|
||||
is-required
|
||||
/> -->
|
||||
<InputBase
|
||||
field-name="identityNumber"
|
||||
label="No. KTP"
|
||||
placeholder="Masukkan NIK"
|
||||
:errors="errors"
|
||||
numeric-only
|
||||
/>
|
||||
<InputBase
|
||||
field-name="drivingLicenseNumber"
|
||||
label="No. SIM"
|
||||
placeholder="Masukkan nomor SIM"
|
||||
numeric-only
|
||||
:max-length="20"
|
||||
:errors="errors"
|
||||
/>
|
||||
|
||||
<InputBase
|
||||
field-name="passportNumber"
|
||||
label="No. Paspor"
|
||||
placeholder="Masukkan nomor paspor"
|
||||
:max-length="20"
|
||||
:errors="errors"
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2">
|
||||
<FileUpload
|
||||
field-name="residentIdentityFile"
|
||||
label="Dokumen KTP"
|
||||
placeholder="Unggah scan dokumen KTP"
|
||||
:errors="errors"
|
||||
:accept="['pdf', 'jpg', 'png']"
|
||||
:max-size-mb="1"
|
||||
@update:model-value="values.residentIdentityFile = $event"
|
||||
/>
|
||||
<FileUpload
|
||||
field-name="familyIdentityFile"
|
||||
label="Dokumen KK"
|
||||
placeholder="Unggah scan dokumen KK"
|
||||
:errors="errors"
|
||||
:accept="['pdf', 'jpg', 'png']"
|
||||
:max-size-mb="1"
|
||||
@update:model-value="values.familyIdentityFile = $event"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3 border-b border-b-slate-300">
|
||||
<p class="text-md mt-1 font-semibold">Data Demografis</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3">
|
||||
<SelectReligion
|
||||
field-name="religion"
|
||||
label="Agama"
|
||||
placeholder="Pilih agama"
|
||||
:errors="errors"
|
||||
is-required
|
||||
/>
|
||||
<SelectEthnicity
|
||||
field-name="ethnicity"
|
||||
label="Suku"
|
||||
placeholder="Pilih suku bangsa"
|
||||
:errors="errors"
|
||||
:is-disabled="values.nationality !== 'WNI'"
|
||||
/>
|
||||
<SelectLanguage
|
||||
field-name="language"
|
||||
label="Bahasa"
|
||||
placeholder="Pilih preferensi bahasa"
|
||||
:errors="errors"
|
||||
is-required
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3">
|
||||
<SelectMaritalStatus
|
||||
field-name="maritalStatus"
|
||||
label="Status Perkawinan"
|
||||
placeholder="Pilih status Perkawinan"
|
||||
:errors="errors"
|
||||
is-required
|
||||
/>
|
||||
<SelectEducation
|
||||
field-name="education"
|
||||
label="Pendidikan"
|
||||
placeholder="Pilih pendidikan"
|
||||
:errors="errors"
|
||||
is-required
|
||||
/>
|
||||
<SelectJob
|
||||
field-name="job"
|
||||
label="Pekerjaan"
|
||||
placeholder="Pilih pekerjaan"
|
||||
:errors="errors"
|
||||
is-required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3 border-b border-b-slate-300">
|
||||
<p class="text-md mt-1 font-semibold">Kondisi Khusus</p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3">
|
||||
<RadioCommunicationBarrier
|
||||
field-name="communicationBarrier"
|
||||
label="Hambatan Berkomunikasi"
|
||||
:errors="errors"
|
||||
is-required
|
||||
/>
|
||||
<div class="cols-span-1">
|
||||
<RadioDisability
|
||||
field-name="disability"
|
||||
label="Disabilitas"
|
||||
:errors="errors"
|
||||
is-required
|
||||
/>
|
||||
<SelectDisability
|
||||
label="Jenis Disabilitas"
|
||||
field-name="disabilityType"
|
||||
:errors="errors"
|
||||
:is-disabled="values.disability !== 'YA'"
|
||||
:is-required="values.disability === 'YA'"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<InputBase
|
||||
field-name="note"
|
||||
label="Kepercayaan"
|
||||
placeholder="Contoh: tidak ingin diperiksa oleh dokter laki-laki"
|
||||
:errors="errors"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm 2xl:text-base mb-2 2xl:mb-3 font-semibold">Dokumen Identitas</p>
|
||||
<DE.Block :col-count="2" :cell-flex="false">
|
||||
<FileUpload
|
||||
field-name="identityCardFile"
|
||||
label="Dokumen KTP"
|
||||
placeholder="Unggah scan dokumen KTP"
|
||||
:errors="errors"
|
||||
:accept="['pdf', 'jpg', 'png']"
|
||||
:max-size-mb="1"
|
||||
/>
|
||||
<FileUpload
|
||||
field-name="familyCardFile"
|
||||
label="Dokumen KK"
|
||||
placeholder="Unggah scan dokumen KK"
|
||||
:errors="errors"
|
||||
:accept="['pdf', 'jpg', 'png']"
|
||||
:max-size-mb="1"
|
||||
/>
|
||||
</DE.Block>
|
||||
</Form>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,96 @@
|
||||
import type { Config } from '~/components/pub/my-ui/data-table'
|
||||
import type { Patient } from '~/models/patient'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
import { educationCodes, genderCodes } from '~/lib/constants'
|
||||
import { calculateAge } from '~/lib/utils'
|
||||
|
||||
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
|
||||
|
||||
export const config: Config = {
|
||||
cols: [{}, {}, {}, {}, {}, {}, {}, { width: 5 }],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: 'No. RM' },
|
||||
{ label: 'Nama' },
|
||||
{ label: 'No. KTP/SIM/Passpor' },
|
||||
{ label: 'Tgl Lahir' },
|
||||
{ label: 'Umur' },
|
||||
{ label: 'Kelamin' },
|
||||
{ label: 'Pendidikan' },
|
||||
{ label: '' },
|
||||
],
|
||||
],
|
||||
|
||||
keys: ['number', 'person.name', 'identity_number', 'birth_date', 'patient_age', 'gender', 'education', 'action'],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'code', label: 'Kode' },
|
||||
{ key: 'name', label: 'Nama' },
|
||||
],
|
||||
|
||||
parses: {
|
||||
patientId: (rec: unknown): unknown => {
|
||||
const patient = rec as Patient
|
||||
return patient.number
|
||||
},
|
||||
identity_number: (rec: unknown): unknown => {
|
||||
const { person } = rec as Patient
|
||||
|
||||
if (person.nationality == 'WNA') {
|
||||
return person.passportNumber
|
||||
}
|
||||
|
||||
return person.residentIdentityNumber || '-'
|
||||
},
|
||||
birth_date: (rec: unknown): unknown => {
|
||||
const { person } = rec as Patient
|
||||
|
||||
if (typeof person.birthDate == 'object' && person.birthDate) {
|
||||
return (person.birthDate as Date).toLocaleDateString('id-ID')
|
||||
} else if (typeof person.birthDate == 'string') {
|
||||
return (person.birthDate as string).substring(0, 10)
|
||||
}
|
||||
return person.birthDate
|
||||
},
|
||||
patient_age: (rec: unknown): unknown => {
|
||||
const { person } = rec as Patient
|
||||
return calculateAge(person.birthDate)
|
||||
},
|
||||
gender: (rec: unknown): unknown => {
|
||||
const { person } = rec as Patient
|
||||
|
||||
if (typeof person.gender_code == 'number' && person.gender_code >= 0) {
|
||||
return person.gender_code
|
||||
} else if (typeof person.gender_code === 'string' && person.gender_code) {
|
||||
return genderCodes[person.gender_code] || '-'
|
||||
}
|
||||
return '-'
|
||||
},
|
||||
education: (rec: unknown): unknown => {
|
||||
const { person } = rec as Patient
|
||||
if (typeof person.education_code == 'number' && person.education_code >= 0) {
|
||||
return person.education_code
|
||||
} else if (typeof person.education_code === 'string' && person.education_code) {
|
||||
return educationCodes[person.education_code] || '-'
|
||||
}
|
||||
return '-'
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
action(rec, idx) {
|
||||
return {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: action,
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
htmls: {
|
||||
patient_address(_rec) {
|
||||
return '-'
|
||||
},
|
||||
},
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
|
||||
import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
|
||||
import { config } from './list-cfg'
|
||||
import { config } from './list.cfg'
|
||||
|
||||
interface Props {
|
||||
data: any[]
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { config } from './list-cfg'
|
||||
import { config } from './list.cfg'
|
||||
|
||||
defineProps<{ data: any[] }>()
|
||||
const modelValue = defineModel<any | null>()
|
||||
|
||||
@@ -6,6 +6,8 @@ import Field from '~/components/pub/my-ui/form/field.vue'
|
||||
import Label from '~/components/pub/my-ui/form/label.vue'
|
||||
import { cn } from '~/lib/utils'
|
||||
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
|
||||
const props = defineProps<{
|
||||
fieldName?: string
|
||||
regencyCode?: string
|
||||
@@ -45,14 +47,14 @@ const isFieldDisabled = computed(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<Label
|
||||
<DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<DE.Label
|
||||
:label-for="fieldName"
|
||||
:is-required="isRequired"
|
||||
>
|
||||
Kecamatan
|
||||
</Label>
|
||||
<Field
|
||||
</DE.Label>
|
||||
<DE.Field
|
||||
:id="fieldName"
|
||||
:errors="errors"
|
||||
:class="cn('select-field-wrapper')"
|
||||
@@ -76,6 +78,6 @@ const isFieldDisabled = computed(() => {
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</template>
|
||||
|
||||
@@ -6,6 +6,8 @@ import Field from '~/components/pub/my-ui/form/field.vue'
|
||||
import Label from '~/components/pub/my-ui/form/label.vue'
|
||||
import { cn } from '~/lib/utils'
|
||||
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
|
||||
const props = defineProps<{
|
||||
fieldName: string
|
||||
villageCode?: string
|
||||
@@ -36,14 +38,14 @@ const isFieldDisabled = computed(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<Label
|
||||
<DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<DE.Label
|
||||
:label-for="fieldName"
|
||||
:is-required="isRequired"
|
||||
>
|
||||
Kode Pos
|
||||
</Label>
|
||||
<Field
|
||||
</DE.Label>
|
||||
<DE.Field
|
||||
:id="fieldName"
|
||||
:errors="errors"
|
||||
:class="cn('select-field-wrapper')"
|
||||
@@ -67,6 +69,6 @@ const isFieldDisabled = computed(() => {
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</template>
|
||||
|
||||
@@ -6,6 +6,8 @@ import Field from '~/components/pub/my-ui/form/field.vue'
|
||||
import Label from '~/components/pub/my-ui/form/label.vue'
|
||||
import { cn } from '~/lib/utils'
|
||||
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
|
||||
const props = defineProps<{
|
||||
fieldName?: string
|
||||
isDisabled?: boolean
|
||||
@@ -42,14 +44,14 @@ const isFieldDisabled = computed(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<Label
|
||||
<DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<DE.Label
|
||||
:label-for="fieldName"
|
||||
:is-required="isRequired"
|
||||
>
|
||||
Provinsi
|
||||
</Label>
|
||||
<Field
|
||||
</DE.Label>
|
||||
<DE.Field
|
||||
:id="fieldName"
|
||||
:errors="errors"
|
||||
:class="cn('select-field-wrapper')"
|
||||
@@ -73,6 +75,6 @@ const isFieldDisabled = computed(() => {
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</template>
|
||||
|
||||
@@ -6,6 +6,8 @@ import Field from '~/components/pub/my-ui/form/field.vue'
|
||||
import Label from '~/components/pub/my-ui/form/label.vue'
|
||||
import { cn } from '~/lib/utils'
|
||||
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
|
||||
const props = defineProps<{
|
||||
fieldName?: string
|
||||
provinceCode?: string
|
||||
@@ -45,14 +47,14 @@ const isFieldDisabled = computed(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<Label
|
||||
<DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<DE.Label
|
||||
:label-for="fieldName"
|
||||
:is-required="isRequired"
|
||||
>
|
||||
Kabupaten/Kota
|
||||
</Label>
|
||||
<Field
|
||||
</DE.Label>
|
||||
<DE.Field
|
||||
:id="fieldName"
|
||||
:errors="errors"
|
||||
:class="cn('select-field-wrapper')"
|
||||
@@ -76,6 +78,6 @@ const isFieldDisabled = computed(() => {
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</template>
|
||||
|
||||
@@ -6,6 +6,8 @@ import Field from '~/components/pub/my-ui/form/field.vue'
|
||||
import Label from '~/components/pub/my-ui/form/label.vue'
|
||||
import { cn } from '~/lib/utils'
|
||||
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
|
||||
const props = defineProps<{
|
||||
fieldName?: string
|
||||
districtCode?: string
|
||||
@@ -45,14 +47,14 @@ const isFieldDisabled = computed(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<Label
|
||||
<DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<DE.Label
|
||||
:label-for="fieldName"
|
||||
:is-required="isRequired"
|
||||
>
|
||||
Kelurahan
|
||||
</Label>
|
||||
<Field
|
||||
</DE.Label>
|
||||
<DE.Field
|
||||
:id="fieldName"
|
||||
:errors="errors"
|
||||
:class="cn('select-field-wrapper')"
|
||||
@@ -76,6 +78,6 @@ const isFieldDisabled = computed(() => {
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</template>
|
||||
|
||||
@@ -15,6 +15,8 @@ import SelectRegency from './_common/select-regency.vue'
|
||||
import SelectVillage from './_common/select-village.vue'
|
||||
import { Form } from '~/components/pub/ui/form'
|
||||
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
|
||||
const props = defineProps<{
|
||||
title: string
|
||||
conf?: {
|
||||
@@ -260,157 +262,133 @@ watch(
|
||||
<div>
|
||||
<p
|
||||
v-if="props.title"
|
||||
class="text-md mb-2 mt-1 font-semibold"
|
||||
class="text-sm 2xl:text-base mb-2 2xl:mb-3 font-semibold"
|
||||
>
|
||||
{{ props.title }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2">
|
||||
<!-- locationType_code - Hidden field with default value 'identity' -->
|
||||
<FormField
|
||||
v-slot="{ componentField }"
|
||||
name="locationType_code"
|
||||
<!-- locationType_code - Hidden field with default value 'identity' -->
|
||||
<FormField
|
||||
v-slot="{ componentField }"
|
||||
name="locationType_code"
|
||||
>
|
||||
<input
|
||||
type="hidden"
|
||||
v-bind="componentField"
|
||||
value="identity"
|
||||
/>
|
||||
</FormField>
|
||||
<DE.Block :col-count="4" :cell-flex="false">
|
||||
<DE.Cell :col-span="4">
|
||||
<DE.Label
|
||||
size="fit"
|
||||
height="compact"
|
||||
label-for="isSameAddress"
|
||||
>
|
||||
<input
|
||||
type="hidden"
|
||||
v-bind="componentField"
|
||||
value="identity"
|
||||
/>
|
||||
</FormField>
|
||||
<FieldGroup class="radio-group-field">
|
||||
<Label
|
||||
size="fit"
|
||||
height="compact"
|
||||
label-for="isSameAddress"
|
||||
>
|
||||
Apakah alamat KTP sama dengan alamat sekarang?
|
||||
</Label>
|
||||
<Field
|
||||
id="isSameAddress"
|
||||
:errors="errors"
|
||||
>
|
||||
<FormField
|
||||
v-slot="{ componentField }"
|
||||
name="isSameAddress"
|
||||
>
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<RadioGroup
|
||||
:model-value="isSameAddressString"
|
||||
@update:model-value="(value) => componentField.onChange(value)"
|
||||
class="flex flex-row flex-wrap gap-4 sm:gap-6"
|
||||
>
|
||||
<div
|
||||
v-for="(option, index) in [
|
||||
{ label: 'Ya', value: '1' },
|
||||
{ label: 'Tidak', value: '0' },
|
||||
]"
|
||||
:key="option.value"
|
||||
class="flex min-w-fit items-center space-x-2"
|
||||
>
|
||||
<RadioGroupItem
|
||||
:id="`isSameAddress-${index}`"
|
||||
:value="option.value"
|
||||
class="relative h-4 w-4 rounded-full border-2 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5"
|
||||
/>
|
||||
<RadioLabel
|
||||
:for="`isSameAddress-${index}`"
|
||||
class="cursor-pointer select-none text-xs font-medium leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm"
|
||||
>
|
||||
{{ option.label }}
|
||||
</RadioLabel>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
<FormMessage class="ml-0 mt-1" />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
<Block></Block>
|
||||
|
||||
<div class="flex-row gap-2 md:flex">
|
||||
<div class="min-w-0 flex-1">
|
||||
<SelectProvince
|
||||
field-name="province_code"
|
||||
placeholder="Pilih"
|
||||
:is-disabled="values.isSameAddress === true || values.isSameAddress === '1'"
|
||||
:is-required="values.isSameAddress !== true && values.isSameAddress !== '1'"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="min-w-0 flex-1">
|
||||
<SelectRegency
|
||||
field-name="regency_code"
|
||||
:province-code="values.province_code"
|
||||
:is-disabled="getFieldState('regency_code').disabled"
|
||||
:is-required="values.isSameAddress !== true && values.isSameAddress !== '1'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-row gap-2 md:flex">
|
||||
<div class="min-w-0 flex-1">
|
||||
<SelectDistrict
|
||||
field-name="district_code"
|
||||
:regency-code="values.regency_code"
|
||||
:is-disabled="getFieldState('district_code').disabled"
|
||||
:is-required="values.isSameAddress !== true && values.isSameAddress !== '1'"
|
||||
/>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<SelectVillage
|
||||
field-name="village_code"
|
||||
:district-code="values.district_code"
|
||||
:is-disabled="getFieldState('village_code').disabled"
|
||||
:is-required="values.isSameAddress !== true && values.isSameAddress !== '1'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<InputBase
|
||||
field-name="address"
|
||||
label="Alamat"
|
||||
:placeholder="getFieldState('address').placeholder"
|
||||
:is-disabled="getFieldState('address').disabled"
|
||||
Apakah alamat KTP sama dengan alamat sekarang?
|
||||
</DE.Label>
|
||||
<DE.Field
|
||||
id="isSameAddress"
|
||||
:errors="errors"
|
||||
:is-required="values.isSameAddress !== true && values.isSameAddress !== '1'"
|
||||
>
|
||||
<FormField
|
||||
v-slot="{ componentField }"
|
||||
name="isSameAddress"
|
||||
>
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<RadioGroup
|
||||
:model-value="isSameAddressString"
|
||||
@update:model-value="(value) => componentField.onChange(value)"
|
||||
class="flex flex-row flex-wrap gap-4 sm:gap-6"
|
||||
>
|
||||
<div
|
||||
v-for="(option, index) in [
|
||||
{ label: 'Ya', value: '1' },
|
||||
{ label: 'Tidak', value: '0' },
|
||||
]"
|
||||
:key="option.value"
|
||||
class="flex min-w-fit items-center space-x-2"
|
||||
>
|
||||
<RadioGroupItem
|
||||
:id="`isSameAddress-${index}`"
|
||||
:value="option.value"
|
||||
class="relative h-4 w-4 rounded-full border-2 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5"
|
||||
/>
|
||||
<RadioLabel
|
||||
:for="`isSameAddress-${index}`"
|
||||
class="cursor-pointer select-none text-xs font-medium leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm"
|
||||
>
|
||||
{{ option.label }}
|
||||
</RadioLabel>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
<FormMessage class="ml-0 mt-1" />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
<SelectProvince
|
||||
field-name="province_code"
|
||||
placeholder="Pilih"
|
||||
:is-disabled="values.isSameAddress === true || values.isSameAddress === '1'"
|
||||
:is-required="values.isSameAddress !== true && values.isSameAddress !== '1'"
|
||||
/>
|
||||
<SelectRegency
|
||||
field-name="regency_code"
|
||||
:province-code="values.province_code"
|
||||
:is-disabled="getFieldState('regency_code').disabled"
|
||||
:is-required="values.isSameAddress !== true && values.isSameAddress !== '1'"
|
||||
/>
|
||||
<SelectDistrict
|
||||
field-name="district_code"
|
||||
:regency-code="values.regency_code"
|
||||
:is-disabled="getFieldState('district_code').disabled"
|
||||
:is-required="values.isSameAddress !== true && values.isSameAddress !== '1'"
|
||||
/>
|
||||
<SelectVillage
|
||||
field-name="village_code"
|
||||
:district-code="values.district_code"
|
||||
:is-disabled="getFieldState('village_code').disabled"
|
||||
:is-required="values.isSameAddress !== true && values.isSameAddress !== '1'"
|
||||
/>
|
||||
<InputBase
|
||||
field-name="address"
|
||||
label="Alamat"
|
||||
:placeholder="getFieldState('address').placeholder"
|
||||
:is-disabled="getFieldState('address').disabled"
|
||||
:errors="errors"
|
||||
:is-required="values.isSameAddress !== true && values.isSameAddress !== '1'"
|
||||
:col-span="2"
|
||||
/>
|
||||
<div class="grid grid-cols-2 gap-1">
|
||||
<InputBase
|
||||
field-name="rt"
|
||||
label="RT"
|
||||
:errors="errors"
|
||||
numeric-only
|
||||
:max-length="2"
|
||||
:placeholder="getFieldState('rt').placeholder"
|
||||
:is-disabled="getFieldState('rt').disabled"
|
||||
/>
|
||||
<InputBase
|
||||
field-name="rw"
|
||||
label="RW"
|
||||
:placeholder="getFieldState('rw').placeholder"
|
||||
:is-disabled="getFieldState('rw').disabled"
|
||||
:errors="errors"
|
||||
:max-length="2"
|
||||
numeric-only
|
||||
/>
|
||||
<div class="flex-row gap-2 md:flex">
|
||||
<div class="min-w-0 flex-1">
|
||||
<InputBase
|
||||
field-name="rt"
|
||||
label="RT"
|
||||
:errors="errors"
|
||||
numeric-only
|
||||
:max-length="2"
|
||||
:placeholder="getFieldState('rt').placeholder"
|
||||
:is-disabled="getFieldState('rt').disabled"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="min-w-0 flex-1">
|
||||
<InputBase
|
||||
field-name="rw"
|
||||
label="RW"
|
||||
:placeholder="getFieldState('rw').placeholder"
|
||||
:is-disabled="getFieldState('rw').disabled"
|
||||
:errors="errors"
|
||||
:max-length="2"
|
||||
numeric-only
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="min-w-0 flex-[2]">
|
||||
<SelectPostal
|
||||
field-name="postalRegion_code"
|
||||
:village-code="values.village_code"
|
||||
:placeholder="getFieldState('postalRegion_code').placeholder"
|
||||
:is-disabled="getFieldState('postalRegion_code').disabled || !values.village_code"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<SelectPostal
|
||||
field-name="postalRegion_code"
|
||||
:village-code="values.village_code"
|
||||
:placeholder="getFieldState('postalRegion_code').placeholder"
|
||||
:is-disabled="getFieldState('postalRegion_code').disabled || !values.village_code"
|
||||
/>
|
||||
</DE.Block>
|
||||
|
||||
</Form>
|
||||
</template>
|
||||
|
||||
@@ -12,6 +12,8 @@ import SelectRegency from './_common/select-regency.vue'
|
||||
import SelectVillage from './_common/select-village.vue'
|
||||
import { Form } from '~/components/pub/ui/form'
|
||||
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
|
||||
const props = defineProps<{
|
||||
title: string
|
||||
conf?: {
|
||||
@@ -167,100 +169,77 @@ watch(
|
||||
<div>
|
||||
<p
|
||||
v-if="props.title"
|
||||
class="text-md mb-2 mt-1 font-semibold"
|
||||
class="text-sm 2xl:text-base mb-2 2xl:mb-3 font-semibold"
|
||||
>
|
||||
{{ props.title }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2">
|
||||
<!-- locationType_code - Hidden field with default value 'domicile' -->
|
||||
<FormField
|
||||
v-slot="{ componentField }"
|
||||
name="locationType_code"
|
||||
>
|
||||
<input
|
||||
type="hidden"
|
||||
v-bind="componentField"
|
||||
value="domicile"
|
||||
<FormField
|
||||
v-slot="{ componentField }"
|
||||
name="locationType_code"
|
||||
>
|
||||
<input
|
||||
type="hidden"
|
||||
v-bind="componentField"
|
||||
value="domicile"
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<DE.Block :col-count="4" :cell-flex="false">
|
||||
<SelectProvince
|
||||
field-name="province_code"
|
||||
placeholder="Pilih"
|
||||
is-required
|
||||
/>
|
||||
<SelectRegency
|
||||
field-name="regency_code"
|
||||
:province-code="values.province_code"
|
||||
is-required
|
||||
/>
|
||||
<SelectDistrict
|
||||
field-name="district_code"
|
||||
:regency-code="values.regency_code"
|
||||
is-required
|
||||
/>
|
||||
<SelectVillage
|
||||
field-name="village_code"
|
||||
:district-code="values.district_code"
|
||||
is-required
|
||||
/>
|
||||
<InputBase
|
||||
field-name="address"
|
||||
label="Alamat"
|
||||
placeholder="Masukkan alamat"
|
||||
:errors="errors"
|
||||
is-required
|
||||
:col-span="2"
|
||||
/>
|
||||
<DE.Cell class="flex-row gap-2">
|
||||
<div class="grid grid-cols-2 gap-1">
|
||||
<InputBase
|
||||
field-name="rt"
|
||||
label="RT"
|
||||
placeholder="01"
|
||||
:errors="errors"
|
||||
numeric-only
|
||||
:max-length="2"
|
||||
/>
|
||||
<InputBase
|
||||
field-name="rw"
|
||||
label="RW"
|
||||
placeholder="02"
|
||||
:errors="errors"
|
||||
:max-length="2"
|
||||
numeric-only
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<div class="flex-row gap-2 md:flex">
|
||||
<div class="min-w-0 flex-1">
|
||||
<SelectProvince
|
||||
field-name="province_code"
|
||||
placeholder="Pilih"
|
||||
is-required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="min-w-0 flex-1">
|
||||
<SelectRegency
|
||||
field-name="regency_code"
|
||||
:province-code="values.province_code"
|
||||
is-required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-row gap-2 md:flex">
|
||||
<div class="min-w-0 flex-1">
|
||||
<SelectDistrict
|
||||
field-name="district_code"
|
||||
:regency-code="values.regency_code"
|
||||
is-required
|
||||
/>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<SelectVillage
|
||||
field-name="village_code"
|
||||
:district-code="values.district_code"
|
||||
is-required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InputBase
|
||||
field-name="address"
|
||||
label="Alamat"
|
||||
placeholder="Masukkan alamat"
|
||||
:errors="errors"
|
||||
is-required
|
||||
</DE.Cell>
|
||||
<SelectPostal
|
||||
field-name="postalRegion_code"
|
||||
placeholder="Pilih kelurahan dahulu"
|
||||
:village-code="values.village_code"
|
||||
:is-disabled="!values.village_code"
|
||||
/>
|
||||
<div class="flex-row gap-2 md:flex">
|
||||
<div class="min-w-0 flex-1">
|
||||
<InputBase
|
||||
field-name="rt"
|
||||
label="RT"
|
||||
placeholder="01"
|
||||
:errors="errors"
|
||||
numeric-only
|
||||
:max-length="2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="min-w-0 flex-1">
|
||||
<InputBase
|
||||
field-name="rw"
|
||||
label="RW"
|
||||
placeholder="02"
|
||||
:errors="errors"
|
||||
:max-length="2"
|
||||
numeric-only
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="min-w-0 flex-[2]">
|
||||
<SelectPostal
|
||||
field-name="postalRegion_code"
|
||||
placeholder="Pilih kelurahan dahulu"
|
||||
:village-code="values.village_code"
|
||||
:is-disabled="!values.village_code"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DE.Block>
|
||||
</Form>
|
||||
</template>
|
||||
|
||||
@@ -39,7 +39,7 @@ defineExpose({
|
||||
<div>
|
||||
<p
|
||||
v-if="props.title"
|
||||
class="text-md mb-2 mt-1 font-semibold"
|
||||
class="text-sm 2xl:text-base mb-2 2xl:mb-3 font-semibold"
|
||||
>
|
||||
{{ props.title || 'Kontak Pasien' }}
|
||||
</p>
|
||||
|
||||
@@ -6,6 +6,8 @@ import Field from '~/components/pub/my-ui/form/field.vue'
|
||||
import Label from '~/components/pub/my-ui/form/label.vue'
|
||||
import { cn } from '~/lib/utils'
|
||||
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
|
||||
const props = defineProps<{
|
||||
fieldName?: string
|
||||
isDisabled?: boolean
|
||||
@@ -49,11 +51,11 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<Label :label-for="fieldName" :is-required="isRequired">
|
||||
<DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<DE.Label :label-for="fieldName" :is-required="isRequired">
|
||||
Tempat Lahir
|
||||
</Label>
|
||||
<Field :id="fieldName" :errors="errors" :class="cn('select-field-wrapper')">
|
||||
</DE.Label>
|
||||
<DE.Field :id="fieldName" :errors="errors" :class="cn('select-field-wrapper')">
|
||||
<FormField v-slot="{ componentField }" :name="fieldName">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
@@ -70,6 +72,6 @@ onMounted(() => {
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</template>
|
||||
|
||||
@@ -65,7 +65,7 @@ defineExpose({
|
||||
<div>
|
||||
<p
|
||||
v-if="props.title"
|
||||
class="text-md mb-2 mt-1 font-semibold"
|
||||
class="text-sm 2xl:text-base mb-2 2xl:mb-3 font-semibold"
|
||||
>
|
||||
{{ props.title }}
|
||||
</p>
|
||||
|
||||
@@ -268,21 +268,25 @@ watch(
|
||||
ref="personPatientForm"
|
||||
:schema="PatientSchema"
|
||||
/>
|
||||
<div class="h-6"></div>
|
||||
<AppPersonAddressEntryForm
|
||||
ref="personAddressForm"
|
||||
title="Alamat Sekarang"
|
||||
:schema="PersonAddressSchema"
|
||||
/>
|
||||
<div class="h-6"></div>
|
||||
<AppPersonAddressEntryFormRelative
|
||||
ref="personAddressRelativeForm"
|
||||
title="Alamat KTP"
|
||||
:schema="PersonAddressRelativeSchema"
|
||||
/>
|
||||
<div class="h-6"></div>
|
||||
<AppPersonFamilyParentsForm
|
||||
ref="personFamilyForm"
|
||||
title="Identitas Orang Tua"
|
||||
:schema="PersonFamiliesSchema"
|
||||
/>
|
||||
<div class="h-6"></div>
|
||||
<AppPersonContactEntryForm
|
||||
ref="personContactForm"
|
||||
title="Kontak Pasien"
|
||||
|
||||
Reference in New Issue
Block a user