gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-23 14:55:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
rstubryan
2025-10-20 20:00:43 +07:00
parent e0ce571000
commit a67d353bcb
1 changed files with 131 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/flock/recording/form/RecordingForm.tsx
+131 -103
View File
@@ -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';
@@ -621,20 +622,23 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr key={`feed-${idx}`}> <tr key={`feed-${idx}`}>
{type !== 'detail' && ( {type !== 'detail' && (
<td> <td>
<input <div className='flex flex-col items-start gap-2'>
type='checkbox' <input
className='checkbox' type='checkbox'
checked={selectedFeed.includes(idx)} className='checkbox'
onChange={(e) => { checked={selectedFeed.includes(idx)}
if (e.target.checked) { onChange={(e) => {
setSelectedFeed([...selectedFeed, idx]); if (e.target.checked) {
} else { setSelectedFeed([...selectedFeed, idx]);
setSelectedFeed( } else {
selectedFeed.filter((i) => i !== idx) setSelectedFeed(
); selectedFeed.filter((i) => i !== idx)
} );
}} }
/> }}
/>
<FieldMessage message={null} isVisible={false} />
</div>
</td> </td>
)} )}
<td> <td>
@@ -741,17 +745,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
</td> </td>
{type !== 'detail' && ( {type !== 'detail' && (
<td> <td>
<Button <div className='flex flex-col items-start gap-2'>
type='button' <Button
color='error' type='button'
onClick={() => removeFeedData(idx)} color='error'
> onClick={() => removeFeedData(idx)}
<Icon >
icon='material-symbols:delete-outline-rounded' <Icon
width={24} icon='material-symbols:delete-outline-rounded'
height={24} width={24}
/> height={24}
</Button> />
</Button>
<FieldMessage message={null} isVisible={false} />
</div>
</td> </td>
)} )}
</tr> </tr>
@@ -834,20 +841,23 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr key={`weight-${idx}`}> <tr key={`weight-${idx}`}>
{type !== 'detail' && ( {type !== 'detail' && (
<td> <td>
<input <div className='flex flex-col items-start gap-2'>
type='checkbox' <input
className='checkbox' type='checkbox'
checked={selectedWeight.includes(idx)} className='checkbox'
onChange={(e) => { checked={selectedWeight.includes(idx)}
if (e.target.checked) { onChange={(e) => {
setSelectedWeight([...selectedWeight, idx]); if (e.target.checked) {
} else { setSelectedWeight([...selectedWeight, idx]);
setSelectedWeight( } else {
selectedWeight.filter((i) => i !== idx) setSelectedWeight(
); selectedWeight.filter((i) => i !== idx)
} );
}} }
/> }}
/>
<FieldMessage message={null} isVisible={false} />
</div>
</td> </td>
)} )}
<td> <td>
@@ -944,17 +954,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
</td> </td>
{type !== 'detail' && ( {type !== 'detail' && (
<td> <td>
<Button <div className='flex flex-col items-start gap-2'>
type='button' <Button
color='error' type='button'
onClick={() => removeBodyWeight(idx)} color='error'
> onClick={() => removeBodyWeight(idx)}
<Icon >
icon='material-symbols:delete-outline-rounded' <Icon
width={24} icon='material-symbols:delete-outline-rounded'
height={24} width={24}
/> height={24}
</Button> />
</Button>
<FieldMessage message={null} isVisible={false} />
</div>
</td> </td>
)} )}
</tr> </tr>
@@ -1037,20 +1050,26 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr key={`vaccine-${idx}`}> <tr key={`vaccine-${idx}`}>
{type !== 'detail' && ( {type !== 'detail' && (
<td> <td>
<input <div className='flex flex-col items-start gap-2'>
type='checkbox' <input
className='checkbox' type='checkbox'
checked={selectedVaccine.includes(idx)} className='checkbox'
onChange={(e) => { checked={selectedVaccine.includes(idx)}
if (e.target.checked) { onChange={(e) => {
setSelectedVaccine([...selectedVaccine, idx]); if (e.target.checked) {
} else { setSelectedVaccine([
setSelectedVaccine( ...selectedVaccine,
selectedVaccine.filter((i) => i !== idx) idx,
); ]);
} } else {
}} setSelectedVaccine(
/> selectedVaccine.filter((i) => i !== idx)
);
}
}}
/>
<FieldMessage message={null} isVisible={false} />
</div>
</td> </td>
)} )}
<td> <td>
@@ -1163,17 +1182,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
</td> </td>
{type !== 'detail' && ( {type !== 'detail' && (
<td> <td>
<Button <div className='flex flex-col items-start gap-2'>
type='button' <Button
color='error' type='button'
onClick={() => removeVaccination(idx)} color='error'
> onClick={() => removeVaccination(idx)}
<Icon >
icon='material-symbols:delete-outline-rounded' <Icon
width={24} icon='material-symbols:delete-outline-rounded'
height={24} width={24}
/> height={24}
</Button> />
</Button>
<FieldMessage message={null} isVisible={false} />
</div>
</td> </td>
)} )}
</tr> </tr>
@@ -1255,23 +1277,26 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr key={`mortality-${idx}`}> <tr key={`mortality-${idx}`}>
{type !== 'detail' && ( {type !== 'detail' && (
<td> <td>
<input <div className='flex flex-col items-start gap-2'>
type='checkbox' <input
className='checkbox' type='checkbox'
checked={selectedMortality.includes(idx)} className='checkbox'
onChange={(e) => { checked={selectedMortality.includes(idx)}
if (e.target.checked) { onChange={(e) => {
setSelectedMortality([ if (e.target.checked) {
...selectedMortality, setSelectedMortality([
idx, ...selectedMortality,
]); idx,
} else { ]);
setSelectedMortality( } else {
selectedMortality.filter((i) => i !== idx) setSelectedMortality(
); selectedMortality.filter((i) => i !== idx)
} );
}} }
/> }}
/>
<FieldMessage message={null} isVisible={false} />
</div>
</td> </td>
)} )}
<td> <td>
@@ -1335,17 +1360,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
</td> </td>
{type !== 'detail' && ( {type !== 'detail' && (
<td> <td>
<Button <div className='flex flex-col items-start gap-2'>
type='button' <Button
color='error' type='button'
onClick={() => removeMortality(idx)} color='error'
> onClick={() => removeMortality(idx)}
<Icon >
icon='material-symbols:delete-outline-rounded' <Icon
width={24} icon='material-symbols:delete-outline-rounded'
height={24} width={24}
/> height={24}
</Button> />
</Button>
<FieldMessage message={null} isVisible={false} />
</div>
</td> </td>
)} )}
</tr> </tr>