58 lines
2.0 KiB
TypeScript
58 lines
2.0 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
|
import { Columns3, RotateCcw } from "lucide-react";
|
|
import type { ColumnConfigEntry } from "./hooks/useColumnConfig";
|
|
|
|
interface ColumnConfigDropdownProps {
|
|
entries: ColumnConfigEntry[];
|
|
labels?: Record<string, string>;
|
|
onToggleVisibility: (columnId: string) => void;
|
|
onReset: () => void;
|
|
}
|
|
|
|
function formatColumnId(id: string): string {
|
|
return id
|
|
.replace(/^metadata_/, "")
|
|
.replace(/_/g, " ")
|
|
.replace(/\b\w/g, (c) => c.toUpperCase());
|
|
}
|
|
|
|
export function ColumnConfigDropdown({ entries, labels = {}, onToggleVisibility, onReset }: ColumnConfigDropdownProps) {
|
|
return (
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<Button variant="outline" size="sm" className="h-7.5 w-7.5" data-testid="column-config-trigger" aria-label="Column configuration">
|
|
<Columns3 className="h-4 w-4" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-[200px] p-2" align="end">
|
|
<div className="space-y-1">
|
|
<div className="text-muted-foreground px-1 pb-1 text-xs font-medium">Toggle Columns</div>
|
|
{entries.map((entry) => (
|
|
<label key={entry.id} className="hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-1 py-1">
|
|
<Checkbox
|
|
checked={entry.visible}
|
|
onCheckedChange={() => onToggleVisibility(entry.id)}
|
|
data-testid={`column-visibility-${entry.id}`}
|
|
/>
|
|
<span className="truncate text-sm">{labels[entry.id] ?? formatColumnId(entry.id)}</span>
|
|
</label>
|
|
))}
|
|
<div className="border-t pt-1">
|
|
<Button
|
|
type="button"
|
|
onClick={onReset}
|
|
variant="ghost"
|
|
className="w-full justify-start text-sm"
|
|
data-testid="column-reset-default"
|
|
>
|
|
<RotateCcw className="h-3 w-3" />
|
|
Reset to default
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
);
|
|
} |