gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-25 07:45:47 +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'; 'use client';
import { useCallback, useEffect, useMemo, useState } from 'react'; import { useCallback, useEffect, useMemo, useState } from 'react';
import { ChangeEvent } from 'react';
import { useFormik } from 'formik'; import { useFormik } from 'formik';
import { Icon } from '@iconify/react'; import { Icon } from '@iconify/react';
import Button from '@/components/Button'; import Button from '@/components/Button';
import TextInput from '@/components/input/TextInput'; import TextInput from '@/components/input/TextInput';
import NumberInput from '@/components/input/NumberInput'; import NumberInput from '@/components/input/NumberInput';
import CheckboxInput from '@/components/input/CheckboxInput';
import SelectInput, { OptionType } from '@/components/input/SelectInput'; import SelectInput, { OptionType } from '@/components/input/SelectInput';
import ConfirmationModal from '@/components/modal/ConfirmationModal'; import ConfirmationModal from '@/components/modal/ConfirmationModal';
import { FormHeader } from '@/components/helper/form/FormHeader'; import { FormHeader } from '@/components/helper/form/FormHeader';
@@ -663,26 +663,29 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr> <tr>
{type !== 'detail' && ( {type !== 'detail' && (
<th> <th>
<input <div className='flex justify-center'>
type='checkbox' <CheckboxInput
className='checkbox' name='select-all-feed'
checked={ checked={
formik.values.feed_data?.length === formik.values.feed_data?.length ===
selectedFeed.length && selectedFeed.length &&
formik.values.feed_data?.length > 0 formik.values.feed_data?.length > 0
}
onChange={(e) => {
if (e.target.checked) {
setSelectedFeed(
formik.values.feed_data?.map(
(_, idx) => idx
) ?? []
);
} else {
setSelectedFeed([]);
} }
}} onChange={(e) => {
/> if (e.target.checked) {
setSelectedFeed(
formik.values.feed_data?.map(
(_, idx) => idx
) ?? []
);
} else {
setSelectedFeed([]);
}
}}
naked={true}
size='sm'
/>
</div>
</th> </th>
)} )}
<th>Feed Name</th> <th>Feed Name</th>
@@ -696,10 +699,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr key={`feed-${idx}`}> <tr key={`feed-${idx}`}>
{type !== 'detail' && ( {type !== 'detail' && (
<td> <td>
<div className='flex flex-col items-start gap-2'> <div className='flex flex-col items-center gap-2'>
<input <CheckboxInput
type='checkbox' name={`feed-${idx}`}
className='checkbox'
checked={selectedFeed.includes(idx)} checked={selectedFeed.includes(idx)}
onChange={(e) => { onChange={(e) => {
if (e.target.checked) { if (e.target.checked) {
@@ -710,6 +712,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
); );
} }
}} }}
naked={true}
size='sm'
/> />
<FieldMessage message={null} isVisible={false} /> <FieldMessage message={null} isVisible={false} />
</div> </div>
@@ -882,26 +886,29 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr> <tr>
{type !== 'detail' && ( {type !== 'detail' && (
<th> <th>
<input <div className='flex justify-center'>
type='checkbox' <CheckboxInput
className='checkbox' name='select-all-weight'
checked={ checked={
formik.values.body_weight?.length === formik.values.body_weight?.length ===
selectedWeight.length && selectedWeight.length &&
formik.values.body_weight?.length > 0 formik.values.body_weight?.length > 0
}
onChange={(e) => {
if (e.target.checked) {
setSelectedWeight(
formik.values.body_weight?.map(
(_, idx) => idx
) ?? []
);
} else {
setSelectedWeight([]);
} }
}} onChange={(e) => {
/> if (e.target.checked) {
setSelectedWeight(
formik.values.body_weight?.map(
(_, idx) => idx
) ?? []
);
} else {
setSelectedWeight([]);
}
}}
naked={true}
size='sm'
/>
</div>
</th> </th>
)} )}
<th>Chicken Weight</th> <th>Chicken Weight</th>
@@ -915,10 +922,9 @@ 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'> <div className='flex flex-col items-center gap-2'>
<input <CheckboxInput
type='checkbox' name={`weight-${idx}`}
className='checkbox'
checked={selectedWeight.includes(idx)} checked={selectedWeight.includes(idx)}
onChange={(e) => { onChange={(e) => {
if (e.target.checked) { if (e.target.checked) {
@@ -929,6 +935,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
); );
} }
}} }}
naked={true}
size='sm'
/> />
<FieldMessage message={null} isVisible={false} /> <FieldMessage message={null} isVisible={false} />
</div> </div>
@@ -1108,26 +1116,29 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr> <tr>
{type !== 'detail' && ( {type !== 'detail' && (
<th> <th>
<input <div className='flex justify-center'>
type='checkbox' <CheckboxInput
className='checkbox' name='select-all-vaccine'
checked={ checked={
formik.values.vaccination?.length === formik.values.vaccination?.length ===
selectedVaccine.length && selectedVaccine.length &&
formik.values.vaccination?.length > 0 formik.values.vaccination?.length > 0
}
onChange={(e) => {
if (e.target.checked) {
setSelectedVaccine(
formik.values.vaccination?.map(
(_, idx) => idx
) ?? []
);
} else {
setSelectedVaccine([]);
} }
}} onChange={(e) => {
/> if (e.target.checked) {
setSelectedVaccine(
formik.values.vaccination?.map(
(_, idx) => idx
) ?? []
);
} else {
setSelectedVaccine([]);
}
}}
naked={true}
size='sm'
/>
</div>
</th> </th>
)} )}
<th>Vaccine Name</th> <th>Vaccine Name</th>
@@ -1141,10 +1152,9 @@ 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'> <div className='flex flex-col items-center gap-2'>
<input <CheckboxInput
type='checkbox' name={`vaccine-${idx}`}
className='checkbox'
checked={selectedVaccine.includes(idx)} checked={selectedVaccine.includes(idx)}
onChange={(e) => { onChange={(e) => {
if (e.target.checked) { if (e.target.checked) {
@@ -1158,6 +1168,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
); );
} }
}} }}
naked={true}
size='sm'
/> />
<FieldMessage message={null} isVisible={false} /> <FieldMessage message={null} isVisible={false} />
</div> </div>
@@ -1336,26 +1348,29 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr> <tr>
{type !== 'detail' && ( {type !== 'detail' && (
<th> <th>
<input <div className='flex justify-center'>
type='checkbox' <CheckboxInput
className='checkbox' name='select-all-mortality'
checked={ checked={
formik.values.mortality?.length === formik.values.mortality?.length ===
selectedMortality.length && selectedMortality.length &&
formik.values.mortality?.length > 0 formik.values.mortality?.length > 0
}
onChange={(e) => {
if (e.target.checked) {
setSelectedMortality(
formik.values.mortality?.map(
(_, idx) => idx
) ?? []
);
} else {
setSelectedMortality([]);
} }
}} onChange={(e) => {
/> if (e.target.checked) {
setSelectedMortality(
formik.values.mortality?.map(
(_, idx) => idx
) ?? []
);
} else {
setSelectedMortality([]);
}
}}
naked={true}
size='sm'
/>
</div>
</th> </th>
)} )}
<th>Condition</th> <th>Condition</th>
@@ -1368,10 +1383,9 @@ 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'> <div className='flex flex-col items-center gap-2'>
<input <CheckboxInput
type='checkbox' name={`mortality-${idx}`}
className='checkbox'
checked={selectedMortality.includes(idx)} checked={selectedMortality.includes(idx)}
onChange={(e) => { onChange={(e) => {
if (e.target.checked) { if (e.target.checked) {
@@ -1385,6 +1399,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
); );
} }
}} }}
naked={true}
size='sm'
/> />
<FieldMessage message={null} isVisible={false} /> <FieldMessage message={null} isVisible={false} />
</div> </div>