Merge pull request #245 from shancds/test/row-kanban-board-v1.1.4

Test/row kanban board v1.1.4

worklenz-frontend/src/components/AssigneeSelector.tsx

@@ -5,29 +5,25 @@ import { PlusOutlined, UserAddOutlined } from '@ant-design/icons';
 import { RootState } from '@/app/store';
 import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
 import { ITeamMembersViewModel } from '@/types/teamMembers/teamMembersViewModel.types';
-import { InlineMember } from '@/types/teamMembers/inlineMember.types';
 import { useSocket } from '@/socket/socketContext';
 import { SocketEvents } from '@/shared/socket-events';
 import { useAuthService } from '@/hooks/useAuth';
-import { Avatar, Checkbox } from '@/components';
+import { Avatar, Button, Checkbox } from '@/components';
 import { sortTeamMembers } from '@/utils/sort-team-members';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
 import { toggleProjectMemberDrawer } from '@/features/projects/singleProject/members/projectMembersSlice';
-import { updateTaskAssignees } from '@/features/task-management/task-management.slice';
+import { updateEnhancedKanbanTaskAssignees } from '@/features/enhanced-kanban/enhanced-kanban.slice';
-import { ITeamMemberViewModel } from '@/types/teamMembers/teamMembersGetResponse.types';
 
 interface AssigneeSelectorProps {
   task: IProjectTask;
   groupId?: string | null;
   isDarkMode?: boolean;
-  kanbanMode?: boolean; // <-- Add this prop
 }
 
 const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({ 
   task, 
   groupId = null, 
-  isDarkMode = false,
+  isDarkMode = false 
-  kanbanMode = false, // <-- Default to false
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
@@ -35,12 +31,6 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
   const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0 });
   const [optimisticAssignees, setOptimisticAssignees] = useState<string[]>([]); // For optimistic updates
   const [pendingChanges, setPendingChanges] = useState<Set<string>>(new Set()); // Track pending member changes
-
-  // Initialize optimistic assignees from task data on mount or when task changes
-  useEffect(() => {
-    const currentAssigneeIds = task?.assignees?.map(a => a.team_member_id) || [];
-    setOptimisticAssignees(currentAssigneeIds);
-  }, [task?.assignees]);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const buttonRef = useRef<HTMLButtonElement>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
@@ -61,16 +51,9 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
   const updateDropdownPosition = useCallback(() => {
     if (buttonRef.current) {
       const rect = buttonRef.current.getBoundingClientRect();
-      const viewportHeight = window.innerHeight;
-      const dropdownHeight = 280; // More accurate height: header(40) + max-height(192) + footer(40) + padding
-      
-      // Check if dropdown would go below viewport
-      const spaceBelow = viewportHeight - rect.bottom;
-      const shouldShowAbove = spaceBelow < dropdownHeight && rect.top > dropdownHeight;
-      
       setDropdownPosition({
-        top: shouldShowAbove ? rect.top - dropdownHeight - 4 : rect.bottom + 4,
+        top: rect.bottom + window.scrollY + 2,
-        left: rect.left,
+        left: rect.left + window.scrollX,
       });
     }
   }, []);
@@ -78,23 +61,29 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
   // Close dropdown when clicking outside and handle scroll
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      if (
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node) &&
-        dropdownRef.current &&
+          buttonRef.current && !buttonRef.current.contains(event.target as Node)) {
-        !dropdownRef.current.contains(event.target as Node) &&
-        buttonRef.current &&
-        !buttonRef.current.contains(event.target as Node)
-      ) {
         setIsOpen(false);
       }
     };
 
