Renamed print settings to presets instead, manual preset store button

2024-08-05 16:06:00 +02:00
parent b764e9ecd9
commit 71f6ce55f5
6 changed files with 194 additions and 163 deletions
--- a/client/public/locales/en/common.json
+++ b/client/public/locales/en/common.json
@@ -90,13 +90,14 @@
                "border": "Border",
                "grid": "Grid"
            },
-            "settings": "Settings",
+            "settings": "Presets",
            "defaultSettings": "Default",
-            "addSettings": "Add New Setting",
+            "addSettings": "Add New Preset",
            "newSetting": "New",
-            "deleteSettings": "Delete Current Setting",
-            "deleteSettingsConfirm": "Are you sure you want to delete this setting?",
-            "settingsName": "Setting Name"
+            "deleteSettings": "Delete Current Preset",
+            "deleteSettingsConfirm": "Are you sure you want to delete this preset?",
+            "settingsName": "Preset Name",
+            "saveSetting": "Save Presets"
        },
        "qrcode": {
            "button": "Print QR Codes",
--- a/client/src/pages/printing/printing.tsx
+++ b/client/src/pages/printing/printing.tsx
@@ -31,7 +31,7 @@ export interface SpoolQRCodePrintSettings {
 }

 export function useGetPrintSettings(): SpoolQRCodePrintSettings[] | undefined {
-  const { data } = useGetSetting("print_settings");
+  const { data } = useGetSetting("print_presets");
  if (!data) return;
  const parsed: SpoolQRCodePrintSettings[] =
    data && data.value ? JSON.parse(data.value) : ([] as SpoolQRCodePrintSettings[]);
@@ -45,7 +45,7 @@ export function useGetPrintSettings(): SpoolQRCodePrintSettings[] | undefined {
 }

 export function useSetPrintSettings(): (spoolQRCodePrintSettings: SpoolQRCodePrintSettings[]) => void {
-  const mut = useSetSetting("print_settings");
+  const mut = useSetSetting("print_presets");

  return (spoolQRCodePrintSettings: SpoolQRCodePrintSettings[]) => {
    mut.mutate(spoolQRCodePrintSettings);
--- a/client/src/pages/printing/printingDialog.tsx
+++ b/client/src/pages/printing/printingDialog.tsx
@@ -12,11 +12,13 @@ import {
  Radio,
  InputNumber,
  Collapse,
+  Space,
 } from "antd";
 import ReactToPrint from "react-to-print";
 import { useSavedState } from "../../utils/saveload";
 import { useTranslate } from "@refinedev/core";
 import { PrintSettings } from "./printing";
+import { PrinterOutlined } from "@ant-design/icons";

 interface PrintingDialogProps {
  items: JSX.Element[];
@@ -25,6 +27,7 @@ interface PrintingDialogProps {
  style?: string;
  extraSettings?: JSX.Element;
  extraSettingsStart?: JSX.Element;
+  extraButtons?: JSX.Element;
 }

 interface PaperDimensions {
@@ -66,6 +69,7 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({
  style,
  extraSettings,
  extraSettingsStart,
+  extraButtons,
 }) => {
  const t = useTranslate();

@@ -774,11 +778,18 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({
      </Row>
      <Row justify={"end"}>
        <Col>
+          <Space>
+            {extraButtons}
            <ReactToPrint
              key="print-button"
-            trigger={() => <Button type="primary">{t("printing.generic.print")}</Button>}
+              trigger={() => (
+                <Button type="primary" icon={<PrinterOutlined />} size="large">
+                  {t("printing.generic.print")}
+                </Button>
+              )}
              content={() => printRef.current}
            />
+          </Space>
        </Col>
      </Row>
    </>
--- a/client/src/pages/printing/qrCodePrintingDialog.tsx
+++ b/client/src/pages/printing/qrCodePrintingDialog.tsx
@@ -16,6 +16,7 @@ interface QRCodePrintingDialogProps {
  setPrintSettings: (setPrintSettings: QRCodePrintSettings) => void;
  extraSettings?: JSX.Element;
  extraSettingsStart?: JSX.Element;
+  extraButtons?: JSX.Element;
 }

 const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
@@ -24,6 +25,7 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
  setPrintSettings,
  extraSettings,
  extraSettingsStart,
+  extraButtons,
 }) => {
  const t = useTranslate();

@@ -57,6 +59,7 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
        printSettings.printSettings = newSettings;
        setPrintSettings(printSettings);
      }}
+      extraButtons={extraButtons}
      extraSettingsStart={extraSettingsStart}
      extraSettings={
        <>
--- a/client/src/pages/printing/spoolQrCodePrintingDialog.tsx
+++ b/client/src/pages/printing/spoolQrCodePrintingDialog.tsx
@@ -1,20 +1,17 @@
-import { Button, Flex, Form, Input, Modal, Popconfirm, Select, Space, Switch, Table, Typography } from "antd";
-import { IFilament } from "../filaments/model";
+import { Button, Flex, Form, Input, Modal, Popconfirm, Select, Table, Typography, message } from "antd";
 import { ISpool } from "../spools/model";
 import QRCodePrintingDialog from "./qrCodePrintingDialog";
 import { useSavedState } from "../../utils/saveload";
 import { useTranslate } from "@refinedev/core";
 import {
-  QRCodePrintSettings,
  SpoolQRCodePrintSettings,
  renderLabelContents,
-  useGetPrintSettings,
-  useSetPrintSettings,
+  useGetPrintSettings as useGetPrintPresets,
+  useSetPrintSettings as useSetPrintPresets,
 } from "./printing";
-import { useMemo, useState } from "react";
-import { DeleteOutlined, EditOutlined, PlusOutlined } from "@ant-design/icons";
+import { useState } from "react";
+import { DeleteOutlined, PlusOutlined, SaveOutlined } from "@ant-design/icons";
 import { v4 as uuidv4 } from "uuid";
-import _ from "lodash";
 import TextArea from "antd/es/input/TextArea";
 import { EntityType, useGetFields } from "../../utils/queryFields";
 import { useGetSpoolsByIds } from "../spools/functions";
@@ -27,6 +24,7 @@ interface SpoolQRCodePrintingDialog {

 const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ spoolIds }) => {
  const t = useTranslate();
+  const [messageApi, contextHolder] = message.useMessage();

  const itemQueries = useGetSpoolsByIds(spoolIds);
  const items = itemQueries
@@ -35,27 +33,27 @@ const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ spoolI
    })
    .filter((item) => item !== null) as ISpool[];

-  // Selected setting state
-  const [selectedSetting, setSelectedSetting] = useState<string | undefined>();
+  // Selected preset state
+  const [selectedPresetState, setSelectedPresetState] = useSavedState<string | undefined>("selectedPreset", undefined);

  // Keep a local copy of the settings which is what's actually displayed. Use the remote state only for saving.
  // This decouples the debounce stuff from the UI
-  const [localSettings, setLocalSettings] = useState<SpoolQRCodePrintSettings[] | undefined>();
-  const remoteSettings = useGetPrintSettings();
-  const setRemoteSettings = useSetPrintSettings();
-  const debouncedSetRemoteSettings = useMemo(() => _.debounce(setRemoteSettings, 500), []);
+  const [localPresets, setLocalPresets] = useState<SpoolQRCodePrintSettings[] | undefined>();
+  const remotePresets = useGetPrintPresets();
+  const setRemotePresets = useSetPrintPresets();

-  const allPrintSettings = localSettings ?? remoteSettings;
-  const setPrintSettings = (newSettings: SpoolQRCodePrintSettings[]) => {
-    setLocalSettings(newSettings);
-    debouncedSetRemoteSettings(newSettings);
+  const localOrRemotePresets = localPresets ?? remotePresets;
+
+  const savePresetsRemote = () => {
+    if (!localPresets) return;
+    setRemotePresets(localPresets);
  };

  // Functions to update settings
-  const addNewPrintSettings = () => {
-    if (!allPrintSettings) return;
+  const addNewPreset = () => {
+    if (!localOrRemotePresets) return;
    const newId = uuidv4();
-    const newSetting = {
+    const newPreset = {
      labelSettings: {
        printSettings: {
          id: newId,
@@ -63,31 +61,31 @@ const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ spoolI
        },
      },
    };
-    setPrintSettings([...allPrintSettings, newSetting]);
-    setSelectedSetting(newId);
-    return newSetting;
+    setLocalPresets([...localOrRemotePresets, newPreset]);
+    setSelectedPresetState(newId);
+    return newPreset;
  };
-  const updateCurrentPrintSettings = (newSettings: SpoolQRCodePrintSettings) => {
-    if (!allPrintSettings) return;
-    setPrintSettings(
-      allPrintSettings.map((settings) =>
-        settings.labelSettings.printSettings.id === newSettings.labelSettings.printSettings.id ? newSettings : settings
+  const updateCurrentPreset = (newSettings: SpoolQRCodePrintSettings) => {
+    if (!localOrRemotePresets) return;
+    setLocalPresets(
+      localOrRemotePresets.map((presets) =>
+        presets.labelSettings.printSettings.id === newSettings.labelSettings.printSettings.id ? newSettings : presets
      )
    );
  };
-  const deleteCurrentPrintSettings = () => {
-    if (!allPrintSettings) return;
-    setPrintSettings(
-      allPrintSettings.filter((qSetting) => qSetting.labelSettings.printSettings.id !== selectedSetting)
+  const deleteCurrentPreset = () => {
+    if (!localOrRemotePresets) return;
+    setLocalPresets(
+      localOrRemotePresets.filter((qPreset) => qPreset.labelSettings.printSettings.id !== selectedPresetState)
    );
-    setSelectedSetting(undefined);
+    setSelectedPresetState(undefined);
  };

-  // Initialize settings
-  let selectedPrintSetting: SpoolQRCodePrintSettings;
-  if (allPrintSettings === undefined) {
+  // Initialize presets
+  let curPreset: SpoolQRCodePrintSettings;
+  if (localOrRemotePresets === undefined) {
    // DB not loaded yet, use a temporary one
-    selectedPrintSetting = {
+    curPreset = {
      labelSettings: {
        printSettings: {
          id: "TEMP",
@@ -97,33 +95,33 @@ const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ spoolI
    };
  } else {
    // DB is loaded, find the selected setting
-    if (allPrintSettings.length === 0) {
+    if (localOrRemotePresets.length === 0) {
      // DB loaded, but no settings found, add a new one and select it
-      const newSetting = addNewPrintSettings();
+      const newSetting = addNewPreset();
      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;
+      localOrRemotePresets.push(newSetting);
+      curPreset = newSetting;
    } else {
      // DB loaded and at least 1 setting exists
-      if (!selectedSetting) {
+      if (!selectedPresetState) {
        // No setting has been selected, select the first one
-        selectedPrintSetting = allPrintSettings[0];
-        setSelectedSetting(allPrintSettings[0].labelSettings.printSettings.id);
+        curPreset = localOrRemotePresets[0];
+        setSelectedPresetState(localOrRemotePresets[0].labelSettings.printSettings.id);
      } else {
        // A setting has been selected, find it
-        const foundSetting = allPrintSettings.find(
-          (settings) => settings.labelSettings.printSettings.id === selectedSetting
+        const foundSetting = localOrRemotePresets.find(
+          (settings) => settings.labelSettings.printSettings.id === selectedPresetState
        );
        if (foundSetting) {
-          selectedPrintSetting = foundSetting;
+          curPreset = foundSetting;
        } else {
          // Selected setting not found, select a temp one
-          selectedPrintSetting = {
+          curPreset = {
            labelSettings: {
              printSettings: {
                id: "TEMP",
@@ -138,7 +136,7 @@ const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ spoolI

  const [templateHelpOpen, setTemplateHelpOpen] = useState(false);
  const template =
-    selectedPrintSetting.template ??
+    curPreset.template ??
    `**{filament.vendor.name} - {filament.name}
 #{id} - {filament.material}**
 Spool Weight: {filament.spool_weight} g
@@ -215,24 +213,26 @@ Lot Nr: {lot_nr}
  const templateTags = [...spoolTags, ...filamentTags, ...vendorTags];

  return (
+    <>
+      {contextHolder}
      <QRCodePrintingDialog
-      printSettings={selectedPrintSetting.labelSettings}
+        printSettings={curPreset.labelSettings}
        setPrintSettings={(newSettings) => {
-        selectedPrintSetting.labelSettings = newSettings;
-        updateCurrentPrintSettings(selectedPrintSetting);
+          curPreset.labelSettings = newSettings;
+          updateCurrentPreset(curPreset);
        }}
        extraSettingsStart={
          <>
            <Form.Item label={t("printing.generic.settings")}>
              <Flex gap={8}>
                <Select
-                value={selectedSetting}
+                  value={selectedPresetState}
                  onChange={(value) => {
-                  setSelectedSetting(value);
+                    setSelectedPresetState(value);
                  }}
                  options={
-                  allPrintSettings &&
-                  allPrintSettings.map((settings) => ({
+                    localOrRemotePresets &&
+                    localOrRemotePresets.map((settings) => ({
                      label: settings.labelSettings.printSettings?.name || t("printing.generic.defaultSettings"),
                      value: settings.labelSettings.printSettings.id,
                    }))
@@ -242,13 +242,13 @@ Lot Nr: {lot_nr}
                  style={{ width: "3em" }}
                  icon={<PlusOutlined />}
                  title={t("printing.generic.addSettings")}
-                onClick={addNewPrintSettings}
+                  onClick={addNewPreset}
                />
-              {allPrintSettings && allPrintSettings.length > 1 && (
+                {localOrRemotePresets && localOrRemotePresets.length > 1 && (
                  <Popconfirm
                    title={t("printing.generic.deleteSettings")}
                    description={t("printing.generic.deleteSettingsConfirm")}
-                  onConfirm={deleteCurrentPrintSettings}
+                    onConfirm={deleteCurrentPreset}
                    okText={t("buttons.delete")}
                    cancelText={t("buttons.cancel")}
                  >
@@ -264,10 +264,10 @@ Lot Nr: {lot_nr}
            </Form.Item>
            <Form.Item label={t("printing.generic.settingsName")}>
              <Input
-              value={selectedPrintSetting.labelSettings.printSettings?.name}
+                value={curPreset.labelSettings.printSettings?.name}
                onChange={(e) => {
-                selectedPrintSetting.labelSettings.printSettings.name = e.target.value;
-                updateCurrentPrintSettings(selectedPrintSetting);
+                  curPreset.labelSettings.printSettings.name = e.target.value;
+                  updateCurrentPreset(curPreset);
                }}
              />
            </Form.Item>
@@ -295,8 +295,8 @@ Lot Nr: {lot_nr}
                value={template}
                rows={8}
                onChange={(newValue) => {
-                selectedPrintSetting.template = newValue.target.value;
-                updateCurrentPrintSettings(selectedPrintSetting);
+                  curPreset.template = newValue.target.value;
+                  updateCurrentPreset(curPreset);
                }}
              />
            </Form.Item>
@@ -318,7 +318,23 @@ Lot Nr: {lot_nr}
            </Text>
          </>
        }
+        extraButtons={
+          <>
+            <Button
+              type="primary"
+              size="large"
+              icon={<SaveOutlined />}
+              onClick={() => {
+                savePresetsRemote();
+                messageApi.success(t("notifications.saveSuccessful"));
+              }}
+            >
+              {t("printing.generic.saveSetting")}
+            </Button>
+          </>
+        }
      />
+    </>
  );
 };

--- a/spoolman/settings.py
+++ b/spoolman/settings.py
@@ -62,7 +62,7 @@ def parse_setting(key: str) -> SettingDefinition:


 register_setting("currency", SettingType.STRING, json.dumps("EUR"))
-register_setting("print_settings", SettingType.ARRAY, json.dumps([]))
+register_setting("print_presets", SettingType.ARRAY, json.dumps([]))

 register_setting("extra_fields_vendor", SettingType.ARRAY, json.dumps([]))
 register_setting("extra_fields_filament", SettingType.ARRAY, json.dumps([]))