diff --git a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD.tsx b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD.tsx
similarity index 82%
rename from worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD.tsx
rename to worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD.tsx
index 8f6ba995..53cbdae4 100644
--- a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD.tsx
+++ b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD.tsx
@@ -3,10 +3,10 @@ import { useSelector, useDispatch } from 'react-redux';
import { RootState } from '@/app/store';
import { ITaskListGroup } from '@/types/tasks/taskList.types';
import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
-import './EnhancedKanbanBoard.css';
-import './EnhancedKanbanGroup.css';
-import './EnhancedKanbanTaskCard.css';
-import ImprovedTaskFilters from '../task-management/improved-task-filters';
+import '../EnhancedKanbanBoard.css';
+import '../EnhancedKanbanGroup.css';
+import '../EnhancedKanbanTaskCard.css';
+import ImprovedTaskFilters from '../../task-management/improved-task-filters';
import Card from 'antd/es/card';
import Spin from 'antd/es/spin';
import Empty from 'antd/es/empty';
@@ -63,56 +63,56 @@ const KanbanGroup: React.FC<{
hoveredTaskIdx: number | null;
hoveredGroupId: string | null;
}> = ({ group, onGroupDragStart, onGroupDragOver, onGroupDrop, onTaskDragStart, onTaskDragOver, onTaskDrop, hoveredTaskIdx, hoveredGroupId }) => {
- const themeMode = useAppSelector(state => state.themeReducer.mode);
-
- const headerBackgroundColor = useMemo(() => {
- if (themeMode === 'dark') {
- return group.color_code_dark || group.color_code || '#1e1e1e';
- }
- return group.color_code || '#f5f5f5';
- }, [themeMode, group.color_code, group.color_code_dark]);
- return (
-
-
state.themeReducer.mode);
+ const headerBackgroundColor = useMemo(() => {
+ if (themeMode === 'dark') {
+ return group.color_code_dark || group.color_code || '#1e1e1e';
+ }
+ return group.color_code || '#f5f5f5';
+ }, [themeMode, group.color_code, group.color_code_dark]);
+ return (
+
+
onGroupDragStart(e, group.id)}
- onDragOver={onGroupDragOver}
- onDrop={e => onGroupDrop(e, group.id)}
- >
-
{group.name}
- {group.tasks.length}
+ draggable
+ onDragStart={e => onGroupDragStart(e, group.id)}
+ onDragOver={onGroupDragOver}
+ onDrop={e => onGroupDrop(e, group.id)}
+ >
+ {group.name}
+ {group.tasks.length}
+
+
onTaskDragOver(e, group.id, 0)}
+ onDrop={e => onTaskDrop(e, group.id, 0)}
+ >
+ {/* Drop indicator at the top of the group */}
+ {hoveredGroupId === group.id && hoveredTaskIdx === 0 && (
+
+ )}
+ {group.tasks.map((task, idx) => (
+
+
+
+ ))}
+ {/* Drop indicator at the end of the group */}
+ {hoveredGroupId === group.id && hoveredTaskIdx === group.tasks.length && (
+
+ )}
+
-
onTaskDragOver(e, group.id, 0)}
- onDrop={e => onTaskDrop(e, group.id, 0)}
- >
- {/* Drop indicator at the top of the group */}
- {hoveredGroupId === group.id && hoveredTaskIdx === 0 && (
-
- )}
- {group.tasks.map((task, idx) => (
-
-
-
- ))}
- {/* Drop indicator at the end of the group */}
- {hoveredGroupId === group.id && hoveredTaskIdx === group.tasks.length && (
-
- )}
-
-
-)};
+ )
+};
const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ projectId }) => {
const dispatch = useDispatch();
@@ -135,6 +135,7 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
dispatch(fetchEnhancedKanbanTaskAssignees(projectId) as any);
dispatch(fetchEnhancedKanbanLabels(projectId) as any);
}
+
if (!statusCategories.length) {
dispatch(fetchStatusesCategories() as any);
}
diff --git a/worklenz-frontend/src/pages/projects/projectView/enhancedBoard/project-view-enhanced-board.tsx b/worklenz-frontend/src/pages/projects/projectView/enhancedBoard/project-view-enhanced-board.tsx
index 27db13e4..9681545c 100644
--- a/worklenz-frontend/src/pages/projects/projectView/enhancedBoard/project-view-enhanced-board.tsx
+++ b/worklenz-frontend/src/pages/projects/projectView/enhancedBoard/project-view-enhanced-board.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { useAppSelector } from '@/hooks/useAppSelector';
import EnhancedKanbanBoard from '@/components/enhanced-kanban/EnhancedKanbanBoard';
-import EnhancedKanbanBoardNativeDnD from '@/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD';
+import EnhancedKanbanBoardNativeDnD from '@/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD';
const ProjectViewEnhancedBoard: React.FC = () => {
const { project } = useAppSelector(state => state.projectReducer);