-    const handleScroll = (event: Event) => {
+    const handleScroll = () => {
       if (isOpen) {
-        // Only close dropdown if scrolling happens outside the dropdown
+        // Check if the button is still visible in the viewport
-        if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        if (buttonRef.current) {
+          const rect = buttonRef.current.getBoundingClientRect();
+          const isVisible = rect.top >= 0 && rect.left >= 0 && 
+                           rect.bottom <= window.innerHeight && 
+                           rect.right <= window.innerWidth;
+          
+          if (isVisible) {
+            updateDropdownPosition();
+          } else {
+            // Hide dropdown if button is not visible
             setIsOpen(false);
           }
         }
+      }
     };
 
     const handleResize = () => {
@@ -126,14 +115,11 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
     if (!isOpen) {
       updateDropdownPosition();
       
-      // Prepare team members data when opening - use optimistic assignees for current state
+      // Prepare team members data when opening
-      const currentAssigneeIds = optimisticAssignees.length > 0 
+      const assignees = task?.assignees?.map(assignee => assignee.team_member_id);
-        ? optimisticAssignees 
+      const membersData = (members?.data || []).map(member => ({
-        : task?.assignees?.map(assignee => assignee.team_member_id) || [];
-      
-      const membersData: (ITeamMembersViewModel & { selected?: boolean })[] = (members?.data || []).map(member => ({
         ...member,
-        selected: currentAssigneeIds.includes(member.id),
+        selected: assignees?.includes(member.id),
       }));
       const sortedMembers = sortTeamMembers(membersData);
       setTeamMembers({ data: sortedMembers });
@@ -154,20 +140,16 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
     // Add to pending changes for visual feedback
     setPendingChanges(prev => new Set(prev).add(memberId));
 
-    // Get the current list of assignees, prioritizing optimistic updates for immediate feedback
+    // OPTIMISTIC UPDATE: Update local state immediately for instant UI feedback
-    const currentAssigneeIds = optimisticAssignees.length > 0 
+    const currentAssignees = task?.assignees?.map(a => a.team_member_id) || [];
-      ? optimisticAssignees 
-      : task?.assignees?.map(a => a.team_member_id) || [];
-
     let newAssigneeIds: string[];
 
     if (checked) {
-      // Adding assignee: ensure no duplicates
+      // Adding assignee
-      const uniqueIds = new Set([...currentAssigneeIds, memberId]);
+      newAssigneeIds = [...currentAssignees, memberId];
-      newAssigneeIds = Array.from(uniqueIds);
     } else {
       // Removing assignee
-      newAssigneeIds = currentAssigneeIds.filter(id => id !== memberId);
+      newAssigneeIds = currentAssignees.filter(id => id !== memberId);
     }
 
     // Update optimistic state for immediate UI feedback in dropdown
@@ -177,8 +159,10 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
     setTeamMembers(prev => ({
       ...prev,
       data: (prev.data || []).map(member => 
-        member.id === memberId ? { ...member, selected: checked } : member
+        member.id === memberId 
-      ),
+          ? { ...member, selected: checked }
+          : member
+      )
     }));
 
     const body = {
@@ -192,35 +176,17 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
 
     // Emit socket event - the socket handler will update Redux with proper types
     socket?.emit(SocketEvents.QUICK_ASSIGNEES_UPDATE.toString(), JSON.stringify(body));
-    socket?.once(SocketEvents.QUICK_ASSIGNEES_UPDATE.toString(), (data: any) => {
+    socket?.once(
-      // Instead of updating enhancedKanbanSlice, update the main taskManagementSlice
+      SocketEvents.QUICK_ASSIGNEES_UPDATE.toString(),
-      // Filter members to get the actual InlineMember objects for the new assignees
+      (data: any) => {
-      const updatedAssigneeNames: InlineMember[] = (members?.data || [])
-        .filter((member): member is ITeamMemberViewModel & { id: string; name: string } => {
-          return typeof member.id === 'string' && typeof member.name === 'string' && newAssigneeIds.includes(member.id);
-        })
-        .map(member => ({
-          name: member.name || '',
-          id: member.id || '',
-          team_member_id: member.id || '',
-          avatar_url: member.avatar_url || '',
-          color_code: member.color_code || '',
-        }));
-
-      dispatch(updateTaskAssignees({
-        taskId: task.id || '',
-        assigneeIds: newAssigneeIds,
-        assigneeNames: updatedAssigneeNames,
-      }));
-      if (kanbanMode) {
         dispatch(updateEnhancedKanbanTaskAssignees(data));
       }
-    });
+    );
 
     // Remove from pending changes after a short delay (optimistic)
     setTimeout(() => {
       setPendingChanges(prev => {
-        const newSet = new Set<string>(Array.from(prev));
+        const newSet = new Set(prev);
         newSet.delete(memberId);
         return newSet;
       });
@@ -229,8 +195,11 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
 
   const checkMemberSelected = (memberId: string) => {
     if (!memberId) return false;
-    // Always use optimistic assignees for dropdown display
+    // Use optimistic assignees if available, otherwise fall back to task assignees
-    return optimisticAssignees.includes(memberId);
+    const assignees = optimisticAssignees.length > 0 
+      ? optimisticAssignees 
+      : task?.assignees?.map(assignee => assignee.team_member_id) || [];
+    return assignees.includes(memberId);
   };
 
   const handleInviteProjectMemberDrawer = () => {
@@ -246,8 +215,7 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
         className={`
           w-5 h-5 rounded-full border border-dashed flex items-center justify-center
           transition-colors duration-200
-          ${
+          ${isOpen 
-            isOpen
             ? isDarkMode 
               ? 'border-blue-500 bg-blue-900/20 text-blue-400' 
               : 'border-blue-500 bg-blue-50 text-blue-600'
@@ -260,14 +228,16 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
         <PlusOutlined className="text-xs" />
       </button>
 
-      {isOpen &&
+      {isOpen && createPortal(
-        createPortal(
         <div
           ref={dropdownRef}
           onClick={e => e.stopPropagation()}
           className={`
             fixed z-9999 w-72 rounded-md shadow-lg border
-            ${isDarkMode ? 'bg-gray-800 border-gray-600' : 'bg-white border-gray-200'}
+            ${isDarkMode 
+              ? 'bg-gray-800 border-gray-600' 
+              : 'bg-white border-gray-200'
+            }
           `}
           style={{
             top: dropdownPosition.top,
@@ -280,12 +250,11 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
               ref={searchInputRef}
               type="text"
               value={searchQuery}
-                onChange={e => setSearchQuery(e.target.value)}
+              onChange={(e) => setSearchQuery(e.target.value)}
               placeholder="Search members..."
               className={`
                 w-full px-2 py-1 text-xs rounded border
-                ${
+                ${isDarkMode
-                  isDarkMode
                   ? 'bg-gray-700 border-gray-600 text-gray-100 placeholder-gray-400 focus:border-blue-500'
                   : 'bg-white border-gray-300 text-gray-900 placeholder-gray-500 focus:border-blue-500'
                 }
@@ -297,13 +266,12 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
           {/* Members List */}
           <div className="max-h-48 overflow-y-auto">
             {filteredMembers && filteredMembers.length > 0 ? (
-                filteredMembers.map(member => (
+              filteredMembers.map((member) => (
                 <div
                   key={member.id}
                   className={`
                     flex items-center gap-2 p-2 cursor-pointer transition-colors
-                    ${
+                    ${member.pending_invitation 
-                      member.pending_invitation
                       ? 'opacity-50 cursor-not-allowed' 
                       : isDarkMode 
                         ? 'hover:bg-gray-700' 
@@ -325,24 +293,18 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
                     <span onClick={e => e.stopPropagation()}>
                       <Checkbox
                         checked={checkMemberSelected(member.id || '')}
-                          onChange={checked => handleMemberToggle(member.id || '', checked)}
+                        onChange={(checked) => handleMemberToggle(member.id || '', checked)}
-                          disabled={
+                        disabled={member.pending_invitation || pendingChanges.has(member.id || '')}
-                            member.pending_invitation || pendingChanges.has(member.id || '')
-                          }
                         isDarkMode={isDarkMode}
                       />
                     </span>
                     {pendingChanges.has(member.id || '') && (
-                        <div
+                      <div className={`absolute inset-0 flex items-center justify-center ${
-                          className={`absolute inset-0 flex items-center justify-center ${
                         isDarkMode ? 'bg-gray-800/50' : 'bg-white/50'
-                          }`}
+                      }`}>
-                        >
+                        <div className={`w-3 h-3 border border-t-transparent rounded-full animate-spin ${
-                          <div
-                            className={`w-3 h-3 border border-t-transparent rounded-full animate-spin ${
                           isDarkMode ? 'border-blue-400' : 'border-blue-600'
-                            }`}
+                        }`} />
-                          />
                       </div>
                     )}
                   </div>
@@ -355,14 +317,10 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
                   />
                   
                   <div className="flex-1 min-w-0">
-                      <div
+                    <div className={`text-xs font-medium truncate ${isDarkMode ? 'text-gray-100' : 'text-gray-900'}`}>
-                        className={`text-xs font-medium truncate ${isDarkMode ? 'text-gray-100' : 'text-gray-900'}`}
-                      >
                       {member.name}
                     </div>
-                      <div
+                    <div className={`text-xs truncate ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}`}>
-                        className={`text-xs truncate ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}`}
-                      >
                       {member.email}
                       {member.pending_invitation && (
                         <span className="text-red-400 ml-1">(Pending)</span>
@@ -372,9 +330,7 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
                 </div>
               ))
             ) : (
-                <div
+              <div className={`p-4 text-center ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}`}>
-                  className={`p-4 text-center ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}`}
-                >
                 <div className="text-xs">No members found</div>
               </div>
             )}
@@ -386,7 +342,10 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
               className={`
                 w-full flex items-center justify-center gap-1 px-2 py-1 text-xs rounded
                 transition-colors
-                ${isDarkMode ? 'text-blue-400 hover:bg-gray-700' : 'text-blue-600 hover:bg-blue-50'}
+                ${isDarkMode
+                  ? 'text-blue-400 hover:bg-gray-700'
+                  : 'text-blue-600 hover:bg-blue-50'
+                }
               `}
               onClick={handleInviteProjectMemberDrawer}
             >

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

@@ -263,6 +263,11 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
     setDragType(null);
   };
 
+  const handleDragEnd = () => {
+    setHoveredGroupId(null);
+    setHoveredTaskIdx(null);
+  };
+
   useEffect(() => {
     if (!socket) return;
 
@@ -332,6 +337,7 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
                 onTaskDragStart={handleTaskDragStart}
                 onTaskDragOver={handleTaskDragOver}
                 onTaskDrop={handleTaskDrop}
+                onDragEnd={handleDragEnd}
                 hoveredTaskIdx={hoveredGroupId === group.id ? hoveredTaskIdx : null}
                 hoveredGroupId={hoveredGroupId}
               />

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

@@ -34,6 +34,7 @@ interface KanbanGroupProps {
     onTaskDragStart: (e: React.DragEvent, taskId: string, groupId: string) => void;
     onTaskDragOver: (e: React.DragEvent, groupId: string, taskIdx: number | null) => void;
     onTaskDrop: (e: React.DragEvent, groupId: string, taskIdx: number | null) => void;
+    onDragEnd: (e: React.DragEvent) => void;
     hoveredTaskIdx: number | null;
     hoveredGroupId: string | null;
 }
@@ -46,6 +47,7 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
     onTaskDragStart,
     onTaskDragOver,
     onTaskDrop,
+    onDragEnd,
     hoveredTaskIdx,
     hoveredGroupId
 }) => {
@@ -197,7 +199,10 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
         setIsEditable(true);
         setShowDropdown(false);
         setTimeout(() => {
-            inputRef.current?.focus();
+            if (inputRef.current) {
+                inputRef.current.focus();
+                inputRef.current.select(); // Select all text on focus
+            }
         }, 100);
     };
 
@@ -259,6 +264,7 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
                     onDragStart={e => onGroupDragStart(e, group.id)}
                     onDragOver={onGroupDragOver}
                     onDrop={e => onGroupDrop(e, group.id)}
+                    onDragEnd={onDragEnd}
                 >
                     <div
                         className="flex items-center justify-between w-full font-semibold rounded-md"
@@ -517,17 +523,46 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
                     )}
 
                     {group.tasks.map((task, idx) => (
+                        <React.Fragment key={task.id}>
+                            {/* Drop indicator before this card */}
+                            {hoveredGroupId === group.id && hoveredTaskIdx === idx && (
+                                <div
+                                    onDragOver={e => onTaskDragOver(e, group.id, idx)}
+                                    onDrop={e => onTaskDrop(e, group.id, idx)}
+                                >
+                                    <div className="w-full h-full bg-red-500" style={{
+                                        height: 80,
+                                        background: themeMode === 'dark' ? '#2a2a2a' : '#E2EAF4',
+                                        borderRadius: 6,
+                                        border: `5px`
+                                    }}></div>
+                                </div>
+                            )}
                             <TaskCard
-                            key={task.id}
                                 task={task}
                                 onTaskDragStart={onTaskDragStart}
                                 onTaskDragOver={onTaskDragOver}
                                 onTaskDrop={onTaskDrop}
                                 groupId={group.id}
-                            isDropIndicator={hoveredGroupId === group.id && hoveredTaskIdx === idx}
                                 idx={idx}
+                                onDragEnd={onDragEnd}
                             />
+                        </React.Fragment>
                     ))}
+                    {/* Drop indicator at the end of the group */}
+                    {hoveredGroupId === group.id && hoveredTaskIdx === group.tasks.length && (
+                        <div
+                        onDragOver={e => onTaskDragOver(e, group.id, group.tasks.length)}
+                        onDrop={e => onTaskDrop(e, group.id, group.tasks.length)}
+                    >
+                        <div className="w-full h-full bg-red-500" style={{
+                            height: 80,
+                            background: themeMode === 'dark' ? '#2a2a2a' : '#E2EAF4',
+                            borderRadius: 6,
+                            border: `5px`
+                        }}></div>
+                    </div>
+                    )}
 
                     {/* Create card at bottom */}
                     {showNewCardBottom && (

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

@@ -28,8 +28,8 @@ interface TaskCardProps {
     onTaskDragOver: (e: React.DragEvent, groupId: string, taskIdx: number) => void;
     onTaskDrop: (e: React.DragEvent, groupId: string, taskIdx: number) => void;
     groupId: string;
-    isDropIndicator: boolean;
     idx: number;
+    onDragEnd: (e: React.DragEvent) => void; // <-- add this
 }
 
 function getDaysInMonth(year: number, month: number) {
@@ -46,8 +46,8 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
     onTaskDragOver,
     onTaskDrop,
     groupId,
-    isDropIndicator,
+    idx,
-    idx
+    onDragEnd // <-- add this
 }) => {
     const { socket } = useSocket();
     const themeMode = useSelector((state: RootState) => state.themeReducer.mode);
@@ -198,31 +198,24 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
         while (week.length < 7) week.push(null);
         weeks.push(week);
     }
+    const [isDown, setIsDown] = useState(false);
 
     return (
         <>
-            {isDropIndicator && (
-                <div
-                    
-                    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>
-                </div>
-            )}
             <div className="enhanced-kanban-task-card" style={{ background, color, display: 'block' }} >
                 <div
                     draggable
                     onDragStart={e => onTaskDragStart(e, task.id!, groupId)}
-                    onDragOver={e => onTaskDragOver(e, groupId, idx)}
+                    onDragOver={e => {
+                        e.preventDefault();
+                        const rect = e.currentTarget.getBoundingClientRect();
+                        const offsetY = e.clientY - rect.top;
+                        const isDown = offsetY > rect.height / 2;
+                        setIsDown(isDown);
+                        onTaskDragOver(e, groupId, isDown ? idx + 1 : idx);
+                    }}
                     onDrop={e => onTaskDrop(e, groupId, idx)}
-
+                    onDragEnd={onDragEnd} // <-- add this
                     onClick={e => handleCardClick(e, task.id!)}
                 >
                     <div className="task-content">

worklenz-frontend/src/pages/projects/projectView/enhancedBoard/project-view-enhanced-board.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { useAppSelector } from '@/hooks/useAppSelector';
-import EnhancedKanbanBoard from '@/components/enhanced-kanban/EnhancedKanbanBoard';
 import EnhancedKanbanBoardNativeDnD from '@/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD';
 
 const ProjectViewEnhancedBoard: React.FC = () => {
@@ -12,7 +11,6 @@ const ProjectViewEnhancedBoard: React.FC = () => {
 
   return (
     <div className="project-view-enhanced-board">
-      {/* <EnhancedKanbanBoard projectId={project.id} /> */}
       <EnhancedKanbanBoardNativeDnD projectId={project.id} />
     </div>
   );