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

refactor(FE-114): improve alignment and styling of checkbox inputs in RecordingForm

Browse Source
This commit is contained in:
rstubryan
2025-10-23 17:15:17 +07:00
parent 3cf8f4c89b
commit 3f76cb58fe
1 changed files with 20 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/production/recording/form/RecordingForm.tsx
+20 -28
View File
@@ -812,19 +812,18 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
{formik.values.feed_data?.map((feed, idx) => (
<tr key={`feed-${idx}`}>
{type !== 'detail' && (
<td>
<div className='flex justify-center'>
<td className="!align-middle">
<CheckboxInput
name={`feed-${idx}`}
checked={selectedFeed.includes(idx)}
onChange={(
e: React.ChangeEvent<HTMLInputElement>
e: React.ChangeEvent<HTMLInputElement>,
) => {
if (e.target.checked) {
setSelectedFeed([...selectedFeed, idx]);
} else {
setSelectedFeed(
selectedFeed.filter((i) => i !== idx)
selectedFeed.filter((i) => i !== idx),
);
}
}}
@@ -833,11 +832,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
checkbox: 'checkbox checkbox-sm',
}}
/>
</div>
</td>
)}
<td>
<SelectInput
<SelectInput
required
value={
pakanOptions.find(
@@ -1004,7 +1002,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr>
{type !== 'detail' && (
<th>
<div className='flex justify-center'>
<div className='flex justify-center items-center h-full'>
<CheckboxInput
name='select-all-weight'
checked={
@@ -1026,7 +1024,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
}
}}
classNames={{
wrapper: 'flex justify-center',
wrapper: 'flex justify-center items-center h-full',
checkbox: 'checkbox checkbox-sm',
}}
/>
@@ -1067,8 +1065,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
{formik.values.body_weight?.map((weight, idx) => (
<tr key={`weight-${idx}`}>
{type !== 'detail' && (
<td>
<div className='flex justify-center'>
<td className='!align-middle'>
<CheckboxInput
name={`weight-${idx}`}
checked={selectedWeight.includes(idx)}
@@ -1084,11 +1081,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
}
}}
classNames={{
wrapper: 'flex justify-center',
wrapper: 'flex justify-center items-center',
checkbox: 'checkbox checkbox-sm',
}}
/>
</div>
</td>
)}
<td>
@@ -1257,7 +1253,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr>
{type !== 'detail' && (
<th>
<div className='flex justify-center'>
<div className='flex justify-center items-center h-full'>
<CheckboxInput
name='select-all-vaccine'
checked={
@@ -1279,7 +1275,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
}
}}
classNames={{
wrapper: 'flex justify-center',
wrapper: 'flex justify-center items-center h-full',
checkbox: 'checkbox checkbox-sm',
}}
/>
@@ -1312,19 +1308,18 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
{formik.values.vaccination?.map((vaccine, idx) => (
<tr key={`vaccine-${idx}`}>
{type !== 'detail' && (
<td>
<div className='flex justify-center'>
<td className="!align-middle">
<CheckboxInput
name={`vaccine-${idx}`}
checked={selectedVaccine.includes(idx)}
onChange={(
e: React.ChangeEvent<HTMLInputElement>
e: React.ChangeEvent<HTMLInputElement>,
) => {
if (e.target.checked) {
setSelectedVaccine([...selectedVaccine, idx]);
} else {
setSelectedVaccine(
selectedVaccine.filter((i) => i !== idx)
selectedVaccine.filter((i) => i !== idx),
);
}
}}
@@ -1333,11 +1328,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
checkbox: 'checkbox checkbox-sm',
}}
/>
</div>
</td>
)}
<td>
<SelectInput
<SelectInput
required
value={
ovkOptions.find(
@@ -1520,7 +1514,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr>
{type !== 'detail' && (
<th>
<div className='flex justify-center'>
<div className='flex justify-center items-center h-full'>
<CheckboxInput
name='select-all-mortality'
checked={
@@ -1542,7 +1536,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
}
}}
classNames={{
wrapper: 'flex justify-center',
wrapper: 'flex justify-center items-center h-full',
checkbox: 'checkbox checkbox-sm',
}}
/>
@@ -1574,13 +1568,12 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
{formik.values.mortality?.map((mortality, idx) => (
<tr key={`mortality-${idx}`}>
{type !== 'detail' && (
<td>
<div className='flex justify-center'>
<td className="!align-middle">
<CheckboxInput
name={`mortality-${idx}`}
checked={selectedMortality.includes(idx)}
onChange={(
e: React.ChangeEvent<HTMLInputElement>
e: React.ChangeEvent<HTMLInputElement>,
) => {
if (e.target.checked) {
setSelectedMortality([
@@ -1589,7 +1582,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
]);
} else {
setSelectedMortality(
selectedMortality.filter((i) => i !== idx)
selectedMortality.filter((i) => i !== idx),
);
}
}}
@@ -1598,11 +1591,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
checkbox: 'checkbox checkbox-sm',
}}
/>
</div>
</td>
)}
<td>
<SelectInput
<SelectInput
required
value={RECORDING_FLAG_OPTIONS.find(
(opt) => opt.value === mortality.condition