Client: Added a spool selection dialog

client/src/components/printing/qrCodePrintingDialog.tsx

@@ -11,11 +11,13 @@ interface QRCodeData {
 interface QRCodePrintingDialogProps {
   visible: boolean;
   items: QRCodeData[];
+  onCancel: () => void;
 }
 
 const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
   visible,
   items,
+  onCancel,
 }) => {
   const [showContent, setShowContent] = useSavedState(
     "print-showContent",
@@ -100,7 +102,7 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
                 width: auto;
             }
             `}
-      onCancel={() => true}
+      onCancel={onCancel}
     />
   );
 };

client/src/components/selectAndPrintDialog.tsx

@@ -0,0 +1,51 @@
+// React FC that combines the functionality of first selecting what spools to print QR code for, and then opens up the QR code printing dialog.
+
+import React from "react";
+import SpoolSelectModal from "./spoolSelectModal";
+import QRCodePrintingDialog from "./printing/qrCodePrintingDialog";
+import { Button } from "antd";
+import { ISpool } from "../pages/spools/model";
+import { PrinterOutlined } from "@ant-design/icons";
+
+const SelectAndPrint: React.FC = () => {
+  const [step, setStep] = React.useState(0);
+  const [selectedSpools, setSelectedSpools] = React.useState<ISpool[]>([]);
+  return (
+    <>
+      <Button
+        type="primary"
+        icon={<PrinterOutlined />}
+        onClick={() => {
+          setStep(1);
+        }}
+      >
+        Print QR Codes
+      </Button>
+      <SpoolSelectModal
+        visible={step === 1}
+        description="Select spools to print QR codes for."
+        onCancel={() => {
+          setStep(0);
+        }}
+        onContinue={(spools) => {
+          setSelectedSpools(spools);
+          setStep(2);
+        }}
+      />
+      <QRCodePrintingDialog
+        visible={step === 2}
+        onCancel={() => {
+          setStep(1);
+        }}
+        items={selectedSpools.map((spool) => ({
+          value: `S:${spool.id}`,
+          //   value: `https://spoolman.lan/spool/show/${spool.id}`,
+          // label: `hello`,
+          errorLevel: "H",
+        }))}
+      />
+    </>
+  );
+};
+
+export default SelectAndPrint;

client/src/components/spoolSelectModal.tsx

