Client: Filament name filtering/sorting now works

client/src/components/column.tsx

@@ -18,6 +18,7 @@ dayjs.extend(utc);
 
 interface BaseColumnProps<Obj> {
   id: keyof Obj & string;
+  dataId?: keyof Obj & string;
   i18ncat?: string;
   i18nkey?: string;
   dataSource: Obj[];
@@ -50,12 +51,15 @@ function Column<Obj>(props: BaseColumnProps<Obj> & FilteredColumnProps & CustomC
     dataIndex: props.id,
     title: t(props.i18nkey ?? `${props.i18ncat}.fields.${props.id}`),
     sorter: true,
-    sortOrder: getSortOrderForField(typedSorters, props.id),
+    sortOrder: getSortOrderForField(typedSorters, props.dataId ?? props.id),
     filterMultiple: props.allowMultipleFilters ?? true,
   };
   if (props.filters && props.filteredValue) {
     columnProps.filters = props.filters;
     columnProps.filteredValue = props.filteredValue;
+    if (props.dataId) {
+      columnProps.key = props.dataId;
+    }
   }
   if (props.render) {
     columnProps.render = props.render;
@@ -80,7 +84,7 @@ export function RichColumn<Obj>(props: BaseColumnProps<Obj>) {
 }
 
 interface FilteredQueryColumnProps<Obj> extends BaseColumnProps<Obj> {
-  filterValueQuery: UseQueryResult<string[]>;
+  filterValueQuery: UseQueryResult<string[] | ColumnFilterItem[]>;
   allowMultipleFilters?: boolean;
 }
 
@@ -90,10 +94,13 @@ export function FilteredQueryColumn<Obj>(props: FilteredQueryColumnProps<Obj>) {
   let filters: ColumnFilterItem[] = [];
   if (query.data) {
     filters = query.data.map((item) => {
-      return {
-        text: item,
-        value: item,
-      };
+      if (typeof item === "string") {
+        return {
+          text: item,
+          value: item,
+        };
+      }
+      return item;
     });
   }
   filters.push({
@@ -102,7 +109,7 @@ export function FilteredQueryColumn<Obj>(props: FilteredQueryColumnProps<Obj>) {
   });
 
   const typedFilters = typeFilters<Obj>(props.tableState.filters);
-  const filteredValue = getFiltersForField(typedFilters, props.id);
+  const filteredValue = getFiltersForField(typedFilters, props.dataId ?? props.id);
 
   return Column({ ...props, filters, filteredValue });
 }
@@ -160,10 +167,13 @@ export function SpoolIconColumn<Obj>(props: SpoolIconColumnProps<Obj>) {
   let filters: ColumnFilterItem[] = [];
   if (query.data) {
     filters = query.data.map((item) => {
-      return {
-        text: item,
-        value: item,
-      };
+      if (typeof item === "string") {
+        return {
+          text: item,
+          value: item,
+        };
+      }
+      return item;
     });
   }
   filters.push({
@@ -172,7 +182,7 @@ export function SpoolIconColumn<Obj>(props: SpoolIconColumnProps<Obj>) {
   });
 
   const typedFilters = typeFilters<Obj>(props.tableState.filters);
-  const filteredValue = getFiltersForField(typedFilters, props.id);
+  const filteredValue = getFiltersForField(typedFilters, props.dataId ?? props.id);
 
   return Column({
     ...props,

client/src/components/otherModels.tsx

@@ -1,10 +1,11 @@
 import { useQuery } from "@tanstack/react-query";
 import { IFilament } from "../pages/filaments/model";
 import { IVendor } from "../pages/vendors/model";
+import { ColumnFilterItem } from "antd/es/table/interface";
 
-export function useSpoolmanFilamentFullNames() {
+export function useSpoolmanFilamentFilter() {
   const apiEndpoint = import.meta.env.VITE_APIURL;
-  return useQuery<IFilament[], unknown, string[]>({
+  return useQuery<IFilament[], unknown, ColumnFilterItem[]>({
     queryKey: ["filaments"],
     queryFn: async () => {
       const response = await fetch(apiEndpoint + "/filament");
@@ -15,20 +16,28 @@ export function useSpoolmanFilamentFullNames() {
     },
     select: (data) => {
       // Concatenate vendor name and filament name
-      let names = data
+      const names = data
+        // Remove empty names
         .filter((filament) => {
           return filament.name !== null && filament.name !== undefined && filament.name !== "";
         })
+        // Transform to ColumnFilterItem
         .map((filament) => {
+          let name = "";
           if (filament.vendor?.name) {
-            return `${filament.vendor.name} - ${filament.name ?? "<unknown>"}`;
+            name = `${filament.vendor.name} - ${filament.name ?? "<unknown>"}`;
           } else {
-            return `${filament.name ?? "<unknown>"}`;
+            name = `${filament.name ?? "<unknown>"}`;
           }
+          return {
+            text: name,
+            value: filament.id,
+          };
         })
-        .sort();
-      // Remove duplicates
-      names = [...new Set(names)];
+        // Remove duplicates
+        .filter((item, index, self) => self.findIndex((t) => t.value === item.value) === index)
+        // Sort by name
+        .sort((a, b) => a.text.localeCompare(b.text));
       return names;
     },
   });

client/src/components/spoolSelectModal.tsx

@@ -5,7 +5,7 @@ import { FilteredQueryColumn, SortedColumn, SpoolIconColumn } from "./column";
 import { TableState } from "../utils/saveload";
 import { useTable } from "@refinedev/antd";
 import { t } from "i18next";
-import { useSpoolmanFilamentFullNames, useSpoolmanMaterials } from "./otherModels";
+import { useSpoolmanFilamentFilter, useSpoolmanMaterials } from "./otherModels";
 
 interface Props {
   visible: boolean;
@@ -15,7 +15,8 @@ interface Props {
 }
 
 interface ISpoolCollapsed extends ISpool {
-  "filament.name": string;
+  combined_name: string;
+  "filament.id": number;
   "filament.material"?: string;
 }
 
@@ -37,10 +38,10 @@ const SpoolSelectModal: React.FC<Props> = ({ visible, description, onCancel, onC
       pageSize: 10,
     },
     sorters: {
-      mode: "off",
+      mode: "server",
     },
     filters: {
-      mode: "off",
+      mode: "server",
     },
   });
 
@@ -63,7 +64,8 @@ const SpoolSelectModal: React.FC<Props> = ({ visible, description, onCancel, onC
         }
         return {
           ...element,
-          "filament.name": filament_name,
+          combined_name: filament_name,
+          "filament.id": element.filament.id,
           "filament.material": element.filament.material,
         };
       }),
@@ -128,12 +130,13 @@ const SpoolSelectModal: React.FC<Props> = ({ visible, description, onCancel, onC
             tableState,
           })}
           {SpoolIconColumn({
-            id: "filament.name",
-            i18ncat: "spool",
+            id: "combined_name",
+            dataId: "filament.id",
+            i18nkey: "spool.fields.filament_name",
             color: (record: ISpoolCollapsed) => record.filament.color_hex,
             dataSource,
             tableState,
-            filterValueQuery: useSpoolmanFilamentFullNames(),
+            filterValueQuery: useSpoolmanFilamentFilter(),
           })}
           {FilteredQueryColumn({
             id: "filament.material",