feat: barcodes printing
This commit is contained in:
@ -0,0 +1,97 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import { Flex, NumberInput, Select } from "@mantine/core";
|
||||
import { ContextModalProps } from "@mantine/modals";
|
||||
import InlineButton from "@/components/ui/InlineButton/InlineButton";
|
||||
import { ProductSchema } from "@/lib/client";
|
||||
import { getProductBarcodePdfMutation } from "@/lib/client/@tanstack/react-query.gen";
|
||||
import { notifications } from "@/lib/notifications";
|
||||
import base64ToBlob from "@/utils/base64ToBlob";
|
||||
|
||||
type Props = {
|
||||
product: ProductSchema;
|
||||
defaultQuantity?: number;
|
||||
};
|
||||
|
||||
const PrintBarcodeModal = ({ innerProps }: ContextModalProps<Props>) => {
|
||||
const { product, defaultQuantity = 1 } = innerProps;
|
||||
const [quantity, setQuantity] = useState(defaultQuantity);
|
||||
const [barcode, setBarcode] = useState<string | null>(null);
|
||||
const [barcodeImageUrl, setBarcodeImageUrl] = useState<
|
||||
string | undefined
|
||||
>();
|
||||
|
||||
const getBarcodePdfMutation = useMutation({
|
||||
...getProductBarcodePdfMutation(),
|
||||
onSuccess: response => {
|
||||
const pdfBlob = base64ToBlob(
|
||||
response.base64String,
|
||||
response.mimeType
|
||||
);
|
||||
const pdfUrl = URL.createObjectURL(pdfBlob);
|
||||
const pdfWindow = window.open(pdfUrl);
|
||||
if (!pdfWindow) {
|
||||
notifications.error({ message: "Ошибка" });
|
||||
return;
|
||||
}
|
||||
pdfWindow.onload = () => pdfWindow.print();
|
||||
},
|
||||
});
|
||||
|
||||
const printBarcode = () => {
|
||||
if (!barcode) return;
|
||||
getBarcodePdfMutation.mutate({
|
||||
body: {
|
||||
barcode,
|
||||
quantity,
|
||||
productId: product.id,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Flex
|
||||
gap={"xs"}
|
||||
direction={"column"}>
|
||||
{barcodeImageUrl ? (
|
||||
<object
|
||||
style={{
|
||||
alignSelf: "center",
|
||||
aspectRatio:
|
||||
product.barcodeTemplate.size.width /
|
||||
product.barcodeTemplate.size.height,
|
||||
width: "240px",
|
||||
}}
|
||||
data={barcodeImageUrl}>
|
||||
Ошибка загрузки штрихкода
|
||||
</object>
|
||||
) : (
|
||||
<Select
|
||||
value={barcode}
|
||||
onChange={value => setBarcode(value)}
|
||||
data={product?.barcodes}
|
||||
label={"Штрихкод"}
|
||||
placeholder={"Выберите штрихкод"}
|
||||
/>
|
||||
)}
|
||||
<NumberInput
|
||||
label={"Количество копий"}
|
||||
placeholder={"Введите количество копий"}
|
||||
value={quantity}
|
||||
onChange={value => setQuantity(Number(value))}
|
||||
allowNegative={false}
|
||||
min={1}
|
||||
/>
|
||||
<InlineButton
|
||||
disabled={!barcode}
|
||||
mt={"xs"}
|
||||
onClick={printBarcode}>
|
||||
Печать
|
||||
</InlineButton>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default PrintBarcodeModal;
|
||||
@ -4,3 +4,4 @@ export { default as DuplicateServicesModal } from "@/modules/dealModularEditorTa
|
||||
export { default as DealServiceEditorModal } from "@/modules/dealModularEditorTabs/FulfillmentBase/shared/modals/DealServiceEditorModal/DealServiceEditorModal";
|
||||
export { default as DealProductEditorModal } from "@/modules/dealModularEditorTabs/FulfillmentBase/shared/modals/DealProductEditorModal/DealProductEditorModal";
|
||||
export { default as ProductServiceEditorModal } from "@/modules/dealModularEditorTabs/FulfillmentBase/shared/modals/ProductServiceEditorModal/ProductServiceEditorModal";
|
||||
export { default as PrintBarcodeModal } from "@/modules/dealModularEditorTabs/FulfillmentBase/shared/modals/PrintBarcodeModal/PrintBarcodeModal";
|
||||
|
||||
Reference in New Issue
Block a user