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:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user