import { FC } from "react"; import { observer } from "mobx-react-lite"; import { Layers, Link, Paperclip } from "lucide-react"; // components import { IssuePropertyState } from "../properties/state"; import { IssuePropertyPriority } from "../properties/priority"; import { IssuePropertyLabels } from "../properties/labels"; import { IssuePropertyAssignee } from "../properties/assignee"; import { IssuePropertyEstimates } from "../properties/estimates"; import { IssuePropertyDate } from "../properties/date"; // ui import { Tooltip } from "@plane/ui"; export interface IKanBanProperties { columnId: string; issue: any; handleIssues?: (group_by: string | null, issue: any) => void; display_properties: any; states: any; labels: any; members: any; priorities: any; } export const KanBanProperties: FC = observer((props) => { const { columnId: group_id, issue, handleIssues, display_properties, states, labels, members, priorities } = props; const handleState = (id: string) => { if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, state: id }); }; const handlePriority = (id: string) => { if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, priority: id }); }; const handleLabel = (ids: string[]) => { if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, labels: ids }); }; const handleAssignee = (ids: string[]) => { if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, assignees: ids }); }; const handleStartDate = (date: string) => { if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, start_date: date }); }; const handleTargetDate = (date: string) => { if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, target_date: date }); }; const handleEstimate = (id: string) => { if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, estimate_point: id }); }; return (
{/* basic properties */} {/* state */} {display_properties && display_properties?.state && states && ( handleState(id)} disabled={false} list={states} /> )} {/* priority */} {display_properties && display_properties?.priority && priorities && ( handlePriority(id)} disabled={false} list={priorities} /> )} {/* label */} {display_properties && display_properties?.labels && labels && ( handleLabel(ids)} disabled={false} list={labels} /> )} {/* assignee */} {display_properties && display_properties?.assignee && members && ( handleAssignee(ids)} disabled={false} list={members} /> )} {/* start date */} {display_properties && display_properties?.start_date && ( handleStartDate(date)} disabled={false} placeHolder={`Start date`} /> )} {/* target/due date */} {display_properties && display_properties?.due_date && ( handleTargetDate(date)} disabled={false} placeHolder={`Target date`} /> )} {/* estimates */} {display_properties && display_properties?.estimate && ( handleEstimate(id)} disabled={false} workspaceSlug={issue?.workspace_detail?.slug || null} projectId={issue?.project_detail?.id || null} /> )} {/* extra render properties */} {/* sub-issues */} {display_properties && display_properties?.sub_issue_count && (
{issue.sub_issues_count}
)} {/* attachments */} {display_properties && display_properties?.attachment_count && (
{issue.attachment_count}
)} {/* link */} {display_properties && display_properties?.link && (
{issue.link_count}
)}
); });