munawwirul_jamal/simrsx-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat/patient-63: cleaning and resolve conflict

Browse Source
This commit is contained in:
Munawwirul Jamal
2025-10-18 06:47:17 +07:00
parent 0c24befd29
commit 708d5d6975
32 changed files with 951 additions and 818 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/app/encounter/entry-form.vue
+239 -241
View File
@@ -108,248 +108,246 @@ function onAddSep() {
:initial-values="initialValues" :initial-values="initialValues"
> >
<form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))"> <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="flex flex-col justify-between"> <div class="mb-2 2xl:mb-3 text-sm 2xl:text-base font-semibold">
<div class="p-2"> Data Pasien
<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> </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> </div>
</form> </form>
</Form> </Form>
app/components/app/patient/_common/input-name.vue
+9 -9
View File
@@ -1,11 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import type { FormErrors } from '~/types/error' import type { FormErrors } from '~/types/error'
import FieldGroup from '~/components/pub/my-ui/form/field-group.vue' import Select from '~/components/pub/my-ui/form/select.vue'
import Field from '~/components/pub/my-ui/form/field.vue'
import Label from '~/components/pub/my-ui/form/label.vue'
import { Input } from '~/components/pub/ui/input' import { Input } from '~/components/pub/ui/input'
import { cn } from '~/lib/utils' import { cn } from '~/lib/utils'
import * as DE from '~/components/pub/my-ui/doc-entry'
defineProps<{ defineProps<{
fieldNameInput: string fieldNameInput: string
placeholder: string placeholder: string
@@ -21,15 +21,15 @@ defineProps<{
</script> </script>
<template> <template>
<FieldGroup> <DE.Cell :col-span="2">
<Label <DE.Label
:label-for="fieldNameInput" :label-for="fieldNameInput"
:is-required="isRequired" :is-required="isRequired"
> >
{{ labelForInput }} {{ labelForInput }}
</Label> </DE.Label>
<Field <DE.Field
:id="fieldNameInput" :id="fieldNameInput"
:errors="errors" :errors="errors"
> >
@@ -49,6 +49,6 @@ defineProps<{
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
</FormField> </FormField>
</Field> </DE.Field>
</FieldGroup> </DE.Cell>
</template> </template>
app/components/app/patient/_common/radio-communication-barrier.vue
+12 -9
View File
@@ -7,6 +7,8 @@ import { Label as RadioLabel } from '~/components/pub/ui/label'
import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group' import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
import { cn } from '~/lib/utils' import { cn } from '~/lib/utils'
import * as DE from '~/components/pub/my-ui/doc-entry'
const props = defineProps<{ const props = defineProps<{
fieldName?: string fieldName?: string
label?: string label?: string
@@ -35,18 +37,19 @@ const genderOptions = [
</script> </script>
<template> <template>
<FieldGroup :class="cn('radio-group-field', containerClass)"> <DE.Cell :class="cn('radio-group-field', containerClass)">
<Label <DE.Label
:label-for="fieldName" :label-for="fieldName"
:is-required="isRequired" :is-required="isRequired"
height="compact" height="compact"
> >
{{ label }} {{ label }}
</Label> </DE.Label>
<Field <DE.Field
:id="fieldName" :id="fieldName"
:errors="errors" :errors="errors"
> class="pt-0.5"
>
<FormField <FormField
v-slot="{ componentField }" v-slot="{ componentField }"
:name="fieldName" :name="fieldName"
@@ -67,7 +70,7 @@ const genderOptions = [
:value="option.value" :value="option.value"
:class=" :class="
cn( 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, containerClass,
) )
" "
@@ -76,7 +79,7 @@ const genderOptions = [
:for="`${fieldName}-${index}`" :for="`${fieldName}-${index}`"
:class=" :class="
cn( 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, labelClass,
) )
" "
@@ -89,6 +92,6 @@ const genderOptions = [
<FormMessage class="ml-0 mt-1" /> <FormMessage class="ml-0 mt-1" />
</FormItem> </FormItem>
</FormField> </FormField>
</Field> </DE.Field>
</FieldGroup> </DE.Cell>
</template> </template>
app/components/app/patient/_common/radio-disability.vue
+11 -8
View File
@@ -7,6 +7,8 @@ import { Label as RadioLabel } from '~/components/pub/ui/label'
import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group' import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
import { cn } from '~/lib/utils' import { cn } from '~/lib/utils'
import * as DE from '~/components/pub/my-ui/doc-entry'
const props = defineProps<{ const props = defineProps<{
fieldName?: string fieldName?: string
label?: string label?: string
@@ -35,17 +37,18 @@ const dissabilityOptions = [
</script> </script>
<template> <template>
<FieldGroup :class="cn('radio-group-field', containerClass)"> <DE.Cell :class="cn('radio-group-field', containerClass)">
<Label <DE.Label
:label-for="fieldName" :label-for="fieldName"
:is-required="isRequired" :is-required="isRequired"
height="compact" height="compact"
> >
{{ label }} {{ label }}
</Label> </DE.Label>
<Field <DE.Field
:id="fieldName" :id="fieldName"
:errors="errors" :errors="errors"
class="pt-0.5"
> >
<FormField <FormField
v-slot="{ componentField }" v-slot="{ componentField }"
@@ -67,7 +70,7 @@ const dissabilityOptions = [
:value="option.value" :value="option.value"
:class=" :class="
cn( 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, containerClass,
) )
" "
@@ -76,7 +79,7 @@ const dissabilityOptions = [
:for="`${fieldName}-${index}`" :for="`${fieldName}-${index}`"
:class=" :class="
cn( 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, labelClass,
) )
" "
@@ -89,6 +92,6 @@ const dissabilityOptions = [
<FormMessage class="ml-0 mt-1" /> <FormMessage class="ml-0 mt-1" />
</FormItem> </FormItem>
</FormField> </FormField>
</Field> </DE.Field>
</FieldGroup> </DE.Cell>
</template> </template>
app/components/app/patient/_common/radio-gender.vue
+10 -8
View File
@@ -8,6 +8,8 @@ import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
import { genderCodes } from '~/lib/constants' import { genderCodes } from '~/lib/constants'
import { cn, mapToComboboxOptList } from '~/lib/utils' import { cn, mapToComboboxOptList } from '~/lib/utils'
import * as DE from '~/components/pub/my-ui/doc-entry'
const props = defineProps<{ const props = defineProps<{
fieldName?: string fieldName?: string
label?: string label?: string
@@ -33,15 +35,15 @@ const genderOptions = mapToComboboxOptList(genderCodes)
</script> </script>
<template> <template>
<FieldGroup :class="cn('radio-group-field', containerClass)"> <DE.Cell :class="cn('radio-group-field', containerClass)" :col-span="4">
<Label <DE.Label
:label-for="fieldName" :label-for="fieldName"
:is-required="isRequired" :is-required="isRequired"
height="compact" height="compact"
> >
{{ label }} {{ label }}
</Label> </DE.Label>
<Field <DE.Field
:id="fieldName" :id="fieldName"
:errors="errors" :errors="errors"
> >
@@ -65,7 +67,7 @@ const genderOptions = mapToComboboxOptList(genderCodes)
:value="option.value" :value="option.value"
:class=" :class="
cn( 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, containerClass,
) )
" "
@@ -74,7 +76,7 @@ const genderOptions = mapToComboboxOptList(genderCodes)
:for="`${fieldName}-${index}`" :for="`${fieldName}-${index}`"
:class=" :class="
cn( 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, labelClass,
) )
" "
@@ -87,6 +89,6 @@ const genderOptions = mapToComboboxOptList(genderCodes)
<FormMessage class="ml-0 mt-1" /> <FormMessage class="ml-0 mt-1" />
</FormItem> </FormItem>
</FormField> </FormField>
</Field> </DE.Field>
</FieldGroup> </DE.Cell>
</template> </template>
app/components/app/patient/_common/radio-nationality.vue
+11 -8
View File
@@ -7,6 +7,8 @@ import { Label as RadioLabel } from '~/components/pub/ui/label'
import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group' import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
import { cn } from '~/lib/utils' import { cn } from '~/lib/utils'
import * as DE from '~/components/pub/my-ui/doc-entry'
const props = defineProps<{ const props = defineProps<{
fieldName?: string fieldName?: string
label?: string label?: string
@@ -35,17 +37,18 @@ const nationalityOptions = [
</script> </script>
<template> <template>
<FieldGroup :class="cn('radio-group-field', containerClass)"> <DE.Cell :class="cn('radio-group-field', containerClass)">
<Label <DE.Label
:label-for="fieldName" :label-for="fieldName"
:is-required="isRequired" :is-required="isRequired"
height="compact" height="compact"
> >
{{ label }} {{ label }}
</Label> </DE.Label>
<Field <DE.Field
:id="fieldName" :id="fieldName"
:errors="errors" :errors="errors"
class="pt-0.5"
> >
<FormField <FormField
v-slot="{ componentField }" v-slot="{ componentField }"
@@ -67,7 +70,7 @@ const nationalityOptions = [
:value="option.value" :value="option.value"
:class=" :class="
cn( 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, containerClass,
) )
" "
@@ -76,7 +79,7 @@ const nationalityOptions = [
:for="`${fieldName}-${index}`" :for="`${fieldName}-${index}`"
:class=" :class="
cn( 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, labelClass,
) )
" "
@@ -89,6 +92,6 @@ const nationalityOptions = [
<FormMessage class="ml-0 mt-1" /> <FormMessage class="ml-0 mt-1" />
</FormItem> </FormItem>
</FormField> </FormField>
</Field> </DE.Field>
</FieldGroup> </DE.Cell>
</template> </template>
app/components/app/patient/_common/radio-newborn.vue
+11 -9
View File
@@ -7,6 +7,8 @@ import { Label as RadioLabel } from '~/components/pub/ui/label'
import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group' import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
import { cn } from '~/lib/utils' import { cn } from '~/lib/utils'
import * as DE from '~/components/pub/my-ui/doc-entry'
const props = defineProps<{ const props = defineProps<{
fieldName?: string fieldName?: string
label?: string label?: string
@@ -35,14 +37,14 @@ const newbornOptions = [
</script> </script>
<template> <template>
<FieldGroup :class="cn('radio-group-field', containerClass)"> <DE.Cell :class="cn('radio-group-field', containerClass)" :col-span="2">
<Label <DE.Label
:label-for="fieldName" :label-for="fieldName"
:is-required="isRequired" :is-required="isRequired"
> >
{{ label }} {{ label }}
</Label> </DE.Label>
<Field <DE.Field
:id="fieldName" :id="fieldName"
:errors="errors" :errors="errors"
> >
@@ -59,14 +61,14 @@ const newbornOptions = [
<div <div
v-for="(option, index) in newbornOptions" v-for="(option, index) in newbornOptions"
:key="option.value" :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 <RadioGroupItem
:id="`${fieldName}-${index}`" :id="`${fieldName}-${index}`"
:value="option.value" :value="option.value"
:class=" :class="
cn( 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, containerClass,
) )
" "
@@ -75,7 +77,7 @@ const newbornOptions = [
:for="`${fieldName}-${index}`" :for="`${fieldName}-${index}`"
:class=" :class="
cn( 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, labelClass,
) )
" "
@@ -88,6 +90,6 @@ const newbornOptions = [
<FormMessage class="ml-0 mt-1" /> <FormMessage class="ml-0 mt-1" />
</FormItem> </FormItem>
</FormField> </FormField>
</Field> </DE.Field>
</FieldGroup> </DE.Cell>
</template> </template>
app/components/app/patient/_common/select-disability.vue
+8 -6
View File
@@ -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 Select from '~/components/pub/my-ui/form/select.vue'
import { cn } from '~/lib/utils' import { cn } from '~/lib/utils'
import * as DE from '~/components/pub/my-ui/doc-entry'
const props = defineProps<{ const props = defineProps<{
fieldName?: string fieldName?: string
label?: string label?: string
@@ -40,14 +42,14 @@ const disabilityOptions = [
</script> </script>
<template> <template>
<FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)"> <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
<Label <DE.Label
label-for="fieldName" label-for="fieldName"
:is-required="isRequired" :is-required="isRequired"
> >
{{ label }} {{ label }}
</Label> </DE.Label>
<Field <DE.Field
:id="fieldName" :id="fieldName"
:errors="errors" :errors="errors"
:class="cn('select-field-wrapper')" :class="cn('select-field-wrapper')"
@@ -76,6 +78,6 @@ const disabilityOptions = [
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
</FormField> </FormField>
</Field> </DE.Field>
</FieldGroup> </DE.Cell>
</template> </template>
app/components/app/patient/_common/select-dob.vue
+13 -12
View File
@@ -7,6 +7,8 @@ import Label from '~/components/pub/my-ui/form/label.vue'
import { Input } from '~/components/pub/ui/input' import { Input } from '~/components/pub/ui/input'
import { cn } from '~/lib/utils' import { cn } from '~/lib/utils'
import * as DE from '~/components/pub/my-ui/doc-entry'
const props = defineProps<{ const props = defineProps<{
fieldName?: string fieldName?: string
label?: string label?: string
@@ -76,15 +78,15 @@ function calculateAge(birthDate: string | Date | undefined): string {
</script> </script>
<template> <template>
<FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)"> <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
<Label <DE.Label
:label-for="fieldName" :label-for="fieldName"
:class="cn('select-field-label', labelClass)" :class="cn('select-field-label', labelClass)"
:is-required="isRequired" :is-required="isRequired"
> >
{{ label }} {{ label }}
</Label> </DE.Label>
<Field <DE.Field
:id="fieldName" :id="fieldName"
:errors="errors" :errors="errors"
:class="cn('select-field-wrapper')" :class="cn('select-field-wrapper')"
@@ -113,12 +115,11 @@ function calculateAge(birthDate: string | Date | undefined): string {
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
</FormField> </FormField>
</Field> </DE.Field>
</FieldGroup> </DE.Cell>
<FieldGroup> <DE.Cell>
<Label label-for="patientAge">Usia</Label> <DE.Label label-for="patientAge">Usia</DE.Label>
<DE.Field id="patientAge">
<Field id="patientAge">
<FormField name="patientAge"> <FormField name="patientAge">
<FormItem> <FormItem>
<FormControl> <FormControl>
@@ -137,6 +138,6 @@ function calculateAge(birthDate: string | Date | undefined): string {
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
</FormField> </FormField>
</Field> </DE.Field>
</FieldGroup> </DE.Cell>
</template> </template>
app/components/app/patient/_common/select-education.vue
+8 -6
View File
@@ -7,6 +7,8 @@ import Select from '~/components/pub/my-ui/form/select.vue'
import { educationCodes } from '~/lib/constants' import { educationCodes } from '~/lib/constants'
import { cn, mapToComboboxOptList } from '~/lib/utils' import { cn, mapToComboboxOptList } from '~/lib/utils'
import * as DE from '~/components/pub/my-ui/doc-entry'
const props = defineProps<{ const props = defineProps<{
fieldName?: string fieldName?: string
label?: string label?: string
@@ -46,15 +48,15 @@ const educationOptions = [
</script> </script>
<template> <template>
<FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)"> <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
<Label <DE.Label
:label-for="fieldName" :label-for="fieldName"
:class="cn('select-field-label', labelClass)" :class="cn('select-field-label', labelClass)"
:is-required="isRequired && !isDisabled" :is-required="isRequired && !isDisabled"
> >
{{ label }} {{ label }}
</Label> </DE.Label>
<Field <DE.Field
:id="fieldName" :id="fieldName"
:errors="errors" :errors="errors"
:class="cn('select-field-wrapper')" :class="cn('select-field-wrapper')"
@@ -83,6 +85,6 @@ const educationOptions = [
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
</FormField> </FormField>
</Field> </DE.Field>
</FieldGroup> </DE.Cell>
</template> </template>
app/components/app/patient/_common/select-ethnicity.vue
+8 -6
View File
@@ -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 Label from '~/components/pub/my-ui/form/label.vue'
import { cn } from '~/lib/utils' import { cn } from '~/lib/utils'
import * as DE from '~/components/pub/my-ui/doc-entry'
const props = defineProps<{ const props = defineProps<{
fieldName?: string fieldName?: string
label?: string label?: string
@@ -49,15 +51,15 @@ const ethnicOptions = [
</script> </script>
<template> <template>
<FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)"> <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
<Label <DE.Label
:label-for="fieldName" :label-for="fieldName"
:class="cn('select-field-label', labelClass)" :class="cn('select-field-label', labelClass)"
:is-required="isRequired && !isDisabled" :is-required="isRequired && !isDisabled"
> >
{{ label }} {{ label }}
</Label> </DE.Label>
<Field <DE.Field
:id="fieldName" :id="fieldName"
:errors="errors" :errors="errors"
:class="cn('select-field-wrapper')" :class="cn('select-field-wrapper')"
@@ -81,6 +83,6 @@ const ethnicOptions = [
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
</FormField> </FormField>
</Field> </DE.Field>
</FieldGroup> </DE.Cell>
</template> </template>
app/components/app/patient/_common/select-gender.vue
+79
View File
@@ -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>
app/components/app/patient/_common/select-job.vue
+8 -6
View File
@@ -7,6 +7,8 @@ import Label from '~/components/pub/my-ui/form/label.vue'
import { cn, mapToComboboxOptList } from '~/lib/utils' import { cn, mapToComboboxOptList } from '~/lib/utils'
import { occupationCodes } from '~/lib/constants' import { occupationCodes } from '~/lib/constants'
import * as DE from '~/components/pub/my-ui/doc-entry'
const props = defineProps<{ const props = defineProps<{
fieldName?: string fieldName?: string
label?: string label?: string
@@ -34,15 +36,15 @@ const jobOptions = mapToComboboxOptList(occupationCodes)
</script> </script>
<template> <template>
<FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)"> <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
<Label <DE.Label
:label-for="fieldName" :label-for="fieldName"
:class="cn('select-field-label', labelClass)" :class="cn('select-field-label', labelClass)"
:is-required="isRequired" :is-required="isRequired"
> >
{{ label }} {{ label }}
</Label> </DE.Label>
<Field <DE.Field
:id="fieldName" :id="fieldName"
:errors="errors" :errors="errors"
:class="cn('select-field-wrapper')" :class="cn('select-field-wrapper')"
@@ -65,6 +67,6 @@ const jobOptions = mapToComboboxOptList(occupationCodes)
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
</FormField> </FormField>
</Field> </DE.Field>
</FieldGroup> </DE.Cell>
</template> </template>
app/components/app/patient/_common/select-lang.vue
+8 -6
View File
@@ -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 Select from '~/components/pub/my-ui/form/select.vue'
import { cn } from '~/lib/utils' import { cn } from '~/lib/utils'
import * as DE from '~/components/pub/my-ui/doc-entry'
const props = defineProps<{ const props = defineProps<{
fieldName?: string fieldName?: string
label?: string label?: string
@@ -41,15 +43,15 @@ const langOptions = [
</script> </script>
<template> <template>
<FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)"> <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
<Label <DE.Label
:label-for="fieldName" :label-for="fieldName"
:class="cn('select-field-label', labelClass)" :class="cn('select-field-label', labelClass)"
:is-required="isRequired" :is-required="isRequired"
> >
{{ label }} {{ label }}
</Label> </DE.Label>
<Field <DE.Field
:id="fieldName" :id="fieldName"
:errors="errors" :errors="errors"
:class="cn('select-field-wrapper')" :class="cn('select-field-wrapper')"
@@ -77,6 +79,6 @@ const langOptions = [
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
</FormField> </FormField>
</Field> </DE.Field>
</FieldGroup> </DE.Cell>
</template> </template>
app/components/app/patient/_common/select-marital-status.vue
+8 -6
View File
@@ -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 Select from '~/components/pub/my-ui/form/select.vue'
import { cn } from '~/lib/utils' import { cn } from '~/lib/utils'
import * as DE from '~/components/pub/my-ui/doc-entry'
const props = defineProps<{ const props = defineProps<{
fieldName?: string fieldName?: string
label?: string label?: string
@@ -37,15 +39,15 @@ const maritalStatusOptions = [
</script> </script>
<template> <template>
<FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)"> <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
<Label <DE.Label
:label-for="fieldName" :label-for="fieldName"
:class="cn('select-field-label', labelClass)" :class="cn('select-field-label', labelClass)"
:is-required="isRequired" :is-required="isRequired"
> >
{{ label }} {{ label }}
</Label> </DE.Label>
<Field <DE.Field
:id="fieldName" :id="fieldName"
:errors="errors" :errors="errors"
:class="cn('select-field-wrapper')" :class="cn('select-field-wrapper')"
@@ -73,6 +75,6 @@ const maritalStatusOptions = [
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
</FormField> </FormField>
</Field> </DE.Field>
</FieldGroup> </DE.Cell>
</template> </template>
app/components/app/patient/_common/select-religion.vue
+8 -6
View File
@@ -7,6 +7,8 @@ import Select from '~/components/pub/my-ui/form/select.vue'
import { religionCodes } from '~/lib/constants' import { religionCodes } from '~/lib/constants'
import { cn, mapToComboboxOptList } from '~/lib/utils' import { cn, mapToComboboxOptList } from '~/lib/utils'
import * as DE from '~/components/pub/my-ui/doc-entry'
const props = defineProps<{ const props = defineProps<{
fieldName?: string fieldName?: string
label?: string label?: string
@@ -45,15 +47,15 @@ const religionOptions = [
</script> </script>
<template> <template>
<FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)"> <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
<Label <DE.Label
:label-for="fieldName" :label-for="fieldName"
:class="cn('select-field-label', labelClass)" :class="cn('select-field-label', labelClass)"
:is-required="isRequired" :is-required="isRequired"
> >
{{ label }} {{ label }}
</Label> </DE.Label>
<Field <DE.Field
:id="fieldName" :id="fieldName"
:errors="errors" :errors="errors"
:class="cn('select-field-wrapper')" :class="cn('select-field-wrapper')"
@@ -81,6 +83,6 @@ const religionOptions = [
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
</FormField> </FormField>
</Field> </DE.Field>
</FieldGroup> </DE.Cell>
</template> </template>
app/components/app/patient/entry-form.vue
+158 -199
View File
@@ -7,7 +7,7 @@ import FileUpload from '~/components/pub/my-ui/form/file-field.vue'
import InputName from './_common/input-name.vue' import InputName from './_common/input-name.vue'
import RadioCommunicationBarrier from './_common/radio-communication-barrier.vue' import RadioCommunicationBarrier from './_common/radio-communication-barrier.vue'
import RadioDisability from './_common/radio-disability.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 RadioNationality from './_common/radio-nationality.vue'
import RadioNewborn from './_common/radio-newborn.vue' import RadioNewborn from './_common/radio-newborn.vue'
import SelectBirthPlace from '~/components/app/person/_common/select-birth-place.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 SelectLanguage from './_common/select-lang.vue'
import SelectMaritalStatus from './_common/select-marital-status.vue' import SelectMaritalStatus from './_common/select-marital-status.vue'
import SelectReligion from './_common/select-religion.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<{ const props = defineProps<{
schema: any schema: any
@@ -48,205 +51,161 @@ defineExpose({
validation-mode="onSubmit" validation-mode="onSubmit"
:initial-values="initialValues ? initialValues : {}" :initial-values="initialValues ? initialValues : {}"
> >
<div class="mb-3 border-b border-b-slate-300"> <p class="text-sm 2xl:text-base mb-2 2xl:mb-3 font-semibold">Data Diri Pasien</p>
<p class="text-md mt-1 font-semibold">Data Diri Pasien</p> <DE.Block :col-count="4" :cell-flex="false">
<div class="grid grid-cols-1 md:grid-cols-[1fr_1fr]"> <InputBase
<InputName field-name="identityNumber"
field-name-input="fullName" label="No. KTP"
label-for-input="Nama Lengkap" placeholder="Masukkan NIK"
placeholder="Masukkan nama lengkap pasien" :errors="errors"
:errors="errors" numeric-only
is-required />
/> <InputBase
<RadioNewborn field-name="drivingLicenseNumber"
field-name="isNewBorn" label="No. SIM"
label="Pasien Bayi" placeholder="Masukkan nomor SIM"
placeholder="Pilih status pasien" numeric-only
:errors="errors" :max-length="20"
is-required :errors="errors"
/> />
</div> <InputBase
<div class="grid grid-cols-1 md:grid-cols-3"> field-name="passportNumber"
<!-- <InputBase label="No. Paspor"
field-name="birthPlace" placeholder="Masukkan nomor paspor"
label="Tempat Lahir" :max-length="20"
placeholder="Malang" :errors="errors"
:errors="errors" />
is-required <InputName
/> --> field-name-alias="alias"
<SelectBirthPlace field-name-input="fullName"
field-name="birthPlace" label-for-input="Nama Lengkap"
label="Tempat Lahir" placeholder="Masukkan nama lengkap pasien"
placeholder="Pilih tempat lahir" :errors="errors"
:errors="errors" is-required
is-required />
/> <RadioNewborn
<SelectDob field-name="isNewBorn"
label="Tanggal Lahir" label="Pasien Bayi"
:errors="errors" placeholder="Pilih status pasien"
is-required :errors="errors"
/> is-required
</div> />
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3"> <SelectGender
<RadioGender field-name="gender"
field-name="gender" label="Jenis Kelamin"
label="Jenis Kelamin" placeholder="Pilih jenis kelamin"
placeholder="Pilih jenis kelamin" :errors="errors"
:errors="errors" is-required
is-required />
/> <SelectBirthPlace
<RadioNationality field-name="birthPlace"
field-name="nationality" label="Tempat Lahir"
label="Kebangsaan" placeholder="Pilih tempat lahir"
placeholder="Pilih kebangsaan" :errors="errors"
:errors="errors" is-required
is-required />
/> <SelectDob
</div> label="Tanggal Lahir"
</div> :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"> <div class="h-6"></div>
<p class="text-md mt-1 font-semibold">Dokumen Identitas</p>
<div class="grid grid-cols-1 md:grid-cols-3"> <p class="text-sm 2xl:text-base mb-2 2xl:mb-3 font-semibold">Dokumen Identitas</p>
<!-- <InputBase <DE.Block :col-count="2" :cell-flex="false">
field-name="identityNumber" <FileUpload
label="No. KTP" field-name="identityCardFile"
placeholder="Masukkan NIK" label="Dokumen KTP"
:errors="errors" placeholder="Unggah scan dokumen KTP"
numeric-only :errors="errors"
:max-length="16" :accept="['pdf', 'jpg', 'png']"
is-required :max-size-mb="1"
/> --> />
<InputBase <FileUpload
field-name="identityNumber" field-name="familyCardFile"
label="No. KTP" label="Dokumen KK"
placeholder="Masukkan NIK" placeholder="Unggah scan dokumen KK"
:errors="errors" :errors="errors"
numeric-only :accept="['pdf', 'jpg', 'png']"
/> :max-size-mb="1"
<InputBase />
field-name="drivingLicenseNumber" </DE.Block>
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>
</Form> </Form>
</template> </template>
app/components/app/patient/list.cfg.ts
+96
View File
@@ -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 '-'
},
},
}
app/components/app/patient/list.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type' import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue' import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
import { config } from './list-cfg' import { config } from './list.cfg'
interface Props { interface Props {
data: any[] data: any[]
app/components/app/patient/picker.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { config } from './list-cfg' import { config } from './list.cfg'
defineProps<{ data: any[] }>() defineProps<{ data: any[] }>()
const modelValue = defineModel<any | null>() const modelValue = defineModel<any | null>()
app/components/app/person-address/_common/select-district.vue
+8 -6
View File
@@ -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 Label from '~/components/pub/my-ui/form/label.vue'
import { cn } from '~/lib/utils' import { cn } from '~/lib/utils'
import * as DE from '~/components/pub/my-ui/doc-entry'
const props = defineProps<{ const props = defineProps<{
fieldName?: string fieldName?: string
regencyCode?: string regencyCode?: string
@@ -45,14 +47,14 @@ const isFieldDisabled = computed(() => {
</script> </script>
<template> <template>
<FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)"> <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
<Label <DE.Label
:label-for="fieldName" :label-for="fieldName"
:is-required="isRequired" :is-required="isRequired"
> >
Kecamatan Kecamatan
</Label> </DE.Label>
<Field <DE.Field
:id="fieldName" :id="fieldName"
:errors="errors" :errors="errors"
:class="cn('select-field-wrapper')" :class="cn('select-field-wrapper')"
@@ -76,6 +78,6 @@ const isFieldDisabled = computed(() => {
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
</FormField> </FormField>
</Field> </DE.Field>
</FieldGroup> </DE.Cell>
</template> </template>
app/components/app/person-address/_common/select-postal.vue
+8 -6
View File
@@ -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 Label from '~/components/pub/my-ui/form/label.vue'
import { cn } from '~/lib/utils' import { cn } from '~/lib/utils'
import * as DE from '~/components/pub/my-ui/doc-entry'
const props = defineProps<{ const props = defineProps<{
fieldName: string fieldName: string
villageCode?: string villageCode?: string
@@ -36,14 +38,14 @@ const isFieldDisabled = computed(() => {
</script> </script>
<template> <template>
<FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)"> <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
<Label <DE.Label
:label-for="fieldName" :label-for="fieldName"
:is-required="isRequired" :is-required="isRequired"
> >
Kode Pos Kode Pos
</Label> </DE.Label>
<Field <DE.Field
:id="fieldName" :id="fieldName"
:errors="errors" :errors="errors"
:class="cn('select-field-wrapper')" :class="cn('select-field-wrapper')"
@@ -67,6 +69,6 @@ const isFieldDisabled = computed(() => {
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
</FormField> </FormField>
</Field> </DE.Field>
</FieldGroup> </DE.Cell>
</template> </template>
app/components/app/person-address/_common/select-province.vue
+8 -6
View File
@@ -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 Label from '~/components/pub/my-ui/form/label.vue'
import { cn } from '~/lib/utils' import { cn } from '~/lib/utils'
import * as DE from '~/components/pub/my-ui/doc-entry'
const props = defineProps<{ const props = defineProps<{
fieldName?: string fieldName?: string
isDisabled?: boolean isDisabled?: boolean
@@ -42,14 +44,14 @@ const isFieldDisabled = computed(() => {
</script> </script>
<template> <template>
<FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)"> <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
<Label <DE.Label
:label-for="fieldName" :label-for="fieldName"
:is-required="isRequired" :is-required="isRequired"
> >
Provinsi Provinsi
</Label> </DE.Label>
<Field <DE.Field
:id="fieldName" :id="fieldName"
:errors="errors" :errors="errors"
:class="cn('select-field-wrapper')" :class="cn('select-field-wrapper')"
@@ -73,6 +75,6 @@ const isFieldDisabled = computed(() => {
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
</FormField> </FormField>
</Field> </DE.Field>
</FieldGroup> </DE.Cell>
</template> </template>
app/components/app/person-address/_common/select-regency.vue
+8 -6
View File
@@ -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 Label from '~/components/pub/my-ui/form/label.vue'
import { cn } from '~/lib/utils' import { cn } from '~/lib/utils'
import * as DE from '~/components/pub/my-ui/doc-entry'
const props = defineProps<{ const props = defineProps<{
fieldName?: string fieldName?: string
provinceCode?: string provinceCode?: string
@@ -45,14 +47,14 @@ const isFieldDisabled = computed(() => {
</script> </script>
<template> <template>
<FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)"> <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
<Label <DE.Label
:label-for="fieldName" :label-for="fieldName"
:is-required="isRequired" :is-required="isRequired"
> >
Kabupaten/Kota Kabupaten/Kota
</Label> </DE.Label>
<Field <DE.Field
:id="fieldName" :id="fieldName"
:errors="errors" :errors="errors"
:class="cn('select-field-wrapper')" :class="cn('select-field-wrapper')"
@@ -76,6 +78,6 @@ const isFieldDisabled = computed(() => {
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
</FormField> </FormField>
</Field> </DE.Field>
</FieldGroup> </DE.Cell>
</template> </template>
app/components/app/person-address/_common/select-village.vue
+8 -6
View File
@@ -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 Label from '~/components/pub/my-ui/form/label.vue'
import { cn } from '~/lib/utils' import { cn } from '~/lib/utils'
import * as DE from '~/components/pub/my-ui/doc-entry'
const props = defineProps<{ const props = defineProps<{
fieldName?: string fieldName?: string
districtCode?: string districtCode?: string
@@ -45,14 +47,14 @@ const isFieldDisabled = computed(() => {
</script> </script>
<template> <template>
<FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)"> <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
<Label <DE.Label
:label-for="fieldName" :label-for="fieldName"
:is-required="isRequired" :is-required="isRequired"
> >
Kelurahan Kelurahan
</Label> </DE.Label>
<Field <DE.Field
:id="fieldName" :id="fieldName"
:errors="errors" :errors="errors"
:class="cn('select-field-wrapper')" :class="cn('select-field-wrapper')"
@@ -76,6 +78,6 @@ const isFieldDisabled = computed(() => {
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
</FormField> </FormField>
</Field> </DE.Field>
</FieldGroup> </DE.Cell>
</template> </template>
app/components/app/person-address/entry-form-relative.vue
+122 -144
View File
@@ -15,6 +15,8 @@ import SelectRegency from './_common/select-regency.vue'
import SelectVillage from './_common/select-village.vue' import SelectVillage from './_common/select-village.vue'
import { Form } from '~/components/pub/ui/form' import { Form } from '~/components/pub/ui/form'
import * as DE from '~/components/pub/my-ui/doc-entry'
const props = defineProps<{ const props = defineProps<{
title: string title: string
conf?: { conf?: {
@@ -260,157 +262,133 @@ watch(
<div> <div>
<p <p
v-if="props.title" 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 }} {{ props.title }}
</p> </p>
</div> </div>
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl"> <!-- locationType_code - Hidden field with default value 'identity' -->
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2"> <FormField
<!-- locationType_code - Hidden field with default value 'identity' --> v-slot="{ componentField }"
<FormField name="locationType_code"
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 Apakah alamat KTP sama dengan alamat sekarang?
type="hidden" </DE.Label>
v-bind="componentField" <DE.Field
value="identity" id="isSameAddress"
/>
</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"
:errors="errors" :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>
</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> </Form>
</template> </template>
app/components/app/person-address/entry-form.vue
+67 -88
View File
@@ -12,6 +12,8 @@ import SelectRegency from './_common/select-regency.vue'
import SelectVillage from './_common/select-village.vue' import SelectVillage from './_common/select-village.vue'
import { Form } from '~/components/pub/ui/form' import { Form } from '~/components/pub/ui/form'
import * as DE from '~/components/pub/my-ui/doc-entry'
const props = defineProps<{ const props = defineProps<{
title: string title: string
conf?: { conf?: {
@@ -167,100 +169,77 @@ watch(
<div> <div>
<p <p
v-if="props.title" 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 }} {{ props.title }}
</p> </p>
</div> </div>
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl"> <FormField
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2"> v-slot="{ componentField }"
<!-- locationType_code - Hidden field with default value 'domicile' --> name="locationType_code"
<FormField >
v-slot="{ componentField }" <input
name="locationType_code" type="hidden"
> v-bind="componentField"
<input value="domicile"
type="hidden" />
v-bind="componentField" </FormField>
value="domicile"
<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>
</DE.Cell>
<div class="flex-row gap-2 md:flex"> <SelectPostal
<div class="min-w-0 flex-1"> field-name="postalRegion_code"
<SelectDistrict placeholder="Pilih kelurahan dahulu"
field-name="district_code" :village-code="values.village_code"
:regency-code="values.regency_code" :is-disabled="!values.village_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
/> />
<div class="flex-row gap-2 md:flex"> </DE.Block>
<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>
</Form> </Form>
</template> </template>
app/components/app/person-contact/entry-form.vue
+1 -1
View File
@@ -39,7 +39,7 @@ defineExpose({
<div> <div>
<p <p
v-if="props.title" 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' }} {{ props.title || 'Kontak Pasien' }}
</p> </p>
app/components/app/person/_common/select-birth-place.vue
+8 -6
View File
@@ -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 Label from '~/components/pub/my-ui/form/label.vue'
import { cn } from '~/lib/utils' import { cn } from '~/lib/utils'
import * as DE from '~/components/pub/my-ui/doc-entry'
const props = defineProps<{ const props = defineProps<{
fieldName?: string fieldName?: string
isDisabled?: boolean isDisabled?: boolean
@@ -49,11 +51,11 @@ onMounted(() => {
</script> </script>
<template> <template>
<FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)"> <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
<Label :label-for="fieldName" :is-required="isRequired"> <DE.Label :label-for="fieldName" :is-required="isRequired">
Tempat Lahir Tempat Lahir
</Label> </DE.Label>
<Field :id="fieldName" :errors="errors" :class="cn('select-field-wrapper')"> <DE.Field :id="fieldName" :errors="errors" :class="cn('select-field-wrapper')">
<FormField v-slot="{ componentField }" :name="fieldName"> <FormField v-slot="{ componentField }" :name="fieldName">
<FormItem> <FormItem>
<FormControl> <FormControl>
@@ -70,6 +72,6 @@ onMounted(() => {
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
</FormField> </FormField>
</Field> </DE.Field>
</FieldGroup> </DE.Cell>
</template> </template>
app/components/app/person/family-parents-form.vue
+1 -1
View File
@@ -65,7 +65,7 @@ defineExpose({
<div> <div>
<p <p
v-if="props.title" 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 }} {{ props.title }}
</p> </p>
app/components/content/patient/entry.vue
+4
View File
@@ -268,21 +268,25 @@ watch(
ref="personPatientForm" ref="personPatientForm"
:schema="PatientSchema" :schema="PatientSchema"
/> />
<div class="h-6"></div>
<AppPersonAddressEntryForm <AppPersonAddressEntryForm
ref="personAddressForm" ref="personAddressForm"
title="Alamat Sekarang" title="Alamat Sekarang"
:schema="PersonAddressSchema" :schema="PersonAddressSchema"
/> />
<div class="h-6"></div>
<AppPersonAddressEntryFormRelative <AppPersonAddressEntryFormRelative
ref="personAddressRelativeForm" ref="personAddressRelativeForm"
title="Alamat KTP" title="Alamat KTP"
:schema="PersonAddressRelativeSchema" :schema="PersonAddressRelativeSchema"
/> />
<div class="h-6"></div>
<AppPersonFamilyParentsForm <AppPersonFamilyParentsForm
ref="personFamilyForm" ref="personFamilyForm"
title="Identitas Orang Tua" title="Identitas Orang Tua"
:schema="PersonFamiliesSchema" :schema="PersonFamiliesSchema"
/> />
<div class="h-6"></div>
<AppPersonContactEntryForm <AppPersonContactEntryForm
ref="personContactForm" ref="personContactForm"
title="Kontak Pasien" title="Kontak Pasien"