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

✨ whole table filter

Browse Source
This commit is contained in:
Fred KISSIE
2026-02-07 05:37:01 +01:00
parent 1889386f64
commit 577cb91343
2 changed files with 47 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/UserDevicesTable.tsx
View File

@@ -699,16 +699,21 @@ export default function UserDevicesTable({
return allOptions;
}, [t]);
const statusFilterDefaultValues = useMemo(() => {
const statusFilterValues = useMemo(() => {
const status = searchParams.getAll("status");
if (status.length > 0) {
return status;
}
if (build === "oss") {
return ["active"];
}
return ["active", "pending"];
}, []);
}, [searchParams]);
function handleFilterChange(
column: string,
value: string | undefined | null | string[]
value: string | null | undefined | string[]
) {
searchParams.delete(column);
searchParams.delete("page");
@@ -795,45 +800,10 @@ export default function UserDevicesTable({
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;
onValueChange: (selectedValues: string[]) => {
handleFilterChange("status", selectedValues);
},
values: statusFilterDefaultValues
values: statusFilterValues
}
]}
/>

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

@@ -46,7 +46,7 @@ export type ExtendedColumnDef<TData, TValue = unknown> = ColumnDef<
type FilterOption = {
id: string;
label: string;
value: string | number | boolean;
value: string;
};
type DataTableFilter = {
@@ -54,8 +54,8 @@ type DataTableFilter = {
label: string;
options: FilterOption[];
multiSelect?: boolean;
onFilter: (selectedValues: (string | number | boolean)[]) => void;
values?: (string | number | boolean)[];
onValueChange: (selectedValues: string[]) => void;
values?: string[];
displayMode?: "label" | "calculated"; // How to display the filter button text
};
@@ -117,7 +117,7 @@ export function ControlledDataTable<TData, TValue>({
// TODO: filters
const activeFilters = useMemo(() => {
const initial: Record<string, (string | number | boolean)[]> = {};
const initial: Record<string, string[]> = {};
filters?.forEach((filter) => {
initial[filter.id] = filter.values || [];
});
@@ -174,6 +174,33 @@ export function ControlledDataTable<TData, TValue>({
return selectedOptions.map((opt) => opt.label).join(" or ");
};
const handleFilterChange = (
filterId: string,
optionValue: string,
checked: boolean
) => {
const currentValues = activeFilters[filterId] || [];
const filter = filters?.find((f) => f.id === filterId);
if (!filter) return;
let newValues: string[];
if (filter.multiSelect) {
// Multi-select: add or remove the value
if (checked) {
newValues = [...currentValues, optionValue];
} else {
newValues = currentValues.filter((v) => v !== optionValue);
}
} else {
// Single-select: replace the value
newValues = checked ? [optionValue] : [];
}
filter.onValueChange(newValues);
};
// Helper function to check if a column should be sticky
const isStickyColumn = (
columnId: string | undefined,
@@ -285,11 +312,11 @@ export function ControlledDataTable<TData, TValue>({
onCheckedChange={(
checked
) => {
// handleFilterChange(
// filter.id,
// option.value,
// checked
// )
handleFilterChange(
filter.id,
option.value,
checked
);
}}
onSelect={(e) =>
e.preventDefault()