// hooks import useToast from "hooks/use-toast"; // icons import { Icon } from "components/ui"; // helpers import { copyTextToClipboard, addSpaceIfCamelCase } from "helpers/string.helper"; import { renderFullDate } from "helpers/date-time.helper"; import { dueDateIconDetails } from "../board-views/block-due-date"; // types import { IIssue } from "types/issue"; import { IPeekMode } from "store/issue_details"; // constants import { issueGroupFilter, issuePriorityFilter } from "constants/data"; type Props = { issueDetails: IIssue; mode?: IPeekMode; }; export const PeekOverviewIssueProperties: React.FC = ({ issueDetails, mode }) => { const { setToastAlert } = useToast(); const state = issueDetails.state_detail; const stateGroup = issueGroupFilter(state.group); const priority = issueDetails.priority ? issuePriorityFilter(issueDetails.priority) : null; const dueDateIcon = dueDateIconDetails(issueDetails.target_date, state.group); const handleCopyLink = () => { const urlToCopy = window.location.href; copyTextToClipboard(urlToCopy).then(() => { setToastAlert({ type: "success", title: "Link copied!", message: "Issue link copied to clipboard", }); }); }; return (
{mode === "full" && (
{issueDetails.project_detail.identifier}-{issueDetails.sequence_id}
)}
State
{stateGroup && (
{addSpaceIfCamelCase(state?.name ?? "")}
)}
Priority
{priority && ( )} {priority?.title ?? "None"}
Due date
{issueDetails.target_date ? (
{dueDateIcon.iconName} {renderFullDate(issueDetails.target_date)}
) : ( Empty )}
); };