From 71f6ce55f5e0967985747b932887fe02550f250b Mon Sep 17 00:00:00 2001 From: Donkie Date: Mon, 5 Aug 2024 16:06:00 +0200 Subject: [PATCH] Renamed print settings to presets instead, manual preset store button --- client/public/locales/en/common.json | 11 +- client/src/pages/printing/printing.tsx | 4 +- client/src/pages/printing/printingDialog.tsx | 21 +- .../pages/printing/qrCodePrintingDialog.tsx | 3 + .../printing/spoolQrCodePrintingDialog.tsx | 316 +++++++++--------- spoolman/settings.py | 2 +- 6 files changed, 194 insertions(+), 163 deletions(-) diff --git a/client/public/locales/en/common.json b/client/public/locales/en/common.json index 2fba419..e387e95 100644 --- 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", diff --git a/client/src/pages/printing/printing.tsx b/client/src/pages/printing/printing.tsx index 7266a85..d45c479 100644 --- 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); diff --git a/client/src/pages/printing/printingDialog.tsx b/client/src/pages/printing/printingDialog.tsx index 952ae18..528973e 100644 --- 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 = ({ style, extraSettings, extraSettingsStart, + extraButtons, }) => { const t = useTranslate(); @@ -774,11 +778,18 @@ const PrintingDialog: React.FC = ({ - } - content={() => printRef.current} - /> + + {extraButtons} + ( + + )} + content={() => printRef.current} + /> + diff --git a/client/src/pages/printing/qrCodePrintingDialog.tsx b/client/src/pages/printing/qrCodePrintingDialog.tsx index 77f47be..3112aa2 100644 --- 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 = ({ @@ -24,6 +25,7 @@ const QRCodePrintingDialog: React.FC = ({ setPrintSettings, extraSettings, extraSettingsStart, + extraButtons, }) => { const t = useTranslate(); @@ -57,6 +59,7 @@ const QRCodePrintingDialog: React.FC = ({ printSettings.printSettings = newSettings; setPrintSettings(printSettings); }} + extraButtons={extraButtons} extraSettingsStart={extraSettingsStart} extraSettings={ <> diff --git a/client/src/pages/printing/spoolQrCodePrintingDialog.tsx b/client/src/pages/printing/spoolQrCodePrintingDialog.tsx index c451a2a..72481c3 100644 --- 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 = ({ spoolIds }) => { const t = useTranslate(); + const [messageApi, contextHolder] = message.useMessage(); const itemQueries = useGetSpoolsByIds(spoolIds); const items = itemQueries @@ -35,27 +33,27 @@ const SpoolQRCodePrintingDialog: React.FC = ({ spoolI }) .filter((item) => item !== null) as ISpool[]; - // Selected setting state - const [selectedSetting, setSelectedSetting] = useState(); + // Selected preset state + const [selectedPresetState, setSelectedPresetState] = useSavedState("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(); - const remoteSettings = useGetPrintSettings(); - const setRemoteSettings = useSetPrintSettings(); - const debouncedSetRemoteSettings = useMemo(() => _.debounce(setRemoteSettings, 500), []); + const [localPresets, setLocalPresets] = useState(); + 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 = ({ 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 = ({ 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 = ({ 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,110 +213,128 @@ Lot Nr: {lot_nr} const templateTags = [...spoolTags, ...filamentTags, ...vendorTags]; return ( - { - selectedPrintSetting.labelSettings = newSettings; - updateCurrentPrintSettings(selectedPrintSetting); - }} - extraSettingsStart={ - <> - - - -