gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-20 13:32:00 +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) => ( {formik.values.feed_data?.map((feed, idx) => (
<tr key={`feed-${idx}`}> <tr key={`feed-${idx}`}>
{type !== 'detail' && ( {type !== 'detail' && (
<td> <td className="!align-middle">
<div className='flex justify-center'>
<CheckboxInput <CheckboxInput
name={`feed-${idx}`} name={`feed-${idx}`}
checked={selectedFeed.includes(idx)} checked={selectedFeed.includes(idx)}
onChange={( onChange={(
e: React.ChangeEvent<HTMLInputElement> e: React.ChangeEvent<HTMLInputElement>,
) => { ) => {
if (e.target.checked) { if (e.target.checked) {
setSelectedFeed([...selectedFeed, idx]); setSelectedFeed([...selectedFeed, idx]);
} else { } else {
setSelectedFeed( 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', checkbox: 'checkbox checkbox-sm',
}} }}
/> />
</div>
</td> </td>
)} )}
<td> <td>
<SelectInput <SelectInput
required required
value={ value={
pakanOptions.find( pakanOptions.find(
@@ -1004,7 +1002,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr> <tr>
{type !== 'detail' && ( {type !== 'detail' && (
<th> <th>
<div className='flex justify-center'> <div className='flex justify-center items-center h-full'>
<CheckboxInput <CheckboxInput
name='select-all-weight' name='select-all-weight'
checked={ checked={
@@ -1026,7 +1024,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
} }
}} }}
classNames={{ classNames={{
wrapper: 'flex justify-center', wrapper: 'flex justify-center items-center h-full',
checkbox: 'checkbox checkbox-sm', checkbox: 'checkbox checkbox-sm',
}} }}
/> />
@@ -1067,8 +1065,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
{formik.values.body_weight?.map((weight, idx) => ( {formik.values.body_weight?.map((weight, idx) => (
<tr key={`weight-${idx}`}> <tr key={`weight-${idx}`}>
{type !== 'detail' && ( {type !== 'detail' && (
<td> <td className='!align-middle'>
<div className='flex justify-center'>
<CheckboxInput <CheckboxInput
name={`weight-${idx}`} name={`weight-${idx}`}
checked={selectedWeight.includes(idx)} checked={selectedWeight.includes(idx)}
@@ -1084,11 +1081,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
} }
}} }}
classNames={{ classNames={{
wrapper: 'flex justify-center', wrapper: 'flex justify-center items-center',
checkbox: 'checkbox checkbox-sm', checkbox: 'checkbox checkbox-sm',
}} }}
/> />
</div>
</td> </td>
)} )}
<td> <td>
@@ -1257,7 +1253,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr> <tr>
{type !== 'detail' && ( {type !== 'detail' && (
<th> <th>
<div className='flex justify-center'> <div className='flex justify-center items-center h-full'>
<CheckboxInput <CheckboxInput
name='select-all-vaccine' name='select-all-vaccine'
checked={ checked={
@@ -1279,7 +1275,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
} }
}} }}
classNames={{ classNames={{
wrapper: 'flex justify-center', wrapper: 'flex justify-center items-center h-full',
checkbox: 'checkbox checkbox-sm', checkbox: 'checkbox checkbox-sm',
}} }}
/> />
@@ -1312,19 +1308,18 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
{formik.values.vaccination?.map((vaccine, idx) => ( {formik.values.vaccination?.map((vaccine, idx) => (
<tr key={`vaccine-${idx}`}> <tr key={`vaccine-${idx}`}>
{type !== 'detail' && ( {type !== 'detail' && (
<td> <td className="!align-middle">
<div className='flex justify-center'>
<CheckboxInput <CheckboxInput
name={`vaccine-${idx}`} name={`vaccine-${idx}`}
checked={selectedVaccine.includes(idx)} checked={selectedVaccine.includes(idx)}
onChange={( onChange={(
e: React.ChangeEvent<HTMLInputElement> e: React.ChangeEvent<HTMLInputElement>,
) => { ) => {
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),
); );
} }
}} }}
@@ -1333,11 +1328,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
checkbox: 'checkbox checkbox-sm', checkbox: 'checkbox checkbox-sm',
}} }}
/> />
</div>
</td> </td>
)} )}
<td> <td>
<SelectInput <SelectInput
required required
value={ value={
ovkOptions.find( ovkOptions.find(
@@ -1520,7 +1514,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr> <tr>
{type !== 'detail' && ( {type !== 'detail' && (
<th> <th>
<div className='flex justify-center'> <div className='flex justify-center items-center h-full'>
<CheckboxInput <CheckboxInput
name='select-all-mortality' name='select-all-mortality'
checked={ checked={
@@ -1542,7 +1536,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
} }
}} }}
classNames={{ classNames={{
wrapper: 'flex justify-center', wrapper: 'flex justify-center items-center h-full',
checkbox: 'checkbox checkbox-sm', checkbox: 'checkbox checkbox-sm',
}} }}
/> />
@@ -1574,13 +1568,12 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
{formik.values.mortality?.map((mortality, idx) => ( {formik.values.mortality?.map((mortality, idx) => (
<tr key={`mortality-${idx}`}> <tr key={`mortality-${idx}`}>
{type !== 'detail' && ( {type !== 'detail' && (
<td> <td className="!align-middle">
<div className='flex justify-center'>
<CheckboxInput <CheckboxInput
name={`mortality-${idx}`} name={`mortality-${idx}`}
checked={selectedMortality.includes(idx)} checked={selectedMortality.includes(idx)}
onChange={( onChange={(
e: React.ChangeEvent<HTMLInputElement> e: React.ChangeEvent<HTMLInputElement>,
) => { ) => {
if (e.target.checked) { if (e.target.checked) {
setSelectedMortality([ setSelectedMortality([
@@ -1589,7 +1582,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
]); ]);
} else { } else {
setSelectedMortality( 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', checkbox: 'checkbox checkbox-sm',
}} }}
/> />
</div>
</td> </td>
)} )}
<td> <td>
<SelectInput <SelectInput
required required
value={RECORDING_FLAG_OPTIONS.find( value={RECORDING_FLAG_OPTIONS.find(
(opt) => opt.value === mortality.condition (opt) => opt.value === mortality.condition