sprint/packages/frontend/src/components/issues-table.tsx

import type { IssueResponse } from "@issue/shared";
import Avatar from "@/components/avatar";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { cn } from "@/lib/utils";

export function IssuesTable({
    issuesData,
    columns = {},
    issueSelectAction,
    className,
}: {
    issuesData: IssueResponse[];
    columns?: { id?: boolean; title?: boolean; description?: boolean; assignee?: boolean };
    issueSelectAction?: (issue: IssueResponse) => void;
    className: string;
}) {
    return (
        <Table className={cn(className)}>
            <TableHeader>
                <TableRow hoverEffect={false}>
                    {(columns.id == null || columns.id === true) && (
                        <TableHead className="text-right w-[1px] border-r">ID</TableHead>
                    )}
                    {(columns.title == null || columns.title === true) && <TableHead>Title</TableHead>}
                    {(columns.description == null || columns.description === true) && (
                        <TableHead>Description</TableHead>
                    )}
                    {/* below is kept blank to fill the space, used as the "Assignee" column */}
                    {(columns.assignee == null || columns.assignee === true) && <TableHead></TableHead>}
                </TableRow>
            </TableHeader>
            <TableBody>
                {issuesData.map((issueData) => (
                    <TableRow
                        key={issueData.Issue.id}
                        className="cursor-pointer"
                        onClick={() => {
                            issueSelectAction?.(issueData);
                        }}
                    >
                        {(columns.id == null || columns.id === true) && (
                            <TableCell className="font-medium border-r text-right">
                                {issueData.Issue.number.toString().padStart(3, "0")}
                            </TableCell>
                        )}
                        {(columns.title == null || columns.title === true) && (
                            <TableCell>{issueData.Issue.title}</TableCell>
                        )}
                        {(columns.description == null || columns.description === true) && (
                            <TableCell className="overflow-hide">{issueData.Issue.description}</TableCell>
                        )}
                        {(columns.assignee == null || columns.assignee === true) && (
                            <TableCell className={"flex items-center justify-end px-1 py-0 h-[32px]"}>
                                {issueData.Assignee && (
                                    <Avatar
                                        name={issueData.Assignee?.name}
                                        username={issueData.Assignee?.username}
                                        avatarURL={issueData.Assignee?.avatarURL}
                                        textClass="text-xs"
                                    />
                                )}
                            </TableCell>
                        )}
                    </TableRow>
                ))}
            </TableBody>
        </Table>
    );
}