89 lines
2.8 KiB
TypeScript
89 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { ActionButtonWithTooltip } from "@/components/ui/action-button";
|
|
import { ButtonWithTooltip } from "@/components/ui/button";
|
|
import LoadingSpinner from "@/components/ui/spinner";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table";
|
|
import { toast } from "@/components/ui/use-toast";
|
|
import { api } from "@/lib/trpc";
|
|
import { Check, KeyRound, Pencil, Trash, FilePlus, X } from "lucide-react";
|
|
import { useSession } from "next-auth/react";
|
|
import AddLabelDialog from "./AddLabelDialog";
|
|
import EditLabelDialog from "./EditLabelDialog";
|
|
|
|
export default function LabelsView() {
|
|
const { data: session } = useSession();
|
|
const { data: labels } = api.labels.list.useQuery();
|
|
const { data: labelStats } = api.labels.labelStats.useQuery();
|
|
|
|
const LabelsTable = ({ labels }) => (
|
|
<Table>
|
|
<TableHeader className="bg-gray-200">
|
|
<TableHead>Parent</TableHead>
|
|
<TableHead>Code</TableHead>
|
|
<TableHead>Name</TableHead>
|
|
<TableHead>Description</TableHead>
|
|
<TableHead>Entries With Label</TableHead>
|
|
<TableHead>Actions</TableHead>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{labels.labels.map((l) => (
|
|
<TableRow key={l.id} style={{ backgroundColor: l.color }}>
|
|
<TableCell className="py-1">{l.parent}</TableCell>
|
|
<TableCell className="py-1">{l.code}</TableCell>
|
|
<TableCell className="py-1">{l.name}</TableCell>
|
|
<TableCell className="py-1">{l.description}</TableCell>
|
|
<TableCell className="py-1">
|
|
{labelStats[l.id].numEntries}
|
|
</TableCell>
|
|
<TableCell className="flex gap-1 py-1">
|
|
<ActionButtonWithTooltip
|
|
tooltip="Delete label"
|
|
variant="outline"
|
|
onClick={() => deleteLabel({ labelId: l.id })}
|
|
loading={false}
|
|
>
|
|
<Trash size={16} color="red" />
|
|
</ActionButtonWithTooltip>
|
|
<EditLabelDialog labelId={l.id} >
|
|
<ButtonWithTooltip
|
|
tooltip="Edit"
|
|
variant="outline"
|
|
>
|
|
<Pencil size={16} color="red" />
|
|
</ButtonWithTooltip>
|
|
</EditLabelDialog>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table >
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<div className="mb-2 flex items-center justify-between text-xl font-medium">
|
|
<span>All Labels</span>
|
|
<AddLabelDialog>
|
|
<ButtonWithTooltip tooltip="Create Label" variant="outline">
|
|
<FilePlus size={16} />
|
|
</ButtonWithTooltip>
|
|
</AddLabelDialog>
|
|
</div>
|
|
|
|
{labels === undefined ? (
|
|
<LoadingSpinner />
|
|
) : (
|
|
<LabelsTable labels={labels} />
|
|
)}
|
|
</>
|
|
);
|
|
}
|