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

feat(sep): modify form entry with calendar select

Browse Source
This commit is contained in:
riefive
2025-09-10 14:37:54 +07:00
parent 32544e9b0b
commit 582bd67cbe
4 changed files with 68 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/app/sep/entry-form.vue
+28 -12
View File
@@ -10,6 +10,7 @@ import { Label } from '~/components/pub/ui/label'
import { Select } from '~/components/pub/ui/select'
import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
import { Textarea } from '~/components/pub/ui/textarea'
import DatepickerSingle from '~/components/pub/custom-ui/form/datepicker-single.vue'
const items = [
{ value: 'item-1', label: 'Item 1' },
@@ -72,7 +73,7 @@ const onSubmit = handleSubmit((values) => {
<div class="grid gap-4 md:grid-cols-3">
<div class="flex flex-col gap-2">
<Label for="tanggalSep">Tanggal SEP</Label>
<Input id="tanggalSep" type="date" v-model="tanggalSep" />
<DatepickerSingle v-model="tanggalSep" />
<p v-if="errors.tanggalSep" class="text-sm text-red-500">{{ errors.tanggalSep }}</p>
</div>
<div class="flex flex-col gap-2">
@@ -87,7 +88,7 @@ const onSubmit = handleSubmit((values) => {
<!-- Data Pasien -->
<div class="flex items-center gap-2">
<h3 class="text-lg font-semibold">Data Pasien</h3>
<Button variant="outline" class="rounded-</Button>md border-green-600 text-green-600 hover:bg-green-50">
<Button variant="outline" class="rounded-md border-green-600 text-green-600 hover:bg-green-50">
<Icon name="i-lucide-search" class="mr-1 h-4 w-4" />
Cari Pasien
</Button>
@@ -144,15 +145,30 @@ const onSubmit = handleSubmit((values) => {
<Input v-model="tglSuratKontrol" />
<p v-if="errors.tglSuratKontrol" class="text-sm text-red-500">{{ errors.tglSuratKontrol }}</p>
</div>
<div class="flex flex-col gap-2">
<Label>Klinik Tujuan<span class="text-red-500">*</span></Label>
<Select
icon-name="i-lucide-chevron-down"
v-model="klinikTujuan"
:items="items"
placeholder="Pilih klinik"
></Select>
<p v-if="errors.klinikTujuan" class="text-sm text-red-500">{{ errors.klinikTujuan }}</p>
<div class="flex flex-row items-center gap-2">
<div class="flex-1">
<Label>Klinik Tujuan<span class="text-red-500">*</span></Label>
<Select
icon-name="i-lucide-chevron-down"
v-model="klinikTujuan"
:items="items"
placeholder="Pilih klinik"
></Select>
<p v-if="errors.klinikTujuan" class="text-sm text-red-500">{{ errors.klinikTujuan }}</p>
</div>
<div>
<Label class="mb-2 block">Klinik Eksekutif<span class="text-red-500">*</span></Label>
<RadioGroup v-model="cob" class="flex items-center gap-2">
<div class="flex items-center space-x-2">
<RadioGroupItem value="Ya" id="cob-ya" />
<Label for="cob-ya">Ya</Label>
</div>
<div class="flex items-center space-x-2">
<RadioGroupItem value="Tidak" id="cob-tidak" />
<Label for="cob-tidak">Tidak</Label>
</div>
</RadioGroup>
</div>
</div>
<div class="flex flex-col gap-2">
<Label>DPJP<span class="text-red-500">*</span></Label>
@@ -169,7 +185,7 @@ const onSubmit = handleSubmit((values) => {
<!-- Catatan -->
<div>
<Label>Catatan</Label>
<Textarea placeholder="Masukkan catatan opsional" />
<Textarea class="h-[200px] w-full border-gray-400 bg-white" placeholder="Masukkan catatan opsional" />
</div>
<div class="flex items-center gap-4">
app/components/pub/custom-ui/form/datepicker-single.vue
+32
View File
@@ -0,0 +1,32 @@
<script setup lang="ts">
// helpers
import { format } from 'date-fns'
// icons
import { Calendar as CalendarIcon } from 'lucide-vue-next'
// components
import { Button } from '~/components/pub/ui/button'
import { Calendar } from '~/components/pub/ui/calendar'
import { Popover, PopoverContent, PopoverTrigger } from '~/components/pub/ui/popover'
const date = ref<Date | undefined>(undefined)
</script>
<template>
<div class="flex flex-col space-y-2">
<Popover>
<PopoverTrigger as-child>
<Button variant="outline" class="bg-white border-gray-400 font-normal text-right h-[40px] w-full">
<div class="flex justify-between items-center w-full">
<p v-if="date">{{ format(date, 'PPP') }}</p>
<p v-else class="text-sm text-black text-opacity-80">Tanggal</p>
<CalendarIcon class="h-4 w-4 ml-2" />
</div>
</Button>
</PopoverTrigger>
<PopoverContent class="w-auto p-0">
<Calendar mode="single" />
</PopoverContent>
</Popover>
<p v-if="date" class="text-sm text-black text-opacity-80">{{ format(date, 'PPP') }}</p>
</div>
</template>