feat(board): enhance task and subtask management in board components

- Updated boardSlice to allow updating task assignees and names for both main tasks and subtasks.
- Improved BoardSubTaskCard to include context menu options for assigning tasks, deleting subtasks, and handling errors.
- Refactored BoardViewTaskCard to integrate dropdown menus for better task interaction and organization.
- Enhanced user experience by adding loading states and error handling for task actions.

worklenz-frontend/src/features/board/board-slice.ts

@@ -459,10 +459,24 @@ const boardSlice = createSlice({
       const { body, sectionId, taskId } = action.payload;
       const section = state.taskGroups.find(sec => sec.id === sectionId);
       if (section) {
-        const task = section.tasks.find(task => task.id === taskId);
+        // First try to find the task in main tasks
-        if (task) {
+        const mainTask = section.tasks.find(task => task.id === taskId);
-          task.assignees = body.assignees;
+        if (mainTask) {
-          task.names = body.names;
+          mainTask.assignees = body.assignees;
+          mainTask.names = body.names;
+          return;
+        }
+
+        // If not found in main tasks, look in subtasks
+        for (const parentTask of section.tasks) {
+          if (!parentTask.sub_tasks) continue;
+          
+          const subtask = parentTask.sub_tasks.find(st => st.id === taskId);
+          if (subtask) {
+            subtask.assignees = body.assignees;
+            subtask.names = body.names;
+            return;
+          }
         }
       }
     },

worklenz-frontend/src/pages/projects/projectView/board/board-section/board-sub-task-card/board-sub-task-card.tsx

@@ -1,11 +1,25 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import dayjs, { Dayjs } from 'dayjs';
-import { Col, Flex, Typography, List } from 'antd';
+import { Col, Flex, Typography, List, Dropdown, MenuProps, Popconfirm } from 'antd';
+import { UserAddOutlined, DeleteOutlined, ExclamationCircleFilled, InboxOutlined } from '@ant-design/icons';
 import CustomAvatarGroup from '@/components/board/custom-avatar-group';
 import CustomDueDatePicker from '@/components/board/custom-due-date-picker';
 import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
 import { setSelectedTaskId, setShowTaskDrawer } from '@/features/task-drawer/task-drawer.slice';
+import { useTranslation } from 'react-i18next';
+import { colors } from '@/styles/colors';
+import { taskListBulkActionsApiService } from '@/api/tasks/task-list-bulk-actions.api.service';
+import { useMixpanelTracking } from '@/hooks/useMixpanelTracking';
+import {
+  evt_project_task_list_context_menu_assign_me,
+  evt_project_task_list_context_menu_delete,
+  evt_project_task_list_context_menu_archive,
+} from '@/shared/worklenz-analytics-events';
+import logger from '@/utils/errorLogger';
+import { useAppSelector } from '@/hooks/useAppSelector';
+import { deleteBoardTask, updateBoardTaskAssignee } from '@features/board/board-slice';
+import { IBulkAssignRequest } from '@/types/tasks/bulk-action-bar.types';
 
 interface IBoardSubTaskCardProps {
   subtask: IProjectTask;
@@ -14,24 +28,129 @@ interface IBoardSubTaskCardProps {
 
 const BoardSubTaskCard = ({ subtask, sectionId }: IBoardSubTaskCardProps) => {
   const dispatch = useAppDispatch();
+  const { t } = useTranslation('kanban-board');
+  const { trackMixpanelEvent } = useMixpanelTracking();
+  const projectId = useAppSelector(state => state.projectReducer.projectId);
+  const [updatingAssignToMe, setUpdatingAssignToMe] = useState(false);
   const [subtaskDueDate, setSubtaskDueDate] = useState<Dayjs | null>(
     subtask?.end_date ? dayjs(subtask?.end_date) : null
   );
 
   const handleCardClick = (e: React.MouseEvent, id: string) => {
-    // Prevent the event from propagating to parent elements
     e.stopPropagation();
-
-    // Add a small delay to ensure it's a click and not the start of a drag
     const clickTimeout = setTimeout(() => {
       dispatch(setSelectedTaskId(id));
       dispatch(setShowTaskDrawer(true));
     }, 50);
-
     return () => clearTimeout(clickTimeout);
   };
 
+  const handleAssignToMe = useCallback(async () => {
+    if (!projectId || !subtask.id || updatingAssignToMe) return;
+
+    try {
+      setUpdatingAssignToMe(true);
+      const body: IBulkAssignRequest = {
+        tasks: [subtask.id],
+        project_id: projectId,
+      };
+      const res = await taskListBulkActionsApiService.assignToMe(body);
+      if (res.done) {
+        trackMixpanelEvent(evt_project_task_list_context_menu_assign_me);
+        dispatch(
+          updateBoardTaskAssignee({
+            body: res.body,
+            sectionId,
+            taskId: subtask.id,
+          })
+        );
+      }
+    } catch (error) {
+      logger.error('Error assigning task to me:', error);
+    } finally {
+      setUpdatingAssignToMe(false);
+    }
+  }, [projectId, subtask.id, updatingAssignToMe, dispatch, trackMixpanelEvent, sectionId]);
+
+  // const handleArchive = async () => {
+  //   if (!projectId || !subtask.id) return;
+
+  //   try {
+  //     const res = await taskListBulkActionsApiService.archiveTasks(
+  //       {
+  //         tasks: [subtask.id],
+  //         project_id: projectId,
+  //       },
+  //       false
+  //     );
+
+  //     if (res.done) {
+  //       trackMixpanelEvent(evt_project_task_list_context_menu_archive);
+  //       dispatch(deleteBoardTask({ sectionId, taskId: subtask.id }));
+  //     }
+  //   } catch (error) {
+  //     logger.error('Error archiving subtask:', error);
+  //   }
+  // };
+
+  const handleDelete = async () => {
+    if (!projectId || !subtask.id) return;
+
+    try {
+      const res = await taskListBulkActionsApiService.deleteTasks({ tasks: [subtask.id] }, projectId);
+      if (res.done) {
+        trackMixpanelEvent(evt_project_task_list_context_menu_delete);
+        dispatch(deleteBoardTask({ sectionId, taskId: subtask.id }));
+      }
+    } catch (error) {
+      logger.error('Error deleting subtask:', error);
+    }
+  };
+
+  const items: MenuProps['items'] = [
+    {
+      label: (
+        <span>
+          <UserAddOutlined />
+          &nbsp;
+          <Typography.Text>{t('assignToMe')}</Typography.Text>
+        </span>
+      ),
+      key: '1',
+      onClick: () => handleAssignToMe(),
+      disabled: updatingAssignToMe,
+    },
+    // {
+    //   label: (
+    //     <span>
+    //       <InboxOutlined />
+    //       &nbsp;
+    //       <Typography.Text>{t('archive')}</Typography.Text>
+    //     </span>
+    //   ),
+    //   key: '2',
+    //   onClick: () => handleArchive(),
+    // },
+    {
+      label: (
+        <Popconfirm
+          title={t('deleteConfirmationTitle')}
+          icon={<ExclamationCircleFilled style={{ color: colors.vibrantOrange }} />}
+          okText={t('deleteConfirmationOk')}
+          cancelText={t('deleteConfirmationCancel')}
+          onConfirm={() => handleDelete()}
+        >
+          <DeleteOutlined />
+          &nbsp;
+          {t('delete')}
+        </Popconfirm>
+      ),
+      key: '3',
+    },
+  ];
+
   return (
+    <Dropdown menu={{ items }} trigger={['contextMenu']}>
       <List.Item
         key={subtask.id}
         className="group"
@@ -52,10 +171,10 @@ const BoardSubTaskCard = ({ subtask, sectionId }: IBoardSubTaskCardProps) => {
 
         <Flex gap={8} justify="end" style={{ width: '100%' }}>
           <CustomAvatarGroup task={subtask} sectionId={sectionId} />
-
           <CustomDueDatePicker task={subtask} onDateChange={setSubtaskDueDate} />
         </Flex>
       </List.Item>
+    </Dropdown>
   );
 };
 

worklenz-frontend/src/pages/projects/projectView/board/board-section/board-task-card/board-view-task-card.tsx

@@ -256,7 +256,6 @@ const BoardViewTaskCard = ({ task, sectionId }: IBoardViewTaskCardProps) => {
   }, [task.labels, themeMode]);
 
   return (
-    <Dropdown menu={{ items }} trigger={['contextMenu']}>
     <Flex
       ref={setNodeRef}
       {...attributes}
@@ -273,10 +272,13 @@ const BoardViewTaskCard = ({ task, sectionId }: IBoardViewTaskCardProps) => {
         overflow: 'hidden',
       }}
       className={`group outline-1 ${themeWiseColor('outline-[#edeae9]', 'outline-[#6a696a]', themeMode)} hover:outline board-task-card`}
-        onClick={e => handleCardClick(e, task.id || '')}
       data-id={task.id}
       data-dragging={isDragging ? "true" : "false"}
     >
+      <Dropdown menu={{ items }} trigger={['contextMenu']}>
+        {/* Task Card */}
+        <Flex vertical gap={8}
+          onClick={e => handleCardClick(e, task.id || '')}>
           {/* Labels and Progress */}
           <Flex align="center" justify="space-between">
             <Flex>
@@ -297,9 +299,6 @@ const BoardViewTaskCard = ({ task, sectionId }: IBoardViewTaskCardProps) => {
               {task.name}
             </Typography.Text>
           </Flex>
-
-
-        <Flex vertical gap={8}>
           <Flex
             align="center"
             justify="space-between"
@@ -337,7 +336,10 @@ const BoardViewTaskCard = ({ task, sectionId }: IBoardViewTaskCardProps) => {
               </Button>
             </Flex>
           </Flex>
-
+        </Flex>
+      </Dropdown>
+      {/* Subtask Section */}
+      <Flex vertical gap={8}>
         {isSubTaskShow && (
           <Flex vertical>
             <Divider style={{ marginBlock: 0 }} />
@@ -377,7 +379,7 @@ const BoardViewTaskCard = ({ task, sectionId }: IBoardViewTaskCardProps) => {
         )}
       </Flex>
     </Flex>
-    </Dropdown>
+
   );
 };