mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-25 15:55:48 +00:00
refactor(FE): Refactor InventoryAdjustmentForm to remove 'edit' type
handling
This commit is contained in:
@@ -47,7 +47,7 @@ import {
|
|||||||
import NumberInput from '@/components/input/NumberInput';
|
import NumberInput from '@/components/input/NumberInput';
|
||||||
|
|
||||||
interface InventoryAdjustmentFormProps {
|
interface InventoryAdjustmentFormProps {
|
||||||
type?: 'add' | 'edit' | 'detail';
|
type?: 'add' | 'detail';
|
||||||
initialValues?: InventoryAdjustment;
|
initialValues?: InventoryAdjustment;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -181,27 +181,6 @@ const InventoryAdjustmentForm = ({
|
|||||||
? projectFlockKandangLookupData.data
|
? projectFlockKandangLookupData.data
|
||||||
: undefined;
|
: 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 {
|
const {
|
||||||
setInputValue: setProductInputValue,
|
setInputValue: setProductInputValue,
|
||||||
options: productOptions,
|
options: productOptions,
|
||||||
@@ -228,74 +207,18 @@ const InventoryAdjustmentForm = ({
|
|||||||
.filter((pfk) => pfk.project_flock_id === selectedProjectFlock.value)
|
.filter((pfk) => pfk.project_flock_id === selectedProjectFlock.value)
|
||||||
.map((pfk) => pfk.kandang_id);
|
.map((pfk) => pfk.kandang_id);
|
||||||
|
|
||||||
options = kandangOptionsFromApi.filter((kandang) => {
|
options = kandangOptionsFromApi.filter((kandang) =>
|
||||||
if (type === 'add') {
|
approvedKandangIds.includes(kandang.value as number)
|
||||||
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 || '',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return options;
|
return options;
|
||||||
}, [
|
}, [
|
||||||
selectedProjectFlock,
|
selectedProjectFlock,
|
||||||
kandangOptionsFromApi,
|
kandangOptionsFromApi,
|
||||||
projectFlockKandangDetail,
|
|
||||||
type,
|
|
||||||
approvedProjectFlockKandangs,
|
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>>(
|
const formikInitialValues = useMemo<Partial<InventoryAdjustmentFormValues>>(
|
||||||
() => ({
|
() => ({
|
||||||
location: null,
|
location: null,
|
||||||
@@ -325,7 +248,7 @@ const InventoryAdjustmentForm = ({
|
|||||||
validateOnBlur: true,
|
validateOnBlur: true,
|
||||||
onSubmit: async (values) => {
|
onSubmit: async (values) => {
|
||||||
setInventoryAdjustmentFormErrorMessage('');
|
setInventoryAdjustmentFormErrorMessage('');
|
||||||
const payload: CreateInventoryAdjustmentPayload = {
|
const payload = {
|
||||||
project_flock_kandang_id: values.project_flock_kandang_id,
|
project_flock_kandang_id: values.project_flock_kandang_id,
|
||||||
product_id: values.product_id,
|
product_id: values.product_id,
|
||||||
transaction_subtype: values.transaction_subtype,
|
transaction_subtype: values.transaction_subtype,
|
||||||
@@ -511,126 +434,6 @@ const InventoryAdjustmentForm = ({
|
|||||||
}
|
}
|
||||||
}, [projectFlockKandangLookup, formik.values.project_flock_kandang_id]);
|
}, [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(() => {
|
useEffect(() => {
|
||||||
if (initialValues && type === 'detail') {
|
if (initialValues && type === 'detail') {
|
||||||
const transactionSubtype = initialValues.transaction_subtype;
|
const transactionSubtype = initialValues.transaction_subtype;
|
||||||
@@ -757,7 +560,7 @@ const InventoryAdjustmentForm = ({
|
|||||||
value={selectedLocation}
|
value={selectedLocation}
|
||||||
onChange={locationChangeHandler}
|
onChange={locationChangeHandler}
|
||||||
onInputChange={setLocationInputValue}
|
onInputChange={setLocationInputValue}
|
||||||
options={enhancedLocationOptions}
|
options={locationOptions}
|
||||||
onMenuScrollToBottom={loadMoreLocations}
|
onMenuScrollToBottom={loadMoreLocations}
|
||||||
isLoading={isLoadingLocationOptions}
|
isLoading={isLoadingLocationOptions}
|
||||||
isError={
|
isError={
|
||||||
@@ -777,7 +580,7 @@ const InventoryAdjustmentForm = ({
|
|||||||
value={selectedProjectFlock}
|
value={selectedProjectFlock}
|
||||||
onChange={projectFlockChangeHandler}
|
onChange={projectFlockChangeHandler}
|
||||||
onInputChange={setProjectFlockInputValue}
|
onInputChange={setProjectFlockInputValue}
|
||||||
options={enhancedProjectFlockOptions}
|
options={projectFlockOptions}
|
||||||
onMenuScrollToBottom={loadMoreProjectFlocks}
|
onMenuScrollToBottom={loadMoreProjectFlocks}
|
||||||
isLoading={isLoadingProjectFlockOptions}
|
isLoading={isLoadingProjectFlockOptions}
|
||||||
isError={
|
isError={
|
||||||
|
|||||||
Reference in New Issue
Block a user