130 lines
4.3 KiB
TypeScript
130 lines
4.3 KiB
TypeScript
import { useForm } from "@mantine/form";
|
||
import { ContextModalProps } from "@mantine/modals";
|
||
import { Button, Divider, Flex, NumberInput, rem, Stack } from "@mantine/core";
|
||
import ProductSelect from "../../../../../components/ProductSelect/ProductSelect.tsx";
|
||
import useScanning from "../../../hooks/useScanning.tsx";
|
||
import ScanBarcode from "../../ScanBarcode/ScanBarcode.tsx";
|
||
import { ProductSchema, ResidualBoxSchema, ResidualPalletSchema, ResiduesService } from "../../../../../client";
|
||
import { notifications } from "../../../../../shared/lib/notifications.ts";
|
||
import { ResidualModalForm } from "../../../../ResiduesPage/types/ResidualProductData.tsx";
|
||
|
||
|
||
type Props = {
|
||
clientId: number;
|
||
object: ResidualBoxSchema | ResidualPalletSchema;
|
||
fetchObject: () => void;
|
||
isBox: boolean;
|
||
}
|
||
|
||
const ReceiptModal = ({
|
||
context,
|
||
id,
|
||
innerProps,
|
||
}: ContextModalProps<Props>) => {
|
||
const {
|
||
clientId,
|
||
object,
|
||
fetchObject,
|
||
} = innerProps;
|
||
const { isScanning, setIsScanning, scannedValue, setScannedValue } = useScanning();
|
||
const initialValues = {
|
||
product: null,
|
||
quantity: 1,
|
||
};
|
||
const form = useForm<ResidualModalForm>({
|
||
initialValues,
|
||
validate: {
|
||
product: product => !product && "Необходимо выбрать товар",
|
||
quantity: quantity => (!quantity || quantity === 0) && "Слишком мало товара",
|
||
},
|
||
});
|
||
|
||
if (!object || !clientId) return;
|
||
|
||
const postProduct = (product: ProductSchema, quantity: number) => {
|
||
ResiduesService.createResidualProduct({
|
||
requestBody: {
|
||
data: {
|
||
productId: product.id,
|
||
quantity,
|
||
palletId: innerProps.isBox ? null : object.id,
|
||
boxId: innerProps.isBox ? object.id : null,
|
||
},
|
||
},
|
||
})
|
||
.then(({ ok, message }) => {
|
||
notifications.guess(ok, { message });
|
||
fetchObject();
|
||
if (ok) context.closeContextModal(id);
|
||
})
|
||
.catch(err => console.log(err));
|
||
};
|
||
|
||
const onProductAfterScanningSelect = (product?: ProductSchema) => {
|
||
if (!product) {
|
||
setScannedValue("");
|
||
return;
|
||
}
|
||
|
||
const productIdx = object.residualProducts.findIndex(p => p.product.id === product.id);
|
||
if (productIdx === -1) {
|
||
form.setFieldValue("product", product);
|
||
} else {
|
||
postProduct(product, 1);
|
||
}
|
||
setScannedValue("");
|
||
};
|
||
|
||
const onSubmit = () => {
|
||
postProduct(form.values.product!, form.values.quantity!);
|
||
form.reset();
|
||
};
|
||
|
||
return (
|
||
<Flex
|
||
direction={"column"}
|
||
gap={rem(10)}
|
||
>
|
||
<form onSubmit={form.onSubmit(() => onSubmit())}>
|
||
<Stack gap={rem(10)}>
|
||
<Divider />
|
||
<ProductSelect
|
||
label={"Товар"}
|
||
placeholder={"Выберите товар"}
|
||
{...form.getInputProps("product")}
|
||
clientId={clientId}
|
||
disabled={isScanning}
|
||
/>
|
||
<NumberInput
|
||
label={"Количество"}
|
||
hideControls
|
||
{...form.getInputProps("quantity")}
|
||
min={1}
|
||
defaultValue={1}
|
||
disabled={isScanning}
|
||
/>
|
||
<Button
|
||
variant={"default"}
|
||
type={"submit"}
|
||
disabled={isScanning}
|
||
>
|
||
Добавить
|
||
</Button>
|
||
<Divider />
|
||
</Stack>
|
||
</form>
|
||
|
||
<ScanBarcode
|
||
clientId={clientId}
|
||
isScanning={isScanning}
|
||
setIsScanning={setIsScanning}
|
||
onProductSelect={onProductAfterScanningSelect}
|
||
scannedValue={scannedValue}
|
||
object={object}
|
||
/>
|
||
</Flex>
|
||
);
|
||
};
|
||
|
||
export default ReceiptModal;
|