Client: Now uses server side sorting

Still some stuff left to do #98

client/src/components/spoolSelectModal.tsx

@@ -1,12 +1,11 @@
 import React, { useState } from "react";
 import { Modal, Table, Checkbox, Space, Row, Col, message } from "antd";
 import { ISpool } from "../pages/spools/model";
-import { FilteredColumn, SortedColumn, SpoolIconColumn } from "./column";
+import { FilteredQueryColumn, 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";
 import { t } from "i18next";
+import { useSpoolmanFilamentFullNames, useSpoolmanMaterials } from "./otherModels";
 
 interface Props {
   visible: boolean;
@@ -16,8 +15,8 @@ interface Props {
 }
 
 interface ISpoolCollapsed extends ISpool {
-  filament_name: string;
-  material?: string;
+  "filament.name": string;
+  "filament.material"?: string;
 }
 
 const SpoolSelectModal: React.FC<Props> = ({ visible, description, onCancel, onContinue }) => {
@@ -64,28 +63,17 @@ const SpoolSelectModal: React.FC<Props> = ({ visible, description, onCancel, onC
         }
         return {
           ...element,
-          filament_name,
-          material: element.filament.material,
+          "filament.name": filament_name,
+          "filament.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));
+      const filtered = dataSource.map((spool) => spool.id).filter((spool) => !prevSelected.includes(spool));
       return select ? [...prevSelected, ...filtered] : filtered;
     });
   };
@@ -98,7 +86,7 @@ const SpoolSelectModal: React.FC<Props> = ({ visible, description, onCancel, onC
   };
 
   // State for the select/unselect all checkbox
-  const isAllFilteredSelected = filteredDataSource.every((spool) => selectedItems.includes(spool.id));
+  const isAllFilteredSelected = dataSource.every((spool) => selectedItems.includes(spool.id));
 
   return (
     <Modal
@@ -123,7 +111,7 @@ const SpoolSelectModal: React.FC<Props> = ({ visible, description, onCancel, onC
         <Table
           {...tableProps}
           rowKey="id"
-          dataSource={filteredDataSource}
+          dataSource={dataSource}
           pagination={false}
           scroll={{ x: "max-content", y: 200 }}
         >
@@ -140,17 +128,19 @@ const SpoolSelectModal: React.FC<Props> = ({ visible, description, onCancel, onC
             tableState,
           })}
           {SpoolIconColumn({
-            id: "filament_name",
+            id: "filament.name",
             i18ncat: "spool",
             color: (record: ISpoolCollapsed) => record.filament.color_hex,
             dataSource,
             tableState,
+            filterValueQuery: useSpoolmanFilamentFullNames(),
           })}
-          {FilteredColumn({
-            id: "material",
-            i18ncat: "spool",
+          {FilteredQueryColumn({
+            id: "filament.material",
+            i18nkey: "spool.fields.material",
             dataSource,
             tableState,
+            filterValueQuery: useSpoolmanMaterials(),
           })}
         </Table>
         <Row>