import React from "react"; import { observer } from "mobx-react-lite"; import { Droppable } from "@hello-pangea/dnd"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // components import { KanBanGroupByHeaderRoot } from "./headers/group-by-root"; import { KanbanIssueBlocksList, BoardInlineCreateIssueForm } from "components/issues"; // types import { IIssueDisplayProperties, IIssue } from "types"; // constants import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES, getValueFromObject } from "constants/issue"; export interface IGroupByKanBan { issues: any; sub_group_by: string | null; group_by: string | null; sub_group_id: string; list: any; listKey: string; isDragDisabled: boolean; handleIssues: ( sub_group_by: string | null, group_by: string | null, issue: IIssue, action: "update" | "delete" ) => void; quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode; displayProperties: IIssueDisplayProperties; kanBanToggle: any; handleKanBanToggle: any; enableQuickIssueCreate?: boolean; } const GroupByKanBan: React.FC = observer((props) => { const { issues, sub_group_by, group_by, sub_group_id = "null", list, listKey, isDragDisabled, handleIssues, quickActions, displayProperties, kanBanToggle, handleKanBanToggle, enableQuickIssueCreate, } = props; const verticalAlignPosition = (_list: any) => kanBanToggle?.groupByHeaderMinMax.includes(getValueFromObject(_list, listKey) as string); return (
{list && list.length > 0 && list.map((_list: any) => (
{sub_group_by === null && (
)}
{(provided: any, snapshot: any) => (
{issues ? ( ) : ( isDragDisabled && (
{/*
Drop here
*/}
) )} {provided.placeholder}
)}
{enableQuickIssueCreate && ( )}
))}
); }); export interface IKanBan { issues: any; sub_group_by: string | null; group_by: string | null; sub_group_id?: string; handleDragDrop?: (result: any) => void | undefined; handleIssues: ( sub_group_by: string | null, group_by: string | null, issue: IIssue, action: "update" | "delete" ) => void; quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode; displayProperties: IIssueDisplayProperties; kanBanToggle: any; handleKanBanToggle: any; enableQuickIssueCreate?: boolean; } export const KanBan: React.FC = observer((props) => { const { issues, sub_group_by, group_by, sub_group_id = "null", handleIssues, quickActions, displayProperties, kanBanToggle, handleKanBanToggle, enableQuickIssueCreate, } = props; const { project: projectStore, issueKanBanView: issueKanBanViewStore } = useMobxStore(); return (
{group_by && group_by === "state" && ( )} {group_by && group_by === "state_detail.group" && ( )} {group_by && group_by === "priority" && ( )} {group_by && group_by === "labels" && ( )} {group_by && group_by === "assignees" && ( )} {group_by && group_by === "created_by" && ( )}
); });