Added ability to select and create multiple label settings

client/package-lock.json

@@ -18,6 +18,7 @@
         "@tanstack/react-query": "^4.36.1",
         "@tanstack/react-query-devtools": "^4.36.1",
         "@types/loadable__component": "^5.13.9",
+        "@types/uuid": "^9.0.8",
         "@yudiel/react-qr-scanner": "^1.2.10",
         "antd": "^5.12.2",
         "axios": "^1.6.8",
@@ -30,6 +31,7 @@
         "react-i18next": "^14.1.1",
         "react-router-dom": "^6.23.0",
         "react-to-print": "^2.15.1",
+        "uuid": "^10.0.0",
         "vite-plugin-svgr": "^4.2.0"
       },
       "devDependencies": {
@@ -2932,6 +2934,11 @@
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz",
       "integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA=="
     },
+    "node_modules/@types/uuid": {
+      "version": "9.0.8",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz",
+      "integrity": "sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA=="
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "7.8.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.8.0.tgz",
@@ -9554,6 +9561,18 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/uuid": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",

client/package.json

@@ -7,7 +7,6 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "axios": "^1.6.8",
     "@ant-design/icons": "^5.3.7",
     "@loadable/component": "^5.16.4",
     "@refinedev/antd": "^5.37.0",
@@ -18,8 +17,10 @@
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/react-query-devtools": "^4.36.1",
     "@types/loadable__component": "^5.13.9",
+    "@types/uuid": "^9.0.8",
     "@yudiel/react-qr-scanner": "^1.2.10",
     "antd": "^5.12.2",
+    "axios": "^1.6.8",
     "flag-icons": "^7.2.1",
     "i18next": "^23.11.4",
     "i18next-browser-languagedetector": "^7.2.1",
@@ -29,6 +30,7 @@
     "react-i18next": "^14.1.1",
     "react-router-dom": "^6.23.0",
     "react-to-print": "^2.15.1",
+    "uuid": "^10.0.0",
     "vite-plugin-svgr": "^4.2.0"
   },
   "devDependencies": {

client/public/locales/en/common.json

@@ -89,7 +89,14 @@
                 "none": "None",
                 "border": "Border",
                 "grid": "Grid"
-            }
+            },
+            "settings": "Settings",
+            "defaultSettings": "Default",
+            "addSettings": "Add New Setting",
+            "newSetting": "New",
+            "deleteSettings": "Delete Current Setting",
+            "deleteSettingsConfirm": "Are you sure you want to delete this setting?",
+            "settingsName": "Setting Name"
         },
         "qrcode": {
             "button": "Print QR Codes",

client/src/components/printing/printing.ts

@@ -1,6 +1,8 @@
 import { useGetSetting, useSetSetting } from "../../utils/querySettings";
+import { v4 as uuidv4 } from "uuid";
 
 export interface PrintSettings {
+  id: string;
   name?: string;
   margin?: { top: number; bottom: number; left: number; right: number };
   printerMargin?: { top: number; bottom: number; left: number; right: number };
@@ -32,21 +34,18 @@ export interface SpoolQRCodePrintSettings {
   labelSettings: QRCodePrintSettings;
 }
 
-function defaultSpoolQRCodePrintSettings(): SpoolQRCodePrintSettings {
+export function useGetPrintSettings(): SpoolQRCodePrintSettings[] | undefined {
-  return {
-    labelSettings: {
-      printSettings: {},
-    },
-  };
-}
-
-export function useGetPrintSettings(): SpoolQRCodePrintSettings[] {
   const { data } = useGetSetting("print_settings");
-  const parsed = data && data.value ? JSON.parse(data.value) : ([] as SpoolQRCodePrintSettings[]);
+  if (!data) return;
-  if (parsed.length === 0) {
+  const parsed: SpoolQRCodePrintSettings[] =
-    parsed.push(defaultSpoolQRCodePrintSettings());
+    data && data.value ? JSON.parse(data.value) : ([] as SpoolQRCodePrintSettings[]);
+  // Loop through all parsed and generate a new ID field if it's not set
+  return parsed.map((settings) => {
+    if (!settings.labelSettings.printSettings.id) {
+      settings.labelSettings.printSettings.id = uuidv4();
     }
-  return parsed;
+    return settings;
+  });
 }
 
 export function useSetPrintSettings(): (spoolQRCodePrintSettings: SpoolQRCodePrintSettings[]) => void {

client/src/components/printing/printingDialog.tsx

@@ -24,6 +24,7 @@ interface PrintingDialogProps {
   setPrintSettings: (setPrintSettings: PrintSettings) => void;
   style?: string;
   extraSettings?: JSX.Element;
+  extraSettingsStart?: JSX.Element;
   visible: boolean;
   onCancel: () => void;
   title?: string;
@@ -67,6 +68,7 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({
   setPrintSettings,
   style,
   extraSettings,
+  extraSettingsStart,
   visible,
   onCancel,
   title,
@@ -195,16 +197,8 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({
       width={1200} // Set the modal width to accommodate the preview
     >
       <Row gutter={16}>
-        <Col
-          span={24}
-          style={{
-            whiteSpace: "pre-line",
-            marginBottom: "1em",
-          }}
-        >
-          {t("printing.generic.description")}
-        </Col>
         <Col span={14}>
+          {t("printing.generic.description")}
           <div
             style={{
               transform: "translateZ(0)",
@@ -259,6 +253,8 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({
         </Col>
         <Col span={10}>
           <Form labelAlign="left" colon={false} labelWrap={true} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
+            {extraSettingsStart}
+            <Divider />
             <Form.Item label={t("printing.generic.skipItems")}>
               <Row>
                 <Col span={12}>

client/src/components/printing/qrCodePrintingDialog.tsx

@@ -17,6 +17,7 @@ interface QRCodePrintingDialogProps {
   setPrintSettings: (setPrintSettings: QRCodePrintSettings) => void;
   onCancel: () => void;
   extraSettings?: JSX.Element;
+  extraSettingsStart?: JSX.Element;
 }
 
 const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
@@ -26,6 +27,7 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
   setPrintSettings,
   onCancel,
   extraSettings,
+  extraSettingsStart,
 }) => {
   const t = useTranslate();
 
@@ -61,6 +63,7 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
         printSettings.printSettings = newSettings;
         setPrintSettings(printSettings);
       }}
+      extraSettingsStart={extraSettingsStart}
       extraSettings={
         <>
           <Form.Item label={t("printing.qrcode.showContent")}>

client/src/components/printing/spoolQrCodePrintingDialog.tsx

@@ -1,10 +1,14 @@
-import { Form, Switch } from "antd";
+import { Button, Flex, Form, Input, Modal, Popconfirm, Select, Space, Switch } from "antd";
 import { IFilament } from "../../pages/filaments/model";
 import { ISpool } from "../../pages/spools/model";
 import QRCodePrintingDialog from "./qrCodePrintingDialog";
 import { useSavedState } from "../../utils/saveload";
 import { useTranslate } from "@refinedev/core";
-import { useGetPrintSettings, useSetPrintSettings } from "./printing";
+import { QRCodePrintSettings, SpoolQRCodePrintSettings, useGetPrintSettings, useSetPrintSettings } from "./printing";
+import { useState } from "react";
+import { DeleteOutlined, EditOutlined, PlusOutlined } from "@ant-design/icons";
+import { v4 as uuidv4 } from "uuid";
+import _ from "lodash";
 
 interface SpoolQRCodePrintingDialog {
   visible: boolean;
@@ -14,16 +18,105 @@ interface SpoolQRCodePrintingDialog {
 
 const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ visible, items, onCancel }) => {
   const t = useTranslate();
-  const printSettings = useGetPrintSettings()[0];
+
+  // Selected setting state
+  const [selectedSetting, setSelectedSetting] = useState<string | undefined>();
+
+  const allPrintSettings = useGetPrintSettings();
   const setPrintSettings = useSetPrintSettings();
 
-  const showVendor = printSettings?.showVendor;
+  // Functions to update settings
-  const showLotNr = printSettings?.showLotNr;
+  const addNewPrintSettings = () => {
-  const showSpoolWeight = printSettings?.showSpoolWeight;
+    if (!allPrintSettings) return;
-  const showTemperatures = printSettings?.showTemperatures;
+    const newId = uuidv4();
-  const showSpoolComment = printSettings?.showSpoolComment;
+    const newSetting = {
-  const showFilamentComment = printSettings?.showFilamentComment;
+      labelSettings: {
-  const showVendorComment = printSettings?.showVendorComment;
+        printSettings: {
+          id: newId,
+          name: t("printing.generic.newSetting"),
+        },
+      },
+    };
+    setPrintSettings([...allPrintSettings, newSetting]);
+    setSelectedSetting(newId);
+    return newSetting;
+  };
+  const updateCurrentPrintSettings = (newSettings: SpoolQRCodePrintSettings) => {
+    if (!allPrintSettings) return;
+    setPrintSettings(
+      allPrintSettings.map((settings) =>
+        settings.labelSettings.printSettings.id === newSettings.labelSettings.printSettings.id ? newSettings : settings
+      )
+    );
+  };
+  const deleteCurrentPrintSettings = () => {
+    if (!allPrintSettings) return;
+    setPrintSettings(
+      allPrintSettings.filter((qSetting) => qSetting.labelSettings.printSettings.id !== selectedSetting)
+    );
+    setSelectedSetting(undefined);
+  };
+
+  // Initialize settings
+  let selectedPrintSetting: SpoolQRCodePrintSettings;
+  if (allPrintSettings === undefined) {
+    // DB not loaded yet, use a temporary one
+    selectedPrintSetting = {
+      labelSettings: {
+        printSettings: {
+          id: "TEMP",
+          name: t("printing.generic.newSetting"),
+        },
+      },
+    };
+  } else {
+    // DB is loaded, find the selected setting
+    if (allPrintSettings.length === 0) {
+      // DB loaded, but no settings found, add a new one and select it
+      const newSetting = addNewPrintSettings();
+      if (!newSetting) {
+        console.error("Error adding new setting, this should never happen");
+        return;
+      }
+
+      // Mutate the allPrintSettings list so that the rest of the UI will work fine
+      allPrintSettings.push(newSetting);
+      selectedPrintSetting = newSetting;
+    } else {
+      // DB loaded and at least 1 setting exists
+      if (!selectedSetting) {
+        // No setting has been selected, select the first one
+        selectedPrintSetting = allPrintSettings[0];
+        setSelectedSetting(allPrintSettings[0].labelSettings.printSettings.id);
+      } else {
+        // A setting has been selected, find it
+        const foundSetting = allPrintSettings.find(
+          (settings) => settings.labelSettings.printSettings.id === selectedSetting
+        );
+        if (foundSetting) {
+          selectedPrintSetting = foundSetting;
+        } else {
+          // Selected setting not found, select a temp one
+          selectedPrintSetting = {
+            labelSettings: {
+              printSettings: {
+                id: "TEMP",
+                name: t("printing.generic.newSetting"),
+              },
+            },
+          };
+        }
+      }
+    }
+  }
+
+  const showVendor = selectedPrintSetting?.showVendor;
+  const showLotNr = selectedPrintSetting?.showLotNr;
+  const showSpoolWeight = selectedPrintSetting?.showSpoolWeight;
+  const showTemperatures = selectedPrintSetting?.showTemperatures;
+  const showSpoolComment = selectedPrintSetting?.showSpoolComment;
+  const showFilamentComment = selectedPrintSetting?.showFilamentComment;
+  const showVendorComment = selectedPrintSetting?.showVendorComment;
 
   const formatFilament = (filament: IFilament) => {
     let vendorPrefix = "";
@@ -41,11 +134,63 @@ const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ visibl
     <QRCodePrintingDialog
       visible={visible}
       onCancel={onCancel}
-      printSettings={printSettings.labelSettings}
+      printSettings={selectedPrintSetting.labelSettings}
       setPrintSettings={(newSettings) => {
-        printSettings.labelSettings = newSettings;
+        selectedPrintSetting.labelSettings = newSettings;
-        setPrintSettings([printSettings]);
+        updateCurrentPrintSettings(selectedPrintSetting);
       }}
+      extraSettingsStart={
+        <>
+          <Form.Item label={t("printing.generic.settings")}>
+            <Flex gap={8}>
+              <Select
+                value={selectedSetting}
+                onChange={(value) => {
+                  setSelectedSetting(value);
+                }}
+                options={
+                  allPrintSettings &&
+                  allPrintSettings.map((settings) => ({
+                    label: settings.labelSettings.printSettings?.name || t("printing.generic.defaultSettings"),
+                    value: settings.labelSettings.printSettings.id,
+                  }))
+                }
+              ></Select>
+              <Button
+                style={{ width: "3em" }}
+                icon={<PlusOutlined />}
+                title={t("printing.generic.addSettings")}
+                onClick={addNewPrintSettings}
+              />
+              {allPrintSettings && allPrintSettings.length > 1 && (
+                <Popconfirm
+                  title={t("printing.generic.deleteSettings")}
+                  description={t("printing.generic.deleteSettingsConfirm")}
+                  onConfirm={deleteCurrentPrintSettings}
+                  okText={t("buttons.delete")}
+                  cancelText={t("buttons.cancel")}
+                >
+                  <Button
+                    style={{ width: "3em" }}
+                    danger
+                    icon={<DeleteOutlined />}
+                    title={t("printing.generic.deleteSettings")}
+                  />
+                </Popconfirm>
+              )}
+            </Flex>
+          </Form.Item>
+          <Form.Item label={t("printing.generic.settingsName")}>
+            <Input
+              value={selectedPrintSetting.labelSettings.printSettings?.name}
+              onChange={(e) => {
+                selectedPrintSetting.labelSettings.printSettings.name = e.target.value;
+                updateCurrentPrintSettings(selectedPrintSetting);
+              }}
+            />
+          </Form.Item>
+        </>
+      }
       items={items.map(function (spool) {
         const temps = [];
         if (spool.filament.settings_extruder_temp) {
@@ -117,8 +262,8 @@ const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ visibl
             <Switch
               checked={showVendor}
               onChange={(checked) => {
-                printSettings.showVendor = checked;
+                selectedPrintSetting.showVendor = checked;
-                setPrintSettings([printSettings]);
+                updateCurrentPrintSettings(selectedPrintSetting);
               }}
             />
           </Form.Item>
@@ -126,8 +271,8 @@ const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ visibl
             <Switch
               checked={showSpoolWeight}
               onChange={(checked) => {
-                printSettings.showSpoolWeight = checked;
+                selectedPrintSetting.showSpoolWeight = checked;
-                setPrintSettings([printSettings]);
+                updateCurrentPrintSettings(selectedPrintSetting);
               }}
             />
           </Form.Item>
@@ -135,8 +280,8 @@ const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ visibl
             <Switch
               checked={showTemperatures}
               onChange={(checked) => {
-                printSettings.showTemperatures = checked;
+                selectedPrintSetting.showTemperatures = checked;
-                setPrintSettings([printSettings]);
+                updateCurrentPrintSettings(selectedPrintSetting);
               }}
             />
           </Form.Item>
@@ -144,8 +289,8 @@ const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ visibl
             <Switch
               checked={showLotNr}
               onChange={(checked) => {
-                printSettings.showLotNr = checked;
+                selectedPrintSetting.showLotNr = checked;
-                setPrintSettings([printSettings]);
+                updateCurrentPrintSettings(selectedPrintSetting);
               }}
             />
           </Form.Item>
@@ -153,8 +298,8 @@ const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ visibl
             <Switch
               checked={showSpoolComment}
               onChange={(checked) => {
-                printSettings.showSpoolComment = checked;
+                selectedPrintSetting.showSpoolComment = checked;
-                setPrintSettings([printSettings]);
+                updateCurrentPrintSettings(selectedPrintSetting);
               }}
             />
           </Form.Item>
@@ -162,8 +307,8 @@ const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ visibl
             <Switch
               checked={showFilamentComment}
               onChange={(checked) => {
-                printSettings.showFilamentComment = checked;
+                selectedPrintSetting.showFilamentComment = checked;
-                setPrintSettings([printSettings]);
+                updateCurrentPrintSettings(selectedPrintSetting);
               }}
             />
           </Form.Item>
@@ -171,8 +316,8 @@ const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ visibl
             <Switch
               checked={showVendorComment}
               onChange={(checked) => {
-                printSettings.showVendorComment = checked;
+                selectedPrintSetting.showVendorComment = checked;
-                setPrintSettings([printSettings]);
+                updateCurrentPrintSettings(selectedPrintSetting);
               }}
             />
           </Form.Item>