Spools to print are now stored using query parameters

client/src/pages/printing/index.tsx

@@ -7,6 +7,7 @@ import { theme } from "antd";
 import SpoolQRCodePrintingDialog from "./spoolQrCodePrintingDialog";
 import SpoolSelectModal from "./spoolSelectModal";
 import { ISpool } from "../spools/model";
+import { useNavigate, useSearchParams } from "react-router-dom";
 
 dayjs.extend(utc);
 
@@ -15,9 +16,10 @@ const { useToken } = theme;
 export const Printing: React.FC<IResourceComponentsProps> = () => {
   const { token } = useToken();
   const t = useTranslate();
+  const [searchParams, setSearchParams] = useSearchParams();
 
-  const [step, setStep] = React.useState<0 | 1>(0);
+  const spoolIds = searchParams.getAll("spools").map(Number);
-  const [selectedSpools, setSelectedSpools] = React.useState<ISpool[]>([]);
+  const step = spoolIds.length > 0 ? 1 : 0;
 
   return (
     <Content
@@ -37,12 +39,16 @@ export const Printing: React.FC<IResourceComponentsProps> = () => {
         <SpoolSelectModal
           description={t("printing.spoolSelect.description")}
           onContinue={(spools) => {
-            setSelectedSpools(spools);
+            setSearchParams((prev) => {
-            setStep(1);
+              const newParams = new URLSearchParams(prev);
+              newParams.delete("spools");
+              spools.forEach((spool) => newParams.append("spools", spool.id.toString()));
+              return newParams;
+            });
           }}
         />
       )}
-      {step === 1 && <SpoolQRCodePrintingDialog items={selectedSpools} />}
+      {step === 1 && <SpoolQRCodePrintingDialog spoolIds={spoolIds} />}
     </Content>
   );
 };

client/src/pages/printing/spoolQrCodePrintingDialog.tsx

@@ -17,16 +17,24 @@ 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";
 
 const { Text } = Typography;
 
 interface SpoolQRCodePrintingDialog {
-  items: ISpool[];
+  spoolIds: number[];
 }
 
-const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ items }) => {
+const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ spoolIds }) => {
   const t = useTranslate();
 
+  const itemQueries = useGetSpoolsByIds(spoolIds);
+  const items = itemQueries
+    .map((itemQuery) => {
+      return itemQuery.data ?? null;
+    })
+    .filter((item) => item !== null) as ISpool[];
+
   // Selected setting state
   const [selectedSetting, setSelectedSetting] = useState<string | undefined>();
 
@@ -265,8 +273,7 @@ Lot Nr: {lot_nr}
           </Form.Item>
         </>
       }
-      items={items.map(function (spool) {
+      items={items.map((spool) => ({
-        return {
         value: `web+spoolman:s-${spool.id}`,
         label: (
           <p
@@ -280,8 +287,7 @@ Lot Nr: {lot_nr}
           </p>
         ),
         errorLevel: "H",
-        };
+      }))}
-      })}
       extraSettings={
         <>
           <Form.Item label={t("printing.qrcode.template")}>

client/src/pages/spools/functions.tsx

@@ -5,6 +5,7 @@ import { ISpool } from "./model";
 import { IFilament } from "../filaments/model";
 import { SpoolType, useGetExternalDBFilaments } from "../../utils/queryExternalDB";
 import { useMemo } from "react";
+import { useQueries } from "@tanstack/react-query";
 
 export async function setSpoolArchived(spool: ISpool, archived: boolean) {
   const init: RequestInit = {
@@ -20,6 +21,27 @@ export async function setSpoolArchived(spool: ISpool, archived: boolean) {
   await fetch(request, init);
 }
 
+/**
+ * Returns an array of queries using the useQueries hook from @tanstack/react-query.
+ * Each query fetches a spool by its ID from the server.
+ *
+ * @param {number[]} ids - An array of spool IDs to fetch.
+ * @return An array of query results, each containing the fetched spool data.
+ */
+export function useGetSpoolsByIds(ids: number[]) {
+  return useQueries({
+    queries: ids.map((id) => {
+      return {
+        queryKey: ["spool", id],
+        queryFn: async () => {
+          const res = await fetch(getAPIURL() + "/spool/" + id);
+          return (await res.json()) as ISpool;
+        },
+      };
+    }),
+  });
+}
+
 /**
  * Formats a filament label with the given parameters.
  */