mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
refactor(FE-62): optimize product and ekspedisi removal logic in MovementForm
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { useFormik } from 'formik';
|
||||
import useSWR from 'swr';
|
||||
|
||||
@@ -105,12 +105,20 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
||||
formik.setFieldValue('product', newProducts);
|
||||
};
|
||||
|
||||
const removeProduct = (index: number) => {
|
||||
const newProducts = formik.values.product?.filter(
|
||||
(_, idx) => idx !== index
|
||||
);
|
||||
formik.setFieldValue('product', newProducts);
|
||||
};
|
||||
const removeProduct = useCallback(
|
||||
(i: number) => {
|
||||
const updatedProducts =
|
||||
formik.values.product?.reduce((acc: ProductSchema[], item, index) => {
|
||||
if (index !== i) {
|
||||
acc.push(item);
|
||||
}
|
||||
return acc;
|
||||
}, []) ?? [];
|
||||
|
||||
formik.setFieldValue('product', updatedProducts);
|
||||
},
|
||||
[formik]
|
||||
);
|
||||
|
||||
const addEkspedisi = () => {
|
||||
const newEkspedisi = [
|
||||
@@ -131,12 +139,23 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
||||
formik.setFieldValue('ekspedisi', newEkspedisi);
|
||||
};
|
||||
|
||||
const removeEkspedisi = (index: number) => {
|
||||
const newEkspedisi = formik.values.ekspedisi?.filter(
|
||||
(_, idx) => idx !== index
|
||||
);
|
||||
formik.setFieldValue('ekspedisi', newEkspedisi);
|
||||
};
|
||||
const removeEkspedisi = useCallback(
|
||||
(i: number) => {
|
||||
const updatedEkspedisi =
|
||||
formik.values.ekspedisi?.reduce(
|
||||
(acc: EkspedisiSchema[], item, index) => {
|
||||
if (index !== i) {
|
||||
acc.push(item);
|
||||
}
|
||||
return acc;
|
||||
},
|
||||
[]
|
||||
) ?? [];
|
||||
|
||||
formik.setFieldValue('ekspedisi', updatedEkspedisi);
|
||||
},
|
||||
[formik]
|
||||
);
|
||||
|
||||
const isRepeaterInputError = <T extends 'product' | 'ekspedisi'>(
|
||||
arrayName: T,
|
||||
@@ -201,7 +220,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className='w-full max-w-xl'>
|
||||
<section className='w-full max-w-5xl'>
|
||||
<FormHeader
|
||||
type={type}
|
||||
title='Movement'
|
||||
@@ -321,7 +340,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
||||
</thead>
|
||||
<tbody>
|
||||
{formik.values.product?.map((product, idx) => (
|
||||
<tr key={idx}>
|
||||
<tr key={`product-row-${idx}-${product.product_id}`}>
|
||||
<td>
|
||||
<SelectInput
|
||||
required
|
||||
@@ -422,7 +441,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
||||
</thead>
|
||||
<tbody>
|
||||
{formik.values.ekspedisi?.map((ekspedisi, idx) => (
|
||||
<tr key={idx}>
|
||||
<tr
|
||||
key={`ekspedisi-row-${idx}-${ekspedisi.product_id}-${ekspedisi.supplier_id}`}
|
||||
>
|
||||
<td>
|
||||
<SelectInput
|
||||
required
|
||||
|
||||
Reference in New Issue
Block a user