@@ -0,0 +1,206 @@
+import React, { useState } from "react";
+import { Modal, Table, Checkbox, Space, Row, Col } from "antd";
+import { ISpool } from "../pages/spools/model";
+import { FilteredColumn, SortedColumn, SpoolIconColumn } from "./column";
+import { TableState } from "../utils/saveload";
+import { useTable } from "@refinedev/antd";
+import { genericSorter, typeSorters } from "../utils/sorting";
+import { genericFilterer, typeFilters } from "../utils/filtering";
+
+interface Props {
+  visible: boolean;
+  description?: string;
+  onCancel: () => void;
+  onContinue: (selectedSpools: ISpool[]) => void;
+}
+
+interface ISpoolCollapsed extends ISpool {
+  filament_name: string;
+  material?: string;
+}
+
+const SpoolSelectModal: React.FC<Props> = ({
+  visible,
+  description,
+  onCancel,
+  onContinue,
+}) => {
+  const [selectedItems, setSelectedItems] = useState<number[]>([]);
+  const [showArchived, setShowArchived] = useState(false);
+
+  const { tableProps, sorters, filters, current, pageSize } = useTable<ISpool>({
+    meta: {
+      queryParams: {
+        ["allow_archived"]: showArchived,
+      },
+    },
+    syncWithLocation: false,
+    pagination: {
+      mode: "off",
+      current: 1,
+      pageSize: 10,
+    },
+    sorters: {
+      mode: "off",
+    },
+    filters: {
+      mode: "off",
+    },
+  });
+
+  // Store state in local storage
+  const tableState: TableState = {
+    sorters,
+    filters,
+    pagination: { current, pageSize },
+  };
+
+  // Collapse the dataSource to a mutable list and add a filament_name field
+  const dataSource: ISpoolCollapsed[] = React.useMemo(
+    () =>
+      (tableProps.dataSource ?? []).map((element) => {
+        let filament_name: string;
+        if (element.filament.vendor && "name" in element.filament.vendor) {
+          filament_name = `${element.filament.vendor.name} - ${element.filament.name}`;
+        } else {
+          filament_name =
+            element.filament.name ?? element.filament.id.toString();
+        }
+        return {
+          ...element,
+          filament_name,
+          material: element.filament.material,
+        };
+      }),
+    [tableProps.dataSource]
+  );
+
+  // Type the sorters and filters
+  const typedSorters = typeSorters<ISpoolCollapsed>(sorters);
+  const typedFilters = typeFilters<ISpoolCollapsed>(filters);
+
+  // Filter and sort the dataSource
+  const filteredDataSource = React.useMemo(() => {
+    const filtered = dataSource.filter(genericFilterer(typedFilters));
+    filtered.sort(genericSorter(typedSorters));
+    return filtered;
+  }, [dataSource, typedFilters, typedSorters]);
+
+  // Function to add/remove all filtered items from selected items
+  const selectUnselectFiltered = (select: boolean) => {
+    setSelectedItems((prevSelected) => {
+      const filtered = filteredDataSource
+        .map((spool) => spool.id)
+        .filter((spool) => !prevSelected.includes(spool));
+      return select ? [...prevSelected, ...filtered] : filtered;
+    });
+  };
+
+  // Handler for selecting/unselecting individual items
+  const handleSelectItem = (item: number) => {
+    setSelectedItems((prevSelected) =>
+      prevSelected.includes(item)
+        ? prevSelected.filter((selected) => selected !== item)
+        : [...prevSelected, item]
+    );
+  };
+
+  // State for the select/unselect all checkbox
+  const isAllFilteredSelected = filteredDataSource.every((spool) =>
+    selectedItems.includes(spool.id)
+  );
+
+  return (
+    <Modal
+      title="Select Spools"
+      open={visible}
+      onCancel={onCancel}
+      onOk={() => {
+        onContinue(
+          dataSource.filter((spool) => selectedItems.includes(spool.id))
+        );
+      }}
+      width={600}
+    >
+      <Space direction="vertical" style={{ width: "100%" }}>
+        {description && <div>{description}</div>}
+        <Table
+          {...tableProps}
+          rowKey="id"
+          dataSource={filteredDataSource}
+          pagination={false}
+          scroll={{ x: "max-content", y: 200 }}
+        >
+          <Table.Column
+            width={50}
+            render={(_, item: ISpool) => (
+              <Checkbox
+                checked={selectedItems.includes(item.id)}
+                onChange={() => handleSelectItem(item.id)}
+              />
+            )}
+          />
+          {SortedColumn({
+            id: "id",
+            i18ncat: "spool",
+            dataSource,
+            tableState,
+          })}
+          {SpoolIconColumn({
+            id: "filament_name",
+            i18ncat: "spool",
+            color: (record: ISpoolCollapsed) => record.filament.color_hex,
+            dataSource,
+            tableState,
+          })}
+          {FilteredColumn({
+            id: "material",
+            i18ncat: "spool",
+            dataSource,
+            tableState,
+          })}
+        </Table>
+        <Row>
+          <Col span={12}>
+            <Checkbox
+              checked={isAllFilteredSelected}
+              onChange={(e) => {
+                selectUnselectFiltered(e.target.checked);
+              }}
+            >
+              Select/Unselect All
+            </Checkbox>
+          </Col>
+          <Col span={12}>
+            <div style={{ float: "right" }}>
+              {selectedItems.length} spool
+              {selectedItems.length === 1 ? "" : "s"} selected
+            </div>
+          </Col>
+          <Col span={12}>
+            <Checkbox
+              checked={showArchived}
+              onChange={(e) => {
+                setShowArchived(e.target.checked);
+                if (!e.target.checked) {
+                  // Remove archived spools from selected items
+                  setSelectedItems((prevSelected) =>
+                    prevSelected.filter(
+                      (selected) =>
+                        dataSource.find((spool) => spool.id === selected)
+                          ?.archived !== true
+                    )
+                  );
+                }
+              }}
+            >
+              Show Archived
+            </Checkbox>
+          </Col>
+        </Row>
+      </Space>
+    </Modal>
+  );
+};
+
+export default SpoolSelectModal;

client/src/pages/spools/list.tsx

@@ -37,6 +37,7 @@ import {
   SpoolIconColumn,
 } from "../../components/column";
 import { setSpoolArchived } from "./functions";
+import SelectAndPrint from "../../components/selectAndPrintDialog";
 
 dayjs.extend(utc);
 
@@ -191,6 +192,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
     <List
       headerButtons={({ defaultButtons }) => (
         <>
+          <SelectAndPrint />
           <Button
             type="primary"
             icon={<InboxOutlined />}