100 lines
3.8 KiB
TypeScript
100 lines
3.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 { Pencil, Trash, FilePlus, Palette } from "lucide-react";
|
|
import { useSession } from "next-auth/react";
|
|
import AddMetricDialog from "./AddMetricDialog";
|
|
import Link from "next/link";
|
|
import { ZMetric } from "@lifetracker/shared/types/metrics";
|
|
import { titleCase } from "title-case";
|
|
import { Icon } from "@/components/ui/icon";
|
|
|
|
export default function MetricsView() {
|
|
const { data: metrics } = api.metrics.list.useQuery();
|
|
const invalidateMetricsList = api.useUtils().metrics.list.invalidate;
|
|
|
|
const { mutate: deleteMetric } = api.metrics.delete.useMutation({
|
|
onSettled: () => {
|
|
invalidateMetricsList();
|
|
toast({
|
|
description: "Metric deleted",
|
|
});
|
|
},
|
|
});
|
|
|
|
const MetricsTable = ({ metrics }: { metrics: ZMetric[] }) => (
|
|
<Table>
|
|
<TableHeader className="bg-gray-200">
|
|
<TableHead>Name</TableHead>
|
|
<TableHead>Unit</TableHead>
|
|
<TableHead>Type</TableHead>
|
|
<TableHead>Description</TableHead>
|
|
<TableHead>Actions</TableHead>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{metrics.map((m) => (
|
|
<TableRow key={m.id} style={{ borderBottom: 0 }}>
|
|
<TableCell className="py-1 flex items-center gap-4">
|
|
<Icon name={titleCase(m.icon)} size={32} />
|
|
<span>{m.name}</span>
|
|
</TableCell>
|
|
<TableCell className="py-1">{m.unit}</TableCell>
|
|
<TableCell className="py-1">{m.type}</TableCell>
|
|
<TableCell className="py-1">{m.description}</TableCell>
|
|
<TableCell className="flex gap-1 py-1">
|
|
<ActionButtonWithTooltip
|
|
tooltip="Delete category"
|
|
variant="outline"
|
|
onClick={() => deleteMetric({ id: m.id! })}
|
|
loading={false}
|
|
>
|
|
<Trash size={16} color="red" />
|
|
</ActionButtonWithTooltip>
|
|
<AddMetricDialog initialMetric={m} >
|
|
<ButtonWithTooltip
|
|
tooltip="Edit"
|
|
variant="outline"
|
|
>
|
|
<Pencil size={16} color="red" />
|
|
</ButtonWithTooltip>
|
|
</AddMetricDialog>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table >
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<div className="mb-2 flex items-center justify-between text-xl font-medium">
|
|
<span>All Metrics</span>
|
|
<div className="flex">
|
|
<AddMetricDialog>
|
|
<ButtonWithTooltip tooltip="Start tracking something..." variant="outline">
|
|
<FilePlus size={16} />
|
|
</ButtonWithTooltip>
|
|
</AddMetricDialog>
|
|
</div></div>
|
|
|
|
{metrics === undefined ? (
|
|
<LoadingSpinner />
|
|
) : (
|
|
<MetricsTable metrics={metrics} />
|
|
)}
|
|
</>
|
|
);
|
|
}
|