Import cross-type presets on selection

Author: akira69

client/src/pages/printing/filamentQrCodeExportDialog.tsx

@@ -25,6 +25,7 @@ interface FilamentQRCodeExportDialogProps {
   filamentIds: number[];
 }
 
+// Adapt filament records into the generic QR export dialog and keep export presets isolated from spool presets.
 const FilamentQRCodeExportDialog = ({ filamentIds }: FilamentQRCodeExportDialogProps) => {
   const t = useTranslate();
   const currentPresetType = "filament";
@@ -104,6 +105,7 @@ const FilamentQRCodeExportDialog = ({ filamentIds }: FilamentQRCodeExportDialogP
   const currentPresets = localCurrentPresets ?? remoteFilamentPresets;
   const otherPresets = remoteSpoolPresets ?? [];
 
+  // Keep edits local until the user explicitly saves so imported spool presets can be tried without immediate persistence.
   const savePresetsRemote = async () => {
     if (!localCurrentPresets) return;
     await setRemoteFilamentPresets(localCurrentPresets);
@@ -121,6 +123,7 @@ const FilamentQRCodeExportDialog = ({ filamentIds }: FilamentQRCodeExportDialogP
 
   const promotePresetToCurrentType = (preset: SpoolQRCodePrintSettings): SpoolQRCodePrintSettings | undefined => {
     if (!currentPresets) return;
+    // Imported spool presets become filament-owned copies immediately so later edits never touch the source preset.
     const baseName = (preset.labelSettings.printSettings?.name ?? defaultPresetName).trim() || defaultPresetName;
     const promotedName = getNextPresetName(`${baseName} ${importedPresetSuffix}`, currentPresets);
     const promotedPreset: SpoolQRCodePrintSettings = {
@@ -132,6 +135,7 @@ const FilamentQRCodeExportDialog = ({ filamentIds }: FilamentQRCodeExportDialogP
     return promotedPreset;
   };
 
+  // New presets derive from the currently selected settings object so export variants start from what the user sees.
   const addNewPreset = () => {
     if (!currentPresets) return;
     const newId = uuidv4();
@@ -143,6 +147,7 @@ const FilamentQRCodeExportDialog = ({ filamentIds }: FilamentQRCodeExportDialogP
     setSelectedPresetState(toPresetValue(currentPresetType, newId));
     return newPreset;
   };
+  // Duplicates get a fresh id so the cloned export preset can diverge from its source immediately.
   const duplicateCurrentPreset = () => {
     if (!currentPresets) return;
     const newPreset = {
@@ -153,6 +158,7 @@ const FilamentQRCodeExportDialog = ({ filamentIds }: FilamentQRCodeExportDialogP
     setLocalCurrentPresets([...currentPresets, newPreset]);
     setSelectedPresetState(toPresetValue(currentPresetType, newPreset.labelSettings.printSettings.id));
   };
+  // Edits to a spool-derived preset first promote it into the filament bucket before any persistence is possible.
   const updateCurrentPreset = (newSettings: SpoolQRCodePrintSettings) => {
     if (!currentPresets) return;
     const parsed = parsePresetValue(selectedPresetState);
@@ -186,6 +192,7 @@ const FilamentQRCodeExportDialog = ({ filamentIds }: FilamentQRCodeExportDialogP
 
   let curPreset: SpoolQRCodePrintSettings;
   if (currentPresets === undefined) {
+    // Use a temporary preset while settings load so the export dialog can render immediately.
     curPreset = {
       labelSettings: {
         printSettings: {
@@ -196,6 +203,7 @@ const FilamentQRCodeExportDialog = ({ filamentIds }: FilamentQRCodeExportDialogP
     };
   } else {
     if (currentPresets.length === 0) {
+      // Seed the filament bucket with one editable preset the first time export settings are opened.
       const defaultId = uuidv4();
       const defaultPreset = buildNewPreset(defaultId, defaultPresetName);
       setLocalCurrentPresets([defaultPreset]);
@@ -291,6 +299,7 @@ const FilamentQRCodeExportDialog = ({ filamentIds }: FilamentQRCodeExportDialogP
     });
   }
 
+  // Expose both filament and vendor placeholders because the same tag picker drives label text and export filenames.
   const templateTags = [...filamentTags, ...vendorTags];
 
   return (

client/src/pages/printing/filamentQrCodePrintingDialog.tsx

@@ -24,6 +24,7 @@ interface FilamentQRCodePrintingDialogProps {
   filamentIds: number[];
 }
 
+// Adapt filament records into the generic QR print dialog and keep filament presets isolated from spool defaults.
 const FilamentQRCodePrintingDialog = ({ filamentIds }: FilamentQRCodePrintingDialogProps) => {
   const t = useTranslate();
   const currentPresetType = "filament";
@@ -96,11 +97,13 @@ const FilamentQRCodePrintingDialog = ({ filamentIds }: FilamentQRCodePrintingDia
   const currentPresets = localCurrentPresets ?? remoteCurrentPresets;
   const otherPresets = remoteOtherPresets ?? [];
 
+  // Keep edits local until the user explicitly saves so partially edited presets do not overwrite stored defaults.
   const savePresetsRemote = async () => {
     if (!localCurrentPresets) return;
     await setRemotePresets(localCurrentPresets);
   };
 
+  // New presets need an id immediately so the selector can switch to them before they are persisted.
   const addNewPreset = () => {
     if (!currentPresets) return;
     const newId = uuidv4();
@@ -109,6 +112,7 @@ const FilamentQRCodePrintingDialog = ({ filamentIds }: FilamentQRCodePrintingDia
     setSelectedPresetState(toPresetValue(currentPresetType, newId));
     return newPreset;
   };
+  // Imported spool presets become filament-owned copies immediately so later edits never touch the source preset.
   const promotePresetToCurrentType = (preset: SpoolQRCodePrintSettings): SpoolQRCodePrintSettings | undefined => {
     if (!currentPresets) return;
     const baseName = (preset.labelSettings.printSettings?.name ?? defaultPresetName).trim() || defaultPresetName;
@@ -118,6 +122,7 @@ const FilamentQRCodePrintingDialog = ({ filamentIds }: FilamentQRCodePrintingDia
     setSelectedPresetState(toPresetValue(currentPresetType, promotedPreset.labelSettings.printSettings.id));
     return promotedPreset;
   };
+  // Duplicates get a fresh id so later edits do not mutate the original preset in place.
   const duplicateCurrentPreset = () => {
     if (!currentPresets) return;
     const newPreset = {
@@ -128,6 +133,7 @@ const FilamentQRCodePrintingDialog = ({ filamentIds }: FilamentQRCodePrintingDia
     setLocalCurrentPresets([...currentPresets, newPreset]);
     setSelectedPresetState(toPresetValue(currentPresetType, newPreset.labelSettings.printSettings.id));
   };
+  // Replace only the active preset inside the working copy shown by this dialog.
   const updateCurrentPreset = (newSettings: SpoolQRCodePrintSettings) => {
     if (!currentPresets) return;
     const parsed = parsePresetValue(selectedPresetState);
@@ -141,6 +147,7 @@ const FilamentQRCodePrintingDialog = ({ filamentIds }: FilamentQRCodePrintingDia
       ),
     );
   };
+  // Clearing the selection lets the fallback logic choose the next valid preset on the next render.
   const deleteCurrentPreset = () => {
     if (!currentPresets) return;
     const parsed = parsePresetValue(selectedPresetState);
@@ -151,6 +158,7 @@ const FilamentQRCodePrintingDialog = ({ filamentIds }: FilamentQRCodePrintingDia
 
   let curPreset: SpoolQRCodePrintSettings;
   if (currentPresets === undefined) {
+    // Use a temporary preset while settings are still loading so the dialog can render immediately.
     curPreset = {
       labelSettings: {
         printSettings: {
@@ -161,6 +169,7 @@ const FilamentQRCodePrintingDialog = ({ filamentIds }: FilamentQRCodePrintingDia
     };
   } else {
     if (currentPresets.length === 0) {
+      // First-time users still need one editable preset so the dialog never opens into an empty state.
       const newSetting = addNewPreset();
       if (!newSetting) {
         console.error("Error adding new setting, this should never happen");
@@ -171,6 +180,7 @@ const FilamentQRCodePrintingDialog = ({ filamentIds }: FilamentQRCodePrintingDia
     } else {
       const parsedSelectedPreset = parsePresetValue(selectedPresetState);
       if (!parsedSelectedPreset) {
+        // Default to the first saved preset until the user picks a different one.
         curPreset = currentPresets[0];
         setSelectedPresetState(toPresetValue(currentPresetType, currentPresets[0].labelSettings.printSettings.id));
       } else if (parsedSelectedPreset.type === otherPresetType) {
@@ -244,6 +254,7 @@ const FilamentQRCodePrintingDialog = ({ filamentIds }: FilamentQRCodePrintingDia
     });
   }
 
+  // Expose both filament and vendor placeholders because the same tag picker drives preview text and label templates.
   const templateTags = [...filamentTags, ...vendorTags];
 
   return (

client/src/pages/printing/spoolQrCodeExportDialog.tsx

@@ -25,6 +25,7 @@ interface SpoolQRCodeExportDialog {
   spoolIds: number[];
 }
 
+// Adapt spool records into the generic QR export dialog and keep export presets isolated from filament presets.
 const SpoolQRCodeExportDialog = ({ spoolIds }: SpoolQRCodeExportDialog) => {
   const t = useTranslate();
   const currentPresetType = "spool";
@@ -104,6 +105,7 @@ const SpoolQRCodeExportDialog = ({ spoolIds }: SpoolQRCodeExportDialog) => {
   const currentPresets = localCurrentPresets ?? remoteSpoolPresets;
   const otherPresets = remoteFilamentPresets ?? [];
 
+  // Keep edits local until the user explicitly saves so imported filament presets can be tried without persistence.
   const savePresetsRemote = async () => {
     if (!localCurrentPresets) return;
     await setRemoteSpoolPresets(localCurrentPresets);
@@ -121,6 +123,7 @@ const SpoolQRCodeExportDialog = ({ spoolIds }: SpoolQRCodeExportDialog) => {
 
   const promotePresetToCurrentType = (preset: SpoolQRCodePrintSettings): SpoolQRCodePrintSettings | undefined => {
     if (!currentPresets) return;
+    // Imported filament presets become spool-owned copies immediately so later edits never touch the source preset.
     const baseName = (preset.labelSettings.printSettings?.name ?? defaultPresetName).trim() || defaultPresetName;
     const promotedName = getNextPresetName(`${baseName} ${importedPresetSuffix}`, currentPresets);
     const promotedPreset: SpoolQRCodePrintSettings = {
@@ -132,6 +135,7 @@ const SpoolQRCodeExportDialog = ({ spoolIds }: SpoolQRCodeExportDialog) => {
     return promotedPreset;
   };
 
+  // New presets derive from the currently selected settings object so export variants start from what the user sees.
   const addNewPreset = () => {
     if (!currentPresets) return;
     const newId = uuidv4();
@@ -143,6 +147,7 @@ const SpoolQRCodeExportDialog = ({ spoolIds }: SpoolQRCodeExportDialog) => {
     setSelectedPresetState(toPresetValue(currentPresetType, newId));
     return newPreset;
   };
+  // Duplicates get a fresh id so the cloned export preset can diverge from its source immediately.
   const duplicateCurrentPreset = () => {
     if (!currentPresets) return;
     const newPreset = {
@@ -153,6 +158,7 @@ const SpoolQRCodeExportDialog = ({ spoolIds }: SpoolQRCodeExportDialog) => {
     setLocalCurrentPresets([...currentPresets, newPreset]);
     setSelectedPresetState(toPresetValue(currentPresetType, newPreset.labelSettings.printSettings.id));
   };
+  // Edits to a filament-derived preset first promote it into the spool bucket before any persistence is possible.
   const updateCurrentPreset = (newSettings: SpoolQRCodePrintSettings) => {
     if (!currentPresets) return;
     const parsed = parsePresetValue(selectedPresetState);
@@ -186,6 +192,7 @@ const SpoolQRCodeExportDialog = ({ spoolIds }: SpoolQRCodeExportDialog) => {
 
   let curPreset: SpoolQRCodePrintSettings;
   if (currentPresets === undefined) {
+    // Use a temporary preset while settings load so the export dialog can render immediately.
     curPreset = {
       labelSettings: {
         printSettings: {
@@ -196,6 +203,7 @@ const SpoolQRCodeExportDialog = ({ spoolIds }: SpoolQRCodeExportDialog) => {
     };
   } else {
     if (currentPresets.length === 0) {
+      // Seed the spool bucket with one editable preset the first time export settings are opened.
       const defaultId = uuidv4();
       const defaultPreset = buildNewPreset(defaultId, defaultPresetName);
       setLocalCurrentPresets([defaultPreset]);
@@ -314,6 +322,7 @@ Spool Weight: {filament.spool_weight} g
     });
   }
 
+  // Expose spool, filament, and vendor placeholders because the same tag picker drives label text and export filenames.
   const templateTags = [...spoolTags, ...filamentTags, ...vendorTags];
 
   return (

client/src/pages/printing/spoolQrCodePrintingDialog.tsx

@@ -24,6 +24,7 @@ interface SpoolQRCodePrintingDialog {
   spoolIds: number[];
 }
 
+// Adapt spool records into the generic QR print dialog while keeping spool presets isolated from export-specific buckets.
 const SpoolQRCodePrintingDialog = ({ spoolIds }: SpoolQRCodePrintingDialog) => {
   const t = useTranslate();
   const currentPresetType = "spool";
@@ -83,11 +84,10 @@ const SpoolQRCodePrintingDialog = ({ spoolIds }: SpoolQRCodePrintingDialog) => {
     })
     .filter((item) => item !== null) as ISpool[];
 
-  // Selected preset state
+  // 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
+  // Keep edits local until the user explicitly saves so partially edited presets do not overwrite stored defaults.
   const [localCurrentPresets, setLocalCurrentPresets] = useState<SpoolQRCodePrintSettings[] | undefined>();
   const remoteCurrentPresets = useGetPrintPresets();
   const remoteOtherPresets = useGetPrintPresets("print_presets_filament");
@@ -96,12 +96,13 @@ const SpoolQRCodePrintingDialog = ({ spoolIds }: SpoolQRCodePrintingDialog) => {
   const currentPresets = localCurrentPresets ?? remoteCurrentPresets;
   const otherPresets = remoteOtherPresets ?? [];
 
-  const savePresetsRemote = () => {
+  const savePresetsRemote = async () => {
     if (!localCurrentPresets) return;
-    setRemotePresets(localCurrentPresets);
+    await setRemotePresets(localCurrentPresets);
   };
 
-  // Functions to update settings
+  // Functions to update settings.
+  // New presets need an id immediately so the selector can switch to them before they are persisted.
   const addNewPreset = () => {
     if (!currentPresets) return;
     const newId = uuidv4();
@@ -110,6 +111,7 @@ const SpoolQRCodePrintingDialog = ({ spoolIds }: SpoolQRCodePrintingDialog) => {
     setSelectedPresetState(toPresetValue(currentPresetType, newId));
     return newPreset;
   };
+  // Imported filament presets become spool-owned copies immediately so later edits never touch the source preset.
   const promotePresetToCurrentType = (preset: SpoolQRCodePrintSettings): SpoolQRCodePrintSettings | undefined => {
     if (!currentPresets) return;
     const baseName = (preset.labelSettings.printSettings?.name ?? defaultPresetName).trim() || defaultPresetName;
@@ -119,6 +121,7 @@ const SpoolQRCodePrintingDialog = ({ spoolIds }: SpoolQRCodePrintingDialog) => {
     setSelectedPresetState(toPresetValue(currentPresetType, promotedPreset.labelSettings.printSettings.id));
     return promotedPreset;
   };
+  // Duplicates get a fresh id so later edits do not mutate the original preset in place.
   const duplicateCurrentPreset = () => {
     if (!currentPresets) return;
     const newPreset = {
@@ -129,6 +132,7 @@ const SpoolQRCodePrintingDialog = ({ spoolIds }: SpoolQRCodePrintingDialog) => {
     setLocalCurrentPresets([...currentPresets, newPreset]);
     setSelectedPresetState(toPresetValue(currentPresetType, newPreset.labelSettings.printSettings.id));
   };
+  // Replace only the active preset inside the working copy shown by this dialog.
   const updateCurrentPreset = (newSettings: SpoolQRCodePrintSettings) => {
     if (!currentPresets) return;
     const parsed = parsePresetValue(selectedPresetState);
@@ -142,6 +146,7 @@ const SpoolQRCodePrintingDialog = ({ spoolIds }: SpoolQRCodePrintingDialog) => {
       ),
     );
   };
+  // Clearing the selection lets the fallback logic choose the next valid preset on the next render.
   const deleteCurrentPreset = () => {
     if (!currentPresets) return;
     const parsed = parsePresetValue(selectedPresetState);
@@ -150,10 +155,10 @@ const SpoolQRCodePrintingDialog = ({ spoolIds }: SpoolQRCodePrintingDialog) => {
     setSelectedPresetState(undefined);
   };
 
-  // Initialize presets
+  // Initialize presets.
   let curPreset: SpoolQRCodePrintSettings;
   if (currentPresets === undefined) {
-    // DB not loaded yet, use a temporary one
+    // Use a temporary preset while settings are still loading so the dialog can render immediately.
     curPreset = {
       labelSettings: {
         printSettings: {
@@ -163,36 +168,34 @@ const SpoolQRCodePrintingDialog = ({ spoolIds }: SpoolQRCodePrintingDialog) => {
       },
     };
   } else {
-    // DB is loaded, find the selected setting
     if (currentPresets.length === 0) {
-      // DB loaded, but no settings found, add a new one and select it
+      // First-time users still need one editable preset so the dialog never opens into an empty state.
       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
+      // The rest of this render expects the working list to already contain the preset it should show.
       currentPresets.push(newSetting);
       curPreset = newSetting;
     } else {
       const parsedSelectedPreset = parsePresetValue(selectedPresetState);
       if (!parsedSelectedPreset) {
-        // No setting has been selected, select the first one
+        // Default to the first saved preset until the user picks a different one.
         curPreset = currentPresets[0];
         setSelectedPresetState(toPresetValue(currentPresetType, currentPresets[0].labelSettings.printSettings.id));
       } else if (parsedSelectedPreset.type === otherPresetType) {
         curPreset = currentPresets[0];
         setSelectedPresetState(toPresetValue(currentPresetType, currentPresets[0].labelSettings.printSettings.id));
       } else {
-        // A setting has been selected, find it
         const foundSetting = currentPresets.find(
           (settings) => settings.labelSettings.printSettings.id === parsedSelectedPreset.id,
         );
         if (foundSetting) {
           curPreset = foundSetting;
         } else {
-          // Selected setting not found, reset to first available preset.
+          // Fall back to the first saved preset when the remembered selection no longer exists.
           curPreset = currentPresets[0];
           setSelectedPresetState(toPresetValue(currentPresetType, currentPresets[0].labelSettings.printSettings.id));
         }
@@ -277,6 +280,7 @@ Spool Weight: {filament.spool_weight} g
     });
   }
 
+  // Expose spool, filament, and vendor placeholders because the same tag picker drives preview text and labels.
   const templateTags = [...spoolTags, ...filamentTags, ...vendorTags];
 
   return (
@@ -439,9 +443,13 @@ Spool Weight: {filament.spool_weight} g
               type="primary"
               size="large"
               icon={<SaveOutlined />}
-              onClick={() => {
-                savePresetsRemote();
-                messageApi.success(t("notifications.saveSuccessful"));
+              onClick={async () => {
+                try {
+                  await savePresetsRemote();
+                  messageApi.success(t("notifications.saveSuccessful"));
+                } catch (error) {
+                  messageApi.error(error instanceof Error ? error.message : "Save failed");
+                }
               }}
             >
               {t("printing.generic.saveSetting")}