312 lines
12 KiB
TypeScript
312 lines
12 KiB
TypeScript
"use client";
|
|
|
|
export const dynamic = "force-dynamic";
|
|
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
import { SignInButton, SignedIn, SignedOut, useAuth } from "@/auth/clerk";
|
|
|
|
import { ApiError } from "@/api/mutator";
|
|
import {
|
|
type listBoardsApiV1BoardsGetResponse,
|
|
updateBoardApiV1BoardsBoardIdPatch,
|
|
useListBoardsApiV1BoardsGet,
|
|
} from "@/api/generated/boards/boards";
|
|
import { useCreateBoardGroupApiV1BoardGroupsPost } from "@/api/generated/board-groups/board-groups";
|
|
import type { BoardRead } from "@/api/generated/model";
|
|
import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
|
|
import { DashboardShell } from "@/components/templates/DashboardShell";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
|
|
const slugify = (value: string) =>
|
|
value
|
|
.toLowerCase()
|
|
.trim()
|
|
.replace(/[^a-z0-9]+/g, "-")
|
|
.replace(/(^-|-$)/g, "") || "group";
|
|
|
|
export default function NewBoardGroupPage() {
|
|
const router = useRouter();
|
|
const { isSignedIn } = useAuth();
|
|
|
|
const [name, setName] = useState("");
|
|
const [description, setDescription] = useState("");
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const [boardSearch, setBoardSearch] = useState("");
|
|
const [selectedBoardIds, setSelectedBoardIds] = useState<Set<string>>(
|
|
() => new Set(),
|
|
);
|
|
|
|
const boardsQuery = useListBoardsApiV1BoardsGet<
|
|
listBoardsApiV1BoardsGetResponse,
|
|
ApiError
|
|
>(
|
|
{ limit: 200 },
|
|
{
|
|
query: {
|
|
enabled: Boolean(isSignedIn),
|
|
refetchOnMount: "always",
|
|
retry: false,
|
|
},
|
|
},
|
|
);
|
|
|
|
const boards: BoardRead[] =
|
|
boardsQuery.data?.status === 200 ? (boardsQuery.data.data.items ?? []) : [];
|
|
|
|
const createMutation = useCreateBoardGroupApiV1BoardGroupsPost<ApiError>({
|
|
mutation: {
|
|
onError: (err) => {
|
|
setError(err.message || "Something went wrong.");
|
|
},
|
|
},
|
|
});
|
|
|
|
const isCreating = createMutation.isPending;
|
|
const isFormReady = Boolean(name.trim());
|
|
|
|
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
if (!isSignedIn) return;
|
|
const trimmedName = name.trim();
|
|
if (!trimmedName) {
|
|
setError("Group name is required.");
|
|
return;
|
|
}
|
|
|
|
setError(null);
|
|
try {
|
|
const created = await createMutation.mutateAsync({
|
|
data: {
|
|
name: trimmedName,
|
|
slug: slugify(trimmedName),
|
|
description: description.trim() || null,
|
|
},
|
|
});
|
|
if (created.status !== 200) {
|
|
throw new Error("Unable to create group.");
|
|
}
|
|
|
|
const groupId = created.data.id;
|
|
const boardIds = Array.from(selectedBoardIds);
|
|
if (boardIds.length) {
|
|
const failures: string[] = [];
|
|
for (const boardId of boardIds) {
|
|
try {
|
|
const result = await updateBoardApiV1BoardsBoardIdPatch(boardId, {
|
|
board_group_id: groupId,
|
|
});
|
|
if (result.status !== 200) {
|
|
failures.push(boardId);
|
|
}
|
|
} catch {
|
|
failures.push(boardId);
|
|
}
|
|
}
|
|
|
|
if (failures.length) {
|
|
router.push(
|
|
`/board-groups/${groupId}/edit?assign_failed=${failures.length}`,
|
|
);
|
|
return;
|
|
}
|
|
}
|
|
|
|
router.push(`/board-groups/${groupId}`);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "Something went wrong.");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<DashboardShell>
|
|
<SignedOut>
|
|
<div className="col-span-2 flex min-h-[calc(100vh-64px)] items-center justify-center bg-slate-50 p-10 text-center">
|
|
<div className="rounded-xl border border-slate-200 bg-white px-8 py-6 shadow-sm">
|
|
<p className="text-sm text-slate-600">
|
|
Sign in to create a board group.
|
|
</p>
|
|
<SignInButton mode="modal" forceRedirectUrl="/board-groups/new">
|
|
<Button className="mt-4">Sign in</Button>
|
|
</SignInButton>
|
|
</div>
|
|
</div>
|
|
</SignedOut>
|
|
<SignedIn>
|
|
<DashboardSidebar />
|
|
<main className="flex-1 overflow-y-auto bg-slate-50">
|
|
<div className="border-b border-slate-200 bg-white px-8 py-6">
|
|
<div>
|
|
<h1 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight">
|
|
Create board group
|
|
</h1>
|
|
<p className="mt-1 text-sm text-slate-500">
|
|
Groups help agents discover related work across boards.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-8">
|
|
<form
|
|
onSubmit={handleSubmit}
|
|
className="space-y-6 rounded-xl border border-slate-200 bg-white p-6 shadow-sm"
|
|
>
|
|
<div className="grid gap-6 md:grid-cols-2">
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-slate-900">
|
|
Group name <span className="text-red-500">*</span>
|
|
</label>
|
|
<Input
|
|
value={name}
|
|
onChange={(event) => setName(event.target.value)}
|
|
placeholder="e.g. Release hardening"
|
|
disabled={isCreating}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-slate-900">
|
|
Description
|
|
</label>
|
|
<Textarea
|
|
value={description}
|
|
onChange={(event) => setDescription(event.target.value)}
|
|
placeholder="What ties these boards together? What should agents coordinate on?"
|
|
className="min-h-[120px]"
|
|
disabled={isCreating}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<div className="flex flex-wrap items-center justify-between gap-2">
|
|
<label className="text-sm font-medium text-slate-900">
|
|
Boards
|
|
</label>
|
|
<span className="text-xs text-slate-500">
|
|
{selectedBoardIds.size} selected
|
|
</span>
|
|
</div>
|
|
<Input
|
|
value={boardSearch}
|
|
onChange={(event) => setBoardSearch(event.target.value)}
|
|
placeholder="Search boards..."
|
|
disabled={isCreating}
|
|
/>
|
|
<div className="max-h-64 overflow-auto rounded-xl border border-slate-200 bg-slate-50/40">
|
|
{boardsQuery.isLoading ? (
|
|
<div className="px-4 py-6 text-sm text-slate-500">
|
|
Loading boards…
|
|
</div>
|
|
) : boardsQuery.error ? (
|
|
<div className="px-4 py-6 text-sm text-rose-700">
|
|
{boardsQuery.error.message}
|
|
</div>
|
|
) : boards.length === 0 ? (
|
|
<div className="px-4 py-6 text-sm text-slate-500">
|
|
No boards found.
|
|
</div>
|
|
) : (
|
|
<ul className="divide-y divide-slate-200">
|
|
{boards
|
|
.filter((board) => {
|
|
const q = boardSearch.trim().toLowerCase();
|
|
if (!q) return true;
|
|
return (
|
|
board.name.toLowerCase().includes(q) ||
|
|
board.slug.toLowerCase().includes(q)
|
|
);
|
|
})
|
|
.map((board) => {
|
|
const checked = selectedBoardIds.has(board.id);
|
|
const isAlreadyGrouped = Boolean(
|
|
board.board_group_id,
|
|
);
|
|
return (
|
|
<li key={board.id} className="px-4 py-3">
|
|
<label className="flex cursor-pointer items-start gap-3">
|
|
<input
|
|
type="checkbox"
|
|
className="mt-1 h-4 w-4 rounded border-slate-300 text-blue-600"
|
|
checked={checked}
|
|
onChange={() => {
|
|
setSelectedBoardIds((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(board.id)) {
|
|
next.delete(board.id);
|
|
} else {
|
|
next.add(board.id);
|
|
}
|
|
return next;
|
|
});
|
|
}}
|
|
disabled={isCreating}
|
|
/>
|
|
<div className="min-w-0">
|
|
<p className="truncate text-sm font-medium text-slate-900">
|
|
{board.name}
|
|
</p>
|
|
<div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-slate-500">
|
|
<span className="font-mono text-[11px] text-slate-400">
|
|
{board.id}
|
|
</span>
|
|
{isAlreadyGrouped ? (
|
|
<span className="rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-amber-900">
|
|
currently grouped
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
<p className="text-xs text-slate-500">
|
|
Optional. Selected boards will be assigned to this group after
|
|
creation. You can change membership later in group edit or
|
|
board settings.
|
|
</p>
|
|
</div>
|
|
|
|
{error ? <p className="text-sm text-red-500">{error}</p> : null}
|
|
|
|
<div className="flex justify-end gap-3">
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
onClick={() => router.push("/board-groups")}
|
|
disabled={isCreating}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button type="submit" disabled={isCreating || !isFormReady}>
|
|
{isCreating ? "Creating…" : "Create group"}
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="border-t border-slate-100 pt-4 text-xs text-slate-500">
|
|
Want to assign boards later? Update each board in{" "}
|
|
<Link
|
|
href="/boards"
|
|
className="font-medium text-blue-600 hover:text-blue-700"
|
|
>
|
|
Boards
|
|
</Link>{" "}
|
|
and pick this group.
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</main>
|
|
</SignedIn>
|
|
</DashboardShell>
|
|
);
|
|
}
|