mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-25 15:55:48 +00:00
refactor(FE): Use useSelect for warehouse options
This commit is contained in:
@@ -67,12 +67,6 @@ const PurchaseRequestForm = ({
|
|||||||
const [selectedLocation, setSelectedLocation] = useState('');
|
const [selectedLocation, setSelectedLocation] = useState('');
|
||||||
const [disabledLocation, setDisabledLocation] = useState(true);
|
const [disabledLocation, setDisabledLocation] = useState(true);
|
||||||
|
|
||||||
// ===== TYPE DEFINITIONS =====
|
|
||||||
interface ProductOptionType {
|
|
||||||
value: number;
|
|
||||||
label: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ===== UTILITY FUNCTIONS =====
|
// ===== UTILITY FUNCTIONS =====
|
||||||
const isRepeaterInputError = (
|
const isRepeaterInputError = (
|
||||||
idx: number,
|
idx: number,
|
||||||
@@ -179,8 +173,20 @@ const PurchaseRequestForm = ({
|
|||||||
const {
|
const {
|
||||||
inputValue: warehouseSelectInputValue,
|
inputValue: warehouseSelectInputValue,
|
||||||
setInputValue: setWarehouseSelectInputValue,
|
setInputValue: setWarehouseSelectInputValue,
|
||||||
|
options: warehouseOptions,
|
||||||
isLoadingOptions: isLoadingWarehouses,
|
isLoadingOptions: isLoadingWarehouses,
|
||||||
} = useSelect(WarehouseApi.basePath, 'id', 'name', 'search');
|
loadMore: loadMoreWarehouses,
|
||||||
|
hasMore: hasMoreWarehouses,
|
||||||
|
} = useSelect(WarehouseApi.basePath, 'id', 'name', 'search', {
|
||||||
|
area_id:
|
||||||
|
selectedArea != ''
|
||||||
|
? selectedArea
|
||||||
|
: ((initialValues?.area?.id ?? '') as string),
|
||||||
|
location_id:
|
||||||
|
selectedLocation != ''
|
||||||
|
? selectedLocation
|
||||||
|
: ((initialValues?.location?.id ?? '') as string),
|
||||||
|
});
|
||||||
|
|
||||||
// ===== FORM CONFIGURATION =====
|
// ===== FORM CONFIGURATION =====
|
||||||
const formikInitialValues = useMemo<PurchaseRequestFormValues>(
|
const formikInitialValues = useMemo<PurchaseRequestFormValues>(
|
||||||
@@ -283,45 +289,6 @@ const PurchaseRequestForm = ({
|
|||||||
return data;
|
return data;
|
||||||
}, [supplierData]);
|
}, [supplierData]);
|
||||||
|
|
||||||
const warehousesUrl = useMemo(() => {
|
|
||||||
const params = new URLSearchParams({ search: warehouseSelectInputValue });
|
|
||||||
|
|
||||||
if (formik.values.area_id && formik.values.area_id > 0) {
|
|
||||||
params.append('area_id', formik.values.area_id.toString());
|
|
||||||
}
|
|
||||||
|
|
||||||
if (formik.values.location_id && formik.values.location_id > 0) {
|
|
||||||
params.append('location_id', formik.values.location_id.toString());
|
|
||||||
}
|
|
||||||
|
|
||||||
return `${WarehouseApi.basePath}?${params.toString()}`;
|
|
||||||
}, [
|
|
||||||
warehouseSelectInputValue,
|
|
||||||
formik.values.area_id,
|
|
||||||
formik.values.location_id,
|
|
||||||
]);
|
|
||||||
|
|
||||||
const { data: warehouses } = useSWR(
|
|
||||||
warehousesUrl,
|
|
||||||
WarehouseApi.getAllFetcher
|
|
||||||
);
|
|
||||||
|
|
||||||
const warehouseOptions = useMemo(() => {
|
|
||||||
if (!isResponseSuccess(warehouses)) return [];
|
|
||||||
|
|
||||||
return (
|
|
||||||
warehouses?.data.map((w) => ({
|
|
||||||
value: w.id,
|
|
||||||
label: w.name,
|
|
||||||
area: w.area?.name,
|
|
||||||
location:
|
|
||||||
'type' in w && (w.type === 'LOKASI' || w.type === 'KANDANG')
|
|
||||||
? w.location?.name
|
|
||||||
: undefined,
|
|
||||||
})) || []
|
|
||||||
);
|
|
||||||
}, [warehouses]);
|
|
||||||
|
|
||||||
const addPurchaseItem = () => {
|
const addPurchaseItem = () => {
|
||||||
const newItems = [
|
const newItems = [
|
||||||
...(formik.values.items || []),
|
...(formik.values.items || []),
|
||||||
@@ -733,6 +700,7 @@ const PurchaseRequestForm = ({
|
|||||||
options={warehouseOptions}
|
options={warehouseOptions}
|
||||||
onInputChange={setWarehouseSelectInputValue}
|
onInputChange={setWarehouseSelectInputValue}
|
||||||
isLoading={isLoadingWarehouses}
|
isLoading={isLoadingWarehouses}
|
||||||
|
onMenuScrollToBottom={loadMoreWarehouses}
|
||||||
isError={
|
isError={
|
||||||
isRepeaterInputError(idx, 'warehouse_id').isError
|
isRepeaterInputError(idx, 'warehouse_id').isError
|
||||||
}
|
}
|
||||||
@@ -752,9 +720,9 @@ const PurchaseRequestForm = ({
|
|||||||
required
|
required
|
||||||
value={item.product ?? undefined}
|
value={item.product ?? undefined}
|
||||||
onChange={(val) => {
|
onChange={(val) => {
|
||||||
const product = val as ProductOptionType | null;
|
const product = val as OptionType | null;
|
||||||
const productId =
|
const productId =
|
||||||
(product as ProductOptionType)?.value || 0;
|
(product as OptionType)?.value || 0;
|
||||||
|
|
||||||
formik.setFieldTouched(
|
formik.setFieldTouched(
|
||||||
`items.${idx}.product`,
|
`items.${idx}.product`,
|
||||||
|
|||||||
Reference in New Issue
Block a user