mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
refactor(FE): Refactor transfer logic to use maxSourceQuantity state
This commit is contained in:
@@ -229,6 +229,8 @@ const TransferToLayingFormModal = () => {
|
||||
ProjectFlock | undefined
|
||||
>(undefined);
|
||||
|
||||
const [maxSourceQuantity, setMaxSourceQuantity] = useState<number>(0);
|
||||
|
||||
const selectedFlockDestinationRawData = isResponseSuccess(
|
||||
flockDestinationRawData
|
||||
)
|
||||
@@ -353,19 +355,14 @@ const TransferToLayingFormModal = () => {
|
||||
return { available: countAvailable, unavailable: countUnavailable };
|
||||
}, [mappedFlockDestinationKandangsMaxTargetQty]);
|
||||
|
||||
const totalEnteredChickenForTransfer =
|
||||
formik.values.flockSourceKandangs.reduce(
|
||||
(acc, item) => acc + Number(item.quantity),
|
||||
0
|
||||
);
|
||||
|
||||
const totalTransferedChicken = formik.values.flockDestinationKandangs.reduce(
|
||||
(acc, item) => acc + Number(item.quantity),
|
||||
0
|
||||
);
|
||||
|
||||
// Sisa transfer = Max available dari kandang asal - Total yang sudah diisi di kandang tujuan
|
||||
const totalAvailableChickenForTransfer =
|
||||
totalEnteredChickenForTransfer - totalTransferedChicken;
|
||||
maxSourceQuantity - totalTransferedChicken;
|
||||
|
||||
const isNextButtonDisabled = useMemo(() => {
|
||||
if (step === 1) {
|
||||
@@ -397,6 +394,7 @@ const TransferToLayingFormModal = () => {
|
||||
formik.setFieldValue('maxTotalQuantity', '');
|
||||
formik.setFieldValue('reason', '');
|
||||
formik.setFieldTouched('reason', false);
|
||||
setMaxSourceQuantity(0);
|
||||
|
||||
setStep(2);
|
||||
};
|
||||
@@ -404,6 +402,7 @@ const TransferToLayingFormModal = () => {
|
||||
const flockSourceChangeHandler = (val: OptionType | OptionType[] | null) => {
|
||||
formik.setFieldValue('flockSource', val);
|
||||
formik.setFieldValue('flockSourceKandangs', []);
|
||||
setMaxSourceQuantity(0);
|
||||
};
|
||||
|
||||
const flockDestinationChangeHandler = (
|
||||
@@ -469,6 +468,16 @@ const TransferToLayingFormModal = () => {
|
||||
formik.setFieldValue('maxTotalQuantity', totalTransferedChicken);
|
||||
}, [totalTransferedChicken, formik.values.flockDestinationKandangs]);
|
||||
|
||||
// Auto-fill source kandang quantity from total destination quantity
|
||||
useEffect(() => {
|
||||
if (formik.values.flockSourceKandangs.length > 0) {
|
||||
formik.setFieldValue(
|
||||
'flockSourceKandangs.0.quantity',
|
||||
totalTransferedChicken
|
||||
);
|
||||
}
|
||||
}, [totalTransferedChicken]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
@@ -583,14 +592,9 @@ const TransferToLayingFormModal = () => {
|
||||
k.kandang.value === item.project_flock_kandang_id
|
||||
);
|
||||
|
||||
const flockSourceKandangCheckboxChangeHandler: FormEventHandler<
|
||||
HTMLInputElement
|
||||
> = (e) => {
|
||||
const checked = (e.target as HTMLInputElement)
|
||||
.checked;
|
||||
if (checked) {
|
||||
const flockSourceKandangRadioChangeHandler = () => {
|
||||
if (isAvailable) {
|
||||
formik.setFieldValue('flockSourceKandangs', [
|
||||
...formik.values.flockSourceKandangs,
|
||||
{
|
||||
kandang: {
|
||||
value: item.project_flock_kandang_id,
|
||||
@@ -600,15 +604,7 @@ const TransferToLayingFormModal = () => {
|
||||
maxQuantity: item.available_qty,
|
||||
},
|
||||
]);
|
||||
} else {
|
||||
formik.setFieldValue(
|
||||
'flockSourceKandangs',
|
||||
formik.values.flockSourceKandangs.filter(
|
||||
(k) =>
|
||||
k.kandang.value !==
|
||||
item.project_flock_kandang_id
|
||||
)
|
||||
);
|
||||
setMaxSourceQuantity(item.available_qty);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -618,28 +614,22 @@ const TransferToLayingFormModal = () => {
|
||||
className='w-full p-3 flex flex-row items-center justify-between'
|
||||
>
|
||||
<div className='flex flex-row items-center gap-3'>
|
||||
<CheckboxInput
|
||||
name={`flockSourceKandang.${itemIdx}.value`}
|
||||
<input
|
||||
type='radio'
|
||||
name='flockSourceKandang'
|
||||
value={item.project_flock_kandang_id}
|
||||
checked={isChecked}
|
||||
onChange={
|
||||
flockSourceKandangCheckboxChangeHandler
|
||||
}
|
||||
size='md'
|
||||
onChange={flockSourceKandangRadioChangeHandler}
|
||||
disabled={!isAvailable}
|
||||
classNames={{
|
||||
checkbox: cn({
|
||||
'bg-base-200 border border-base-content/10 opacity-100':
|
||||
!isAvailable,
|
||||
}),
|
||||
}}
|
||||
className={cn('radio radio-md radio-primary', {
|
||||
'opacity-50 cursor-not-allowed': !isAvailable,
|
||||
})}
|
||||
/>
|
||||
|
||||
<label
|
||||
htmlFor={`flockSourceKandang.${itemIdx}.value`}
|
||||
className={cn('text-sm text-base-content/50', {
|
||||
'cursor-pointer': isAvailable,
|
||||
'cursor-not-allowed': !isAvailable,
|
||||
'cursor-not-allowed opacity-50': !isAvailable,
|
||||
})}
|
||||
>
|
||||
{item.kandang_name}{' '}
|
||||
@@ -858,7 +848,7 @@ const TransferToLayingFormModal = () => {
|
||||
<NumberInput
|
||||
key={`flockSourceKandangs-${item.kandang.value}-${index}`}
|
||||
name={`flockSourceKandangs.${index}.quantity`}
|
||||
placeholder='Masukkan Kuantitas'
|
||||
placeholder='Masukkan Kuantitas pada Kandang Tujuan'
|
||||
value={item.quantity}
|
||||
onChange={formik.handleChange}
|
||||
isError={isInvalid}
|
||||
@@ -875,6 +865,8 @@ const TransferToLayingFormModal = () => {
|
||||
<div className='w-px bg-base-content/10' />
|
||||
</div>
|
||||
}
|
||||
readOnly
|
||||
disabled
|
||||
className={{
|
||||
inputPrefix:
|
||||
'py-0 px-0 pl-3 text-base-content/50 bg-transparent border-r-0',
|
||||
@@ -1000,7 +992,7 @@ const TransferToLayingFormModal = () => {
|
||||
isError={totalAvailableChickenForTransfer < 0}
|
||||
errorMessage={
|
||||
totalAvailableChickenForTransfer < 0
|
||||
? `Jumlah transfer melebihi ketersediaan (${formatNumber(totalEnteredChickenForTransfer, 'en-US')} ayam)`
|
||||
? `Jumlah transfer melebihi ketersediaan (${formatNumber(maxSourceQuantity, 'en-US')} ayam)`
|
||||
: ''
|
||||
}
|
||||
disabled
|
||||
|
||||
Reference in New Issue
Block a user