{fallbackText}
;
+ }
+
+ return null;
+}
+
+export default VendorLogo;
diff --git a/client/src/pages/filamentExport/index.tsx b/client/src/pages/filamentExport/index.tsx
new file mode 100644
index 000000000..c12fbfd59
--- /dev/null
+++ b/client/src/pages/filamentExport/index.tsx
@@ -0,0 +1,69 @@
+import { PageHeader } from "@refinedev/antd";
+import { useTranslate } from "@refinedev/core";
+import { theme } from "antd";
+import { Content } from "antd/es/layout/layout";
+import { useEffect, useMemo } from "react";
+import { useNavigate, useSearchParams } from "react-router";
+import FilamentQRCodeExportDialog from "../printing/filamentQrCodeExportDialog";
+
+const { useToken } = theme;
+
+export const FilamentExport = () => {
+ const { token } = useToken();
+ const t = useTranslate();
+ const [searchParams] = useSearchParams();
+ const navigate = useNavigate();
+
+ const filamentIds = searchParams.getAll("filaments").map(Number);
+ const returnUrl = searchParams.get("return");
+ const selectionPath = useMemo(() => {
+ const params = new URLSearchParams();
+ if (returnUrl) {
+ params.set("return", returnUrl);
+ }
+ const query = params.toString();
+ return `/filament/labels${query ? `?${query}` : ""}`;
+ }, [returnUrl]);
+
+ useEffect(() => {
+ if (filamentIds.length === 0) {
+ navigate(selectionPath, { replace: true });
+ }
+ }, [filamentIds.length, navigate, selectionPath]);
+
+ return (
+ <>
+ - (
<>
+ }
+ onClick={() => {
+ navigate("labels");
+ }}
+ >
+ {t("printing.qrcode.selectButton")}
+
}
diff --git a/client/src/pages/filaments/show.tsx b/client/src/pages/filaments/show.tsx
index 4bc6c66be..fe2c9eb03 100644
--- a/client/src/pages/filaments/show.tsx
+++ b/client/src/pages/filaments/show.tsx
@@ -1,15 +1,18 @@
import { DateField, NumberField, Show, TextField } from "@refinedev/antd";
import { useShow, useTranslate } from "@refinedev/core";
-import { Button, Typography } from "antd";
+import { PrinterOutlined } from "@ant-design/icons";
+import { Button, Col, Row, Typography } from "antd";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import { useNavigate } from "react-router";
import { ExtraFieldDisplay } from "../../components/extraFields";
import { NumberFieldUnit } from "../../components/numberField";
import SpoolIcon from "../../components/spoolIcon";
+import VendorLogo from "../../components/vendorLogo";
import { enrichText } from "../../utils/parsing";
import { EntityType, useGetFields } from "../../utils/queryFields";
import { useCurrencyFormatter } from "../../utils/settings";
+import { getBasePath, stripBasePath } from "../../utils/url";
import { IFilament } from "./model";
dayjs.extend(utc);
@@ -39,16 +42,19 @@ export const FilamentShow = () => {
});
};
- const gotoVendor = (): undefined => {
- const URL = `/vendor/show/${record?.vendor?.id}`;
- navigate(URL);
- };
-
const gotoSpools = (): undefined => {
const URL = `/spool#filters=[{"field":"filament.id","operator":"in","value":[${record?.id}]}]`;
navigate(URL);
};
+ const vendorURL = (item: IFilament) => {
+ if (!item.vendor) {
+ return null;
+ }
+ const url = `/vendor/show/${item.vendor.id}`;
+ return {item.vendor.name};
+ };
+
const colorObj = record?.multi_color_hexes
? {
colors: record.multi_color_hexes.split(","),
@@ -65,92 +71,130 @@ export const FilamentShow = () => {
+ }
+ href={
+ getBasePath() +
+ "/filament/labels?filaments=" +
+ record?.id +
+ "&return=" +
+ encodeURIComponent(stripBasePath(window.location.pathname))
+ }
+ >
+ {t("printing.qrcode.selectButton")}
+
{defaultButtons}
)}
>
-
+
+ )}
+
+
+ {item}
+
+ );
+ });
+
+ return (
+
+
+ );
+ });
+
+ const getPrintItems = () => {
+ const root = contentRef.current ?? document;
+ return Array.from(root.getElementsByClassName("print-qrcode-item"));
+ };
+
+ const downloadTextFile = (filename: string, content: string, mimeType: string) => {
+ const blob = new Blob([content], { type: mimeType });
+ const link = document.createElement("a");
+ link.href = URL.createObjectURL(blob);
+ link.download = filename;
+ link.click();
+ URL.revokeObjectURL(link.href);
+ };
+
+ const downloadBlobFile = (filename: string, blob: Blob) => {
+ const link = document.createElement("a");
+ link.href = URL.createObjectURL(blob);
+ link.download = filename;
+ link.click();
+ URL.revokeObjectURL(link.href);
+ };
+
+ const blobToDataUrl = async (blob: Blob) => {
+ return await new Promise
+
+ {/* Keep preview filenames outside the white label canvas so they stay readable in the
+ UI without becoming part of the exported PNG/AML image content. */}
+
+
+
+ {itemDivs}
+
+
+ {pagePreviewName}.{exportFormat}
+
+
+
+
+
+
+ {exportAsZip &&
+ {zipPreviewName}
}
+ {pages}
+
+
+
+
+ + {renderLabelContents(infoTemplate, filament)} +
+ ), + errorLevel: "H", + }))} + extraTitleSettings={ +