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

refactor(FE-114): replace native checkboxes with CheckboxInput component in RecordingForm

Browse Source
This commit is contained in:
rstubryan
2025-10-21 10:38:26 +07:00
parent b269728ecd
commit acea3a3063
1 changed files with 109 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/flock/recording/form/RecordingForm.tsx
+109 -93
View File
@@ -1,12 +1,12 @@
'use client';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { ChangeEvent } from 'react';
import { useFormik } from 'formik';
import { Icon } from '@iconify/react';
import Button from '@/components/Button';
import TextInput from '@/components/input/TextInput';
import NumberInput from '@/components/input/NumberInput';
import CheckboxInput from '@/components/input/CheckboxInput';
import SelectInput, { OptionType } from '@/components/input/SelectInput';
import ConfirmationModal from '@/components/modal/ConfirmationModal';
import { FormHeader } from '@/components/helper/form/FormHeader';
@@ -663,26 +663,29 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr>
{type !== 'detail' && (
<th>
<input
type='checkbox'
className='checkbox'
checked={
formik.values.feed_data?.length ===
selectedFeed.length &&
formik.values.feed_data?.length > 0
}
onChange={(e) => {
if (e.target.checked) {
setSelectedFeed(
formik.values.feed_data?.map(
(_, idx) => idx
) ?? []
);
} else {
setSelectedFeed([]);
<div className='flex justify-center'>
<CheckboxInput
name='select-all-feed'
checked={
formik.values.feed_data?.length ===
selectedFeed.length &&
formik.values.feed_data?.length > 0
}
}}
/>
onChange={(e) => {
if (e.target.checked) {
setSelectedFeed(
formik.values.feed_data?.map(
(_, idx) => idx
) ?? []
);
} else {
setSelectedFeed([]);
}
}}
naked={true}
size='sm'
/>
</div>
</th>
)}
<th>Feed Name</th>
@@ -696,10 +699,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr key={`feed-${idx}`}>
{type !== 'detail' && (
<td>
<div className='flex flex-col items-start gap-2'>
<input
type='checkbox'
className='checkbox'
<div className='flex flex-col items-center gap-2'>
<CheckboxInput
name={`feed-${idx}`}
checked={selectedFeed.includes(idx)}
onChange={(e) => {
if (e.target.checked) {
@@ -710,6 +712,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
);
}
}}
naked={true}
size='sm'
/>
<FieldMessage message={null} isVisible={false} />
</div>
@@ -882,26 +886,29 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr>
{type !== 'detail' && (
<th>
<input
type='checkbox'
className='checkbox'
checked={
formik.values.body_weight?.length ===
selectedWeight.length &&
formik.values.body_weight?.length > 0
}
onChange={(e) => {
if (e.target.checked) {
setSelectedWeight(
formik.values.body_weight?.map(
(_, idx) => idx
) ?? []
);
} else {
setSelectedWeight([]);
<div className='flex justify-center'>
<CheckboxInput
name='select-all-weight'
checked={
formik.values.body_weight?.length ===
selectedWeight.length &&
formik.values.body_weight?.length > 0
}
}}
/>
onChange={(e) => {
if (e.target.checked) {
setSelectedWeight(
formik.values.body_weight?.map(
(_, idx) => idx
) ?? []
);
} else {
setSelectedWeight([]);
}
}}
naked={true}
size='sm'
/>
</div>
</th>
)}
<th>Chicken Weight</th>
@@ -915,10 +922,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr key={`weight-${idx}`}>
{type !== 'detail' && (
<td>
<div className='flex flex-col items-start gap-2'>
<input
type='checkbox'
className='checkbox'
<div className='flex flex-col items-center gap-2'>
<CheckboxInput
name={`weight-${idx}`}
checked={selectedWeight.includes(idx)}
onChange={(e) => {
if (e.target.checked) {
@@ -929,6 +935,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
);
}
}}
naked={true}
size='sm'
/>
<FieldMessage message={null} isVisible={false} />
</div>
@@ -1108,26 +1116,29 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr>
{type !== 'detail' && (
<th>
<input
type='checkbox'
className='checkbox'
checked={
formik.values.vaccination?.length ===
selectedVaccine.length &&
formik.values.vaccination?.length > 0
}
onChange={(e) => {
if (e.target.checked) {
setSelectedVaccine(
formik.values.vaccination?.map(
(_, idx) => idx
) ?? []
);
} else {
setSelectedVaccine([]);
<div className='flex justify-center'>
<CheckboxInput
name='select-all-vaccine'
checked={
formik.values.vaccination?.length ===
selectedVaccine.length &&
formik.values.vaccination?.length > 0
}
}}
/>
onChange={(e) => {
if (e.target.checked) {
setSelectedVaccine(
formik.values.vaccination?.map(
(_, idx) => idx
) ?? []
);
} else {
setSelectedVaccine([]);
}
}}
naked={true}
size='sm'
/>
</div>
</th>
)}
<th>Vaccine Name</th>
@@ -1141,10 +1152,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr key={`vaccine-${idx}`}>
{type !== 'detail' && (
<td>
<div className='flex flex-col items-start gap-2'>
<input
type='checkbox'
className='checkbox'
<div className='flex flex-col items-center gap-2'>
<CheckboxInput
name={`vaccine-${idx}`}
checked={selectedVaccine.includes(idx)}
onChange={(e) => {
if (e.target.checked) {
@@ -1158,6 +1168,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
);
}
}}
naked={true}
size='sm'
/>
<FieldMessage message={null} isVisible={false} />
</div>
@@ -1336,26 +1348,29 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr>
{type !== 'detail' && (
<th>
<input
type='checkbox'
className='checkbox'
checked={
formik.values.mortality?.length ===
selectedMortality.length &&
formik.values.mortality?.length > 0
}
onChange={(e) => {
if (e.target.checked) {
setSelectedMortality(
formik.values.mortality?.map(
(_, idx) => idx
) ?? []
);
} else {
setSelectedMortality([]);
<div className='flex justify-center'>
<CheckboxInput
name='select-all-mortality'
checked={
formik.values.mortality?.length ===
selectedMortality.length &&
formik.values.mortality?.length > 0
}
}}
/>
onChange={(e) => {
if (e.target.checked) {
setSelectedMortality(
formik.values.mortality?.map(
(_, idx) => idx
) ?? []
);
} else {
setSelectedMortality([]);
}
}}
naked={true}
size='sm'
/>
</div>
</th>
)}
<th>Condition</th>
@@ -1368,10 +1383,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr key={`mortality-${idx}`}>
{type !== 'detail' && (
<td>
<div className='flex flex-col items-start gap-2'>
<input
type='checkbox'
className='checkbox'
<div className='flex flex-col items-center gap-2'>
<CheckboxInput
name={`mortality-${idx}`}
checked={selectedMortality.includes(idx)}
onChange={(e) => {
if (e.target.checked) {
@@ -1385,6 +1399,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
);
}
}}
naked={true}
size='sm'
/>
<FieldMessage message={null} isVisible={false} />
</div>