refactor(FE): Move form error alerts to bottom of forms

This commit is contained in:
rstubryan
2026-01-28 14:14:44 +07:00
parent 70fcbf795b
commit 9f93200bd5
8 changed files with 154 additions and 137 deletions
@@ -159,19 +159,6 @@ const ProductCategoryForm = ({
onReset={formik.handleReset}
className='w-full mt-8 flex flex-col gap-6'
>
{formErrorMessage && (
<div role='alert' className='alert alert-error'>
<Icon
icon='material-symbols:error-outline'
width={24}
height={24}
/>
<span>{formErrorMessage}</span>
</div>
)}
<AlertErrorList formErrorList={formErrorList} onClose={close} />
<div className='flex flex-col gap-4'>
<TextInput
required
@@ -240,6 +227,21 @@ const ProductCategoryForm = ({
</div>
)}
<div className='w-full mb-4'>
{formErrorMessage && (
<div role='alert' className='alert alert-error'>
<Icon
icon='material-symbols:error-outline'
width={24}
height={24}
/>
<span>{formErrorMessage}</span>
</div>
)}
<AlertErrorList formErrorList={formErrorList} onClose={close} />
</div>
{type !== 'detail' && (
<div
className={cn('flex flex-row justify-end gap-2', {
@@ -273,19 +273,6 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
onReset={formik.handleReset}
className='w-full mt-8 flex flex-col gap-6'
>
{productFormErrorMessage && (
<div role='alert' className='alert alert-error'>
<Icon
icon='material-symbols:error-outline'
width={24}
height={24}
/>
<span>{productFormErrorMessage}</span>
</div>
)}
<AlertErrorList formErrorList={formErrorList} onClose={close} />
<div className='grid grid-cols-1 gap-4'>
<TextInput
required
@@ -627,6 +614,22 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
)}
</div>
)}
<div className='mb-4 w-full'>
{productFormErrorMessage && (
<div role='alert' className='alert alert-error'>
<Icon
icon='material-symbols:error-outline'
width={24}
height={24}
/>
<span>{productFormErrorMessage}</span>
</div>
)}
<AlertErrorList formErrorList={formErrorList} onClose={close} />
</div>
{type !== 'detail' && (
<div
className={cn('flex flex-row justify-end gap-2', {