Updated spool select modal with new table style

client/src/components/spoolSelectModal.tsx

@@ -6,6 +6,7 @@ import { TableState } from "../utils/saveload";
 import { useTable } from "@refinedev/antd";
 import { t } from "i18next";
 import { useSpoolmanFilamentFilter, useSpoolmanMaterials } from "./otherModels";
+import { removeUndefined } from "../utils/filtering";
 
 interface Props {
   visible: boolean;
@@ -20,12 +21,27 @@ interface ISpoolCollapsed extends ISpool {
   "filament.material"?: string;
 }
 
+function collapseSpool(element: ISpool): ISpoolCollapsed {
+  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,
+    combined_name: filament_name,
+    "filament.id": element.filament.id,
+    "filament.material": element.filament.material,
+  };
+}
+
 const SpoolSelectModal: React.FC<Props> = ({ visible, description, onCancel, onContinue }) => {
   const [selectedItems, setSelectedItems] = useState<number[]>([]);
   const [showArchived, setShowArchived] = useState(false);
   const [messageApi, contextHolder] = message.useMessage();
 
-  const { tableProps, sorters, filters, current, pageSize } = useTable<ISpool>({
+  const { tableProps, sorters, filters, current, pageSize } = useTable<ISpoolCollapsed>({
     meta: {
       queryParams: {
         ["allow_archived"]: showArchived,
@@ -43,6 +59,14 @@ const SpoolSelectModal: React.FC<Props> = ({ visible, description, onCancel, onC
     filters: {
       mode: "server",
     },
+    queryOptions: {
+      select(data) {
+        return {
+          total: data.total,
+          data: data.data.map(collapseSpool),
+        };
+      },
+    },
   });
 
   // Store state in local storage
@@ -54,21 +78,7 @@ const SpoolSelectModal: React.FC<Props> = ({ visible, description, onCancel, onC
 
   // Collapse the dataSource to a mutable list and add a filament_name field
   const dataSource: ISpoolCollapsed[] = React.useMemo(
-    () =>
+    () => (tableProps.dataSource || []).map((record) => ({ ...record })),
-      (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,
-          combined_name: filament_name,
-          "filament.id": element.filament.id,
-          "filament.material": element.filament.material,
-        };
-      }),
     [tableProps.dataSource]
   );
 
@@ -112,37 +122,44 @@ const SpoolSelectModal: React.FC<Props> = ({ visible, description, onCancel, onC
       {contextHolder}
       <Space direction="vertical" style={{ width: "100%" }}>
         {description && <div>{description}</div>}
-        <Table {...tableProps} rowKey="id" dataSource={dataSource} pagination={false} scroll={{ y: 200 }}>
+        <Table
-          <Table.Column
+          {...tableProps}
-            width={50}
+          rowKey="id"
-            render={(_, item: ISpool) => (
+          dataSource={dataSource}
-              <Checkbox checked={selectedItems.includes(item.id)} onChange={() => handleSelectItem(item.id)} />
+          pagination={false}
-            )}
+          scroll={{ y: 200 }}
-          />
+          columns={removeUndefined([
-          {SortedColumn({
+            {
-            id: "id",
+              width: 50,
-            i18ncat: "spool",
+              render: (_, item: ISpool) => (
-            dataSource,
+                <Checkbox checked={selectedItems.includes(item.id)} onChange={() => handleSelectItem(item.id)} />
-            tableState,
+              ),
-            width: 80,
+            },
-          })}
+            SortedColumn({
-          {SpoolIconColumn({
+              id: "id",
-            id: "combined_name",
+              i18ncat: "spool",
-            dataId: "filament.id",
+              dataSource,
-            i18nkey: "spool.fields.filament_name",
+              tableState,
-            color: (record: ISpoolCollapsed) => record.filament.color_hex,
+              width: 80,
-            dataSource,
+            }),
-            tableState,
+            SpoolIconColumn({
-            filterValueQuery: useSpoolmanFilamentFilter(),
+              id: "combined_name",
-          })}
+              dataId: "filament.id",
-          {FilteredQueryColumn({
+              i18nkey: "spool.fields.filament_name",
-            id: "filament.material",
+              color: (record: ISpoolCollapsed) => record.filament.color_hex,
-            i18nkey: "spool.fields.material",
+              dataSource,
-            dataSource,
+              tableState,
-            tableState,
+              filterValueQuery: useSpoolmanFilamentFilter(),
-            filterValueQuery: useSpoolmanMaterials(),
+            }),
-          })}
+            FilteredQueryColumn({
-        </Table>
+              id: "filament.material",
+              i18nkey: "spool.fields.material",
+              dataSource,
+              tableState,
+              filterValueQuery: useSpoolmanMaterials(),
+            }),
+          ])}
+        />
         <Row>
           <Col span={12}>
             <Checkbox