bo/worklenz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(EnhancedKanbanBoard): improve drag-and-drop handling and task index management

Browse Source 
- Updated drag-and-drop event handlers in EnhancedKanbanBoard to support null task indices, enhancing flexibility during task interactions.
- Adjusted KanbanGroup component to reflect changes in task index handling, ensuring consistent behavior when dragging tasks over empty drop zones.
- Enhanced the visual structure of the KanbanGroup to improve user experience during task creation and management.
This commit is contained in:
shancds
2025-07-07 12:05:05 +05:30
parent 3206af160a
commit 8dcd0295e5
2 changed files with 324 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD.tsx
View File

@@ -120,15 +120,19 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
setDragType('task');
e.dataTransfer.effectAllowed = 'move';
};
const handleTaskDragOver = (e: React.DragEvent, groupId: string, taskIdx: number) => {
const handleTaskDragOver = (e: React.DragEvent, groupId: string, taskIdx: number | null) => {
if (dragType !== 'task') return;
e.preventDefault();
if (draggedTaskId) {
setHoveredGroupId(groupId);
setHoveredTaskIdx(taskIdx);
}
if(taskIdx === null) {
setHoveredTaskIdx(0);
}else{
setHoveredTaskIdx(taskIdx);
};
const handleTaskDrop = (e: React.DragEvent, targetGroupId: string, targetTaskIdx: number) => {
};
const handleTaskDrop = (e: React.DragEvent, targetGroupId: string, targetTaskIdx: number | null) => {
if (dragType !== 'task') return;
e.preventDefault();
if (!draggedTaskId || !draggedTaskGroupId || hoveredGroupId === null || hoveredTaskIdx === null) return;

40
worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/KanbanGroup.tsx
View File

@@ -32,8 +32,8 @@ interface KanbanGroupProps {
onGroupDragOver: (e: React.DragEvent) => void;
onGroupDrop: (e: React.DragEvent, groupId: string) => void;
onTaskDragStart: (e: React.DragEvent, taskId: string, groupId: string) => void;
onTaskDragOver: (e: React.DragEvent, groupId: string, taskIdx: number) => void;
onTaskDrop: (e: React.DragEvent, groupId: string, taskIdx: number) => void;
onTaskDragOver: (e: React.DragEvent, groupId: string, taskIdx: number | null) => void;
onTaskDrop: (e: React.DragEvent, groupId: string, taskIdx: number | null) => void;
hoveredTaskIdx: number | null;
hoveredGroupId: string | null;
}
@@ -229,7 +229,27 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
}, [showDropdown]);
return (
<div className="enhanced-kanban-group">
<div className="enhanced-kanban-group" style={{ position: 'relative' }}
>
{/* Background layer - z-index 0 */}
<div
className="enhanced-kanban-group-background"
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
border: `0.1px solid ${themeMode === 'dark' ? '#404040' : '#e0e0e0'}`,
borderRadius: '8px',
zIndex: 0
}}
onDragOver={e => { e.preventDefault(); onTaskDragOver(e, group.id, null); }}
onDrop={e => { e.preventDefault(); onTaskDrop(e, group.id, null); }}
/>
{/* Content layer - z-index 1 */}
<div style={{ position: 'relative', zIndex: 1 }}>
<div
className="enhanced-kanban-group-header"
style={{
@@ -263,8 +283,7 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
<input
ref={inputRef}
value={name}
className={`bg-transparent border-none outline-none text-sm font-semibold capitalize min-w-[185px] ${
themeMode === 'dark' ? 'text-gray-800' : 'text-gray-900'
className={`bg-transparent border-none outline-none text-sm font-semibold capitalize min-w-[185px] ${themeMode === 'dark' ? 'text-gray-800' : 'text-gray-900'
}`}
onChange={handleChange}
onBlur={handleBlur}
@@ -278,8 +297,7 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
/>
) : (
<div
className={`min-w-[185px] text-sm font-semibold capitalize truncate ${
themeMode === 'dark' ? 'text-gray-800' : 'text-gray-900'
className={`min-w-[185px] text-sm font-semibold capitalize truncate ${themeMode === 'dark' ? 'text-gray-800' : 'text-gray-900'
}`}
title={isEllipsisActive ? name : undefined}
onMouseDown={e => {
@@ -408,8 +426,7 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
<div className="flex justify-end gap-2">
<button
type="button"
className={`px-3 py-1.5 text-sm font-medium rounded border transition-colors ${
themeMode === 'dark'
className={`px-3 py-1.5 text-sm font-medium rounded border transition-colors ${themeMode === 'dark'
? 'border-gray-600 text-gray-300 hover:bg-gray-600'
: 'border-gray-300 text-gray-700 hover:bg-gray-50'
}`}
@@ -443,7 +460,7 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
)}
{/* If group is empty, render a drop zone */}
{group.tasks.length === 0 && !showNewCardTop && !showNewCardBottom &&(
{group.tasks.length === 0 && !showNewCardTop && !showNewCardBottom && (
<div
className="empty-drop-zone"
style={{
@@ -545,8 +562,7 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
</div>
)}
</div>
</div>
</div>
);
});