Added ability to select and create multiple label settings

Donkie · Jun 18, 2024 · 0452b0b · 0452b0b
1 parent 426496b
commit 0452b0b
Show file tree

Hide file tree

Showing 7 changed files with 224 additions and 53 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -7,7 +7,6 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "axios": "^1.6.8",
     "@ant-design/icons": "^5.3.7",
     "@loadable/component": "^5.16.4",
     "@refinedev/antd": "^5.37.0",
@@ -18,8 +17,10 @@
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/react-query-devtools": "^4.36.1",
     "@types/loadable__component": "^5.13.9",
+    "@types/uuid": "^9.0.8",
     "@yudiel/react-qr-scanner": "^1.2.10",
     "antd": "^5.12.2",
+    "axios": "^1.6.8",
     "flag-icons": "^7.2.1",
     "i18next": "^23.11.4",
     "i18next-browser-languagedetector": "^7.2.1",
@@ -29,6 +30,7 @@
     "react-i18next": "^14.1.1",
     "react-router-dom": "^6.23.0",
     "react-to-print": "^2.15.1",
+    "uuid": "^10.0.0",
     "vite-plugin-svgr": "^4.2.0"
   },
   "devDependencies": {
@@ -65,4 +67,4 @@
       "last 1 safari version"
     ]
   }
-}
+}
diff --git a/client/public/locales/en/common.json b/client/public/locales/en/common.json
@@ -89,7 +89,14 @@
                 "none": "None",
                 "border": "Border",
                 "grid": "Grid"
-            }
+            },
+            "settings": "Settings",
+            "defaultSettings": "Default",
+            "addSettings": "Add New Setting",
+            "newSetting": "New",
+            "deleteSettings": "Delete Current Setting",
+            "deleteSettingsConfirm": "Are you sure you want to delete this setting?",
+            "settingsName": "Setting Name"
         },
         "qrcode": {
             "button": "Print QR Codes",

diff --git a/client/src/components/printing/printing.ts b/client/src/components/printing/printing.ts
@@ -1,6 +1,8 @@
 import { useGetSetting, useSetSetting } from "../../utils/querySettings";
+import { v4 as uuidv4 } from "uuid";
 
 export interface PrintSettings {
+  id: string;
   name?: string;
   margin?: { top: number; bottom: number; left: number; right: number };
   printerMargin?: { top: number; bottom: number; left: number; right: number };
@@ -32,21 +34,18 @@ export interface SpoolQRCodePrintSettings {
   labelSettings: QRCodePrintSettings;
 }
 
-function defaultSpoolQRCodePrintSettings(): SpoolQRCodePrintSettings {
-  return {
-    labelSettings: {
-      printSettings: {},
-    },
-  };
-}
-
-export function useGetPrintSettings(): SpoolQRCodePrintSettings[] {
+export function useGetPrintSettings(): SpoolQRCodePrintSettings[] | undefined {
   const { data } = useGetSetting("print_settings");
-  const parsed = data && data.value ? JSON.parse(data.value) : ([] as SpoolQRCodePrintSettings[]);
-  if (parsed.length === 0) {
-    parsed.push(defaultSpoolQRCodePrintSettings());
-  }
-  return parsed;
+  if (!data) return;
+  const parsed: SpoolQRCodePrintSettings[] =
+    data && data.value ? JSON.parse(data.value) : ([] as SpoolQRCodePrintSettings[]);
+  // Loop through all parsed and generate a new ID field if it's not set
+  return parsed.map((settings) => {
+    if (!settings.labelSettings.printSettings.id) {
+      settings.labelSettings.printSettings.id = uuidv4();
+    }
+    return settings;
+  });
 }
 
 export function useSetPrintSettings(): (spoolQRCodePrintSettings: SpoolQRCodePrintSettings[]) => void {

diff --git a/client/src/components/printing/printingDialog.tsx b/client/src/components/printing/printingDialog.tsx
@@ -24,6 +24,7 @@ interface PrintingDialogProps {
   setPrintSettings: (setPrintSettings: PrintSettings) => void;
   style?: string;
   extraSettings?: JSX.Element;
+  extraSettingsStart?: JSX.Element;
   visible: boolean;
   onCancel: () => void;
   title?: string;
@@ -67,6 +68,7 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({
   setPrintSettings,
   style,
   extraSettings,
+  extraSettingsStart,
   visible,
   onCancel,
   title,
@@ -195,16 +197,8 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({
       width={1200} // Set the modal width to accommodate the preview
     >
       <Row gutter={16}>
-        <Col
-          span={24}
-          style={{
-            whiteSpace: "pre-line",
-            marginBottom: "1em",
-          }}
-        >
-          {t("printing.generic.description")}
-        </Col>
         <Col span={14}>
+          {t("printing.generic.description")}
           <div
             style={{
               transform: "translateZ(0)",
@@ -259,6 +253,8 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({
         </Col>
         <Col span={10}>
           <Form labelAlign="left" colon={false} labelWrap={true} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
+            {extraSettingsStart}
+            <Divider />
             <Form.Item label={t("printing.generic.skipItems")}>
               <Row>
                 <Col span={12}>

diff --git a/client/src/components/printing/qrCodePrintingDialog.tsx b/client/src/components/printing/qrCodePrintingDialog.tsx
@@ -17,6 +17,7 @@ interface QRCodePrintingDialogProps {
   setPrintSettings: (setPrintSettings: QRCodePrintSettings) => void;
   onCancel: () => void;
   extraSettings?: JSX.Element;
+  extraSettingsStart?: JSX.Element;
 }
 
 const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
@@ -26,6 +27,7 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
   setPrintSettings,
   onCancel,
   extraSettings,
+  extraSettingsStart,
 }) => {
   const t = useTranslate();
 
@@ -61,6 +63,7 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
         printSettings.printSettings = newSettings;
         setPrintSettings(printSettings);
       }}
+      extraSettingsStart={extraSettingsStart}
       extraSettings={
         <>
           <Form.Item label={t("printing.qrcode.showContent")}>