diff --git a/frontend/src/app/boards/page.tsx b/frontend/src/app/boards/page.tsx index ef597c6e..be6cc70b 100644 --- a/frontend/src/app/boards/page.tsx +++ b/frontend/src/app/boards/page.tsx @@ -21,7 +21,11 @@ import { useDeleteBoardApiV1BoardsBoardIdDelete, useListBoardsApiV1BoardsGet, } from "@/api/generated/boards/boards"; -import type { BoardRead } from "@/api/generated/model"; +import { + type listBoardGroupsApiV1BoardGroupsGetResponse, + useListBoardGroupsApiV1BoardGroupsGet, +} from "@/api/generated/board-groups/board-groups"; +import type { BoardGroupRead, BoardRead } from "@/api/generated/model"; import { DashboardSidebar } from "@/components/organisms/DashboardSidebar"; import { DashboardShell } from "@/components/templates/DashboardShell"; import { Button, buttonVariants } from "@/components/ui/button"; @@ -46,6 +50,9 @@ const formatTimestamp = (value?: string | null) => { }); }; +const compactId = (value: string) => + value.length > 8 ? `${value.slice(0, 8)}…` : value; + export default function BoardsPage() { const { isSignedIn } = useAuth(); const queryClient = useQueryClient(); @@ -63,6 +70,20 @@ export default function BoardsPage() { }, }); + const groupsQuery = useListBoardGroupsApiV1BoardGroupsGet< + listBoardGroupsApiV1BoardGroupsGetResponse, + ApiError + >( + { limit: 200 }, + { + query: { + enabled: Boolean(isSignedIn), + refetchInterval: 30_000, + refetchOnMount: "always", + }, + }, + ); + const boards = useMemo( () => boardsQuery.data?.status === 200 @@ -71,6 +92,19 @@ export default function BoardsPage() { [boardsQuery.data], ); + const groups = useMemo(() => { + if (groupsQuery.data?.status !== 200) return []; + return groupsQuery.data.data.items ?? []; + }, [groupsQuery.data]); + + const groupById = useMemo(() => { + const map = new Map(); + for (const group of groups) { + map.set(group.id, group); + } + return map; + }, [groups]); + const deleteMutation = useDeleteBoardApiV1BoardsBoardIdDelete< ApiError, { previous?: listBoardsApiV1BoardsGetResponse } @@ -136,6 +170,28 @@ export default function BoardsPage() { ), }, + { + id: "group", + header: "Group", + cell: ({ row }) => { + const groupId = row.original.board_group_id; + if (!groupId) { + return ; + } + const group = groupById.get(groupId); + const label = group?.name ?? compactId(groupId); + const title = group?.name ?? groupId; + return ( + + {label} + + ); + }, + }, { accessorKey: "updated_at", header: "Updated", @@ -167,7 +223,7 @@ export default function BoardsPage() { ), }, ], - [], + [groupById], ); // eslint-disable-next-line react-hooks/incompatible-library