61 lines
1.9 KiB
TypeScript
61 lines
1.9 KiB
TypeScript
import { ContextModalProps } from "@mantine/modals";
|
||
import { Button, Flex, rem, TextInput } from "@mantine/core";
|
||
import { useEffect, useState } from "react";
|
||
import { ProductService } from "../../client";
|
||
|
||
type Props = {
|
||
productId: number;
|
||
onSubmit: (barcode: string) => void;
|
||
};
|
||
const PrintBarcodeModal = ({
|
||
id,
|
||
context,
|
||
innerProps,
|
||
}: ContextModalProps<Props>) => {
|
||
const { productId, onSubmit } = innerProps;
|
||
const [barcode, setBarcode] = useState<string | undefined>();
|
||
const [isBarcodeExist, setIsBarcodeExist] = useState<boolean>(true);
|
||
|
||
const getErrorMessage = () => {
|
||
if (!barcode) return "Штрихкод не может быть пустым";
|
||
if (isBarcodeExist) return "Штрихкод уже существует";
|
||
return undefined;
|
||
};
|
||
useEffect(() => {
|
||
if (!barcode) return;
|
||
ProductService.existsProductBarcode({
|
||
productId: innerProps.productId,
|
||
barcode: barcode.trim(),
|
||
}).then(response => {
|
||
setIsBarcodeExist(response.exists);
|
||
});
|
||
}, [productId, barcode]);
|
||
|
||
const onSubmitClick = () => {
|
||
if (!barcode || isBarcodeExist) return;
|
||
onSubmit(barcode.trim());
|
||
context.closeModal(id);
|
||
};
|
||
return (
|
||
<Flex
|
||
gap={rem(10)}
|
||
direction={"column"}>
|
||
<TextInput
|
||
required
|
||
error={getErrorMessage()}
|
||
label={"Штрихкод"}
|
||
placeholder={"Введите или отсканируйте штрихкод"}
|
||
value={barcode}
|
||
onChange={event => setBarcode(event.currentTarget.value)}
|
||
/>
|
||
<Button
|
||
onClick={onSubmitClick}
|
||
disabled={!barcode || isBarcodeExist}>
|
||
Добавить
|
||
</Button>
|
||
</Flex>
|
||
);
|
||
};
|
||
|
||
export default PrintBarcodeModal;
|