import React, { useState } from "react"; import { useRouter } from "next/router"; import useSWR from "swr"; // services import projectService from "services/project.service"; import trackEventServices from "services/track-event.service"; // ui import { AssigneesList, Avatar, CustomSearchSelect, Icon, Tooltip } from "components/ui"; // icons import { UserGroupIcon } from "@heroicons/react/24/outline"; // types import { ICurrentUserResponse, IIssue } from "types"; // fetch-keys import { PROJECT_MEMBERS } from "constants/fetch-keys"; import useProjectMembers from "hooks/use-project-members"; type Props = { issue: IIssue; partialUpdateIssue: (formData: Partial, issue: IIssue) => void; position?: "left" | "right"; tooltipPosition?: "top" | "bottom"; selfPositioned?: boolean; customButton?: boolean; user: ICurrentUserResponse | undefined; isNotAllowed: boolean; }; export const ViewAssigneeSelect: React.FC = ({ issue, partialUpdateIssue, position = "left", selfPositioned = false, tooltipPosition = "top", user, isNotAllowed, customButton = false, }) => { const [fetchAssignees, setFetchAssignees] = useState(false); const router = useRouter(); const { workspaceSlug } = router.query; const { members } = useProjectMembers(workspaceSlug?.toString(), issue.project, fetchAssignees); const options = members?.map((member) => ({ value: member.member.id, query: member.member.display_name, content: (
{member.member.display_name}
), })); const assigneeLabel = ( 0 ? issue.assignee_details.map((assignee) => assignee?.display_name).join(", ") : "No Assignee" } >
{issue.assignees && issue.assignees.length > 0 && Array.isArray(issue.assignees) ? (
) : (
)}
); return ( { const newData = issue.assignees ?? []; if (newData.includes(data)) newData.splice(newData.indexOf(data), 1); else newData.push(data); partialUpdateIssue({ assignees_list: data }, issue); trackEventServices.trackIssuePartialPropertyUpdateEvent( { workspaceSlug, workspaceId: issue.workspace, projectId: issue.project_detail.id, projectIdentifier: issue.project_detail.identifier, projectName: issue.project_detail.name, issueId: issue.id, }, "ISSUE_PROPERTY_UPDATE_ASSIGNEE", user ); }} options={options} {...(customButton ? { customButton: assigneeLabel } : { label: assigneeLabel })} multiple noChevron position={position} disabled={isNotAllowed} onOpen={() => setFetchAssignees(true)} selfPositioned={selfPositioned} width="w-full min-w-[12rem]" /> ); };