refactor(FE): Refactor InventoryAdjustmentForm to remove 'edit' type

handling
This commit is contained in:
rstubryan
2026-02-26 12:07:14 +07:00
parent e98c49ac5a
commit 75463326e3
@@ -47,7 +47,7 @@ import {
import NumberInput from '@/components/input/NumberInput';
interface InventoryAdjustmentFormProps {
type?: 'add' | 'edit' | 'detail';
type?: 'add' | 'detail';
initialValues?: InventoryAdjustment;
}
@@ -181,27 +181,6 @@ const InventoryAdjustmentForm = ({
? projectFlockKandangLookupData.data
: undefined;
const projectFlockKandangDetailUrl = useMemo(() => {
if (type !== 'edit' || !initialValues?.project_flock_kandang_id)
return null;
return `${ProjectFlockKandangApi.basePath}/${initialValues.project_flock_kandang_id}`;
}, [type, initialValues?.project_flock_kandang_id]);
const { data: projectFlockKandangDetailData } = useSWR(
projectFlockKandangDetailUrl,
projectFlockKandangDetailUrl
? () =>
ProjectFlockKandangApi.getAllFetcher(
projectFlockKandangDetailUrl
) as Promise<BaseApiResponse<ProjectFlockKandang>>
: null
);
const projectFlockKandangDetail =
projectFlockKandangDetailData?.status === 'success'
? projectFlockKandangDetailData.data
: undefined;
const {
setInputValue: setProductInputValue,
options: productOptions,
@@ -228,74 +207,18 @@ const InventoryAdjustmentForm = ({
.filter((pfk) => pfk.project_flock_id === selectedProjectFlock.value)
.map((pfk) => pfk.kandang_id);
options = kandangOptionsFromApi.filter((kandang) => {
if (type === 'add') {
return approvedKandangIds.includes(kandang.value as number);
}
return true;
});
}
if (projectFlockKandangDetail && type === 'edit') {
const currentKandang = projectFlockKandangDetail.kandang;
if (
currentKandang &&
!options.find((opt) => opt.value === currentKandang.id)
) {
options.push({
value: currentKandang.id,
label: currentKandang.name || '',
});
}
options = kandangOptionsFromApi.filter((kandang) =>
approvedKandangIds.includes(kandang.value as number)
);
}
return options;
}, [
selectedProjectFlock,
kandangOptionsFromApi,
projectFlockKandangDetail,
type,
approvedProjectFlockKandangs,
]);
const enhancedLocationOptions = useMemo(() => {
const options = [...locationOptions];
if (projectFlockKandangDetail && (type === 'edit' || type === 'detail')) {
const currentLocation = projectFlockKandangDetail.project_flock.location;
if (
currentLocation &&
!options.find((opt) => opt.value === currentLocation.id)
) {
options.push({
value: currentLocation.id,
label: currentLocation.name || '',
});
}
}
return options;
}, [locationOptions, projectFlockKandangDetail, type]);
const enhancedProjectFlockOptions = useMemo(() => {
const options = [...projectFlockOptions];
if (projectFlockKandangDetail && (type === 'edit' || type === 'detail')) {
const currentProjectFlock = projectFlockKandangDetail.project_flock;
if (
currentProjectFlock &&
!options.find((opt) => opt.value === currentProjectFlock.id)
) {
options.push({
value: currentProjectFlock.id,
label: currentProjectFlock.flock_name || '',
});
}
}
return options;
}, [projectFlockOptions, projectFlockKandangDetail, type]);
const formikInitialValues = useMemo<Partial<InventoryAdjustmentFormValues>>(
() => ({
location: null,
@@ -325,7 +248,7 @@ const InventoryAdjustmentForm = ({
validateOnBlur: true,
onSubmit: async (values) => {
setInventoryAdjustmentFormErrorMessage('');
const payload: CreateInventoryAdjustmentPayload = {
const payload = {
project_flock_kandang_id: values.project_flock_kandang_id,
product_id: values.product_id,
transaction_subtype: values.transaction_subtype,
@@ -511,126 +434,6 @@ const InventoryAdjustmentForm = ({
}
}, [projectFlockKandangLookup, formik.values.project_flock_kandang_id]);
useEffect(() => {
if (initialValues && type === 'edit') {
const transactionSubtype = initialValues.transaction_subtype;
let transactionType = '';
if (transactionSubtype === 'PURCHASE_IN') {
transactionType = 'PEMBELIAN';
} else if (transactionSubtype === 'MARKETING_OUT') {
transactionType = 'PENJUALAN';
} else if (transactionSubtype?.startsWith('RECORDING')) {
transactionType = 'RECORDING';
}
if (initialValues.location) {
const locationOption = {
value: initialValues.location.id,
label: initialValues.location.name,
};
setSelectedLocation(locationOption);
setSelectedProjectFlockLocationId(initialValues.location.id.toString());
}
if (initialValues.project_flock) {
const projectFlockOption = {
value: initialValues.project_flock.id,
label: initialValues.project_flock.flock_name,
};
setSelectedProjectFlock(projectFlockOption);
}
if (projectFlockKandangDetail) {
const kandangOption = {
value: projectFlockKandangDetail.kandang.id,
label: projectFlockKandangDetail.kandang.name || '',
};
setSelectedKandang(kandangOption);
}
if (initialValues.product_warehouse?.product) {
const productOption = {
value: initialValues.product_warehouse.product.id,
label: initialValues.product_warehouse.product.name,
};
setSelectedProduct(productOption);
}
if (transactionType) {
const typeOption = {
value: transactionType,
label:
TRANSACTION_TYPE_OPTIONS.find(
(opt) => opt.value === transactionType
)?.label || '',
};
setSelectedTransactionType(typeOption);
}
if (transactionSubtype) {
let subtypeLabel = '';
if (transactionSubtype === 'PURCHASE_IN') {
subtypeLabel = TRANSACTION_SUBTYPE_OPTIONS.PEMBELIAN.label;
} else if (transactionSubtype === 'MARKETING_OUT') {
subtypeLabel = TRANSACTION_SUBTYPE_OPTIONS.PENJUALAN.label;
} else {
subtypeLabel =
TRANSACTION_SUBTYPE_OPTIONS.RECORDING.find(
(opt) => opt.value === transactionSubtype
)?.label || '';
}
setSelectedTransactionSubtype({
value: transactionSubtype,
label: subtypeLabel,
});
}
formik.setValues({
location: initialValues.location
? {
value: initialValues.location.id,
label: initialValues.location.name,
}
: null,
location_id: initialValues.location?.id ?? 0,
project_flock: initialValues.project_flock
? {
value: initialValues.project_flock.id,
label: initialValues.project_flock.flock_name,
}
: null,
project_flock_id: initialValues.project_flock?.id ?? 0,
kandang: projectFlockKandangDetail?.kandang
? {
value: projectFlockKandangDetail.kandang.id,
label: projectFlockKandangDetail.kandang.name || '',
}
: null,
kandang_id: projectFlockKandangDetail?.kandang?.id ?? 0,
project_flock_kandang: initialValues.project_flock_kandang_id
? {
value: initialValues.project_flock_kandang_id,
label: `${initialValues.project_flock?.flock_name || ''} - ${projectFlockKandangDetail?.kandang?.name || ''}`,
}
: null,
project_flock_kandang_id: initialValues.project_flock_kandang_id ?? 0,
product: initialValues.product_warehouse?.product
? {
value: initialValues.product_warehouse.product.id,
label: initialValues.product_warehouse.product.name,
}
: null,
product_id: initialValues.product_warehouse?.product?.id ?? 0,
transaction_type: transactionType,
transaction_subtype: transactionSubtype,
qty: initialValues.qty ?? '',
price: initialValues.price ?? '',
notes: initialValues.notes ?? '',
});
}
}, [formik.setValues, initialValues, projectFlockKandangDetail, type]);
useEffect(() => {
if (initialValues && type === 'detail') {
const transactionSubtype = initialValues.transaction_subtype;
@@ -757,7 +560,7 @@ const InventoryAdjustmentForm = ({
value={selectedLocation}
onChange={locationChangeHandler}
onInputChange={setLocationInputValue}
options={enhancedLocationOptions}
options={locationOptions}
onMenuScrollToBottom={loadMoreLocations}
isLoading={isLoadingLocationOptions}
isError={
@@ -777,7 +580,7 @@ const InventoryAdjustmentForm = ({
value={selectedProjectFlock}
onChange={projectFlockChangeHandler}
onInputChange={setProjectFlockInputValue}
options={enhancedProjectFlockOptions}
options={projectFlockOptions}
onMenuScrollToBottom={loadMoreProjectFlocks}
isLoading={isLoadingProjectFlockOptions}
isError={