fix: product barcode image showing

This commit is contained in:
2025-10-30 15:41:13 +04:00
parent 9207bd915d
commit 0c2fca2c23
2 changed files with 10 additions and 155 deletions

View File

@ -1,148 +0,0 @@
import { CRUDTableProps } from "../../../../../types/CRUDTable.tsx";
import { CardService, CardServiceSchema, CardProductSchema } from "../../../../../client";
import { useCardPageContext } from "../../../../../pages/CardsPage/contexts/CardPageContext.tsx";
import { notifications } from "../../../../../shared/lib/notifications.ts";
const useCardState = () => {
const { selectedCard, setSelectedCard } = useCardPageContext();
const recalculate = async () => {
return CardService.recalculateCardPrice({
requestBody: {
cardId: selectedCard?.id || -1,
},
});
};
const refetchCard = async () => {
if (!selectedCard) return;
return CardService.getCardById({ cardId: selectedCard.id }).then(
async card => {
setSelectedCard(card);
},
);
};
const refetch = async () => {
if (!selectedCard) return;
await refetchCard();
const { ok, message } = await recalculate();
if (!ok) notifications.guess(ok, { message });
await refetchCard();
};
return {
card: selectedCard,
refetch,
};
};
const useCardServicesState = (): CRUDTableProps<CardServiceSchema> => {
const { card, refetch } = useCardState();
const refetchAndRecalculate = async () => {
await refetch();
};
const onCreate = (item: CardServiceSchema) => {
if (!card) return;
CardService.addCardService({
requestBody: {
cardId: card.id,
serviceId: item.service.id,
quantity: item.quantity,
price: item.price,
},
}).then(async ({ ok, message }) => {
if (!ok) notifications.guess(ok, { message });
if (ok) await refetchAndRecalculate();
});
};
const onDelete = (item: CardServiceSchema) => {
if (!card) return;
CardService.deleteCardService({
requestBody: {
cardId: card.id,
serviceId: item.service.id,
},
}).then(async ({ ok, message }) => {
if (!ok) notifications.guess(ok, { message });
if (ok) await refetchAndRecalculate();
});
};
const onChange = (item: CardServiceSchema) => {
if (!card) return;
CardService.updateCardService({
requestBody: {
cardId: card.id,
service: item,
},
}).then(async ({ ok, message }) => {
if (!ok) notifications.guess(ok, { message });
if (ok) await refetchAndRecalculate();
});
};
return {
items: card?.services || [],
onCreate,
onDelete,
onChange,
};
};
const useDealProductsState = (): CRUDTableProps<CardProductSchema> => {
const { card, refetch } = useCardState();
const refetchAndRecalculate = async () => {
await refetch();
};
const onCreate = (item: CardProductSchema) => {
if (!card) return;
CardService.addCardProduct({
requestBody: {
cardId: card.id,
product: item,
},
}).then(async ({ ok, message }) => {
if (!ok) notifications.guess(ok, { message });
if (ok) await refetchAndRecalculate();
});
};
const onDelete = (item: CardProductSchema) => {
if (!card) return;
CardService.deleteCardProduct({
requestBody: {
cardId: card.id,
productId: item.product.id,
},
}).then(async ({ ok, message }) => {
if (!ok) notifications.guess(ok, { message });
if (ok) await refetchAndRecalculate();
});
};
const onChange = (item: CardProductSchema) => {
if (!card) return;
CardService.updateCardProduct({
requestBody: {
cardId: card.id,
product: item,
},
}).then(async ({ ok, message }) => {
if (!ok) notifications.guess(ok, { message });
if (ok) await refetchAndRecalculate();
});
};
return {
items: card?.products || [],
onCreate,
onDelete,
onChange,
};
};
const useCardProductAndServiceTabState = () => {
const cardState = useCardState();
const cardProductsState = useDealProductsState();
const cardServicesState = useCardServicesState();
return {
cardState,
cardProductsState,
cardServicesState,
};
};
export default useCardProductAndServiceTabState;

View File

@ -1,6 +1,6 @@
"use client";
import { useState } from "react";
import { useEffect, useState } from "react";
import { useMutation } from "@tanstack/react-query";
import { Flex, NumberInput, Select } from "@mantine/core";
import { ContextModalProps } from "@mantine/modals";
@ -19,9 +19,6 @@ 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(),
@ -51,11 +48,17 @@ const PrintBarcodeModal = ({ innerProps }: ContextModalProps<Props>) => {
});
};
useEffect(() => {
if (product.barcodes?.length === 1) {
setBarcode(product.barcodes[0]);
}
}, [product]);
return (
<Flex
gap={"xs"}
direction={"column"}>
{barcodeImageUrl ? (
{product.barcodeImageUrl ? (
<object
style={{
alignSelf: "center",
@ -64,7 +67,7 @@ const PrintBarcodeModal = ({ innerProps }: ContextModalProps<Props>) => {
product.barcodeTemplate.size.height,
width: "240px",
}}
data={barcodeImageUrl}>
data={product.barcodeImageUrl}>
Ошибка загрузки штрихкода
</object>
) : (
@ -85,7 +88,7 @@ const PrintBarcodeModal = ({ innerProps }: ContextModalProps<Props>) => {
min={1}
/>
<InlineButton
disabled={!barcode}
disabled={!barcode && !product.barcodeImageUrl}
mt={"xs"}
onClick={printBarcode}>
Печать