binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-4482] fix: kanban drag and delete #7402

Browse source
This commit is contained in:
Anmol Singh Bhatia 2025-07-14 14:18:38 +05:30 • committed by GitHub
parent 4c57ed4336
commit dff2f8ae12
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 49 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

98
apps/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
View file

@ -243,64 +243,64 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
const collapsedGroups = issuesFilter?.issueFilters?.kanbanFilters || { group_by: [], sub_group_by: [] };
return (
<IssueLayoutHOC layout={EIssueLayoutTypes.KANBAN}>
<>
<DeleteIssueModal
dataId={draggedIssueId}
isOpen={deleteIssueModal}
handleClose={() => setDeleteIssueModal(false)}
onSubmit={handleDeleteIssue}
/>
{/* drag and delete component */}
<div
className={`horizontal-scrollbar scrollbar-lg relative flex h-full w-full bg-custom-background-90 ${sub_group_by ? "vertical-scrollbar overflow-y-auto" : "overflow-x-auto overflow-y-hidden"}`}
ref={scrollableContainerRef}
className={`fixed left-1/2 -translate-x-1/2 ${
isDragging ? "z-40" : ""
} top-3 mx-3 flex w-72 items-center justify-center`}
ref={deleteAreaRef}
>
<div className="relative h-full w-max min-w-full bg-custom-background-90">
{/* drag and delete component */}
<div
className={`fixed left-1/2 -translate-x-1/2 ${
isDragging ? "z-40" : ""
} top-3 mx-3 flex w-72 items-center justify-center`}
ref={deleteAreaRef}
>
<div
className={`${
isDragging ? `opacity-100` : `opacity-0`
} flex w-full items-center justify-center rounded border-2 border-red-500/20 bg-custom-background-100 px-3 py-5 text-xs font-medium italic text-red-500 ${
isDragOverDelete ? "bg-red-500 opacity-70 blur-2xl" : ""
} transition duration-300`}
>
Drop here to delete the work item.
</div>
</div>
<div className="h-full w-max">
<KanBanView
issuesMap={issueMap}
groupedIssueIds={groupedIssueIds ?? {}}
getGroupIssueCount={issues.getGroupIssueCount}
displayProperties={displayProperties}
sub_group_by={sub_group_by}
group_by={group_by}
orderBy={orderBy}
updateIssue={updateIssue}
quickActions={renderQuickActions}
handleCollapsedGroups={handleCollapsedGroups}
collapsedGroups={collapsedGroups}
enableQuickIssueCreate={enableQuickAdd}
showEmptyGroup={userDisplayFilters?.show_empty_groups ?? true}
quickAddCallback={quickAddIssue}
disableIssueCreation={!enableIssueCreation || !isEditingAllowed || isCompletedCycle}
canEditProperties={canEditProperties}
addIssuesToView={addIssuesToView}
scrollableContainerRef={scrollableContainerRef}
handleOnDrop={handleOnDrop}
loadMoreIssues={fetchMoreIssues}
isEpic={isEpic}
/>
</div>
<div
className={`${
isDragging ? `opacity-100` : `opacity-0`
} flex w-full items-center justify-center rounded border-2 border-red-500/20 bg-custom-background-100 px-3 py-5 text-xs font-medium italic text-red-500 ${
isDragOverDelete ? "bg-red-500 opacity-70 blur-2xl" : ""
} transition duration-300`}
>
Drop here to delete the work item.
</div>
</div>
</IssueLayoutHOC>
<IssueLayoutHOC layout={EIssueLayoutTypes.KANBAN}>
<div
className={`horizontal-scrollbar scrollbar-lg relative flex h-full w-full bg-custom-background-90 ${sub_group_by ? "vertical-scrollbar overflow-y-auto" : "overflow-x-auto overflow-y-hidden"}`}
ref={scrollableContainerRef}
>
<div className="relative h-full w-max min-w-full bg-custom-background-90">
<div className="h-full w-max">
<KanBanView
issuesMap={issueMap}
groupedIssueIds={groupedIssueIds ?? {}}
getGroupIssueCount={issues.getGroupIssueCount}
displayProperties={displayProperties}
sub_group_by={sub_group_by}
group_by={group_by}
orderBy={orderBy}
updateIssue={updateIssue}
quickActions={renderQuickActions}
handleCollapsedGroups={handleCollapsedGroups}
collapsedGroups={collapsedGroups}
enableQuickIssueCreate={enableQuickAdd}
showEmptyGroup={userDisplayFilters?.show_empty_groups ?? true}
quickAddCallback={quickAddIssue}
disableIssueCreation={!enableIssueCreation || !isEditingAllowed || isCompletedCycle}
canEditProperties={canEditProperties}
addIssuesToView={addIssuesToView}
scrollableContainerRef={scrollableContainerRef}
handleOnDrop={handleOnDrop}
loadMoreIssues={fetchMoreIssues}
isEpic={isEpic}
/>
</div>
</div>
</div>
</IssueLayoutHOC>
</>
);
});