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

refactor(FE-114): simplify CheckboxInput component and enhance styling options

Browse Source
This commit is contained in:
rstubryan
2025-10-23 13:49:43 +07:00
parent 7e53743b07
commit 2de32dc944
3 changed files with 157 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/inventory/movement/form/MovementForm.tsx
+30 -14
View File
@@ -847,7 +847,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
selectedProducts.length &&
formik.values.products?.length > 0
}
onChange={(e) => {
onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) {
setSelectedProducts(
formik.values.products?.map(
@@ -858,8 +860,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
setSelectedProducts([]);
}
}}
naked={true}
size='sm'
classNames={{
wrapper: 'flex justify-center',
checkbox: 'checkbox checkbox-sm',
}}
/>
</div>
</th>
@@ -890,11 +894,13 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
<tr key={`product-row-${idx}-${product.product_id}`}>
{type !== 'detail' && (
<td>
<div className='flex flex-col items-center gap-2'>
<div className='flex justify-center'>
<CheckboxInput
name={`product-${idx}`}
checked={selectedProducts.includes(idx)}
onChange={(e) => {
onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) {
setSelectedProducts([
...selectedProducts,
@@ -906,8 +912,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
);
}
}}
naked={true}
size='sm'
classNames={{
wrapper: 'flex justify-center',
checkbox: 'checkbox checkbox-sm',
}}
/>
</div>
</td>
@@ -1061,7 +1069,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
selectedDeliveries.length &&
formik.values.deliveries?.length > 0
}
onChange={(e) => {
onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) {
setSelectedDeliveries(
formik.values.deliveries?.map(
@@ -1072,8 +1082,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
setSelectedDeliveries([]);
}
}}
naked={true}
size='sm'
classNames={{
wrapper: 'flex justify-center',
checkbox: 'checkbox checkbox-sm',
}}
/>
</div>
</th>
@@ -1150,11 +1162,13 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
<tr key={`delivery-row-${idx}`}>
{type !== 'detail' && (
<td>
<div className='flex flex-col items-start gap-2'>
<div className='flex justify-center'>
<CheckboxInput
name={`delivery-${idx}`}
checked={selectedDeliveries.includes(idx)}
onChange={(e) => {
onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) {
setSelectedDeliveries([
...selectedDeliveries,
@@ -1168,8 +1182,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
);
}
}}
naked={true}
size='sm'
classNames={{
wrapper: 'flex justify-center',
checkbox: 'checkbox checkbox-sm',
}}
/>
</div>
</td>
src/components/pages/production/recording/form/RecordingForm.tsx
+76 -47
View File
@@ -760,29 +760,30 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr>
{type !== 'detail' && (
<th>
<div className='flex justify-center'>
<CheckboxInput
name='select-all-feed'
checked={
formik.values.feed_data?.length ===
selectedFeed.length &&
formik.values.feed_data?.length > 0
<CheckboxInput
name='select-all-feed'
checked={
formik.values.feed_data?.length ===
selectedFeed.length &&
formik.values.feed_data?.length > 0
}
onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
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>
}}
classNames={{
wrapper: 'flex justify-center',
checkbox: 'checkbox checkbox-sm',
}}
/>
</th>
)}
<th>
@@ -812,11 +813,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr key={`feed-${idx}`}>
{type !== 'detail' && (
<td>
<div className='flex flex-col items-center gap-2'>
<div className='flex justify-center'>
<CheckboxInput
name={`feed-${idx}`}
checked={selectedFeed.includes(idx)}
onChange={(e) => {
onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) {
setSelectedFeed([...selectedFeed, idx]);
} else {
@@ -825,8 +828,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
);
}
}}
naked={true}
size='sm'
classNames={{
wrapper: 'flex justify-center',
checkbox: 'checkbox checkbox-sm',
}}
/>
</div>
</td>
@@ -1007,7 +1012,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
selectedWeight.length &&
formik.values.body_weight?.length > 0
}
onChange={(e) => {
onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) {
setSelectedWeight(
formik.values.body_weight?.map(
@@ -1018,8 +1025,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
setSelectedWeight([]);
}
}}
naked={true}
size='sm'
classNames={{
wrapper: 'flex justify-center',
checkbox: 'checkbox checkbox-sm',
}}
/>
</div>
</th>
@@ -1059,11 +1068,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr key={`weight-${idx}`}>
{type !== 'detail' && (
<td>
<div className='flex flex-col items-center gap-2'>
<div className='flex justify-center'>
<CheckboxInput
name={`weight-${idx}`}
checked={selectedWeight.includes(idx)}
onChange={(e) => {
onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) {
setSelectedWeight([...selectedWeight, idx]);
} else {
@@ -1072,8 +1083,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
);
}
}}
naked={true}
size='sm'
classNames={{
wrapper: 'flex justify-center',
checkbox: 'checkbox checkbox-sm',
}}
/>
</div>
</td>
@@ -1248,7 +1261,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
selectedVaccine.length &&
formik.values.vaccination?.length > 0
}
onChange={(e) => {
onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) {
setSelectedVaccine(
formik.values.vaccination?.map(
@@ -1259,8 +1274,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
setSelectedVaccine([]);
}
}}
naked={true}
size='sm'
classNames={{
wrapper: 'flex justify-center',
checkbox: 'checkbox checkbox-sm',
}}
/>
</div>
</th>
@@ -1292,11 +1309,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr key={`vaccine-${idx}`}>
{type !== 'detail' && (
<td>
<div className='flex flex-col items-center gap-2'>
<div className='flex justify-center'>
<CheckboxInput
name={`vaccine-${idx}`}
checked={selectedVaccine.includes(idx)}
onChange={(e) => {
onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) {
setSelectedVaccine([...selectedVaccine, idx]);
} else {
@@ -1305,8 +1324,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
);
}
}}
naked={true}
size='sm'
classNames={{
wrapper: 'flex justify-center',
checkbox: 'checkbox checkbox-sm',
}}
/>
</div>
</td>
@@ -1503,7 +1524,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
selectedMortality.length &&
formik.values.mortality?.length > 0
}
onChange={(e) => {
onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) {
setSelectedMortality(
formik.values.mortality?.map(
@@ -1514,8 +1537,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
setSelectedMortality([]);
}
}}
naked={true}
size='sm'
classNames={{
wrapper: 'flex justify-center',
checkbox: 'checkbox checkbox-sm',
}}
/>
</div>
</th>
@@ -1546,11 +1571,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr key={`mortality-${idx}`}>
{type !== 'detail' && (
<td>
<div className='flex flex-col items-center gap-2'>
<div className='flex justify-center'>
<CheckboxInput
name={`mortality-${idx}`}
checked={selectedMortality.includes(idx)}
onChange={(e) => {
onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) {
setSelectedMortality([
...selectedMortality,
@@ -1562,8 +1589,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
);
}
}}
naked={true}
size='sm'
classNames={{
wrapper: 'flex justify-center',
checkbox: 'checkbox checkbox-sm',
}}
/>
</div>
</td>