import { observer } from "mobx-react-lite"; // components import { KanBan } from "./default"; import { HeaderSubGroupByCard } from "./headers/sub-group-by-card"; import { HeaderGroupByCard } from "./headers/group-by-card"; // types import { GroupByColumnTypes, IGroupByColumn, TGroupedIssues, TIssue, IIssueDisplayProperties, IIssueMap, TSubGroupedIssues, TUnGroupedIssues, TIssueKanbanFilters, } from "@plane/types"; // constants import { EIssueActions } from "../types"; import { useLabel, useMember, useProject, useProjectState } from "hooks/store"; import { getGroupByColumns } from "../utils"; import { TCreateModalStoreTypes } from "constants/issue"; interface ISubGroupSwimlaneHeader { issueIds: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues; sub_group_by: string | null; group_by: string | null; list: IGroupByColumn[]; kanbanFilters: TIssueKanbanFilters; handleKanbanFilters: (toggle: "group_by" | "sub_group_by", value: string) => void; } const SubGroupSwimlaneHeader: React.FC = ({ issueIds, sub_group_by, group_by, list, kanbanFilters, handleKanbanFilters, }) => (
{list && list.length > 0 && list.map((_list: IGroupByColumn) => (
))}
); interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader { issuesMap: IIssueMap; issueIds: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues; showEmptyGroup: boolean; displayProperties: IIssueDisplayProperties | undefined; handleIssues: (issue: TIssue, action: EIssueActions) => void; quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode; kanbanFilters: TIssueKanbanFilters; handleKanbanFilters: (toggle: "group_by" | "sub_group_by", value: string) => void; isDragStarted?: boolean; disableIssueCreation?: boolean; currentStore?: TCreateModalStoreTypes; enableQuickIssueCreate: boolean; canEditProperties: (projectId: string | undefined) => boolean; addIssuesToView?: (issueIds: string[]) => Promise; quickAddCallback?: ( workspaceSlug: string, projectId: string, data: TIssue, viewId?: string ) => Promise; viewId?: string; } const SubGroupSwimlane: React.FC = observer((props) => { const { issuesMap, issueIds, sub_group_by, group_by, list, handleIssues, quickActions, displayProperties, kanbanFilters, handleKanbanFilters, showEmptyGroup, enableQuickIssueCreate, canEditProperties, addIssuesToView, quickAddCallback, viewId, } = props; const calculateIssueCount = (column_id: string) => { let issueCount = 0; const subGroupedIds = issueIds as TSubGroupedIssues; subGroupedIds?.[column_id] && Object.keys(subGroupedIds?.[column_id])?.forEach((_list: any) => { issueCount += subGroupedIds?.[column_id]?.[_list]?.length || 0; }); return issueCount; }; return (
{list && list.length > 0 && list.map((_list: any) => (
{!kanbanFilters?.sub_group_by.includes(_list.id) && (
)}
))}
); }); export interface IKanBanSwimLanes { issuesMap: IIssueMap; issueIds: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues; displayProperties: IIssueDisplayProperties | undefined; sub_group_by: string | null; group_by: string | null; handleIssues: (issue: TIssue, action: EIssueActions) => void; quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode; kanbanFilters: TIssueKanbanFilters; handleKanbanFilters: (toggle: "group_by" | "sub_group_by", value: string) => void; showEmptyGroup: boolean; isDragStarted?: boolean; disableIssueCreation?: boolean; currentStore?: TCreateModalStoreTypes; addIssuesToView?: (issueIds: string[]) => Promise; enableQuickIssueCreate: boolean; quickAddCallback?: ( workspaceSlug: string, projectId: string, data: TIssue, viewId?: string ) => Promise; viewId?: string; canEditProperties: (projectId: string | undefined) => boolean; } export const KanBanSwimLanes: React.FC = observer((props) => { const { issuesMap, issueIds, displayProperties, sub_group_by, group_by, handleIssues, quickActions, kanbanFilters, handleKanbanFilters, showEmptyGroup, isDragStarted, disableIssueCreation, enableQuickIssueCreate, canEditProperties, addIssuesToView, quickAddCallback, viewId, } = props; const member = useMember(); const project = useProject(); const projectLabel = useLabel(); const projectState = useProjectState(); const groupByList = getGroupByColumns(group_by as GroupByColumnTypes, project, projectLabel, projectState, member); const subGroupByList = getGroupByColumns( sub_group_by as GroupByColumnTypes, project, projectLabel, projectState, member ); if (!groupByList || !subGroupByList) return null; return (
{sub_group_by && ( )}
); });