From 208a6db1a6d12c5ceed8090205d620548c50e2b2 Mon Sep 17 00:00:00 2001
From: shancds <shancds1@gmail.com>
Date: Fri, 4 Jul 2025 17:13:56 +0530
Subject: [PATCH] feat(AssigneeSelector): add kanbanMode prop for enhanced task
 assignment

- Introduced kanbanMode prop to AssigneeSelector and LazyAssigneeSelectorWrapper for improved functionality in Kanban view.
- Updated EnhancedKanbanTaskCard and TaskCard components to utilize the new kanbanMode prop.
- Adjusted task sorting logic to handle cases where sort_order may be undefined, ensuring robust behavior during task updates.
---
 worklenz-frontend/src/components/AssigneeSelector.tsx    | 5 +++++
 .../EnhancedKanbanBoardNativeDnD.tsx                     | 9 ++++-----
 .../EnhancedKanbanBoardNativeDnD/TaskCard.tsx            | 2 +-
 .../enhanced-kanban/EnhancedKanbanTaskCard.tsx           | 6 +-----
 .../task-management/lazy-assignee-selector.tsx           | 4 +++-
 5 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/worklenz-frontend/src/components/AssigneeSelector.tsx b/worklenz-frontend/src/components/AssigneeSelector.tsx
index 1ca0cdf8..d0467552 100644
--- a/worklenz-frontend/src/components/AssigneeSelector.tsx
+++ b/worklenz-frontend/src/components/AssigneeSelector.tsx
@@ -22,12 +22,14 @@ interface AssigneeSelectorProps {
   task: IProjectTask;
   groupId?: string | null;
   isDarkMode?: boolean;
+  kanbanMode?: boolean; // <-- Add this prop
 }
 
 const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
   task,
   groupId = null,
   isDarkMode = false,
+  kanbanMode = false, // <-- Default to false
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
@@ -212,6 +214,9 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
         assigneeIds: newAssigneeIds,
         assigneeNames: updatedAssigneeNames,
       }));
+      if (kanbanMode) {
+        dispatch(updateEnhancedKanbanTaskAssignees(data));
+      }
     });
 
     // Remove from pending changes after a short delay (optimistic)
diff --git a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD.tsx b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD.tsx
index f9600aa8..e8068e07 100644
--- a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD.tsx
+++ b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD.tsx
@@ -216,18 +216,17 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
         toSortOrder = -1;
         toLastIndex = true;
       } else if (targetGroup.tasks[insertIdx]) {
-        toSortOrder = typeof targetGroup.tasks[insertIdx].sort_order === 'number'
-          ? targetGroup.tasks[insertIdx].sort_order
-          : -1;
+        const sortOrder = targetGroup.tasks[insertIdx].sort_order;
+        toSortOrder = typeof sortOrder === 'number' ? sortOrder : 0;
         toLastIndex = false;
       } else if (targetGroup.tasks.length > 0) {
         const lastSortOrder = targetGroup.tasks[targetGroup.tasks.length - 1].sort_order;
-        toSortOrder = typeof lastSortOrder === 'number' ? lastSortOrder : -1;
+        toSortOrder = typeof lastSortOrder === 'number' ? lastSortOrder : 0;
         toLastIndex = false;
       }
       socket.emit(SocketEvents.TASK_SORT_ORDER_CHANGE.toString(), {
         project_id: projectId,
-        from_index: movedTask.sort_order,
+        from_index: movedTask.sort_order ?? 0,
         to_index: toSortOrder,
         to_last_index: toLastIndex,
         from_group: sourceGroup.id,
diff --git a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx
index 3dcda695..3a538463 100644
--- a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx
+++ b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx
@@ -381,7 +381,7 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
                                     isDarkMode={themeMode === 'dark'}
                                     size={24}
                                 />
-                                <LazyAssigneeSelectorWrapper task={task} groupId={groupId} isDarkMode={themeMode === 'dark'} />
+                                <LazyAssigneeSelectorWrapper task={task} groupId={groupId} isDarkMode={themeMode === 'dark'} kanbanMode={true} />
                                 {(task.sub_tasks_count ?? 0) > 0 && (
                                     <button
                                         type="button"
diff --git a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanTaskCard.tsx b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanTaskCard.tsx
index 8b483107..8ced062a 100644
--- a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanTaskCard.tsx
+++ b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanTaskCard.tsx
@@ -182,11 +182,7 @@ const EnhancedKanbanTaskCard: React.FC<EnhancedKanbanTaskCardProps> = React.memo
                 isDarkMode={themeMode === 'dark'}
                 size={24}
               />
-              <LazyAssigneeSelectorWrapper
-                task={task}
-                groupId={sectionId}
-                isDarkMode={themeMode === 'dark'}
-              />
+              <LazyAssigneeSelectorWrapper task={task} groupId={sectionId} isDarkMode={themeMode === 'dark'} kanbanMode={true} />
             </Flex>
             <Flex gap={4} align="center">
               <CustomDueDatePicker task={task} onDateChange={setDueDate} />
diff --git a/worklenz-frontend/src/components/task-management/lazy-assignee-selector.tsx b/worklenz-frontend/src/components/task-management/lazy-assignee-selector.tsx
index 93266340..aad9af15 100644
--- a/worklenz-frontend/src/components/task-management/lazy-assignee-selector.tsx
+++ b/worklenz-frontend/src/components/task-management/lazy-assignee-selector.tsx
@@ -11,6 +11,7 @@ interface LazyAssigneeSelectorProps {
   task: IProjectTask;
   groupId?: string | null;
   isDarkMode?: boolean;
+  kanbanMode?: boolean; // <-- Add this prop
 }
 
 // Lightweight loading placeholder
@@ -34,6 +35,7 @@ const LazyAssigneeSelectorWrapper: React.FC<LazyAssigneeSelectorProps> = ({
   task,
   groupId = null,
   isDarkMode = false,
+  kanbanMode = false, // <-- Default to false
 }) => {
   const [hasLoadedOnce, setHasLoadedOnce] = useState(false);
   const [showComponent, setShowComponent] = useState(false);
@@ -74,7 +76,7 @@ const LazyAssigneeSelectorWrapper: React.FC<LazyAssigneeSelectorProps> = ({
   // Once loaded, show the full component
   return (
     <Suspense fallback={<LoadingPlaceholder isDarkMode={isDarkMode} />}>
-      <LazyAssigneeSelector task={task} groupId={groupId} isDarkMode={isDarkMode} />
+      <LazyAssigneeSelector task={task} groupId={groupId} isDarkMode={isDarkMode} kanbanMode={kanbanMode} />
     </Suspense>
   );
 };