feat(FE-208): use CheckboxInput component for item selection in PurchaseRequisitionsForm

This commit is contained in:
rstubryan
2025-11-11 11:26:22 +07:00
parent 3ed3e2e21a
commit 5fc01a9afa
@@ -9,6 +9,7 @@ import { toast } from 'react-hot-toast';
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, { import SelectInput, {
OptionType, OptionType,
useSelect, useSelect,
@@ -665,15 +666,14 @@ const PurchaseRequisitionsForm = ({
<tr> <tr>
{type !== 'detail' && ( {type !== 'detail' && (
<th> <th>
<input <CheckboxInput
type='checkbox' name='select-all-items'
className='checkbox checkbox-sm'
checked={ checked={
formik.values.items?.length === formik.values.items?.length ===
selectedPurchaseItems.length && selectedPurchaseItems.length &&
formik.values.items?.length > 0 formik.values.items?.length > 0
} }
onChange={(e) => { onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.checked) { if (e.target.checked) {
setSelectedPurchaseItems( setSelectedPurchaseItems(
formik.values.items?.map((_, idx) => idx) ?? [] formik.values.items?.map((_, idx) => idx) ?? []
@@ -682,6 +682,10 @@ const PurchaseRequisitionsForm = ({
setSelectedPurchaseItems([]); setSelectedPurchaseItems([]);
} }
}} }}
classNames={{
wrapper: 'flex justify-center',
checkbox: 'checkbox checkbox-sm',
}}
/> />
</th> </th>
)} )}
@@ -703,11 +707,10 @@ const PurchaseRequisitionsForm = ({
<tr key={`purchase-item-${idx}`}> <tr key={`purchase-item-${idx}`}>
{type !== 'detail' && ( {type !== 'detail' && (
<td className='!align-middle'> <td className='!align-middle'>
<input <CheckboxInput
type='checkbox' name={`purchase-item-${idx}`}
className='checkbox checkbox-sm'
checked={selectedPurchaseItems.includes(idx)} checked={selectedPurchaseItems.includes(idx)}
onChange={(e) => { onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.checked) { if (e.target.checked) {
setSelectedPurchaseItems([ setSelectedPurchaseItems([
...selectedPurchaseItems, ...selectedPurchaseItems,
@@ -719,6 +722,10 @@ const PurchaseRequisitionsForm = ({
); );
} }
}} }}
classNames={{
wrapper: 'flex justify-center',
checkbox: 'checkbox checkbox-sm',
}}
/> />
</td> </td>
)} )}