tonym/spoolman2
1
0
Fork 0
Code Issues 19 Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Renamed print settings to presets instead, manual preset store button

Browse Source
This commit is contained in:
Donkie
2024-08-05 16:06:00 +02:00
parent b764e9ecd9
commit 71f6ce55f5
6 changed files with 194 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
client/public/locales/en/common.json
View File

@@ -90,13 +90,14 @@
"border": "Border", "border": "Border",
"grid": "Grid" "grid": "Grid"
}, },
"settings": "Settings", "settings": "Presets",
"defaultSettings": "Default", "defaultSettings": "Default",
"addSettings": "Add New Setting", "addSettings": "Add New Preset",
"newSetting": "New", "newSetting": "New",
"deleteSettings": "Delete Current Setting", "deleteSettings": "Delete Current Preset",
"deleteSettingsConfirm": "Are you sure you want to delete this setting?", "deleteSettingsConfirm": "Are you sure you want to delete this preset?",
"settingsName": "Setting Name" "settingsName": "Preset Name",
"saveSetting": "Save Presets"
}, },
"qrcode": { "qrcode": {
"button": "Print QR Codes", "button": "Print QR Codes",

4
client/src/pages/printing/printing.tsx
View File

@@ -31,7 +31,7 @@ export interface SpoolQRCodePrintSettings {
} }
export function useGetPrintSettings(): SpoolQRCodePrintSettings[] | undefined { export function useGetPrintSettings(): SpoolQRCodePrintSettings[] | undefined {
const { data } = useGetSetting("print_settings"); const { data } = useGetSetting("print_presets");
if (!data) return; if (!data) return;
const parsed: SpoolQRCodePrintSettings[] = const parsed: SpoolQRCodePrintSettings[] =
data && data.value ? JSON.parse(data.value) : ([] as 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 { export function useSetPrintSettings(): (spoolQRCodePrintSettings: SpoolQRCodePrintSettings[]) => void {
const mut = useSetSetting("print_settings"); const mut = useSetSetting("print_presets");
return (spoolQRCodePrintSettings: SpoolQRCodePrintSettings[]) => { return (spoolQRCodePrintSettings: SpoolQRCodePrintSettings[]) => {
mut.mutate(spoolQRCodePrintSettings); mut.mutate(spoolQRCodePrintSettings);

21
client/src/pages/printing/printingDialog.tsx
View File

@@ -12,11 +12,13 @@ import {
Radio, Radio,
InputNumber, InputNumber,
Collapse, Collapse,
Space,
} from "antd"; } from "antd";
import ReactToPrint from "react-to-print"; import ReactToPrint from "react-to-print";
import { useSavedState } from "../../utils/saveload"; import { useSavedState } from "../../utils/saveload";
import { useTranslate } from "@refinedev/core"; import { useTranslate } from "@refinedev/core";
import { PrintSettings } from "./printing"; import { PrintSettings } from "./printing";
import { PrinterOutlined } from "@ant-design/icons";
interface PrintingDialogProps { interface PrintingDialogProps {
items: JSX.Element[]; items: JSX.Element[];
@@ -25,6 +27,7 @@ interface PrintingDialogProps {
style?: string; style?: string;
extraSettings?: JSX.Element; extraSettings?: JSX.Element;
extraSettingsStart?: JSX.Element; extraSettingsStart?: JSX.Element;
extraButtons?: JSX.Element;
} }
interface PaperDimensions { interface PaperDimensions {
@@ -66,6 +69,7 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({
style, style,
extraSettings, extraSettings,
extraSettingsStart, extraSettingsStart,
extraButtons,
}) => { }) => {
const t = useTranslate(); const t = useTranslate();
@@ -774,11 +778,18 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({
</Row> </Row>
<Row justify={"end"}> <Row justify={"end"}>
<Col> <Col>
<ReactToPrint <Space>
key="print-button" {extraButtons}
trigger={() => <Button type="primary">{t("printing.generic.print")}</Button>} <ReactToPrint
content={() => printRef.current} key="print-button"
/> trigger={() => (
<Button type="primary" icon={<PrinterOutlined />} size="large">
{t("printing.generic.print")}
</Button>
)}
content={() => printRef.current}
/>
</Space>
</Col> </Col>
</Row> </Row>
</> </>

3
client/src/pages/printing/qrCodePrintingDialog.tsx
View File

@@ -16,6 +16,7 @@ interface QRCodePrintingDialogProps {
setPrintSettings: (setPrintSettings: QRCodePrintSettings) => void; setPrintSettings: (setPrintSettings: QRCodePrintSettings) => void;
extraSettings?: JSX.Element; extraSettings?: JSX.Element;
extraSettingsStart?: JSX.Element; extraSettingsStart?: JSX.Element;
extraButtons?: JSX.Element;
} }
const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
@@ -24,6 +25,7 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
setPrintSettings, setPrintSettings,
extraSettings, extraSettings,
extraSettingsStart, extraSettingsStart,
extraButtons,
}) => { }) => {
const t = useTranslate(); const t = useTranslate();
@@ -57,6 +59,7 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
printSettings.printSettings = newSettings; printSettings.printSettings = newSettings;
setPrintSettings(printSettings); setPrintSettings(printSettings);
}} }}
extraButtons={extraButtons}
extraSettingsStart={extraSettingsStart} extraSettingsStart={extraSettingsStart}
extraSettings={ extraSettings={
<> <>

316
client/src/pages/printing/spoolQrCodePrintingDialog.tsx
View File

@@ -1,20 +1,17 @@
import { Button, Flex, Form, Input, Modal, Popconfirm, Select, Space, Switch, Table, Typography } from "antd"; import { Button, Flex, Form, Input, Modal, Popconfirm, Select, Table, Typography, message } from "antd";
import { IFilament } from "../filaments/model";
import { ISpool } from "../spools/model"; import { ISpool } from "../spools/model";
import QRCodePrintingDialog from "./qrCodePrintingDialog"; import QRCodePrintingDialog from "./qrCodePrintingDialog";
import { useSavedState } from "../../utils/saveload"; import { useSavedState } from "../../utils/saveload";
import { useTranslate } from "@refinedev/core"; import { useTranslate } from "@refinedev/core";
import { import {
QRCodePrintSettings,
SpoolQRCodePrintSettings, SpoolQRCodePrintSettings,
renderLabelContents, renderLabelContents,
useGetPrintSettings, useGetPrintSettings as useGetPrintPresets,
useSetPrintSettings, useSetPrintSettings as useSetPrintPresets,
} from "./printing"; } from "./printing";
import { useMemo, useState } from "react"; import { useState } from "react";
import { DeleteOutlined, EditOutlined, PlusOutlined } from "@ant-design/icons"; import { DeleteOutlined, PlusOutlined, SaveOutlined } from "@ant-design/icons";
import { v4 as uuidv4 } from "uuid"; import { v4 as uuidv4 } from "uuid";
import _ from "lodash";
import TextArea from "antd/es/input/TextArea"; import TextArea from "antd/es/input/TextArea";
import { EntityType, useGetFields } from "../../utils/queryFields"; import { EntityType, useGetFields } from "../../utils/queryFields";
import { useGetSpoolsByIds } from "../spools/functions"; import { useGetSpoolsByIds } from "../spools/functions";
@@ -27,6 +24,7 @@ interface SpoolQRCodePrintingDialog {
const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ spoolIds }) => { const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ spoolIds }) => {
const t = useTranslate(); const t = useTranslate();
const [messageApi, contextHolder] = message.useMessage();
const itemQueries = useGetSpoolsByIds(spoolIds); const itemQueries = useGetSpoolsByIds(spoolIds);
const items = itemQueries const items = itemQueries
@@ -35,27 +33,27 @@ const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ spoolI
}) })
.filter((item) => item !== null) as ISpool[]; .filter((item) => item !== null) as ISpool[];
// Selected setting state // Selected preset state
const [selectedSetting, setSelectedSetting] = useState<string | undefined>(); 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. // 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 // This decouples the debounce stuff from the UI
const [localSettings, setLocalSettings] = useState<SpoolQRCodePrintSettings[] | undefined>(); const [localPresets, setLocalPresets] = useState<SpoolQRCodePrintSettings[] | undefined>();
const remoteSettings = useGetPrintSettings(); const remotePresets = useGetPrintPresets();
const setRemoteSettings = useSetPrintSettings(); const setRemotePresets = useSetPrintPresets();
const debouncedSetRemoteSettings = useMemo(() => _.debounce(setRemoteSettings, 500), []);
const allPrintSettings = localSettings ?? remoteSettings; const localOrRemotePresets = localPresets ?? remotePresets;
const setPrintSettings = (newSettings: SpoolQRCodePrintSettings[]) => {
setLocalSettings(newSettings); const savePresetsRemote = () => {
debouncedSetRemoteSettings(newSettings); if (!localPresets) return;
setRemotePresets(localPresets);
}; };
// Functions to update settings // Functions to update settings
const addNewPrintSettings = () => { const addNewPreset = () => {
if (!allPrintSettings) return; if (!localOrRemotePresets) return;
const newId = uuidv4(); const newId = uuidv4();
const newSetting = { const newPreset = {
labelSettings: { labelSettings: {
printSettings: { printSettings: {
id: newId, id: newId,
@@ -63,31 +61,31 @@ const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ spoolI
}, },
}, },
}; };
setPrintSettings([...allPrintSettings, newSetting]); setLocalPresets([...localOrRemotePresets, newPreset]);
setSelectedSetting(newId); setSelectedPresetState(newId);
return newSetting; return newPreset;
}; };
const updateCurrentPrintSettings = (newSettings: SpoolQRCodePrintSettings) => { const updateCurrentPreset = (newSettings: SpoolQRCodePrintSettings) => {
if (!allPrintSettings) return; if (!localOrRemotePresets) return;
setPrintSettings( setLocalPresets(
allPrintSettings.map((settings) => localOrRemotePresets.map((presets) =>
settings.labelSettings.printSettings.id === newSettings.labelSettings.printSettings.id ? newSettings : settings presets.labelSettings.printSettings.id === newSettings.labelSettings.printSettings.id ? newSettings : presets
) )
); );
}; };
const deleteCurrentPrintSettings = () => { const deleteCurrentPreset = () => {
if (!allPrintSettings) return; if (!localOrRemotePresets) return;
setPrintSettings( setLocalPresets(
allPrintSettings.filter((qSetting) => qSetting.labelSettings.printSettings.id !== selectedSetting) localOrRemotePresets.filter((qPreset) => qPreset.labelSettings.printSettings.id !== selectedPresetState)
); );
setSelectedSetting(undefined); setSelectedPresetState(undefined);
}; };
// Initialize settings // Initialize presets
let selectedPrintSetting: SpoolQRCodePrintSettings; let curPreset: SpoolQRCodePrintSettings;
if (allPrintSettings === undefined) { if (localOrRemotePresets === undefined) {
// DB not loaded yet, use a temporary one // DB not loaded yet, use a temporary one
selectedPrintSetting = { curPreset = {
labelSettings: { labelSettings: {
printSettings: { printSettings: {
id: "TEMP", id: "TEMP",
@@ -97,33 +95,33 @@ const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ spoolI
}; };
} else { } else {
// DB is loaded, find the selected setting // 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 // DB loaded, but no settings found, add a new one and select it
const newSetting = addNewPrintSettings(); const newSetting = addNewPreset();
if (!newSetting) { if (!newSetting) {
console.error("Error adding new setting, this should never happen"); console.error("Error adding new setting, this should never happen");
return; return;
} }
// Mutate the allPrintSettings list so that the rest of the UI will work fine // Mutate the allPrintSettings list so that the rest of the UI will work fine
allPrintSettings.push(newSetting); localOrRemotePresets.push(newSetting);
selectedPrintSetting = newSetting; curPreset = newSetting;
} else { } else {
// DB loaded and at least 1 setting exists // DB loaded and at least 1 setting exists
if (!selectedSetting) { if (!selectedPresetState) {
// No setting has been selected, select the first one // No setting has been selected, select the first one
selectedPrintSetting = allPrintSettings[0]; curPreset = localOrRemotePresets[0];
setSelectedSetting(allPrintSettings[0].labelSettings.printSettings.id); setSelectedPresetState(localOrRemotePresets[0].labelSettings.printSettings.id);
} else { } else {
// A setting has been selected, find it // A setting has been selected, find it
const foundSetting = allPrintSettings.find( const foundSetting = localOrRemotePresets.find(
(settings) => settings.labelSettings.printSettings.id === selectedSetting (settings) => settings.labelSettings.printSettings.id === selectedPresetState
); );
if (foundSetting) { if (foundSetting) {
selectedPrintSetting = foundSetting; curPreset = foundSetting;
} else { } else {
// Selected setting not found, select a temp one // Selected setting not found, select a temp one
selectedPrintSetting = { curPreset = {
labelSettings: { labelSettings: {
printSettings: { printSettings: {
id: "TEMP", id: "TEMP",
@@ -138,7 +136,7 @@ const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ spoolI
const [templateHelpOpen, setTemplateHelpOpen] = useState(false); const [templateHelpOpen, setTemplateHelpOpen] = useState(false);
const template = const template =
selectedPrintSetting.template ?? curPreset.template ??
`**{filament.vendor.name} - {filament.name} `**{filament.vendor.name} - {filament.name}
#{id} - {filament.material}** #{id} - {filament.material}**
Spool Weight: {filament.spool_weight} g Spool Weight: {filament.spool_weight} g
@@ -215,110 +213,128 @@ Lot Nr: {lot_nr}
const templateTags = [...spoolTags, ...filamentTags, ...vendorTags]; const templateTags = [...spoolTags, ...filamentTags, ...vendorTags];
return ( return (
<QRCodePrintingDialog <>
printSettings={selectedPrintSetting.labelSettings} {contextHolder}
setPrintSettings={(newSettings) => { <QRCodePrintingDialog
selectedPrintSetting.labelSettings = newSettings; printSettings={curPreset.labelSettings}
updateCurrentPrintSettings(selectedPrintSetting); setPrintSettings={(newSettings) => {
}} curPreset.labelSettings = newSettings;
extraSettingsStart={ updateCurrentPreset(curPreset);
<> }}
<Form.Item label={t("printing.generic.settings")}> extraSettingsStart={
<Flex gap={8}> <>
<Select <Form.Item label={t("printing.generic.settings")}>
value={selectedSetting} <Flex gap={8}>
onChange={(value) => { <Select
setSelectedSetting(value); value={selectedPresetState}
}} onChange={(value) => {
options={ setSelectedPresetState(value);
allPrintSettings && }}
allPrintSettings.map((settings) => ({ options={
label: settings.labelSettings.printSettings?.name || t("printing.generic.defaultSettings"), localOrRemotePresets &&
value: settings.labelSettings.printSettings.id, localOrRemotePresets.map((settings) => ({
})) label: settings.labelSettings.printSettings?.name || t("printing.generic.defaultSettings"),
} value: settings.labelSettings.printSettings.id,
></Select> }))
<Button }
style={{ width: "3em" }} ></Select>
icon={<PlusOutlined />} <Button
title={t("printing.generic.addSettings")} style={{ width: "3em" }}
onClick={addNewPrintSettings} icon={<PlusOutlined />}
/> title={t("printing.generic.addSettings")}
{allPrintSettings && allPrintSettings.length > 1 && ( onClick={addNewPreset}
<Popconfirm />
title={t("printing.generic.deleteSettings")} {localOrRemotePresets && localOrRemotePresets.length > 1 && (
description={t("printing.generic.deleteSettingsConfirm")} <Popconfirm
onConfirm={deleteCurrentPrintSettings}
okText={t("buttons.delete")}
cancelText={t("buttons.cancel")}
>
<Button
style={{ width: "3em" }}
danger
icon={<DeleteOutlined />}
title={t("printing.generic.deleteSettings")} title={t("printing.generic.deleteSettings")}
/> description={t("printing.generic.deleteSettingsConfirm")}
</Popconfirm> onConfirm={deleteCurrentPreset}
)} okText={t("buttons.delete")}
</Flex> cancelText={t("buttons.cancel")}
</Form.Item> >
<Form.Item label={t("printing.generic.settingsName")}> <Button
<Input style={{ width: "3em" }}
value={selectedPrintSetting.labelSettings.printSettings?.name} danger
onChange={(e) => { icon={<DeleteOutlined />}
selectedPrintSetting.labelSettings.printSettings.name = e.target.value; title={t("printing.generic.deleteSettings")}
updateCurrentPrintSettings(selectedPrintSetting); />
</Popconfirm>
)}
</Flex>
</Form.Item>
<Form.Item label={t("printing.generic.settingsName")}>
<Input
value={curPreset.labelSettings.printSettings?.name}
onChange={(e) => {
curPreset.labelSettings.printSettings.name = e.target.value;
updateCurrentPreset(curPreset);
}}
/>
</Form.Item>
</>
}
items={items.map((spool) => ({
value: `web+spoolman:s-${spool.id}`,
label: (
<p
style={{
padding: "1mm 1mm 1mm 0",
margin: 0,
whiteSpace: "pre-wrap",
}} }}
/> >
</Form.Item> {renderLabelContents(template, spool)}
</> </p>
} ),
items={items.map((spool) => ({ errorLevel: "H",
value: `web+spoolman:s-${spool.id}`, }))}
label: ( extraSettings={
<p <>
style={{ <Form.Item label={t("printing.qrcode.template")}>
padding: "1mm 1mm 1mm 0", <TextArea
margin: 0, value={template}
whiteSpace: "pre-wrap", rows={8}
}} onChange={(newValue) => {
> curPreset.template = newValue.target.value;
{renderLabelContents(template, spool)} updateCurrentPreset(curPreset);
</p> }}
), />
errorLevel: "H", </Form.Item>
}))} <Modal open={templateHelpOpen} footer={null} onCancel={() => setTemplateHelpOpen(false)}>
extraSettings={ <Table
<> size="small"
<Form.Item label={t("printing.qrcode.template")}> showHeader={false}
<TextArea pagination={false}
value={template} scroll={{ y: 400 }}
rows={8} columns={[{ dataIndex: "tag" }]}
onChange={(newValue) => { dataSource={templateTags}
selectedPrintSetting.template = newValue.target.value; />
updateCurrentPrintSettings(selectedPrintSetting); </Modal>
<Text type="secondary">
{t("printing.qrcode.templateHelp")}{" "}
<Button size="small" onClick={() => setTemplateHelpOpen(true)}>
{t("actions.show")}
</Button>
</Text>
</>
}
extraButtons={
<>
<Button
type="primary"
size="large"
icon={<SaveOutlined />}
onClick={() => {
savePresetsRemote();
messageApi.success(t("notifications.saveSuccessful"));
}} }}
/> >
</Form.Item> {t("printing.generic.saveSetting")}
<Modal open={templateHelpOpen} footer={null} onCancel={() => setTemplateHelpOpen(false)}>
<Table
size="small"
showHeader={false}
pagination={false}
scroll={{ y: 400 }}
columns={[{ dataIndex: "tag" }]}
dataSource={templateTags}
/>
</Modal>
<Text type="secondary">
{t("printing.qrcode.templateHelp")}{" "}
<Button size="small" onClick={() => setTemplateHelpOpen(true)}>
{t("actions.show")}
</Button> </Button>
</Text> </>
</> }
} />
/> </>
); );
}; };

2
spoolman/settings.py
View File

@@ -62,7 +62,7 @@ def parse_setting(key: str) -> SettingDefinition:
register_setting("currency", SettingType.STRING, json.dumps("EUR")) 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_vendor", SettingType.ARRAY, json.dumps([]))
register_setting("extra_fields_filament", SettingType.ARRAY, json.dumps([])) register_setting("extra_fields_filament", SettingType.ARRAY, json.dumps([]))