feat: print all barcodes for selected deal

This commit is contained in:
2024-09-28 19:47:15 +04:00
parent 196b4103e3
commit 943291c7d1
6 changed files with 88 additions and 20 deletions

View File

@@ -5,9 +5,6 @@
height: 100%;
}
.search-input {
}
.boards {
margin-top: 1rem;
flex: 1;
@@ -41,3 +38,7 @@
gap: rem(10);
display: flex;
}
.print-deals-button {
align-self: center;
}

View File

@@ -3,25 +3,23 @@ import styles from "./LeadsPage.module.css";
import Board from "../../../components/Dnd/Board/Board.tsx";
import { DragDropContext, Droppable, DropResult } from "@hello-pangea/dnd";
import { useDealSummaries } from "../hooks/useDealSummaries.tsx";
import {
DealStatus,
getDealStatusByName,
} from "../../../shared/enums/DealStatus.ts";
import { DealStatus, getDealStatusByName } from "../../../shared/enums/DealStatus.ts";
import PageBlock from "../../../components/PageBlock/PageBlock.tsx";
import DealEditDrawer from "../drawers/DealEditDrawer/DealEditDrawer.tsx";
import { DealPageContextProvider } from "../contexts/DealPageContext.tsx";
import { modals } from "@mantine/modals";
import { DealService, DealSummaryReorderRequest } from "../../../client";
import { ActionIcon, Flex, NumberInput, rem, Text } from "@mantine/core";
import { DealService, DealSummary, DealSummaryReorderRequest } from "../../../client";
import { ActionIcon, Flex, NumberInput, rem, Text, Tooltip } from "@mantine/core";
import classNames from "classnames";
import { notifications } from "../../../shared/lib/notifications.ts";
import { IconMenu2, IconMenuDeep } from "@tabler/icons-react";
import { IconBarcode, IconMenu2, IconMenuDeep } from "@tabler/icons-react";
import useDealsPageState from "../../DealsPage/hooks/useDealsPageState.tsx";
import DealStatusSelect from "../../DealsPage/components/DealStatusSelect/DealStatusSelect.tsx";
import BaseMarketplaceSelect from "../../../components/Selects/BaseMarketplaceSelect/BaseMarketplaceSelect.tsx";
import ClientSelectNew from "../../../components/Selects/ClientSelectNew/ClientSelectNew.tsx";
import DealsTable from "../../DealsPage/components/DealsTable/DealsTable.tsx";
import { motion } from "framer-motion";
import { base64ToBlob } from "../../../shared/lib/utils.ts";
enum DisplayMode {
BOARD,
@@ -37,6 +35,9 @@ export const LeadsPage: FC = () => {
DisplayMode.BOARD
);
const [isDragEnded, setIsDragEnded] = useState(true);
const [selectedDeals, setSelectedDeals] = useState<DealSummary[]>([]);
useEffect(() => {
setSummaries(summariesRaw);
}, [summariesRaw]);
@@ -151,7 +152,7 @@ export const LeadsPage: FC = () => {
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.2 }}>
<DealsTable items={data} />
<DealsTable items={data} onSelectionChange={setSelectedDeals} />
</motion.div>
);
};
@@ -182,7 +183,7 @@ export const LeadsPage: FC = () => {
summaries={summaries.filter(
summary =>
summary.status ==
DealStatus.AWAITING_ACCEPTANCE
DealStatus.AWAITING_ACCEPTANCE,
)}
title={"Ожидает приемки"}
droppableId={"AWAITING_ACCEPTANCE"}
@@ -191,7 +192,7 @@ export const LeadsPage: FC = () => {
<Board
summaries={summaries.filter(
summary =>
summary.status == DealStatus.PACKAGING
summary.status == DealStatus.PACKAGING,
)}
title={"Упаковка"}
droppableId={"PACKAGING"}
@@ -201,7 +202,7 @@ export const LeadsPage: FC = () => {
summaries={summaries.filter(
summary =>
summary.status ==
DealStatus.AWAITING_SHIPMENT
DealStatus.AWAITING_SHIPMENT,
)}
title={"Ожидает отгрузки"}
droppableId={"AWAITING_SHIPMENT"}
@@ -211,7 +212,7 @@ export const LeadsPage: FC = () => {
summaries={summaries.filter(
summary =>
summary.status ==
DealStatus.AWAITING_PAYMENT
DealStatus.AWAITING_PAYMENT,
)}
title={"Ожидает оплаты"}
droppableId={"AWAITING_PAYMENT"}
@@ -220,7 +221,7 @@ export const LeadsPage: FC = () => {
<Board
summaries={summaries.filter(
summary =>
summary.status == DealStatus.COMPLETED
summary.status == DealStatus.COMPLETED,
)}
title={"Завершена"}
droppableId={"COMPLETED"}
@@ -233,7 +234,7 @@ export const LeadsPage: FC = () => {
<div
className={classNames(
styles["delete"],
isDragEnded && styles["delete-hidden"]
isDragEnded && styles["delete-hidden"],
)}>
<Droppable droppableId={"DELETE"}>
{(provided, snapshot) => (
@@ -254,7 +255,7 @@ export const LeadsPage: FC = () => {
<div
className={classNames(
styles["delete"],
isDragEnded && styles["delete-hidden"]
isDragEnded && styles["delete-hidden"],
)}>
<Droppable droppableId={"SUCCESS"}>
{(provided, snapshot) => (
@@ -345,11 +346,44 @@ export const LeadsPage: FC = () => {
? "flex"
: "none",
}}>
{
selectedDeals.length === 1 &&
<Tooltip
className={styles["print-deals-button"]}
label={"Распечатать штрихкоды сделки"}
>
<ActionIcon
onClick={async () => {
const response =
await DealService.getDealProductsBarcodesPdf({
requestBody: {
dealId: selectedDeals[0].id,
},
});
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();
};
}}
variant={"default"}>
<IconBarcode />
</ActionIcon>
</Tooltip>
}
<NumberInput
min={1}
step={1}
placeholder={"Введите номер"}
{...form.getInputProps("id")}
hideControls
/>
<DealStatusSelect
onClear={() =>