Merge pull request #243 from shancds/test/row-kanban-board-v1.1.3

Test/row kanban board v1.1.3

worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD.tsx

@@ -20,6 +20,7 @@ import { statusApiService } from '@/api/taskAttributes/status/status.api.service
 import alertService from '@/services/alerts/alertService';
 import logger from '@/utils/errorLogger';
 import Skeleton from 'antd/es/skeleton/Skeleton';
+import { checkTaskDependencyStatus } from '@/utils/check-task-dependency-status';
 
 const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ projectId }) => {
   const dispatch = useDispatch();
@@ -120,15 +121,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 = async (e: React.DragEvent, targetGroupId: string, targetTaskIdx: number | null) => {
     if (dragType !== 'task') return;
     e.preventDefault();
     if (!draggedTaskId || !draggedTaskGroupId || hoveredGroupId === null || hoveredTaskIdx === null) return;
@@ -138,10 +143,23 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
     const targetGroup = taskGroups.find(g => g.id === targetGroupId);
     if (!sourceGroup || !targetGroup) return;
     
+    
     const taskIdx = sourceGroup.tasks.findIndex(t => t.id === draggedTaskId);
     if (taskIdx === -1) return;
     
     const movedTask = sourceGroup.tasks[taskIdx];
+    if (groupBy === 'status' && movedTask.id) {
+      if (sourceGroup.id !== targetGroup.id) {
+        const canContinue = await checkTaskDependencyStatus(movedTask.id, targetGroupId);
+        if (!canContinue) {
+          alertService.error(
+            'Task is not completed',
+            'Please complete the task dependencies before proceeding'
+          );
+          return;
+        }
+      }
+    }
     let insertIdx = hoveredTaskIdx;
     
     // Handle same group reordering
@@ -235,6 +253,7 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
         task: movedTask,
         team_id: teamId,
       });
+
     }
 
     setDraggedTaskId(null);

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

@@ -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;
+    onTaskDragOver: (e: React.DragEvent, groupId: string, taskIdx: number | null) => void;
-    onTaskDrop: (e: React.DragEvent, groupId: string, taskIdx: number) => 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] ${
+                                    className={`bg-transparent border-none outline-none text-sm font-semibold capitalize min-w-[185px] ${themeMode === 'dark' ? 'text-gray-800' : 'text-gray-900'
-                                    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 ${
+                                    className={`min-w-[185px] text-sm font-semibold capitalize truncate ${themeMode === 'dark' ? 'text-gray-800' : 'text-gray-900'
-                                    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 ${
+                                        className={`px-3 py-1.5 text-sm font-medium rounded border transition-colors ${themeMode === 'dark'
-                                        themeMode === 'dark' 
                                             ? 'border-gray-600 text-gray-300 hover:bg-gray-600'
                                             : 'border-gray-300 text-gray-700 hover:bg-gray-50'
                                             }`}
@@ -434,7 +451,7 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
                 )}
                 <div className="enhanced-kanban-group-tasks">
                     {/* Create card at top */}
-                {showNewCardTop && (isOwnerOrAdmin || isProjectManager) && (
+                    {showNewCardTop && (
                         <EnhancedKanbanCreateTaskCard
                             sectionId={group.id}
                             setShowNewCard={setShowNewCardTop}
@@ -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={{
@@ -513,7 +530,7 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
                     ))}
 
                     {/* Create card at bottom */}
-                {showNewCardBottom && (isOwnerOrAdmin || isProjectManager) && (
+                    {showNewCardBottom && (
                         <EnhancedKanbanCreateTaskCard
                             sectionId={group.id}
                             setShowNewCard={setShowNewCardBottom}
@@ -522,7 +539,7 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
                     )}
 
                     {/* Footer Add Task Button */}
-                {(isOwnerOrAdmin || isProjectManager) && !showNewCardTop && !showNewCardBottom && group.tasks.length > 0 && (
+                    {!showNewCardTop && !showNewCardBottom && group.tasks.length > 0 && (
                         <button
                             type="button"
                             className="h-10 w-full rounded-md border-2 border-dashed border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500 transition-colors flex items-center justify-center gap-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 mt-2"
@@ -545,8 +562,7 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
                         </div>
                     )}
                 </div>
-
+            </div>
-
         </div>
     );
 });

worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx

@@ -203,16 +203,18 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
         <>
             {isDropIndicator && (
                 <div
-                    style={{
+                    
+                    onDragStart={e => onTaskDragStart(e, task.id!, groupId)}
+                    onDragOver={e => onTaskDragOver(e, groupId, idx)}
+                    onDrop={e => onTaskDrop(e, groupId, idx)}
+                >
+                    <div className="w-full h-full bg-red-500"style={{
                         height: 80,
                         background: themeMode === 'dark' ? '#2a2a2a' : '#f0f0f0',
                         borderRadius: 6,
                         border: `5px`
-                    }}
+                    }}></div>
-                    onDragStart={e => onTaskDragStart(e, task.id!, groupId)}
+                </div>
-                    onDragOver={e => onTaskDragOver(e, groupId, idx)}
-                    onDrop={e => onTaskDrop(e, groupId, idx)}
-                />
             )}
             <div className="enhanced-kanban-task-card" style={{ background, color, display: 'block' }} >
                 <div
@@ -429,7 +431,16 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
                         </div>
                     </div>
                 </div>
-                {task.show_sub_tasks && (
+                <div 
+                    className="subtasks-container"
+                    style={{
+                        overflow: 'hidden',
+                        transition: 'all 0.3s ease-in-out',
+                        maxHeight: task.show_sub_tasks ? '500px' : '0px',
+                        opacity: task.show_sub_tasks ? 1 : 0,
+                        transform: task.show_sub_tasks ? 'translateY(0)' : 'translateY(-10px)',
+                    }}
+                >
                     <div className="mt-2 border-t border-gray-100 dark:border-gray-700 pt-2">
                         {/* Loading state */}
                         {task.sub_tasks_loading && (
@@ -469,7 +480,7 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
                             <div className="py-2 text-xs text-gray-400 dark:text-gray-500">{t('noSubtasks', 'No subtasks')}</div>
                         )}
                     </div>
-                )}
+                </div>
             </div>
         </>
     );