feat(donations): Donation table filtering

src/components/donations/DonationsOverview.svelte

@@ -23,6 +23,7 @@
   import DonationStatus from "./DonationStatus.svelte";
   import DonationTableAction from "./DonationTableAction.svelte";
   import DeleteDonationModal from "./DeleteDonationModal.svelte";
+  import { donationDonorFilter, donationRunnerFilter } from "../shared/tablefilters";
   $: searchvalue = "";
   $: active_deletes = [];
   $: active_edits = [];
@@ -54,7 +55,7 @@
       cell: (info) => {
         return renderComponent(DonationDonor, { donor: info.getValue() });
       },
-      filterFn: `includesString`,
+      filterFn: `donor`,
     },
     {
       accessorKey: "runner",
@@ -62,7 +63,7 @@
       cell: (info) => {
         return renderComponent(DonationRunner, { runner: info.getValue() });
       },
-      filterFn: `includesString`,
+      filterFn: `runner`,
     },
     {
       accessorKey: "amountPerDistance",
@@ -139,6 +140,10 @@
         pageSize: 50,
       },
     },
+    filterFns: {
+      donor: donationDonorFilter,
+      runner: donationRunnerFilter,
+    },
     enableRowSelection: true,
     getCoreRowModel: getCoreRowModel(),
     getFilteredRowModel: getFilteredRowModel(),

src/components/shared/tablefilters.js

@@ -15,6 +15,21 @@ export const groupFilter = (row, columnId, value) => {
 };
 export const runnerFilter = (row, columnId, value) => {
     const runner = row.getValue(columnId);
+    return filterRunner(runner, value)
+};
+
+export const donationRunnerFilter = (row, columnId, value) => {
+    const runner = row.getValue(columnId);
+    if(!runner){return false;}
+    return filterRunner(runner, value)
+};
+
+export const donationDonorFilter = (row, columnId, value) => {
+    const runner = row.getValue(columnId);
+    return filterRunner(runner, value)
+};
+
+function filterRunner(runner, value) {
     if (!runner && value == "blanko") { return true }
     if (!runner) { return false }
 
@@ -26,7 +41,7 @@ export const runnerFilter = (row, columnId, value) => {
         return `${runner.firstname} ${runner.middlename} ${runner.lastname}`.toLowerCase().includes(value.toLowerCase())
     }
     return `${runner.firstname} ${runner.lastname}`.toLowerCase().includes(value.toLowerCase())
-};
+}
 
 export const statusFilter = (row, columnId, value) => {
     const status = row.getValue(columnId);