mirror of
https://github.com/fosrl/pangolin.git
synced 2026-05-07 04:47:08 +00:00
add filter by idp and role in users table
This commit is contained in:
miloschwartz
146
src/components/ColumnMultiFilterButton.tsx
Normal file
146
src/components/ColumnMultiFilterButton.tsx
Normal file
@@ -0,0 +1,146 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo, useState } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger
|
||||
} from "@app/components/ui/popover";
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList
|
||||
} from "@app/components/ui/command";
|
||||
import { CheckIcon, Funnel } from "lucide-react";
|
||||
import { cn } from "@app/lib/cn";
|
||||
import { Badge } from "./ui/badge";
|
||||
|
||||
type FilterOption = {
|
||||
value: string;
|
||||
label: string;
|
||||
};
|
||||
|
||||
type ColumnMultiFilterButtonProps = {
|
||||
options: FilterOption[];
|
||||
selectedValues: string[];
|
||||
onSelectedValuesChange: (values: string[]) => void;
|
||||
searchPlaceholder?: string;
|
||||
emptyMessage?: string;
|
||||
className?: string;
|
||||
label: string;
|
||||
};
|
||||
|
||||
export function ColumnMultiFilterButton({
|
||||
options,
|
||||
selectedValues,
|
||||
onSelectedValuesChange,
|
||||
searchPlaceholder = "Search...",
|
||||
emptyMessage = "No options found",
|
||||
className,
|
||||
label
|
||||
}: ColumnMultiFilterButtonProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const t = useTranslations();
|
||||
|
||||
const selectedSet = useMemo(
|
||||
() => new Set(selectedValues),
|
||||
[selectedValues]
|
||||
);
|
||||
|
||||
const summary = useMemo(() => {
|
||||
if (selectedValues.length === 0) {
|
||||
return null;
|
||||
}
|
||||
if (selectedValues.length === 1) {
|
||||
return (
|
||||
options.find((o) => o.value === selectedValues[0])?.label ??
|
||||
selectedValues[0]
|
||||
);
|
||||
}
|
||||
return t("accessUsersRoleFilterCount", {
|
||||
count: selectedValues.length
|
||||
});
|
||||
}, [selectedValues, options, t]);
|
||||
|
||||
function toggle(value: string) {
|
||||
const next = selectedSet.has(value)
|
||||
? selectedValues.filter((v) => v !== value)
|
||||
: [...selectedValues, value];
|
||||
onSelectedValuesChange(next);
|
||||
}
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
role="combobox"
|
||||
aria-expanded={open}
|
||||
className={cn(
|
||||
"justify-between text-sm h-8 px-2",
|
||||
selectedValues.length === 0 && "text-muted-foreground",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<span className="shrink-0">{label}</span>
|
||||
<Funnel className="size-4 flex-none shrink-0" />
|
||||
{summary && (
|
||||
<Badge
|
||||
className="truncate max-w-[10rem]"
|
||||
variant="secondary"
|
||||
>
|
||||
{summary}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="p-0 w-50" align="start">
|
||||
<Command>
|
||||
<CommandInput placeholder={searchPlaceholder} />
|
||||
<CommandList>
|
||||
<CommandEmpty>{emptyMessage}</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{selectedValues.length > 0 && (
|
||||
<CommandItem
|
||||
onSelect={() => {
|
||||
onSelectedValuesChange([]);
|
||||
setOpen(false);
|
||||
}}
|
||||
className="text-muted-foreground"
|
||||
>
|
||||
{t("accessUsersRoleFilterClear")}
|
||||
</CommandItem>
|
||||
)}
|
||||
{options.map((option) => (
|
||||
<CommandItem
|
||||
key={option.value}
|
||||
value={option.label}
|
||||
onSelect={() => {
|
||||
toggle(option.value);
|
||||
}}
|
||||
>
|
||||
<CheckIcon
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
selectedSet.has(option.value)
|
||||
? "opacity-100"
|
||||
: "opacity-0"
|
||||
)}
|
||||
/>
|
||||
{option.label}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
@@ -2,7 +2,6 @@
|
||||
|
||||
import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import { ExtendedColumnDef } from "@app/components/ui/data-table";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
@@ -28,10 +27,16 @@ import {
|
||||
import { useTranslations } from "next-intl";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState, useTransition } from "react";
|
||||
import { useMemo, useState, useTransition } from "react";
|
||||
import { useDebouncedCallback } from "use-debounce";
|
||||
import z from "zod";
|
||||
import { ColumnFilterButton } from "./ColumnFilterButton";
|
||||
import { ColumnMultiFilterButton } from "./ColumnMultiFilterButton";
|
||||
import IdpTypeBadge from "./IdpTypeBadge";
|
||||
import { ControlledDataTable } from "./ui/controlled-data-table";
|
||||
import {
|
||||
ControlledDataTable,
|
||||
type ExtendedColumnDef
|
||||
} from "./ui/controlled-data-table";
|
||||
import UserRoleBadges from "./UserRoleBadges";
|
||||
|
||||
export type UserRow = {
|
||||
@@ -49,16 +54,22 @@ export type UserRow = {
|
||||
isOwner: boolean;
|
||||
};
|
||||
|
||||
type FilterOption = { value: string; label: string };
|
||||
|
||||
type UsersTableProps = {
|
||||
users: UserRow[];
|
||||
pagination: PaginationState;
|
||||
rowCount: number;
|
||||
idpFilterOptions: FilterOption[];
|
||||
roleFilterOptions: FilterOption[];
|
||||
};
|
||||
|
||||
export default function UsersTable({
|
||||
users,
|
||||
pagination,
|
||||
rowCount
|
||||
rowCount,
|
||||
idpFilterOptions,
|
||||
roleFilterOptions
|
||||
}: UsersTableProps) {
|
||||
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||
const [selectedUser, setSelectedUser] = useState<UserRow | null>(null);
|
||||
@@ -72,9 +83,48 @@ export default function UsersTable({
|
||||
const {
|
||||
navigate: filter,
|
||||
isNavigating: isFiltering,
|
||||
searchParams
|
||||
searchParams,
|
||||
pathname
|
||||
} = useNavigationContext();
|
||||
|
||||
const idpIdParamSchema = z
|
||||
.union([z.literal("internal"), z.string().regex(/^\d+$/)])
|
||||
.optional()
|
||||
.catch(undefined);
|
||||
|
||||
const roleIdsFromSearchParams = useMemo(() => {
|
||||
const sp = new URLSearchParams(searchParams);
|
||||
return [
|
||||
...new Set(sp.getAll("role_id").filter((id) => /^\d+$/.test(id)))
|
||||
];
|
||||
}, [searchParams.toString()]);
|
||||
|
||||
function handleFilterChange(
|
||||
column: string,
|
||||
value: string | undefined | null
|
||||
) {
|
||||
const sp = new URLSearchParams(searchParams);
|
||||
sp.delete(column);
|
||||
sp.delete("page");
|
||||
|
||||
if (value) {
|
||||
sp.set(column, value);
|
||||
}
|
||||
startTransition(() => router.push(`${pathname}?${sp.toString()}`));
|
||||
}
|
||||
|
||||
function handleRoleIdsChange(values: string[]) {
|
||||
const sp = new URLSearchParams(searchParams);
|
||||
sp.delete("role_id");
|
||||
sp.delete("page");
|
||||
for (const id of values) {
|
||||
if (/^\d+$/.test(id)) {
|
||||
sp.append("role_id", id);
|
||||
}
|
||||
}
|
||||
startTransition(() => router.push(`${pathname}?${sp.toString()}`));
|
||||
}
|
||||
|
||||
const refreshData = async () => {
|
||||
startTransition(async () => {
|
||||
try {
|
||||
@@ -118,8 +168,22 @@ export default function UsersTable({
|
||||
{
|
||||
accessorKey: "idpName",
|
||||
friendlyName: t("identityProvider"),
|
||||
header: ({ column }) => {
|
||||
return <span className="px-3">{t("identityProvider")}</span>;
|
||||
header: () => {
|
||||
return (
|
||||
<ColumnFilterButton
|
||||
options={idpFilterOptions}
|
||||
selectedValue={idpIdParamSchema.parse(
|
||||
searchParams.get("idp_id") ?? undefined
|
||||
)}
|
||||
onValueChange={(value) =>
|
||||
handleFilterChange("idp_id", value)
|
||||
}
|
||||
searchPlaceholder={t("searchPlaceholder")}
|
||||
emptyMessage={t("emptySearchOptions")}
|
||||
label={t("identityProvider")}
|
||||
className="p-3"
|
||||
/>
|
||||
);
|
||||
},
|
||||
cell: ({ row }) => {
|
||||
const userRow = row.original;
|
||||
@@ -136,8 +200,18 @@ export default function UsersTable({
|
||||
id: "role",
|
||||
accessorFn: (row) => row.roleLabels.join(", "),
|
||||
friendlyName: t("role"),
|
||||
header: ({ column }) => {
|
||||
return <span className="px-3">{t("role")}</span>;
|
||||
header: () => {
|
||||
return (
|
||||
<ColumnMultiFilterButton
|
||||
options={roleFilterOptions}
|
||||
selectedValues={roleIdsFromSearchParams}
|
||||
onSelectedValuesChange={handleRoleIdsChange}
|
||||
searchPlaceholder={t("searchPlaceholder")}
|
||||
emptyMessage={t("emptySearchOptions")}
|
||||
label={t("role")}
|
||||
className="p-3"
|
||||
/>
|
||||
);
|
||||
},
|
||||
cell: ({ row }) => {
|
||||
return <UserRoleBadges roleLabels={row.original.roleLabels} />;
|
||||
|
||||
Reference in New Issue
Block a user