import { FC, useState } from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // ui icons import { DiceIcon, DoubleCircleIcon, UserGroupIcon, ContrastIcon } from "@plane/ui"; import { CalendarDays, Link2, Plus, Signal, Tag, Triangle, LayoutPanelTop } from "lucide-react"; import { SidebarAssigneeSelect, SidebarCycleSelect, SidebarEstimateSelect, SidebarLabelSelect, SidebarModuleSelect, SidebarParentSelect, SidebarPrioritySelect, SidebarStateSelect, } from "../sidebar-select"; // components import { CustomDatePicker } from "components/ui"; import { LinkModal, LinksList } from "components/core"; // types import { IIssue, TIssuePriorities, ILinkDetails, IIssueLink } from "types"; // constants import { EUserWorkspaceRoles } from "constants/workspace"; interface IPeekOverviewProperties { issue: IIssue; issueUpdate: (issue: Partial) => void; issueLinkCreate: (data: IIssueLink) => Promise; issueLinkUpdate: (data: IIssueLink, linkId: string) => Promise; issueLinkDelete: (linkId: string) => Promise; disableUserActions: boolean; } export const PeekOverviewProperties: FC = observer((props) => { const { issue, issueUpdate, issueLinkCreate, issueLinkUpdate, issueLinkDelete, disableUserActions } = props; // states const [linkModal, setLinkModal] = useState(false); const [selectedLinkToUpdate, setSelectedLinkToUpdate] = useState(null); const { user: { currentProjectRole }, issueDetail: { fetchPeekIssueDetails }, project: { getProjectById }, } = useMobxStore(); const router = useRouter(); const { workspaceSlug, projectId } = router.query; const handleState = (_state: string) => { issueUpdate({ ...issue, state: _state }); }; const handlePriority = (_priority: TIssuePriorities) => { issueUpdate({ ...issue, priority: _priority }); }; const handleAssignee = (_assignees: string[]) => { issueUpdate({ ...issue, assignees: _assignees }); }; const handleEstimate = (_estimate: number | null) => { issueUpdate({ ...issue, estimate_point: _estimate }); }; const handleStartDate = (_startDate: string | null) => { issueUpdate({ ...issue, start_date: _startDate }); }; const handleTargetDate = (_targetDate: string | null) => { issueUpdate({ ...issue, target_date: _targetDate }); }; const handleParent = (_parent: string) => { issueUpdate({ ...issue, parent: _parent }); }; const handleLabels = (formData: Partial) => { issueUpdate({ ...issue, ...formData }); }; const handleCycleOrModuleChange = async () => { if (!workspaceSlug || !projectId) return; await fetchPeekIssueDetails(workspaceSlug.toString(), projectId.toString(), issue.id); }; const handleEditLink = (link: ILinkDetails) => { setSelectedLinkToUpdate(link); setLinkModal(true); }; const projectDetails = workspaceSlug ? getProjectById(workspaceSlug.toString(), issue.project) : null; const isEstimateEnabled = projectDetails?.estimate; const minDate = issue.start_date ? new Date(issue.start_date) : null; minDate?.setDate(minDate.getDate()); const maxDate = issue.target_date ? new Date(issue.target_date) : null; maxDate?.setDate(maxDate.getDate()); return ( <> { setLinkModal(false); setSelectedLinkToUpdate(null); }} data={selectedLinkToUpdate} status={selectedLinkToUpdate ? true : false} createIssueLink={issueLinkCreate} updateIssueLink={issueLinkUpdate} />
{/* state */}

State

{/* assignee */}

Assignees

{/* priority */}

Priority

{/* estimate */} {isEstimateEnabled && (

Estimate

)} {/* start date */}

Start date

{/* due date */}

Due date

{/* parent */}

Parent

Cycle

Module

Label

Links

{!disableUserActions && ( )}
{issue?.issue_link && issue.issue_link.length > 0 ? ( ) : null}
); });