import React, { useState } from "react"; import { useRouter } from "next/router"; import useSWR from "swr"; // services import issuesService from "services/issues.service"; // component import { CreateLabelModal } from "components/labels"; // ui import { CustomSearchSelect, Tooltip } from "components/ui"; // icons import { PlusIcon, TagIcon } from "@heroicons/react/24/outline"; // types import { ICurrentUserResponse, IIssue, IIssueLabels } from "types"; // fetch-keys import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys"; type Props = { issue: IIssue; partialUpdateIssue: (formData: Partial, issue: IIssue) => void; position?: "left" | "right"; selfPositioned?: boolean; tooltipPosition?: "left" | "right"; customButton?: boolean; user: ICurrentUserResponse | undefined; isNotAllowed: boolean; }; export const ViewLabelSelect: React.FC = ({ issue, partialUpdateIssue, position = "left", selfPositioned = false, tooltipPosition = "right", user, isNotAllowed, customButton = false, }) => { const [labelModal, setLabelModal] = useState(false); const router = useRouter(); const { workspaceSlug, projectId } = router.query; const { data: issueLabels } = useSWR( projectId ? PROJECT_ISSUE_LABELS(projectId.toString()) : null, workspaceSlug && projectId ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string) : null ); const options = issueLabels?.map((label) => ({ value: label.id, query: label.name, content: (
{label.name}
), })); const labelsLabel = ( 0 ? issue.label_details.map((label) => label.name ?? "").join(", ") : "No Label" } >
{issue.label_details.length > 0 ? ( <> {issue.label_details.slice(0, 4).map((label, index) => (
))} {issue.label_details.length > 4 ? +{issue.label_details.length - 4} : null} ) : ( <> )}
); const footerOption = ( ); return ( <> {projectId && ( setLabelModal(false)} projectId={projectId.toString()} user={user} /> )} { partialUpdateIssue({ labels_list: data }, issue); }} options={options} {...(customButton ? { customButton: labelsLabel } : { label: labelsLabel })} multiple noChevron position={position} disabled={isNotAllowed} selfPositioned={selfPositioned} footerOption={footerOption} dropdownWidth="w-full min-w-[12rem]" /> ); };