refactor(AssigneeSelector): streamline component logic and enhance dropdown behavior

- Removed unused kanbanMode prop and related logic to simplify the AssigneeSelector component. - Updated dropdown position handling to improve visibility and responsiveness during interactions. - Optimized member selection logic for better performance and user feedback. - Enhanced the rendering of team members with improved visual feedback for pending changes.
2025-07-08 12:49:49 +05:30
parent 2aab2a21b6
commit ee6055934c
1 changed files with 169 additions and 210 deletions
--- a/worklenz-frontend/src/components/AssigneeSelector.tsx
+++ b/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 { ITeamMemberViewModel } from '@/types/teamMembers/teamMembersGetResponse.types';
+import { updateEnhancedKanbanTaskAssignees } from '@/features/enhanced-kanban/enhanced-kanban.slice';

 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
+  isDarkMode = 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,
-        left: rect.left,
+        top: rect.bottom + window.scrollY + 2,
+        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 (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target as Node) &&
-        buttonRef.current &&
-        !buttonRef.current.contains(event.target as Node)
-      ) {
+      if (dropdownRef.current && !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
-        if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        // Check if the button is still visible in the viewport
+        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
-      const currentAssigneeIds = optimisticAssignees.length > 0 
-        ? optimisticAssignees 
-        : task?.assignees?.map(assignee => assignee.team_member_id) || [];
-      
-      const membersData: (ITeamMembersViewModel & { selected?: boolean })[] = (members?.data || []).map(member => ({
+      // Prepare team members data when opening
+      const assignees = task?.assignees?.map(assignee => assignee.team_member_id);
+      const membersData = (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
-    const currentAssigneeIds = optimisticAssignees.length > 0 
-      ? optimisticAssignees 
-      : task?.assignees?.map(a => a.team_member_id) || [];
-
+    // OPTIMISTIC UPDATE: Update local state immediately for instant UI feedback
+    const currentAssignees = task?.assignees?.map(a => a.team_member_id) || [];
    let newAssigneeIds: string[];

    if (checked) {
-      // Adding assignee: ensure no duplicates
-      const uniqueIds = new Set([...currentAssigneeIds, memberId]);
-      newAssigneeIds = Array.from(uniqueIds);
+      // Adding assignee
+      newAssigneeIds = [...currentAssignees, memberId];
    } 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) => {
-      // Instead of updating enhancedKanbanSlice, update the main taskManagementSlice
-      // Filter members to get the actual InlineMember objects for the new assignees
-      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) {
+    socket?.once(
+      SocketEvents.QUICK_ASSIGNEES_UPDATE.toString(),
+      (data: any) => {
        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
-    return optimisticAssignees.includes(memberId);
+    // Use optimistic assignees if available, otherwise fall back to task assignees
+    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 &&
-        createPortal(
+      {isOpen && 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)}
-                          disabled={
-                            member.pending_invitation || pendingChanges.has(member.id || '')
-                          }
+                        onChange={(checked) => handleMemberToggle(member.id || '', checked)}
+                        disabled={member.pending_invitation || pendingChanges.has(member.id || '')}
                        isDarkMode={isDarkMode}
                      />
                    </span>
                    {pendingChanges.has(member.id || '') && (
-                        <div
-                          className={`absolute inset-0 flex items-center justify-center ${
+                      <div 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
-                        className={`text-xs font-medium truncate ${isDarkMode ? 'text-gray-100' : 'text-gray-900'}`}
-                      >
+                    <div className={`text-xs font-medium truncate ${isDarkMode ? 'text-gray-100' : 'text-gray-900'}`}>
                      {member.name}
                    </div>
-                      <div
-                        className={`text-xs truncate ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}`}
-                      >
+                    <div 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
-                  className={`p-4 text-center ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}`}
-                >
+              <div 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}
            >