72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { Check, ChevronsUpDown, Layers } from "lucide-react";
|
||
|
|
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import {
|
||
|
|
DropdownMenu,
|
||
|
|
DropdownMenuContent,
|
||
|
|
DropdownMenuItem,
|
||
|
|
DropdownMenuTrigger,
|
||
|
|
} from "@/components/ui/dropdown-menu";
|
||
|
|
import { useViewStore } from "@/lib/stores/view-store";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
|
||
|
|
const GROUP_OPTIONS: { label: string; value: string | null }[] = [
|
||
|
|
{ label: "None", value: null },
|
||
|
|
{ label: "Status", value: "status" },
|
||
|
|
{ label: "Type", value: "type" },
|
||
|
|
{ label: "Priority", value: "priority" },
|
||
|
|
{ label: "Assignee", value: "assignee" },
|
||
|
|
];
|
||
|
|
|
||
|
|
function labelForValue(value: string | null): string {
|
||
|
|
return GROUP_OPTIONS.find((o) => o.value === value)?.label ?? "None";
|
||
|
|
}
|
||
|
|
|
||
|
|
export function GroupConfig() {
|
||
|
|
const groupBy = useViewStore((s) => s.config.groupBy);
|
||
|
|
const setGroupBy = useViewStore((s) => s.setGroupBy);
|
||
|
|
|
||
|
|
const selectedLabel = labelForValue(groupBy);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<DropdownMenu>
|
||
|
|
<DropdownMenuTrigger asChild>
|
||
|
|
<Button
|
||
|
|
type="button"
|
||
|
|
variant="ghost"
|
||
|
|
size="sm"
|
||
|
|
className="h-8 max-w-[11rem] gap-1.5 px-2 text-xs"
|
||
|
|
>
|
||
|
|
<Layers className="size-3.5 shrink-0" />
|
||
|
|
<span className="truncate">
|
||
|
|
Group by{" "}
|
||
|
|
<span className="font-medium text-foreground">{selectedLabel}</span>
|
||
|
|
</span>
|
||
|
|
<ChevronsUpDown className="size-3 shrink-0 opacity-50" />
|
||
|
|
</Button>
|
||
|
|
</DropdownMenuTrigger>
|
||
|
|
<DropdownMenuContent align="start" className="w-48">
|
||
|
|
{GROUP_OPTIONS.map((opt) => (
|
||
|
|
<DropdownMenuItem
|
||
|
|
key={opt.label}
|
||
|
|
className="gap-2 text-xs"
|
||
|
|
onClick={() => setGroupBy(opt.value)}
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
className={cn(
|
||
|
|
"flex size-4 items-center justify-center",
|
||
|
|
groupBy === opt.value ? "opacity-100" : "opacity-0",
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<Check className="size-3.5" />
|
||
|
|
</span>
|
||
|
|
{opt.label}
|
||
|
|
</DropdownMenuItem>
|
||
|
|
))}
|
||
|
|
</DropdownMenuContent>
|
||
|
|
</DropdownMenu>
|
||
|
|
);
|
||
|
|
}
|