Client: Added filtering capabilities to filaments

client/src/pages/filaments/list.tsx

@@ -18,6 +18,8 @@ import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import { IFilament } from "./model";
 import {
+  filterPopulator,
+  genericFilterer,
   genericSorter,
   getSortOrderForField,
 } from "../../utils/sorting";
@@ -40,7 +42,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
   });
 
   // Fetch data from the API
-  const { tableProps, sorters } = useTable<IFilament>({
+  const { tableProps, sorters, filters } = useTable<IFilament>({
     syncWithLocation: false,
     pagination: {
       mode: "off", // Perform pagination in antd's Table instead. Otherwise client-side sorting/filtering doesn't work.
@@ -49,6 +51,9 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
       mode: "off", // Disable server-side sorting
       initial: sorters_initial,
     },
+    filters: {
+      mode: "off", // Disable server-side filtering
+    },
   });
 
   // Store sorter state in local storage
@@ -68,15 +73,17 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
     }
   });
 
-  // Sort dataSource by the sorters
+  // Filter dataSource by the filters
-  dataSource.sort(genericSorter(sorters));
+  const filteredDataSource = dataSource.filter(genericFilterer(filters));
 
+  // Sort dataSource by the sorters
+  filteredDataSource.sort(genericSorter(sorters));
 
   return (
     <List>
       <Table
         {...tableProps}
-        dataSource={dataSource}
+        dataSource={filteredDataSource}
         pagination={{ showSizeChanger: true, pageSize: 20 }}
         rowKey="id"
       >
@@ -94,18 +101,21 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
             sorters_initial,
             "vendor_name"
           )}
+          filters={filterPopulator(dataSource, "vendor_name")}
         />
         <Table.Column
           dataIndex="name"
           title="Name"
           sorter={true}
           defaultSortOrder={getSortOrderForField(sorters_initial, "name")}
+          filters={filterPopulator(dataSource, "name")}
         />
         <Table.Column
           dataIndex="material"
           title="Material"
           sorter={true}
           defaultSortOrder={getSortOrderForField(sorters_initial, "material")}
+          filters={filterPopulator(dataSource, "material")}
         />
         <Table.Column
           dataIndex="price"
@@ -194,6 +204,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
             sorters_initial,
             "article_number"
           )}
+          filters={filterPopulator(dataSource, "article_number")}
         />
         <Table.Column
           dataIndex={["registered"]}

client/src/utils/sorting.ts

@@ -1,5 +1,5 @@
-import { CrudSort } from "@refinedev/core";
+import { CrudFilter, CrudSort } from "@refinedev/core";
-import { SortOrder } from "antd/es/table/interface";
+import { ColumnFilterItem, SortOrder } from "antd/es/table/interface";
 
 interface IObj {
     [key: string]: unknown;
@@ -74,3 +74,77 @@ export function getSortOrderForField(sorters: CrudSort[], field: string): SortOr
     }
     return undefined;
 }
+
+/**
+ * Returns a filtering function that can be used to filter an array of objects based on the provided filters.
+ * @param filters An array of `CrudFilter` objects that define the filtering criteria.
+ * @returns A function that returns a boolean value based on whether the provided object matches the filtering criteria.
+ */
+export function genericFilterer(filters: CrudFilter[]) {
+    return (record: IObj) => {
+        for (const filter of filters) {
+            if (!("field" in filter)) {
+                console.error("Filter must be of type LogicalFilter");
+                return false;
+            }
+            if (!Array.isArray(filter.value)) {
+                console.error("Filter value must be an array of strings.");
+                return false;
+            }
+            let value = record[filter.field];
+            if (value === undefined || value === null) {
+                value = "";
+            }
+            if (typeof value !== "string") {
+                console.error("Only string fields can be filtered, field is of type " + typeof value);
+                return false;
+            }
+            switch (filter.operator) {
+                case "in":
+                    if (!filter.value.includes(value)) {
+                        return false;
+                    }
+                    break;
+                default:
+                    console.error(`Not implemented operator: ${filter.operator}`);
+                    return false;
+            }
+        }
+        return true;
+    }
+}
+
+/**
+ * Populates an array of `ColumnFilterItem` objects based on the unique values of a given field in an array of objects.
+ * @param dataSource An array of objects to filter.
+ * @param field The name of the field to filter on.
+ * @returns An array of `ColumnFilterItem` objects representing the unique values of the specified field in the input array.
+ */
+export function filterPopulator(dataSource: IObj[], field: string): ColumnFilterItem[] {
+    const filters: ColumnFilterItem[] = [];
+    dataSource.forEach((element) => {
+        const value = element[field];
+        if (typeof value === "string" && value !== "") {
+            // Make sure it's not already in the filters
+            if (filters.find((f) => f.value === value)) {
+                return;
+            }
+            filters.push({
+                text: value,
+                value: value,
+            });
+        }
+    });
+    // Sort the filters
+    filters.sort((a, b) => {
+        if (typeof a.text !== "string" || typeof b.text !== "string") {
+            return 0;
+        }
+        return a.text.localeCompare(b.text);
+    });
+    filters.push({
+        text: "<empty>",
+        value: "",
+    });
+    return filters;
+}