{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}
)}
>
-
+
+ )}
+
+ , title:
- void;
+ style?: string;
+ extraSettings?: ReactElement;
+ extraSettingsStart?: ReactElement;
+ extraFormatSettings?: ReactElement;
+ extraButtons?: ReactElement;
+ zipFileTypeName: string;
+}
+
+// Render one preview page per exported label and reuse that DOM for PNG/AML generation so preview stays authoritative.
+const ExportDialog = ({
+ items,
+ printSettings,
+ setPrintSettings,
+ style,
+ extraSettings,
+ extraSettingsStart,
+ extraFormatSettings,
+ extraButtons,
+ zipFileTypeName,
+}: ExportDialogProps) => {
+ const t = useTranslate();
+
+ const [collapseState, setCollapseState] = useSavedState
+
+ );
+ });
+
+ return (
+
+ {previewName}.{exportFormat}
+
+ {item}
+
+
+ );
+ });
+
+ 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 escapeXml = (value: string) => {
+ return value
+ .replace(/&/g, "&")
+ .replace(//g, ">")
+ .replace(/"/g, """)
+ .replace(/'/g, "'");
+ };
+
+ const buildAmlPageXml = (width: number, height: number, base64Png: string) => {
+ const id = Math.floor(Math.random() * 2 ** 31);
+ const objectId = Math.floor(Math.random() * 2 ** 31);
+ return `
+
+
+ {itemDivs}
+
+
+
+
+
+
+ {pages}
+
+
+
+
+
+
+ {hasUnsavedChanges && Unsaved Preset Changes }
+
+