import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import { Command } from "cmdk"; import { Check } from "lucide-react"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // ui import { Avatar } from "@plane/ui"; // types import { IIssue } from "types"; type Props = { closePalette: () => void; issue: IIssue; }; export const ChangeIssueAssignee: React.FC = observer((props) => { const { closePalette, issue } = props; // router const router = useRouter(); const { workspaceSlug, projectId } = router.query; // store const { issueDetail: { updateIssue }, projectMember: { projectMembers }, } = useMobxStore(); const options = projectMembers?.map(({ member }) => ({ value: member.id, query: member.display_name, content: ( <>
{member.display_name}
{issue.assignees.includes(member.id) && (
)} ), })) ?? []; const handleUpdateIssue = async (formData: Partial) => { if (!workspaceSlug || !projectId || !issue) return; const payload = { ...formData }; await updateIssue(workspaceSlug.toString(), projectId.toString(), issue.id, payload).catch((e) => { console.error(e); }); }; const handleIssueAssignees = (assignee: string) => { const updatedAssignees = issue.assignees ?? []; if (updatedAssignees.includes(assignee)) updatedAssignees.splice(updatedAssignees.indexOf(assignee), 1); else updatedAssignees.push(assignee); handleUpdateIssue({ assignees: updatedAssignees }); closePalette(); }; return ( <> {options.map((option: any) => ( handleIssueAssignees(option.value)} className="focus:outline-none" > {option.content} ))} ); });