mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-24 15:25:46 +00:00
feat(FE-208): use CheckboxInput component for item selection in PurchaseRequisitionsForm
This commit is contained in:
@@ -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>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user