refactor(FE-114): integrate FieldMessage component for improved field feedback in checkboxes

This commit is contained in:
rstubryan
2025-10-20 20:00:43 +07:00
parent e0ce571000
commit ac2f246988
@@ -26,6 +26,7 @@ import { ProductWarehouseApi } from '@/services/api/inventory';
import { ProjectFlock } from '@/types/api/production/project-flock';
import { Warehouse } from '@/types/api/master-data/warehouse';
import { LocationApi } from '@/services/api/master-data';
import FieldMessage from '@/components/helper/FieldMessage';
interface RecordingFormProps {
type?: 'add' | 'edit' | 'detail';
@@ -588,6 +589,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr>
{type !== 'detail' && (
<th>
<div className='flex flex-col items-start gap-2'>
<input
type='checkbox'
className='checkbox'
@@ -608,6 +610,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
}
}}
/>
<FieldMessage message={null} isVisible={false} />
</div>
</th>
)}
<th>Feed Name</th>
@@ -741,6 +745,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
</td>
{type !== 'detail' && (
<td>
<div className='flex flex-col items-start gap-2'>
<Button
type='button'
color='error'
@@ -752,6 +757,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
height={24}
/>
</Button>
<FieldMessage message={null} isVisible={false} />
</div>
</td>
)}
</tr>
@@ -834,6 +841,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr key={`weight-${idx}`}>
{type !== 'detail' && (
<td>
<div className='flex flex-col items-start gap-2'>
<input
type='checkbox'
className='checkbox'
@@ -848,6 +856,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
}
}}
/>
<FieldMessage message={null} isVisible={false} />
</div>
</td>
)}
<td>
@@ -944,6 +954,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
</td>
{type !== 'detail' && (
<td>
<div className='flex flex-col items-start gap-2'>
<Button
type='button'
color='error'
@@ -955,6 +966,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
height={24}
/>
</Button>
<FieldMessage message={null} isVisible={false} />
</div>
</td>
)}
</tr>
@@ -1037,13 +1050,17 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr key={`vaccine-${idx}`}>
{type !== 'detail' && (
<td>
<div className='flex flex-col items-start gap-2'>
<input
type='checkbox'
className='checkbox'
checked={selectedVaccine.includes(idx)}
onChange={(e) => {
if (e.target.checked) {
setSelectedVaccine([...selectedVaccine, idx]);
setSelectedVaccine([
...selectedVaccine,
idx,
]);
} else {
setSelectedVaccine(
selectedVaccine.filter((i) => i !== idx)
@@ -1051,6 +1068,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
}
}}
/>
<FieldMessage message={null} isVisible={false} />
</div>
</td>
)}
<td>
@@ -1163,6 +1182,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
</td>
{type !== 'detail' && (
<td>
<div className='flex flex-col items-start gap-2'>
<Button
type='button'
color='error'
@@ -1174,6 +1194,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
height={24}
/>
</Button>
<FieldMessage message={null} isVisible={false} />
</div>
</td>
)}
</tr>
@@ -1255,6 +1277,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr key={`mortality-${idx}`}>
{type !== 'detail' && (
<td>
<div className='flex flex-col items-start gap-2'>
<input
type='checkbox'
className='checkbox'
@@ -1272,6 +1295,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
}
}}
/>
<FieldMessage message={null} isVisible={false} />
</div>
</td>
)}
<td>
@@ -1335,6 +1360,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
</td>
{type !== 'detail' && (
<td>
<div className='flex flex-col items-start gap-2'>
<Button
type='button'
color='error'
@@ -1346,6 +1372,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
height={24}
/>
</Button>
<FieldMessage message={null} isVisible={false} />
</div>
</td>
)}
</tr>