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