import { observer } from "mobx-react-lite"; // hooks import { useIssueDetail, 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, TIssueKanbanFilters, } from "@plane/types"; // constants import { EIssueActions } from "../types"; import { getGroupByColumns } from "../utils"; import { TCreateModalStoreTypes } from "constants/issue"; import { MutableRefObject } from "react"; 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; kanbanFilters: TIssueKanbanFilters; handleKanbanFilters: any; enableQuickIssueCreate?: boolean; quickAddCallback?: ( workspaceSlug: string, projectId: string, data: TIssue, viewId?: string ) => Promise; viewId?: string; disableIssueCreation?: boolean; storeType?: TCreateModalStoreTypes; addIssuesToView?: (issueIds: string[]) => Promise; canEditProperties: (projectId: string | undefined) => boolean; scrollableContainerRef?: MutableRefObject; isDragStarted?: boolean; showEmptyGroup?: boolean; } const GroupByKanBan: React.FC = observer((props) => { const { issuesMap, issueIds, displayProperties, sub_group_by, group_by, sub_group_id = "null", isDragDisabled, handleIssues, quickActions, kanbanFilters, handleKanbanFilters, enableQuickIssueCreate, quickAddCallback, viewId, disableIssueCreation, storeType, addIssuesToView, canEditProperties, scrollableContainerRef, isDragStarted, showEmptyGroup = true, } = props; const member = useMember(); const project = useProject(); const label = useLabel(); const projectState = useProjectState(); const { peekIssue } = useIssueDetail(); const list = getGroupByColumns(group_by as GroupByColumnTypes, project, label, projectState, member); if (!list) return null; const groupWithIssues = list.filter((_list) => (issueIds as TGroupedIssues)[_list.id]?.length > 0); const groupList = showEmptyGroup ? list : groupWithIssues; const visibilityGroupBy = (_list: IGroupByColumn) => sub_group_by ? false : kanbanFilters?.group_by.includes(_list.id) ? true : false; const isGroupByCreatedBy = group_by === "created_by"; return (
{groupList && groupList.length > 0 && groupList.map((_list: IGroupByColumn) => { const groupByVisibilityToggle = visibilityGroupBy(_list); return (
{sub_group_by === null && (
)} {!groupByVisibilityToggle && ( )}
); })}
); }); 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; kanbanFilters: TIssueKanbanFilters; handleKanbanFilters: (toggle: "group_by" | "sub_group_by", value: string) => void; showEmptyGroup: boolean; enableQuickIssueCreate?: boolean; quickAddCallback?: ( workspaceSlug: string, projectId: string, data: TIssue, viewId?: string ) => Promise; viewId?: string; disableIssueCreation?: boolean; storeType?: TCreateModalStoreTypes; addIssuesToView?: (issueIds: string[]) => Promise; canEditProperties: (projectId: string | undefined) => boolean; scrollableContainerRef?: MutableRefObject; isDragStarted?: boolean; } export const KanBan: React.FC = observer((props) => { const { issuesMap, issueIds, displayProperties, sub_group_by, group_by, sub_group_id = "null", handleIssues, quickActions, kanbanFilters, handleKanbanFilters, enableQuickIssueCreate, quickAddCallback, viewId, disableIssueCreation, storeType, addIssuesToView, canEditProperties, scrollableContainerRef, isDragStarted, showEmptyGroup, } = props; const issueKanBanView = useKanbanView(); return ( ); });