// mobx import { observer } from "mobx-react-lite"; // lucide icons 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"; import { Tooltip } from "@plane/ui"; import { IIssue, IIssueDisplayProperties, IState, TIssuePriorities } from "types"; export interface IKanBanProperties { sub_group_id: string; columnId: string; issue: IIssue; handleIssues: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => void; displayProperties: IIssueDisplayProperties | null; showEmptyGroup: boolean; } export const KanBanProperties: React.FC = observer((props) => { const { sub_group_id, columnId: group_id, issue, handleIssues, displayProperties, showEmptyGroup } = props; const handleState = (state: IState) => { handleIssues( !sub_group_id && sub_group_id === "null" ? null : sub_group_id, !group_id && group_id === "null" ? null : group_id, { ...issue, state: state.id } ); }; const handlePriority = (value: TIssuePriorities) => { handleIssues( !sub_group_id && sub_group_id === "null" ? null : sub_group_id, !group_id && group_id === "null" ? null : group_id, { ...issue, priority: value } ); }; const handleLabel = (ids: string[]) => { handleIssues( !sub_group_id && sub_group_id === "null" ? null : sub_group_id, !group_id && group_id === "null" ? null : group_id, { ...issue, labels: ids } ); }; const handleAssignee = (ids: string[]) => { handleIssues( !sub_group_id && sub_group_id === "null" ? null : sub_group_id, !group_id && group_id === "null" ? null : group_id, { ...issue, assignees: ids } ); }; const handleStartDate = (date: string) => { handleIssues( !sub_group_id && sub_group_id === "null" ? null : sub_group_id, !group_id && group_id === "null" ? null : group_id, { ...issue, start_date: date } ); }; const handleTargetDate = (date: string) => { handleIssues( !sub_group_id && sub_group_id === "null" ? null : sub_group_id, !group_id && group_id === "null" ? null : group_id, { ...issue, target_date: date } ); }; const handleEstimate = (value: number | null) => { handleIssues( !sub_group_id && sub_group_id === "null" ? null : sub_group_id, !group_id && group_id === "null" ? null : group_id, { ...issue, estimate_point: value } ); }; return (
{/* basic properties */} {/* state */} {displayProperties && displayProperties?.state && ( )} {/* priority */} {displayProperties && displayProperties?.priority && ( )} {/* label */} {displayProperties && displayProperties?.labels && ( )} {/* start date */} {displayProperties && displayProperties?.start_date && ( handleStartDate(date)} disabled={false} placeHolder="Start date" /> )} {/* target/due date */} {displayProperties && displayProperties?.due_date && ( handleTargetDate(date)} disabled={false} placeHolder="Target date" /> )} {/* assignee */} {displayProperties && displayProperties?.assignee && ( )} {/* estimates */} {displayProperties && displayProperties?.estimate && ( )} {/* extra render properties */} {/* sub-issues */} {displayProperties && displayProperties?.sub_issue_count && (
{issue.sub_issues_count}
)} {/* attachments */} {displayProperties && displayProperties?.attachment_count && (
{issue.attachment_count}
)} {/* link */} {displayProperties && displayProperties?.link && (
{issue.link_count}
)}
); });