allow prefix and suffix with double braces in label format

client/public/locales/en/common.json

@@ -106,7 +106,7 @@
             "button": "Print Labels",
             "title": "Label Printing",
             "template": "Label Template",
-            "templateHelp": "Use {} to insert values of the spool object as text. For example {id} will be replaced with the spool id, or {filament.material} will be replaced with the material of the spool. Enclose text with double asterix ** to make it bold. Click the button to view a list of all available tags.",
+            "templateHelp": "Use {} to insert values of the spool object as text. For example, {id} will be replaced with the spool id, or {filament.material} will be replaced with the material of the spool. if a value is missing it will be replaced with \"?\". A second set of {} can be used to remove this. In addition, any text between the sets of {} will be removed if the value is missing. For example, {Lot Nr: {lot_nr}} will only show the label if the spool has a lot number. Enclose text with double asterix ** to make it bold. Click the button to view a list of all available tags.",
             "textSize": "Label Text Size",
             "showContent": "Print Label",
             "showQRCode": "Print QR Code",

client/src/pages/printing/printing.tsx

@@ -95,12 +95,35 @@ function applyTextFormatting(text: string): JSX.Element[] {
   });
   return elements;
 }
+
 export function renderLabelContents(template: string, spool: ISpool): JSX.Element {
   // Find all {tags} in the template string and loop over them
-  let result = template.replace(/\{(.*?)\}/g, function (_, tag) {
-    return getTagValue(tag, spool);
+  // let matches = [...template.matchAll(/(?:{(.*?))?{(.*?)}(.*?)(?:}(.*?))?/gs)];
+  let matches = [...template.matchAll(/{(?:[^}{]|{[^}{]*})*}/gs)];
+// console.log(matches){(?:[^}{]|{[^}{]*})*}
+  let label_text = template;
+  matches.forEach((match) => {
+    // console.log(match)
+    if ((match[0].match(/{/g)||[]).length == 1) {
+      let tag = match[0].replace(/[{}]/g, "");
+      // console.log(tag)
+      let tagValue = getTagValue(tag, spool)
+      label_text = label_text.replace(match[0], tagValue);
+    }
+    else if ((match[0].match(/{/g)||[]).length == 2) {
+      let structure = match[0].match(/{(.*?){(.*?)}(.*?)}/);
+      if (structure != null) {
+        const tag = structure[2];
+        let tagValue = getTagValue(tag, spool);
+        if (tagValue == "?") {
+          label_text = label_text.replace(match[0], "");
+        } else {
+          label_text = label_text.replace(match[0], structure[1] + tagValue + structure[3]);
+        }
+      }
+    }
   });
 
   // Split string on \n into individual lines
-  return <>{applyTextFormatting(result)}</>;
+  return <>{applyTextFormatting(label_text)}</>;
 }

client/src/pages/printing/spoolQrCodePrintingDialog.tsx

@@ -150,10 +150,10 @@ const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ spoolI
     `**{filament.vendor.name} - {filament.name}
 #{id} - {filament.material}**
 Spool Weight: {filament.spool_weight} g
-ET: {filament.settings_extruder_temp} °C
-BT: {filament.settings_bed_temp} °C
-Lot Nr: {lot_nr}
-{comment}
+{ET: {filament.settings_extruder_temp} °C}
+{BT: {filament.settings_bed_temp} °C}
+{Lot Nr: {lot_nr}}
+{{comment}}
 {filament.comment}
 {filament.vendor.comment}`;