pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-02-16 01:46:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

🚧 wip: table filters

Browse Source
This commit is contained in:
Fred KISSIE
2026-02-07 04:51:37 +01:00
parent 5d7f082ebf
commit 1889386f64
2 changed files with 54 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/components/UserDevicesTable.tsx
View File

@@ -706,8 +706,6 @@ export default function UserDevicesTable({
return ["active", "pending"];
}, []);
const [, setCount] = useState(0);
function handleFilterChange(
column: string,
value: string | undefined | null | string[]
@@ -726,7 +724,6 @@ export default function UserDevicesTable({
filter({
searchParams
});
setCount((c) => c + 1);
}
function toggleSort(column: string) {
@@ -791,54 +788,54 @@ export default function UserDevicesTable({
rowCount={rowCount}
stickyLeftColumn="name"
stickyRightColumn="actions"
// filters={[
// {
// id: "status",
// label: t("status") || "Status",
// multiSelect: true,
// displayMode: "calculated",
// options: statusFilterOptions,
// filterFn: (
// row: ClientRow,
// selectedValues: (string | number | boolean)[]
// ) => {
// if (selectedValues.length === 0) return true;
// const rowArchived = row.archived;
// const rowBlocked = row.blocked;
// const approvalState = row.approvalState;
// const isActive =
// !rowArchived &&
// !rowBlocked &&
// approvalState !== "pending" &&
// approvalState !== "denied";
filters={[
{
id: "status",
label: t("status") || "Status",
multiSelect: true,
displayMode: "calculated",
options: statusFilterOptions,
onFilter: (
selectedValues: (string | number | boolean)[]
) => {
console.log({ selectedValues });
// if (selectedValues.length === 0) return true;
// const rowArchived = row.archived;
// const rowBlocked = row.blocked;
// const approvalState = row.approvalState;
// const isActive =
// !rowArchived &&
// !rowBlocked &&
// approvalState !== "pending" &&
// approvalState !== "denied";
// if (selectedValues.includes("active") && isActive)
// return true;
// if (
// selectedValues.includes("pending") &&
// approvalState === "pending"
// )
// return true;
// if (
// selectedValues.includes("denied") &&
// approvalState === "denied"
// )
// return true;
// if (
// selectedValues.includes("archived") &&
// rowArchived
// )
// return true;
// if (
// selectedValues.includes("blocked") &&
// rowBlocked
// )
// return true;
// return false;
// },
// defaultValues: statusFilterDefaultValues
// }
// ]}
// if (selectedValues.includes("active") && isActive)
// return true;
// if (
// selectedValues.includes("pending") &&
// approvalState === "pending"
// )
// return true;
// if (
// selectedValues.includes("denied") &&
// approvalState === "denied"
// )
// return true;
// if (
// selectedValues.includes("archived") &&
// rowArchived
// )
// return true;
// if (
// selectedValues.includes("blocked") &&
// rowBlocked
// )
// return true;
// return false;
},
values: statusFilterDefaultValues
}
]}
/>
</>
);

20
src/components/ui/controlled-data-table.tsx
View File

@@ -33,7 +33,7 @@ import { useStoredColumnVisibility } from "@app/hooks/useStoredColumnVisibility"
import { Columns, Filter, Plus, RefreshCw, Search } from "lucide-react";
import { useTranslations } from "next-intl";
import { useState } from "react";
import { useMemo, useState } from "react";
// Extended ColumnDef type that includes optional friendlyName for column visibility dropdown
export type ExtendedColumnDef<TData, TValue = unknown> = ColumnDef<
@@ -54,11 +54,8 @@ type DataTableFilter = {
label: string;
options: FilterOption[];
multiSelect?: boolean;
filterFn: (
row: any,
selectedValues: (string | number | boolean)[]
) => boolean;
defaultValues?: (string | number | boolean)[];
onFilter: (selectedValues: (string | number | boolean)[]) => void;
values?: (string | number | boolean)[];
displayMode?: "label" | "calculated"; // How to display the filter button text
};
@@ -119,15 +116,13 @@ export function ControlledDataTable<TData, TValue>({
);
// TODO: filters
const [activeFilters, setActiveFilters] = useState<
Record<string, (string | number | boolean)[]>
>(() => {
const activeFilters = useMemo(() => {
const initial: Record<string, (string | number | boolean)[]> = {};
filters?.forEach((filter) => {
initial[filter.id] = filter.defaultValues || [];
initial[filter.id] = filter.values || [];
});
return initial;
});
}, [filters]);
console.log({
pagination,
@@ -147,7 +142,6 @@ export function ControlledDataTable<TData, TValue>({
},
manualFiltering: true,
manualPagination: true,
// pageCount: pagination.pageCount,
rowCount,
state: {
columnFilters,
@@ -177,7 +171,7 @@ export function ControlledDataTable<TData, TValue>({
}
// Multiple selections: always join with "and"
return selectedOptions.map((opt) => opt.label).join(" and ");
return selectedOptions.map((opt) => opt.label).join(" or ");
};
// Helper function to check if a column should be sticky