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, KanBanQuickAddIssueForm } from "components/issues"; // types import { IIssueDisplayProperties, IIssue, IState } from "types"; // constants import { getValueFromObject } from "constants/issue"; import { EIssueActions } from "../types"; import { IIssueResponse, IGroupedIssues, ISubGroupedIssues, TUnGroupedIssues } from "store/issues/types"; import { EProjectStore } from "store/command-palette.store"; export interface IGroupByKanBan { issues: IIssueResponse; issueIds: any; sub_group_by: string | null; group_by: string | null; order_by: string | null; sub_group_id: string; list: any; listKey: string; states: IState[] | null; isDragDisabled: boolean; handleIssues: (sub_group_by: string | null, group_by: string | null, issue: IIssue, action: EIssueActions) => void; showEmptyGroup: boolean; quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode; displayProperties: IIssueDisplayProperties | null; kanBanToggle: any; handleKanBanToggle: any; enableQuickIssueCreate?: boolean; isDragStarted?: boolean; quickAddCallback?: ( workspaceSlug: string, projectId: string, data: IIssue, viewId?: string ) => Promise; viewId?: string; disableIssueCreation?: boolean; currentStore?: EProjectStore; addIssuesToView?: (issueIds: string[]) => Promise; isReadOnly: boolean; } const GroupByKanBan: React.FC = observer((props) => { const { issues, issueIds, sub_group_by, group_by, order_by, sub_group_id = "null", list, listKey, isDragDisabled, handleIssues, showEmptyGroup, quickActions, displayProperties, kanBanToggle, handleKanBanToggle, enableQuickIssueCreate, isDragStarted, quickAddCallback, viewId, disableIssueCreation, isReadOnly, currentStore, addIssuesToView, } = 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 && ( )}
{/* {isDragStarted && isDragDisabled && (
{`This board is ordered by "${replaceUnderscoreIfSnakeCase( order_by ? (order_by[0] === "-" ? order_by.slice(1) : order_by) : "created_at" )}"`}
)} */}
))}
); }); export interface IKanBan { issues: IIssueResponse; issueIds: IGroupedIssues | ISubGroupedIssues | TUnGroupedIssues; sub_group_by: string | null; group_by: string | null; order_by: string | null; sub_group_id?: string; handleIssues: (sub_group_by: string | null, group_by: string | null, issue: IIssue, action: EIssueActions) => void; quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode; displayProperties: IIssueDisplayProperties | null; kanBanToggle: any; handleKanBanToggle: any; showEmptyGroup: boolean; states: any; stateGroups: any; priorities: any; labels: any; members: any; projects: any; enableQuickIssueCreate?: boolean; isDragStarted?: boolean; quickAddCallback?: ( workspaceSlug: string, projectId: string, data: IIssue, viewId?: string ) => Promise; viewId?: string; disableIssueCreation?: boolean; currentStore?: EProjectStore; addIssuesToView?: (issueIds: string[]) => Promise; isReadOnly: boolean; } export const KanBan: React.FC = observer((props) => { const { issues, issueIds, sub_group_by, group_by, order_by, sub_group_id = "null", handleIssues, quickActions, displayProperties, kanBanToggle, handleKanBanToggle, showEmptyGroup, states, stateGroups, priorities, labels, members, projects, enableQuickIssueCreate, isDragStarted, quickAddCallback, viewId, disableIssueCreation, isReadOnly, currentStore, addIssuesToView, } = props; const { issueKanBanView: issueKanBanViewStore } = useMobxStore(); return (
{group_by && group_by === "project" && ( )} {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" && ( )}
); });