mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
refactor(FE-114): integrate FieldMessage component for improved field feedback in checkboxes
This commit is contained in:
rstubryan
@@ -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';
|
||||
@@ -621,20 +622,23 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
<tr key={`feed-${idx}`}>
|
||||
{type !== 'detail' && (
|
||||
<td>
|
||||
<input
|
||||
type='checkbox'
|
||||
className='checkbox'
|
||||
checked={selectedFeed.includes(idx)}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedFeed([...selectedFeed, idx]);
|
||||
} else {
|
||||
setSelectedFeed(
|
||||
selectedFeed.filter((i) => i !== idx)
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div className='flex flex-col items-start gap-2'>
|
||||
<input
|
||||
type='checkbox'
|
||||
className='checkbox'
|
||||
checked={selectedFeed.includes(idx)}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedFeed([...selectedFeed, idx]);
|
||||
} else {
|
||||
setSelectedFeed(
|
||||
selectedFeed.filter((i) => i !== idx)
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<FieldMessage message={null} isVisible={false} />
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
<td>
|
||||
@@ -741,17 +745,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
</td>
|
||||
{type !== 'detail' && (
|
||||
<td>
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={() => removeFeedData(idx)}
|
||||
>
|
||||
<Icon
|
||||
icon='material-symbols:delete-outline-rounded'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
</Button>
|
||||
<div className='flex flex-col items-start gap-2'>
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={() => removeFeedData(idx)}
|
||||
>
|
||||
<Icon
|
||||
icon='material-symbols:delete-outline-rounded'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
</Button>
|
||||
<FieldMessage message={null} isVisible={false} />
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
@@ -834,20 +841,23 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
<tr key={`weight-${idx}`}>
|
||||
{type !== 'detail' && (
|
||||
<td>
|
||||
<input
|
||||
type='checkbox'
|
||||
className='checkbox'
|
||||
checked={selectedWeight.includes(idx)}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedWeight([...selectedWeight, idx]);
|
||||
} else {
|
||||
setSelectedWeight(
|
||||
selectedWeight.filter((i) => i !== idx)
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div className='flex flex-col items-start gap-2'>
|
||||
<input
|
||||
type='checkbox'
|
||||
className='checkbox'
|
||||
checked={selectedWeight.includes(idx)}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedWeight([...selectedWeight, idx]);
|
||||
} else {
|
||||
setSelectedWeight(
|
||||
selectedWeight.filter((i) => i !== idx)
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<FieldMessage message={null} isVisible={false} />
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
<td>
|
||||
@@ -944,17 +954,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
</td>
|
||||
{type !== 'detail' && (
|
||||
<td>
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={() => removeBodyWeight(idx)}
|
||||
>
|
||||
<Icon
|
||||
icon='material-symbols:delete-outline-rounded'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
</Button>
|
||||
<div className='flex flex-col items-start gap-2'>
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={() => removeBodyWeight(idx)}
|
||||
>
|
||||
<Icon
|
||||
icon='material-symbols:delete-outline-rounded'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
</Button>
|
||||
<FieldMessage message={null} isVisible={false} />
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
@@ -1037,20 +1050,26 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
<tr key={`vaccine-${idx}`}>
|
||||
{type !== 'detail' && (
|
||||
<td>
|
||||
<input
|
||||
type='checkbox'
|
||||
className='checkbox'
|
||||
checked={selectedVaccine.includes(idx)}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedVaccine([...selectedVaccine, idx]);
|
||||
} else {
|
||||
setSelectedVaccine(
|
||||
selectedVaccine.filter((i) => i !== idx)
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<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,
|
||||
]);
|
||||
} else {
|
||||
setSelectedVaccine(
|
||||
selectedVaccine.filter((i) => i !== idx)
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<FieldMessage message={null} isVisible={false} />
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
<td>
|
||||
@@ -1163,17 +1182,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
</td>
|
||||
{type !== 'detail' && (
|
||||
<td>
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={() => removeVaccination(idx)}
|
||||
>
|
||||
<Icon
|
||||
icon='material-symbols:delete-outline-rounded'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
</Button>
|
||||
<div className='flex flex-col items-start gap-2'>
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={() => removeVaccination(idx)}
|
||||
>
|
||||
<Icon
|
||||
icon='material-symbols:delete-outline-rounded'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
</Button>
|
||||
<FieldMessage message={null} isVisible={false} />
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
@@ -1255,23 +1277,26 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
<tr key={`mortality-${idx}`}>
|
||||
{type !== 'detail' && (
|
||||
<td>
|
||||
<input
|
||||
type='checkbox'
|
||||
className='checkbox'
|
||||
checked={selectedMortality.includes(idx)}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedMortality([
|
||||
...selectedMortality,
|
||||
idx,
|
||||
]);
|
||||
} else {
|
||||
setSelectedMortality(
|
||||
selectedMortality.filter((i) => i !== idx)
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div className='flex flex-col items-start gap-2'>
|
||||
<input
|
||||
type='checkbox'
|
||||
className='checkbox'
|
||||
checked={selectedMortality.includes(idx)}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedMortality([
|
||||
...selectedMortality,
|
||||
idx,
|
||||
]);
|
||||
} else {
|
||||
setSelectedMortality(
|
||||
selectedMortality.filter((i) => i !== idx)
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<FieldMessage message={null} isVisible={false} />
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
<td>
|
||||
@@ -1335,17 +1360,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
</td>
|
||||
{type !== 'detail' && (
|
||||
<td>
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={() => removeMortality(idx)}
|
||||
>
|
||||
<Icon
|
||||
icon='material-symbols:delete-outline-rounded'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
</Button>
|
||||
<div className='flex flex-col items-start gap-2'>
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={() => removeMortality(idx)}
|
||||
>
|
||||
<Icon
|
||||
icon='material-symbols:delete-outline-rounded'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
</Button>
|
||||
<FieldMessage message={null} isVisible={false} />
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
|
||||
Reference in New Issue
Block a user