import { FC, useCallback, useState } from "react"; import { DragDropContext, DragStart, DraggableLocation, DropResult, Droppable } from "@hello-pangea/dnd"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; // hooks import { useUser } from "hooks/store"; import useToast from "hooks/use-toast"; // ui import { Spinner } from "@plane/ui"; // types import { TIssue } from "@plane/types"; import { EIssueActions } from "../types"; import { IQuickActionProps } from "../list/list-view-types"; import { IProjectIssues, IProjectIssuesFilter } from "store/issue/project"; //components import { KanBan } from "./default"; import { KanBanSwimLanes } from "./swimlanes"; import { DeleteIssueModal, IssuePeekOverview } from "components/issues"; import { EUserProjectRoles } from "constants/project"; import { useIssues } from "hooks/store/use-issues"; import { handleDragDrop } from "./utils"; import { IssueKanBanViewStore } from "store/issue/issue_kanban_view.store"; import { ICycleIssues, ICycleIssuesFilter } from "store/issue/cycle"; import { IDraftIssues, IDraftIssuesFilter } from "store/issue/draft"; import { IProfileIssues, IProfileIssuesFilter } from "store/issue/profile"; import { IModuleIssues, IModuleIssuesFilter } from "store/issue/module"; import { IProjectViewIssues, IProjectViewIssuesFilter } from "store/issue/project-views"; import { TCreateModalStoreTypes } from "constants/issue"; export interface IBaseKanBanLayout { issues: IProjectIssues | ICycleIssues | IDraftIssues | IModuleIssues | IProjectViewIssues | IProfileIssues; issuesFilter: | IProjectIssuesFilter | IModuleIssuesFilter | ICycleIssuesFilter | IDraftIssuesFilter | IProjectViewIssuesFilter | IProfileIssuesFilter; QuickActions: FC; issueActions: { [EIssueActions.DELETE]: (issue: TIssue) => Promise; [EIssueActions.UPDATE]?: (issue: TIssue) => Promise; [EIssueActions.REMOVE]?: (issue: TIssue) => Promise; }; showLoader?: boolean; viewId?: string; currentStore?: TCreateModalStoreTypes; addIssuesToView?: (issueIds: string[]) => Promise; canEditPropertiesBasedOnProject?: (projectId: string) => boolean; } type KanbanDragState = { draggedIssueId?: string | null; source?: DraggableLocation | null; destination?: DraggableLocation | null; }; export const BaseKanBanRoot: React.FC = observer((props: IBaseKanBanLayout) => { const { issues, issuesFilter, QuickActions, issueActions, showLoader, viewId, currentStore, addIssuesToView, canEditPropertiesBasedOnProject, } = props; // router const router = useRouter(); const { workspaceSlug, projectId, peekIssueId, peekProjectId } = router.query; // store hooks const { membership: { currentProjectRole }, } = useUser(); const { issueMap } = useIssues(); // toast alert const { setToastAlert } = useToast(); // FIXME get from filters const kanbanViewStore: IssueKanBanViewStore = {} as IssueKanBanViewStore; const issueIds = issues?.groupedIssueIds || []; const displayFilters = issuesFilter?.issueFilters?.displayFilters; const displayProperties = issuesFilter?.issueFilters?.displayProperties; const sub_group_by: string | null = displayFilters?.sub_group_by || null; const group_by: string | null = displayFilters?.group_by || null; const userDisplayFilters = displayFilters || null; const KanBanView = sub_group_by ? KanBanSwimLanes : KanBan; const { enableInlineEditing, enableQuickAdd, enableIssueCreation } = issues?.viewFlags || {}; // states const [isDragStarted, setIsDragStarted] = useState(false); const [dragState, setDragState] = useState({}); const [deleteIssueModal, setDeleteIssueModal] = useState(false); const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER; const canEditProperties = useCallback( (projectId: string | undefined) => { const isEditingAllowedBasedOnProject = canEditPropertiesBasedOnProject && projectId ? canEditPropertiesBasedOnProject(projectId) : isEditingAllowed; return enableInlineEditing && isEditingAllowedBasedOnProject; }, [canEditPropertiesBasedOnProject, enableInlineEditing, isEditingAllowed] ); const onDragStart = (dragStart: DragStart) => { setDragState({ draggedIssueId: dragStart.draggableId.split("__")[0], }); setIsDragStarted(true); }; const onDragEnd = async (result: DropResult) => { setIsDragStarted(false); if (!result) return; if ( result.destination && result.source && result.source.droppableId && result.destination.droppableId && result.destination.droppableId === result.source.droppableId && result.destination.index === result.source.index ) return; if (handleDragDrop) { if (result.destination?.droppableId && result.destination?.droppableId.split("__")[0] === "issue-trash-box") { setDragState({ ...dragState, source: result.source, destination: result.destination, }); setDeleteIssueModal(true); } else { await handleDragDrop( result.source, result.destination, workspaceSlug?.toString(), projectId?.toString(), issues, sub_group_by, group_by, issueMap, issueIds, viewId ).catch((err) => { setToastAlert({ title: "Error", type: "error", message: err.detail ?? "Failed to perform this action", }); }); } } }; const handleIssues = useCallback( async (issue: TIssue, action: EIssueActions) => { if (issueActions[action]) { await issueActions[action]!(issue); } }, [issueActions] ); const renderQuickActions = useCallback( (issue: TIssue, customActionButton?: React.ReactElement) => ( handleIssues(issue, EIssueActions.DELETE)} handleUpdate={ issueActions[EIssueActions.UPDATE] ? async (data) => handleIssues(data, EIssueActions.UPDATE) : undefined } handleRemoveFromView={ issueActions[EIssueActions.REMOVE] ? async () => handleIssues(issue, EIssueActions.REMOVE) : undefined } /> ), // eslint-disable-next-line react-hooks/exhaustive-deps [issueActions, handleIssues] ); const handleDeleteIssue = async () => { if (!handleDragDrop) return; await handleDragDrop( dragState.source, dragState.destination, workspaceSlug?.toString(), projectId?.toString(), issues, sub_group_by, group_by, issueMap, issueIds, viewId ).finally(() => { setDeleteIssueModal(false); setDragState({}); }); }; const handleKanBanToggle = (toggle: "groupByHeaderMinMax" | "subgroupByIssuesVisibility", value: string) => { kanbanViewStore.handleKanBanToggle(toggle, value); }; return ( <> setDeleteIssueModal(false)} onSubmit={handleDeleteIssue} /> {showLoader && issues?.loader === "init-loader" && (
)}
{(provided, snapshot) => (
Drop here to delete the issue.
)}
{/* {workspaceSlug && peekIssueId && peekProjectId && ( await handleIssues(issueToUpdate as TIssue, EIssueActions.UPDATE)} /> )} */} ); });