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

implemented UserSelect component

Browse Source
This commit is contained in:
Oliver Bryan
2026-01-06 23:00:03 +00:00
parent 732434c4a4
commit 2e030e962e
2 changed files with 11 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/frontend/src/Index.tsx
View File

@@ -321,7 +321,7 @@ function Index() {
<IssueDetailPane <IssueDetailPane
project={selectedProject} project={selectedProject}
issueData={selectedIssue} issueData={selectedIssue}
organisationId={selectedOrganisation.Organisation.id} members={members}
close={() => setSelectedIssue(null)} close={() => setSelectedIssue(null)}
onIssueUpdate={refetchIssues} onIssueUpdate={refetchIssues}
/> />

75
packages/frontend/src/components/issue-detail-pane.tsx
View File

@@ -1,47 +1,33 @@
import type { IssueResponse, OrganisationMemberResponse, ProjectResponse } from "@issue/shared"; import type { IssueResponse, ProjectResponse, UserRecord } from "@issue/shared";
import { X } from "lucide-react"; import { X } from "lucide-react";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import SmallUserDisplay from "@/components/small-user-display"; import SmallUserDisplay from "@/components/small-user-display";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { UserSelect } from "@/components/user-select";
import { issue, organisation } from "@/lib/server"; import { issue } from "@/lib/server";
import { issueID } from "@/lib/utils"; import { issueID } from "@/lib/utils";
export function IssueDetailPane({ export function IssueDetailPane({
project, project,
issueData, issueData,
organisationId, members,
close, close,
onIssueUpdate, onIssueUpdate,
}: { }: {
project: ProjectResponse; project: ProjectResponse;
issueData: IssueResponse; issueData: IssueResponse;
organisationId: number; members: UserRecord[];
close: () => void; close: () => void;
onIssueUpdate?: () => void; onIssueUpdate?: () => void;
}) { }) {
const [members, setMembers] = useState<OrganisationMemberResponse[]>([]);
const [assigneeId, setAssigneeId] = useState<string>( const [assigneeId, setAssigneeId] = useState<string>(
issueData.Issue.assigneeId?.toString() ?? "unassigned", issueData.Issue.assigneeId?.toString() ?? "unassigned",
); );
const [assigneeSelectOpen, setAssigneeSelectOpen] = useState(false);
useEffect(() => { useEffect(() => {
setAssigneeId(issueData.Issue.assigneeId?.toString() ?? "unassigned"); setAssigneeId(issueData.Issue.assigneeId?.toString() ?? "unassigned");
}, [issueData.Issue.assigneeId]); }, [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) => { const handleAssigneeChange = async (value: string) => {
setAssigneeId(value); setAssigneeId(value);
const newAssigneeId = value === "unassigned" ? null : Number(value); const newAssigneeId = value === "unassigned" ? null : Number(value);
@@ -81,53 +67,12 @@ export function IssueDetailPane({
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-sm">Assignee:</span> <span className="text-sm">Assignee:</span>
<Select <UserSelect
users={members}
value={assigneeId} value={assigneeId}
onValueChange={handleAssigneeChange} onChange={handleAssigneeChange}
onOpenChange={setAssigneeSelectOpen} fallbackUser={issueData.Assignee}
> />
<SelectTrigger className="w-fit p-0 px-2 py-2" isOpen={assigneeSelectOpen}>
<SelectValue placeholder="Select assignee">
{assigneeId === "unassigned"
? "Unassigned"
: (() => {
const member = members.find(
(m) => m.User.id.toString() === assigneeId,
);
const className = "p-0 py-2 text-sm";
if (member) {
return (
<SmallUserDisplay
user={member.User}
className={className}
/>
);
}
if (issueData.Assignee) {
return (
<SmallUserDisplay
user={issueData.Assignee}
className={className}
/>
);
}
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()}>
<SmallUserDisplay user={member.User} className="p-0" />
</SelectItem>
))}
</SelectContent>
</Select>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">