ob/sprint
1
0
Fork 0
mirror of https://github.com/hex248/sprint.git synced 2026-02-08 02:33:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

table rows as links

Browse Source
This commit is contained in:
Oliver Bryan
2026-01-21 13:09:04 +00:00
parent 4c01fa229d
commit 5f8d049de3
1 changed files with 69 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
packages/frontend/src/components/issues-table.tsx
View File

@@ -3,7 +3,7 @@ import Avatar from "@/components/avatar";
import { useSelection } from "@/components/selection-provider";
import StatusTag from "@/components/status-tag";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { useIssues, useSelectedOrganisation } from "@/lib/query/hooks";
import { useIssues, useSelectedOrganisation, useSelectedProject } from "@/lib/query/hooks";
import { cn } from "@/lib/utils";
export function IssuesTable({
@@ -16,10 +16,28 @@ export function IssuesTable({
const { selectedProjectId, selectedIssueId, selectIssue } = useSelection();
const { data: issuesData = [] } = useIssues(selectedProjectId);
const selectedOrganisation = useSelectedOrganisation();
const selectedProject = useSelectedProject();
const statuses = selectedOrganisation?.Organisation.statuses ?? {};
const issues = useMemo(() => [...issuesData].reverse(), [issuesData]);
const getIssueUrl = (issueNumber: number) => {
if (!selectedOrganisation || !selectedProject) return "#";
const params = new URLSearchParams();
params.set("o", selectedOrganisation.Organisation.slug.toLowerCase());
params.set("p", selectedProject.Project.key.toLowerCase());
params.set("i", issueNumber.toString());
return `/app?${params.toString()}`;
};
const handleLinkClick = (e: React.MouseEvent) => {
if (e.metaKey || e.ctrlKey || e.shiftKey) {
e.stopPropagation();
return;
}
e.preventDefault();
};
return (
<Table className={cn("table-fixed", className)}>
<TableHeader>
@@ -51,13 +69,23 @@ export function IssuesTable({
}}
>
{(columns.id == null || columns.id === true) && (
<TableCell className="font-medium border-r text-right">
{issueData.Issue.number.toString().padStart(3, "0")}
<TableCell className="font-medium border-r text-right p-0">
<a
href={getIssueUrl(issueData.Issue.number)}
onClick={handleLinkClick}
className="block w-full h-full px-2 py-1 text-inherit hover:underline decoration-transparent"
>
{issueData.Issue.number.toString().padStart(3, "0")}
</a>
</TableCell>
)}
{(columns.title == null || columns.title === true) && (
<TableCell className="min-w-0">
<div className="flex items-center gap-2 min-w-0">
<TableCell className="min-w-0 p-0">
<a
href={getIssueUrl(issueData.Issue.number)}
onClick={handleLinkClick}
className="flex items-center gap-2 min-w-0 w-full h-full px-2 py-1 text-inherit hover:underline decoration-transparent"
>
{(columns.status == null || columns.status === true) && (
<StatusTag
status={issueData.Issue.status}
@@ -65,33 +93,47 @@ export function IssuesTable({
/>
)}
<span className="truncate">{issueData.Issue.title}</span>
</div>
</a>
</TableCell>
)}
{(columns.description == null || columns.description === true) && (
<TableCell className="overflow-hidden">{issueData.Issue.description}</TableCell>
<TableCell className="overflow-hidden p-0">
<a
href={getIssueUrl(issueData.Issue.number)}
onClick={handleLinkClick}
className="block w-full h-full px-2 py-1 text-inherit hover:underline decoration-transparent"
>
{issueData.Issue.description}
</a>
</TableCell>
)}
{(columns.assignee == null || columns.assignee === true) && (
<TableCell className={"flex items-center justify-end py-0 h-[32px]"}>
{issueData.Assignees && issueData.Assignees.length > 0 && (
<div className="flex items-center -space-x-2 pr-1.5">
{issueData.Assignees.slice(0, 3).map((assignee) => (
<Avatar
key={assignee.id}
name={assignee.name}
username={assignee.username}
avatarURL={assignee.avatarURL}
textClass="text-xs"
className="ring-1 ring-background"
/>
))}
{issueData.Assignees.length > 3 && (
<span className="flex items-center justify-center w-6 h-6 text-[10px] font-medium bg-muted text-muted-foreground rounded-full ring-1 ring-background">
+{issueData.Assignees.length - 3}
</span>
)}
</div>
)}
<TableCell className="h-[32px] p-0">
<a
href={getIssueUrl(issueData.Issue.number)}
onClick={handleLinkClick}
className="flex items-center justify-end w-full h-full px-2"
>
{issueData.Assignees && issueData.Assignees.length > 0 && (
<div className="flex items-center -space-x-2 pr-1.5">
{issueData.Assignees.slice(0, 3).map((assignee) => (
<Avatar
key={assignee.id}
name={assignee.name}
username={assignee.username}
avatarURL={assignee.avatarURL}
textClass="text-xs"
className="ring-1 ring-background"
/>
))}
{issueData.Assignees.length > 3 && (
<span className="flex items-center justify-center w-6 h-6 text-[10px] font-medium bg-muted text-muted-foreground rounded-full ring-1 ring-background">
+{issueData.Assignees.length - 3}
</span>
)}
</div>
)}
</a>
</TableCell>
)}
</TableRow>