daphnis/components/scoreplaylog/colums.tsx

197 lines
5.3 KiB
TypeScript
Raw Normal View History

2024-06-29 05:22:22 +00:00
"use client";
import { ColumnDef } from "@tanstack/react-table";
import { MoreHorizontal } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { generateShareToken } from "@/app/(sharing)/[token]/token";
2024-07-07 15:07:23 +00:00
import { ArrowUpDown, MoreHorizontalIcon } from "lucide-react";
2024-06-30 18:24:33 +00:00
import { chuni_score_playlog } from "@/prisma/schemas/artemis/generated/artemis";
import { chuni_static_music } from "@/prisma/schemas/artemis/generated/artemis";
2024-07-01 18:19:20 +00:00
import { getGrade } from "@/lib/helpers";
2024-06-30 18:24:33 +00:00
type chunithm = chuni_score_playlog &
2024-07-01 17:42:57 +00:00
chuni_static_music & { playCount: number };
export const columns: ColumnDef<chunithm>[] = [
2024-06-29 05:22:22 +00:00
{
accessorKey: "title",
header: "Title",
2024-07-07 14:24:04 +00:00
2024-07-01 18:19:20 +00:00
cell: ({ row }) => {
const jacketPath = row.original.jacketPath?.replace(".dds", ".png");
return (
<div className="font-medium w-[200px] truncate">
{jacketPath && (
<img
src={`/jackets/${jacketPath}`}
alt="Jacket"
className="w-8 h-8 inline-block mr-2"
/>
)}
{row.original.title}
</div>
);
},
2024-07-01 16:47:02 +00:00
},
2024-07-01 18:19:20 +00:00
2024-07-01 16:47:02 +00:00
{
accessorKey: "score",
2024-07-07 15:07:23 +00:00
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
Score
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
2024-07-07 14:24:04 +00:00
cell: ({ row }) => <div>{row.original.score?.toLocaleString()}</div>,
2024-07-07 15:46:39 +00:00
sortingFn: (a, b) => {
2024-07-07 15:47:07 +00:00
const highScore = a.original.score ?? 0;
const lowScore = b.original.score ?? 0;
2024-07-07 15:46:39 +00:00
if (highScore < lowScore) return 1;
if (highScore > lowScore) return -1;
2024-07-07 15:49:52 +00:00
// TODO: FIGURE OUT DEFAULT SORT
2024-07-07 15:46:39 +00:00
return 0;
},
2024-07-07 14:24:04 +00:00
},
{
accessorKey: "isNew",
2024-07-07 15:46:39 +00:00
header: "Up Score",
2024-07-01 16:47:02 +00:00
cell: ({ row }) => (
<div>
2024-07-01 18:19:20 +00:00
{row.original.isNewRecord && <span className="pl-2 ">New!!</span>}
2024-07-01 16:47:02 +00:00
</div>
),
},
2024-07-07 14:24:04 +00:00
{
accessorKey: "grade",
header: "Grade",
cell: ({ row }) => (
<div className="font-medium"> {getGrade(row.original.score ?? 0)}</div>
),
},
2024-07-01 16:47:02 +00:00
{
accessorKey: "userPlayDate",
2024-07-07 15:07:23 +00:00
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
Date
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
2024-07-01 16:47:02 +00:00
},
2024-07-07 14:24:04 +00:00
{
accessorKey: "difficulty",
header: "Difficulty",
cell: ({ row }) => <div className="font-medium">{row.original.level}</div>,
},
2024-07-01 16:47:02 +00:00
{
accessorKey: "FC / AJ",
2024-07-07 15:46:39 +00:00
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
FC/AJ
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
2024-06-29 05:22:22 +00:00
cell: ({ row }) => (
2024-07-07 15:46:39 +00:00
<div className="font-medium">
{!row.original.isAllJustice && row.original.isFullCombo && (
<span>Full Combo</span>
)}
{row.original.isAllJustice && <span>All Justice</span>}
2024-06-29 05:22:22 +00:00
</div>
),
2024-07-07 15:46:39 +00:00
sortingFn: (a, b) => {
2024-07-07 15:49:52 +00:00
const isAllJustice = a.original.isAllJustice;
const defaultSort = b.original.isAllJustice;
2024-07-07 15:46:39 +00:00
2024-07-07 15:49:52 +00:00
if (isAllJustice && !defaultSort) return -1;
if (!isAllJustice && defaultSort) return 1;
2024-07-07 15:46:39 +00:00
return 0;
},
2024-06-29 05:22:22 +00:00
},
2024-07-07 14:24:04 +00:00
2024-06-29 05:22:22 +00:00
{
2024-07-01 16:47:02 +00:00
accessorKey: "Attempts",
header: "Attempts",
2024-07-07 15:07:23 +00:00
2024-07-01 17:42:57 +00:00
cell: ({ row }) => (
<div className="font-medium">{row.original.playCount}</div>
),
2024-06-29 05:22:22 +00:00
},
2024-07-07 14:24:04 +00:00
2024-06-29 05:22:22 +00:00
{
id: "actions",
header: () => <div className="text-left pl-2">More</div>,
cell: ({ row }) => {
const song = row.original;
const [error, setError] = useState<string>("");
const router = useRouter();
2024-06-30 18:24:33 +00:00
2024-06-29 05:22:22 +00:00
const handleGenerateShareToken = async () => {
const { token, error } = await generateShareToken(row.original.id);
if (error) {
setError(error);
} else {
2024-06-30 18:24:33 +00:00
const newTab = window.open(`/${token}/${row.original.id}`, "_blank");
2024-06-29 19:25:43 +00:00
if (newTab) {
newTab.focus();
} else {
// Handle popup blocker or inability to open new tab
router.push(`/${token}/${row.original.id}`);
}
2024-06-29 05:22:22 +00:00
}
};
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="h-8 w-8 p-0">
<span className="sr-only">Open menu</span>
<MoreHorizontal className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuItem
2024-06-30 18:24:33 +00:00
onClick={() =>
song.title && navigator.clipboard.writeText(song.title)
}
2024-06-29 05:22:22 +00:00
>
Copy song title
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={handleGenerateShareToken}>
2024-06-29 19:25:43 +00:00
Share Song
2024-06-29 05:22:22 +00:00
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
},
},
];