gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-25 15:55:48 +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
+45 -29
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,9 +663,9 @@ 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 &&
@@ -682,7 +682,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
setSelectedFeed([]); 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,9 +886,9 @@ 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 &&
@@ -901,7 +905,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
setSelectedWeight([]); 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,9 +1116,9 @@ 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 &&
@@ -1127,7 +1135,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
setSelectedVaccine([]); 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,9 +1348,9 @@ 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 &&
@@ -1355,7 +1367,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
setSelectedMortality([]); 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>