diff --git a/client/src/pages/printing/index.tsx b/client/src/pages/printing/index.tsx index 3e132dd..86694fc 100644 --- a/client/src/pages/printing/index.tsx +++ b/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 = () => { const { token } = useToken(); const t = useTranslate(); + const [searchParams, setSearchParams] = useSearchParams(); - const [step, setStep] = React.useState<0 | 1>(0); - const [selectedSpools, setSelectedSpools] = React.useState([]); + const spoolIds = searchParams.getAll("spools").map(Number); + const step = spoolIds.length > 0 ? 1 : 0; return ( = () => { { - setSelectedSpools(spools); - setStep(1); + setSearchParams((prev) => { + const newParams = new URLSearchParams(prev); + newParams.delete("spools"); + spools.forEach((spool) => newParams.append("spools", spool.id.toString())); + return newParams; + }); }} /> )} - {step === 1 && } + {step === 1 && } ); }; diff --git a/client/src/pages/printing/spoolQrCodePrintingDialog.tsx b/client/src/pages/printing/spoolQrCodePrintingDialog.tsx index 8f8d12a..c451a2a 100644 --- a/client/src/pages/printing/spoolQrCodePrintingDialog.tsx +++ b/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 = ({ items }) => { +const SpoolQRCodePrintingDialog: React.FC = ({ 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(); @@ -265,23 +273,21 @@ Lot Nr: {lot_nr} } - items={items.map(function (spool) { - return { - value: `web+spoolman:s-${spool.id}`, - label: ( -

- {renderLabelContents(template, spool)} -

- ), - errorLevel: "H", - }; - })} + items={items.map((spool) => ({ + value: `web+spoolman:s-${spool.id}`, + label: ( +

+ {renderLabelContents(template, spool)} +

+ ), + errorLevel: "H", + }))} extraSettings={ <> diff --git a/client/src/pages/spools/functions.tsx b/client/src/pages/spools/functions.tsx index fa2e309..8dfba02 100644 --- a/client/src/pages/spools/functions.tsx +++ b/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. */