Added ability to select and create multiple label settings

2024-06-18 19:09:42 +02:00
parent 426496b4e5
commit 0452b0be04
7 changed files with 224 additions and 53 deletions
--- a/client/src/components/printing/printing.ts
+++ b/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 {
-  return {
-    labelSettings: {
-      printSettings: {},
-    },
-  };
-}
-
-export function useGetPrintSettings(): SpoolQRCodePrintSettings[] {
+export function useGetPrintSettings(): SpoolQRCodePrintSettings[] | undefined {
  const { data } = useGetSetting("print_settings");
-  const parsed = data && data.value ? JSON.parse(data.value) : ([] as SpoolQRCodePrintSettings[]);
-  if (parsed.length === 0) {
-    parsed.push(defaultSpoolQRCodePrintSettings());
-  }
-  return parsed;
+  if (!data) return;
+  const parsed: SpoolQRCodePrintSettings[] =
+    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 settings;
+  });
 }

 export function useSetPrintSettings(): (spoolQRCodePrintSettings: SpoolQRCodePrintSettings[]) => void {
--- a/client/src/components/printing/printingDialog.tsx
+++ b/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}>
--- a/client/src/components/printing/qrCodePrintingDialog.tsx
+++ b/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")}>
--- a/client/src/components/printing/spoolQrCodePrintingDialog.tsx
+++ b/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;
-  const showLotNr = printSettings?.showLotNr;
-  const showSpoolWeight = printSettings?.showSpoolWeight;
-  const showTemperatures = printSettings?.showTemperatures;
-  const showSpoolComment = printSettings?.showSpoolComment;
-  const showFilamentComment = printSettings?.showFilamentComment;
-  const showVendorComment = printSettings?.showVendorComment;
+  // Functions to update settings
+  const addNewPrintSettings = () => {
+    if (!allPrintSettings) return;
+    const newId = uuidv4();
+    const newSetting = {
+      labelSettings: {
+        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;
-        setPrintSettings([printSettings]);
+        selectedPrintSetting.labelSettings = newSettings;
+        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;
-                setPrintSettings([printSettings]);
+                selectedPrintSetting.showVendor = checked;
+                updateCurrentPrintSettings(selectedPrintSetting);
              }}
            />
          </Form.Item>
@@ -126,8 +271,8 @@ const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ visibl
            <Switch
              checked={showSpoolWeight}
              onChange={(checked) => {
-                printSettings.showSpoolWeight = checked;
-                setPrintSettings([printSettings]);
+                selectedPrintSetting.showSpoolWeight = checked;
+                updateCurrentPrintSettings(selectedPrintSetting);
              }}
            />
          </Form.Item>
@@ -135,8 +280,8 @@ const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ visibl
            <Switch
              checked={showTemperatures}
              onChange={(checked) => {
-                printSettings.showTemperatures = checked;
-                setPrintSettings([printSettings]);
+                selectedPrintSetting.showTemperatures = checked;
+                updateCurrentPrintSettings(selectedPrintSetting);
              }}
            />
          </Form.Item>
@@ -144,8 +289,8 @@ const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ visibl
            <Switch
              checked={showLotNr}
              onChange={(checked) => {
-                printSettings.showLotNr = checked;
-                setPrintSettings([printSettings]);
+                selectedPrintSetting.showLotNr = checked;
+                updateCurrentPrintSettings(selectedPrintSetting);
              }}
            />
          </Form.Item>
@@ -153,8 +298,8 @@ const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ visibl
            <Switch
              checked={showSpoolComment}
              onChange={(checked) => {
-                printSettings.showSpoolComment = checked;
-                setPrintSettings([printSettings]);
+                selectedPrintSetting.showSpoolComment = checked;
+                updateCurrentPrintSettings(selectedPrintSetting);
              }}
            />
          </Form.Item>
@@ -162,8 +307,8 @@ const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ visibl
            <Switch
              checked={showFilamentComment}
              onChange={(checked) => {
-                printSettings.showFilamentComment = checked;
-                setPrintSettings([printSettings]);
+                selectedPrintSetting.showFilamentComment = checked;
+                updateCurrentPrintSettings(selectedPrintSetting);
              }}
            />
          </Form.Item>
@@ -171,8 +316,8 @@ const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ visibl
            <Switch
              checked={showVendorComment}
              onChange={(checked) => {
-                printSettings.showVendorComment = checked;
-                setPrintSettings([printSettings]);
+                selectedPrintSetting.showVendorComment = checked;
+                updateCurrentPrintSettings(selectedPrintSetting);
              }}
            />
          </Form.Item>