import { observer } from "mobx-react-lite"; // hooks import { useKanbanView, useLabel, useMember, useProject, useProjectState } from "hooks/store"; // components import { HeaderGroupByCard } from "./headers/group-by-card"; import { KanbanGroup } from "./kanban-group"; // types import { GroupByColumnTypes, IGroupByColumn, TGroupedIssues, TIssue, IIssueDisplayProperties, IIssueMap, TSubGroupedIssues, TUnGroupedIssues, } from "@plane/types"; // constants import { EIssueActions } from "../types"; import { getGroupByColumns } from "../utils"; import { TCreateModalStoreTypes } from "constants/issue"; export interface IGroupByKanBan { issuesMap: IIssueMap; issueIds: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues; displayProperties: IIssueDisplayProperties | undefined; sub_group_by: string | null; group_by: string | null; sub_group_id: string; isDragDisabled: boolean; handleIssues: (issue: TIssue, action: EIssueActions) => void; quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode; kanBanToggle: any; handleKanBanToggle: any; enableQuickIssueCreate?: boolean; quickAddCallback?: ( workspaceSlug: string, projectId: string, data: TIssue, viewId?: string ) => Promise; viewId?: string; disableIssueCreation?: boolean; currentStore?: TCreateModalStoreTypes; addIssuesToView?: (issueIds: string[]) => Promise; canEditProperties: (projectId: string | undefined) => boolean; } const GroupByKanBan: React.FC = observer((props) => { const { issuesMap, issueIds, displayProperties, sub_group_by, group_by, sub_group_id = "null", isDragDisabled, handleIssues, quickActions, kanBanToggle, handleKanBanToggle, enableQuickIssueCreate, quickAddCallback, viewId, disableIssueCreation, currentStore, addIssuesToView, canEditProperties, } = props; const member = useMember(); const project = useProject(); const projectLabel = useLabel(); const projectState = useProjectState(); const list = getGroupByColumns(group_by as GroupByColumnTypes, project, projectLabel, projectState, member); if (!list) return null; const verticalAlignPosition = (_list: IGroupByColumn) => kanBanToggle?.groupByHeaderMinMax.includes(_list.id); return (
{list && list.length > 0 && list.map((_list: IGroupByColumn) => { const verticalPosition = verticalAlignPosition(_list); return (
{sub_group_by === null && (
)}
); })}
); }); export interface IKanBan { issuesMap: IIssueMap; issueIds: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues; displayProperties: IIssueDisplayProperties | undefined; sub_group_by: string | null; group_by: string | null; sub_group_id?: string; handleIssues: (issue: TIssue, action: EIssueActions) => void; quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode; kanBanToggle: any; handleKanBanToggle: any; showEmptyGroup: boolean; enableQuickIssueCreate?: boolean; quickAddCallback?: ( workspaceSlug: string, projectId: string, data: TIssue, viewId?: string ) => Promise; viewId?: string; disableIssueCreation?: boolean; currentStore?: TCreateModalStoreTypes; addIssuesToView?: (issueIds: string[]) => Promise; canEditProperties: (projectId: string | undefined) => boolean; } export const KanBan: React.FC = observer((props) => { const { issuesMap, issueIds, displayProperties, sub_group_by, group_by, sub_group_id = "null", handleIssues, quickActions, kanBanToggle, handleKanBanToggle, enableQuickIssueCreate, quickAddCallback, viewId, disableIssueCreation, currentStore, addIssuesToView, canEditProperties, } = props; const issueKanBanView = useKanbanView(); return (
); });