feat(treatment-report): add error handling and toast notification

Implement error handling in treatment report form submission and display toast notifications when errors occur. The form now emits error events and prevents default form submission behavior.
This commit is contained in:
Khafid Prayoga
2025-11-25 21:12:18 +07:00
parent 6a29fdfd50
commit f5704536d1
2 changed files with 25 additions and 3 deletions
@@ -35,7 +35,9 @@ interface Props {
const props = defineProps<Props>() const props = defineProps<Props>()
const emit = defineEmits<{ const emit = defineEmits<{
(e: 'submit', payload: FormData): void (e: 'submit', payload: FormData): void
(e: 'error', errors: Error): void
}>() }>()
const { isLoading, mode = 'create' } = props const { isLoading, mode = 'create' } = props
const isReadonly = computed(() => { const isReadonly = computed(() => {
if (isLoading) { if (isLoading) {
@@ -48,6 +50,7 @@ const isReadonly = computed(() => {
return false return false
}) })
const formSchema = toTypedSchema(TreatmentReportSchema) const formSchema = toTypedSchema(TreatmentReportSchema)
const { handleSubmit, values, resetForm, setFieldValue, setValues, validate } = useForm<FormData>({ const { handleSubmit, values, resetForm, setFieldValue, setValues, validate } = useForm<FormData>({
@@ -75,12 +78,20 @@ defineExpose({
// #endregion region // #endregion region
// #region Utilities & event handlers // #region Utilities & event handlers
const onSubmit = handleSubmit((formValues: FormData) => emit('submit', formValues)) // const onSubmit = handleSubmit((formValues: FormData) => emit('submit', formValues))
const onSubmit = handleSubmit(
(values) => {
emit('submit', values)
},
(errors) => {
emit('error', new Error('Silahkan lengkapi form terlebih dahulu'))
},
)
// #endregion // #endregion
</script> </script>
<template> <template>
<form @submit="onSubmit"> <form @submit.prevent="onSubmit">
<Fragment <Fragment
v-slot="{ section }" v-slot="{ section }"
title="Tim Pelaksana Tindakan" title="Tim Pelaksana Tindakan"
@@ -1,10 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
// type // type
import { genDoctor, type Doctor } from '~/models/doctor' import { genDoctor, type Doctor } from '~/models/doctor'
import type { TreatmentReportFormData } from '~/schemas/treatment-report.schema'
// components // components
import { toast } from '~/components/pub/ui/toast'
import AppTreatmentReportEntry from '~/components/app/treatment-report/entry-form.vue' import AppTreatmentReportEntry from '~/components/app/treatment-report/entry-form.vue'
import type { TreatmentReportFormData } from '~/schemas/treatment-report.schema'
const doctors = ref<Doctor[]>([]) const doctors = ref<Doctor[]>([])
@@ -17,6 +18,16 @@ const doctors = ref<Doctor[]>([])
<template> <template>
<AppTreatmentReportEntry <AppTreatmentReportEntry
:isLoading="false" :isLoading="false"
@submit="(val) => console.log(val)"
@error="
(err: Error) => {
toast({
title: 'Terjadi Kesalahan',
description: err.message,
variant: 'destructive',
})
}
"
:doctors="doctors" :doctors="doctors"
:initialValues=" :initialValues="
{ {