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

feat(sep): change to update value from datepicker

Browse Source
This commit is contained in:
riefive
2025-09-10 15:48:48 +07:00
parent fb8fde65d5
commit 9d58eae1bf
2 changed files with 36 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/app/sep/entry-form.vue
+21 -13
View File
@@ -67,8 +67,8 @@ const onSubmit = handleSubmit((values) => {
</script>
<template>
<div class="mx-auto w-full p-4">
<form @submit.prevent="onSubmit" class="grid gap-6">
<div class="mx-auto w-full">
<form @submit.prevent="onSubmit" class="grid gap-6 p-4">
<!-- Tanggal SEP & Jalur -->
<div class="grid gap-4 md:grid-cols-3">
<div class="flex flex-col gap-2">
@@ -88,8 +88,8 @@ 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-md border-green-600 text-green-600 hover:bg-green-50">
<Icon name="i-lucide-search" class="mr-1 h-4 w-4" />
<Button variant="outline" class="h-[40px] rounded-md border-green-600 text-green-600 hover:bg-green-50">
<Icon name="i-lucide-search" class="h-5 w-5" />
Cari Pasien
</Button>
</div>
@@ -130,11 +130,8 @@ const onSubmit = handleSubmit((values) => {
<Label>No. Surat Kontrol<span class="text-red-500">*</span></Label>
<div class="flex gap-2">
<Input class="flex-1" v-model="noSuratKontrol" />
<Button
variant="outline"
class="rounded-</Button>md h-[40px] border-green-600 text-green-600 hover:bg-green-50"
>
<Icon name="i-lucide-search" class="mr-1 h-4 w-4" />
<Button variant="outline" class="h-[40px] rounded-md border-green-600 text-green-600 hover:bg-green-50">
<Icon name="i-lucide-search" class="h-5 w-5" />
Cari Data
</Button>
</div>
@@ -247,10 +244,21 @@ const onSubmit = handleSubmit((values) => {
</div>
<!-- Actions -->
<div class="mt-6 flex justify-end gap-4">
<Button type="button" variant="outline">Riwayat SEP</Button>
<Button type="button" variant="outline">Preview</Button>
<Button type="submit">Simpan</Button>
<div class="mt-6 flex justify-end gap-2">
<Button type="button" variant="ghost" class="h-[40px] min-w-[120px] text-green-600 hover:bg-green-50">
<Icon name="i-lucide-history" class="h-5 w-5" /> Riwayat SEP
</Button>
<Button
type="button"
variant="outline"
class="h-[40px] min-w-[120px] rounded-md border-green-600 text-green-600 hover:bg-green-50 hover:text-green-600"
>
<Icon name="i-lucide-eye" class="h-5 w-5" />Preview
</Button>
<Button type="submit" class="h-[40px] text-white min-w-[120px]">
<Icon name="i-lucide-save" class="h-5 w-5" />
Simpan
</Button>
</div>
</form>
</div>
app/components/pub/custom-ui/form/datepicker-single.vue
+15 -19
View File
@@ -1,8 +1,6 @@
<script setup lang="ts">
// helpers
import { format } from 'date-fns'
// icons
import { Calendar as CalendarIcon } from 'lucide-vue-next'
import { format, parseISO } from 'date-fns'
// components
import { Button } from '~/components/pub/ui/button'
import { Calendar } from '~/components/pub/ui/calendar'
@@ -19,25 +17,23 @@ const emit = defineEmits<{
const date = ref<Date | any>(undefined)
// Sync prop to local state
watch(
() => props.modelValue,
(value) => {
if (value instanceof Date) {
date.value = value
} else if (typeof value === 'string' && value) {
date.value = value
} else {
date.value = undefined
}
},
{ immediate: true }
)
watch(date, (value) => {
const newValue = format(value, 'yyyy-MM-dd')
emit('update:modelValue', newValue)
})
onMounted(() => {
if (props.modelValue) {
const value = props.modelValue
if (value instanceof Date) {
date.value = value
} else if (typeof value === 'string' && value) {
date.value = parseISO(value)
} else {
date.value = undefined
}
}
})
</script>
<template>
@@ -48,7 +44,7 @@ watch(date, (value) => {
<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-50">{{ props.placeholder || 'Tanggal' }}</p>
<CalendarIcon class="h-4 w-4 ml-2" />
<Icon name="i-lucide-calendar" class="h-5 w-5" />
</div>
</Button>
</PopoverTrigger>