update issue assignee full implementation

packages/backend/src/db/queries/issues.ts

@@ -41,7 +41,10 @@ export async function deleteIssue(id: number) {
     return await db.delete(Issue).where(eq(Issue.id, id));
 }
 
-export async function updateIssue(id: number, updates: { title?: string; description?: string }) {
+export async function updateIssue(
+    id: number,
+    updates: { title?: string; description?: string; assigneeId?: number | null },
+) {
     return await db.update(Issue).set(updates).where(eq(Issue.id, id)).returning();
 }
 

packages/backend/src/routes/issue/update.ts

@@ -1,7 +1,8 @@
 import type { BunRequest } from "bun";
 import { updateIssue } from "../../db/queries";
 
-// /issue/update?id=1&title=Testing&description=Description
+// /issue/update?id=1&title=Testing&description=Description&assigneeId=2
+// assigneeId can be "null" to unassign
 export default async function issueUpdate(req: BunRequest) {
     const url = new URL(req.url);
     const id = url.searchParams.get("id");
@@ -11,13 +12,24 @@ export default async function issueUpdate(req: BunRequest) {
 
     const title = url.searchParams.get("title") || undefined;
     const description = url.searchParams.get("description") || undefined;
-    if (!title && !description) {
+    const assigneeIdParam = url.searchParams.get("assigneeId");
+
+    // Parse assigneeId: "null" means unassign, number means assign, undefined means no change
+    let assigneeId: number | null | undefined;
+    if (assigneeIdParam === "null") {
+        assigneeId = null;
+    } else if (assigneeIdParam) {
+        assigneeId = Number(assigneeIdParam);
+    }
+
+    if (!title && !description && assigneeId === undefined) {
         return new Response("no updates provided", { status: 400 });
     }
 
     const issue = await updateIssue(Number(id), {
         title,
         description,
+        assigneeId,
     });
 
     return Response.json(issue);

packages/frontend/src/Index.tsx

@@ -278,7 +278,7 @@ function Index() {
                         </ResizablePanel>
 
                         {/* issue detail pane */}
-                        {selectedIssue && (
+                        {selectedIssue && selectedOrganisation && (
                             <>
                                 <ResizableSeparator />
                                 <ResizablePanel
@@ -291,7 +291,9 @@ function Index() {
                                         <IssueDetailPane
                                             project={selectedProject}
                                             issueData={selectedIssue}
+                                            organisationId={selectedOrganisation.Organisation.id}
                                             close={() => setSelectedIssue(null)}
+                                            onIssueUpdate={refetchIssues}
                                         />
                                     </div>
                                 </ResizablePanel>

packages/frontend/src/components/issue-detail-pane.tsx

@@ -1,18 +1,64 @@
-import type { IssueResponse, ProjectResponse } from "@issue/shared";
+import type { IssueResponse, OrganisationMemberResponse, ProjectResponse } from "@issue/shared";
 import { X } from "lucide-react";
+import { useEffect, useState } from "react";
+import Avatar from "@/components/avatar";
 import SmallUserDisplay from "@/components/small-user-display";
 import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { issue, organisation } from "@/lib/server";
 import { issueID } from "@/lib/utils";
 
 export function IssueDetailPane({
     project,
     issueData,
+    organisationId,
     close,
+    onIssueUpdate,
 }: {
     project: ProjectResponse;
     issueData: IssueResponse;
+    organisationId: number;
     close: () => void;
+    onIssueUpdate?: () => void;
 }) {
+    const [members, setMembers] = useState<OrganisationMemberResponse[]>([]);
+    const [assigneeId, setAssigneeId] = useState<string>(
+        issueData.Issue.assigneeId?.toString() ?? "unassigned",
+    );
+
+    useEffect(() => {
+        setAssigneeId(issueData.Issue.assigneeId?.toString() ?? "unassigned");
+    }, [issueData.Issue.assigneeId]);
+
+    useEffect(() => {
+        organisation.members({
+            organisationId,
+            onSuccess: (data) => {
+                setMembers(data);
+            },
+            onError: (error) => {
+                console.error("error fetching members:", error);
+            },
+        });
+    }, [organisationId]);
+
+    const handleAssigneeChange = async (value: string) => {
+        setAssigneeId(value);
+        const newAssigneeId = value === "unassigned" ? null : Number(value);
+
+        await issue.update({
+            issueId: issueData.Issue.id,
+            assigneeId: newAssigneeId,
+            onSuccess: () => {
+                onIssueUpdate?.();
+            },
+            onError: (error) => {
+                console.error("error updating assignee:", error);
+                setAssigneeId(issueData.Issue.assigneeId?.toString() ?? "unassigned");
+            },
+        });
+    };
+
     return (
         <div className="flex flex-col">
             <div className="flex flex-row items-center justify-end border-b h-[25px]">
@@ -31,12 +77,67 @@ export function IssueDetailPane({
                 <h1 className="text-md">{issueData.Issue.title}</h1>
                 <p className="text-sm">{issueData.Issue.description}</p>
 
-                {issueData.Assignee && (
+                <div className="flex items-center gap-2">
-                    <div className="flex items-center gap-2">
+                    <span className="text-sm">Assignee:</span>
-                        Assignee:
+                    <Select value={assigneeId} onValueChange={handleAssigneeChange}>
-                        <SmallUserDisplay user={issueData.Assignee} />
+                        <SelectTrigger size="sm" className="w-fit">
-                    </div>
+                            <SelectValue placeholder="Select assignee">
-                )}
+                                {assigneeId === "unassigned"
+                                    ? "Unassigned"
+                                    : (() => {
+                                          const member = members.find(
+                                              (m) => m.User.id.toString() === assigneeId,
+                                          );
+                                          if (member) {
+                                              return (
+                                                  <>
+                                                      <Avatar
+                                                          name={member.User.name}
+                                                          username={member.User.username}
+                                                          avatarURL={member.User.avatarURL}
+                                                          textClass="text-xs"
+                                                      />
+                                                      {member.User.name}
+                                                  </>
+                                              );
+                                          }
+                                          if (issueData.Assignee) {
+                                              return (
+                                                  <>
+                                                      <Avatar
+                                                          name={issueData.Assignee.name}
+                                                          username={issueData.Assignee.username}
+                                                          avatarURL={issueData.Assignee.avatarURL}
+                                                          textClass="text-xs"
+                                                      />
+                                                      {issueData.Assignee.name}
+                                                  </>
+                                              );
+                                          }
+                                          return null;
+                                      })()}
+                            </SelectValue>
+                        </SelectTrigger>
+                        <SelectContent
+                            side="bottom"
+                            position="popper"
+                            className={"data-[side=bottom]:translate-y-1 data-[side=bottom]:translate-x-0.25"}
+                        >
+                            <SelectItem value="unassigned">Unassigned</SelectItem>
+                            {members.map((member) => (
+                                <SelectItem key={member.User.id} value={member.User.id.toString()}>
+                                    <Avatar
+                                        name={member.User.name}
+                                        username={member.User.username}
+                                        avatarURL={member.User.avatarURL}
+                                        textClass="text-xs"
+                                    />
+                                    {member.User.name}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                </div>
             </div>
 
             <div className="flex items-center gap-2 px-2 py-1 border-t text-sm text-muted-foreground">

packages/frontend/src/lib/server/issue/index.ts

@@ -1,2 +1,3 @@
 export { byProject } from "@/lib/server/issue/byProject";
 export { create } from "@/lib/server/issue/create";
+export { update } from "@/lib/server/issue/update";

packages/frontend/src/lib/server/issue/update.ts

@@ -0,0 +1,36 @@
+import { getAuthHeaders, getServerURL } from "@/lib/utils";
+import type { ServerQueryInput } from "..";
+
+export async function update({
+    issueId,
+    title,
+    description,
+    assigneeId,
+    onSuccess,
+    onError,
+}: {
+    issueId: number;
+    title?: string;
+    description?: string;
+    assigneeId?: number | null;
+} & ServerQueryInput) {
+    const url = new URL(`${getServerURL()}/issue/update`);
+    url.searchParams.set("id", `${issueId}`);
+    if (title !== undefined) url.searchParams.set("title", title);
+    if (description !== undefined) url.searchParams.set("description", description);
+    if (assigneeId !== undefined) {
+        url.searchParams.set("assigneeId", assigneeId === null ? "null" : `${assigneeId}`);
+    }
+
+    const res = await fetch(url.toString(), {
+        headers: getAuthHeaders(),
+    });
+
+    if (!res.ok) {
+        const error = await res.text();
+        onError?.(error || `failed to update issue (${res.status})`);
+    } else {
+        const data = await res.json();
+        onSuccess?.(data, res);
+    }
+}

todo.md

@@ -1,8 +1,6 @@
 - org settings
 - sprints
 - issues
-  - issue creator
-  - issue assignee
   - deadline
   - comments
   - status