Add task progress tracking methods and enhance UI components

- Introduced a comprehensive guide for users on task progress tracking methods, including manual, weighted, and time-based progress. - Implemented backend support for progress calculations, including SQL functions and migrations to accommodate new progress features. - Enhanced frontend components to support progress input and display, including updates to task and project drawers. - Added localization for new progress-related terms and validation messages. - Integrated real-time updates for task progress and weight changes through socket events.
2025-04-30 15:24:07 +05:30
parent a2bfdb682b
commit 6128c64c31
24 changed files with 1466 additions and 150 deletions
--- a/worklenz-frontend/src/components/task-drawer/shared/activity-log/task-drawer-activity-log.tsx
+++ b/worklenz-frontend/src/components/task-drawer/shared/activity-log/task-drawer-activity-log.tsx
@@ -111,6 +111,32 @@ const TaskDrawerActivityLog = () => {
            </Tag>
          </Flex>
        );
+        
+      case IActivityLogAttributeTypes.PROGRESS:
+        return (
+          <Flex gap={4} align="center">
+            <Tag color="blue">
+              {activity.previous || '0'}%
+            </Tag>
+            <ArrowRightOutlined />&nbsp;
+            <Tag color="blue">
+              {activity.current || '0'}%
+            </Tag>
+          </Flex>
+        );
+        
+      case IActivityLogAttributeTypes.WEIGHT:
+        return (
+          <Flex gap={4} align="center">
+            <Tag color="purple">
+              Weight: {activity.previous || '100'}
+            </Tag>
+            <ArrowRightOutlined />&nbsp;
+            <Tag color="purple">
+              Weight: {activity.current || '100'}
+            </Tag>
+          </Flex>
+        );

      default:
        return (
--- a/worklenz-frontend/src/components/task-drawer/shared/info-tab/details/task-drawer-progress/task-drawer-progress.tsx
+++ b/worklenz-frontend/src/components/task-drawer/shared/info-tab/details/task-drawer-progress/task-drawer-progress.tsx
@@ -21,13 +21,16 @@ const TaskDrawerProgress = ({ task, form }: TaskDrawerProgressProps) => {
  const isSubTask = !!task?.parent_task_id;
  const hasSubTasks = task?.sub_tasks_count > 0;

-  // Determine which progress input to show based on project settings
-  const showManualProgressInput = project?.use_manual_progress && !hasSubTasks && !isSubTask;
+  // Show manual progress input only for tasks without subtasks (not parent tasks)
+  // Parent tasks get their progress calculated from subtasks
+  const showManualProgressInput = !hasSubTasks;
+
+  // Only show weight input for subtasks in weighted progress mode
  const showTaskWeightInput = project?.use_weighted_progress && isSubTask;

  useEffect(() => {
    // Listen for progress updates from the server
-    socket?.on(SocketEvents.TASK_PROGRESS_UPDATED.toString(), (data) => {
+    const handleProgressUpdate = (data: any) => {
      if (data.task_id === task.id) {
        if (data.progress_value !== undefined) {
          form.setFieldsValue({ progress_value: data.progress_value });
@@ -36,34 +39,74 @@ const TaskDrawerProgress = ({ task, form }: TaskDrawerProgressProps) => {
          form.setFieldsValue({ weight: data.weight });
        }
      }
-    });
+    };
+
+    socket?.on(SocketEvents.TASK_PROGRESS_UPDATED.toString(), handleProgressUpdate);
+
+    // When the component mounts, explicitly request the latest progress for this task
+    if (connected && task.id) {
+      socket?.emit(SocketEvents.GET_TASK_PROGRESS.toString(), task.id);
+    }

    return () => {
-      socket?.off(SocketEvents.TASK_PROGRESS_UPDATED.toString());
+      socket?.off(SocketEvents.TASK_PROGRESS_UPDATED.toString(), handleProgressUpdate);
    };
-  }, [socket, task.id, form]);
+  }, [socket, connected, task.id, form]);

  const handleProgressChange = (value: number | null) => {
    if (connected && task.id && value !== null) {
-      socket?.emit(SocketEvents.UPDATE_TASK_PROGRESS.toString(), JSON.stringify({
-        task_id: task.id,
-        progress_value: value,
-        parent_task_id: task.parent_task_id
-      }));
+      // Ensure parent_task_id is not undefined
+      const parent_task_id = task.parent_task_id || null;
+
+      socket?.emit(
+        SocketEvents.UPDATE_TASK_PROGRESS.toString(),
+        JSON.stringify({
+          task_id: task.id,
+          progress_value: value,
+          parent_task_id: parent_task_id,
+        })
+      );
+
+      // If this task has subtasks, request recalculation of its progress
+      if (hasSubTasks) {
+        setTimeout(() => {
+          socket?.emit(SocketEvents.GET_TASK_PROGRESS.toString(), task.id);
+        }, 100);
+      }
+
+      // If this is a subtask, request the parent's progress to be updated in UI
+      if (parent_task_id) {
+        setTimeout(() => {
+          socket?.emit(SocketEvents.GET_TASK_PROGRESS.toString(), parent_task_id);
+        }, 100);
+      }
    }
  };

  const handleWeightChange = (value: number | null) => {
    if (connected && task.id && value !== null) {
-      socket?.emit(SocketEvents.UPDATE_TASK_WEIGHT.toString(), JSON.stringify({
-        task_id: task.id,
-        weight: value,
-        parent_task_id: task.parent_task_id
-      }));
+      // Ensure parent_task_id is not undefined
+      const parent_task_id = task.parent_task_id || null;
+
+      socket?.emit(
+        SocketEvents.UPDATE_TASK_WEIGHT.toString(),
+        JSON.stringify({
+          task_id: task.id,
+          weight: value,
+          parent_task_id: parent_task_id,
+        })
+      );
+      
+      // If this is a subtask, request the parent's progress to be updated in UI
+      if (parent_task_id) {
+        setTimeout(() => {
+          socket?.emit(SocketEvents.GET_TASK_PROGRESS.toString(), parent_task_id);
+        }, 100);
+      }
    }
  };

-  const percentFormatter = (value: number | undefined) => value ? `${value}%` : '0%';
+  const percentFormatter = (value: number | undefined) => (value ? `${value}%` : '0%');
  const percentParser = (value: string | undefined) => {
    const parsed = parseInt(value?.replace('%', '') || '0', 10);
    return isNaN(parsed) ? 0 : parsed;
@@ -75,43 +118,6 @@ const TaskDrawerProgress = ({ task, form }: TaskDrawerProgressProps) => {

  return (
    <>
-      {showManualProgressInput && (
-        <Form.Item
-          name="progress_value"
-          label={
-            <Flex align="center" gap={4}>
-              {t('taskInfoTab.details.progressValue')}
-              <Tooltip title={t('taskInfoTab.details.progressValueTooltip')}>
-                <QuestionCircleOutlined />
-              </Tooltip>
-            </Flex>
-          }
-          rules={[
-            {
-              required: true,
-              message: t('taskInfoTab.details.progressValueRequired'),
-            },
-            {
-              type: 'number',
-              min: 0,
-              max: 100,
-              message: t('taskInfoTab.details.progressValueRange'),
-            },
-          ]}
-        >
-          <InputNumber 
-            min={0}
-            max={100}
-            formatter={percentFormatter}
-            parser={percentParser}
-            onBlur={(e) => {
-              const value = percentParser(e.target.value);
-              handleProgressChange(value);
-            }}
-          />
-        </Form.Item>
-      )}
-
      {showTaskWeightInput && (
        <Form.Item
          name="weight"
@@ -124,10 +130,6 @@ const TaskDrawerProgress = ({ task, form }: TaskDrawerProgressProps) => {
            </Flex>
          }
          rules={[
-            {
-              required: true,
-              message: t('taskInfoTab.details.taskWeightRequired'),
-            },
            {
              type: 'number',
              min: 0,
@@ -141,15 +143,47 @@ const TaskDrawerProgress = ({ task, form }: TaskDrawerProgressProps) => {
            max={100}
            formatter={percentFormatter}
            parser={percentParser}
-            onBlur={(e) => {
+            onBlur={e => {
              const value = percentParser(e.target.value);
              handleWeightChange(value);
            }}
          />
        </Form.Item>
      )}
+      {showManualProgressInput && (
+        <Form.Item
+          name="progress_value"
+          label={
+            <Flex align="center" gap={4}>
+              {t('taskInfoTab.details.progressValue')}
+              <Tooltip title={t('taskInfoTab.details.progressValueTooltip')}>
+                <QuestionCircleOutlined />
+              </Tooltip>
+            </Flex>
+          }
+          rules={[
+            {
+              type: 'number',
+              min: 0,
+              max: 100,
+              message: t('taskInfoTab.details.progressValueRange'),
+            },
+          ]}
+        >
+          <InputNumber
+            min={0}
+            max={100}
+            formatter={percentFormatter}
+            parser={percentParser}
+            onBlur={e => {
+              const value = percentParser(e.target.value);
+              handleProgressChange(value);
+            }}
+          />
+        </Form.Item>
+      )}
    </>
  );
 };

-export default TaskDrawerProgress; 
+export default TaskDrawerProgress;
--- a/worklenz-frontend/src/components/task-drawer/shared/info-tab/subtask-table.tsx
+++ b/worklenz-frontend/src/components/task-drawer/shared/info-tab/subtask-table.tsx
@@ -210,10 +210,11 @@ const SubTaskTable = ({ subTasks, loadingSubTasks, refreshSubTasks, t }: SubTask
            icon={<ExclamationCircleFilled style={{ color: colors.vibrantOrange }} />}
            okText="Yes"
            cancelText="No"
-            onConfirm={() => handleDeleteSubTask(record.id)}
+            onPopupClick={(e) => e.stopPropagation()}
+            onConfirm={(e) => {handleDeleteSubTask(record.id)}}
          >
            <Tooltip title="Delete">
-              <Button shape="default" icon={<DeleteOutlined />} size="small" />
+              <Button shape="default" icon={<DeleteOutlined />} size="small" onClick={(e)=> e.stopPropagation()} />
            </Tooltip>
          </Popconfirm>
        </Flex>
--- a/worklenz-frontend/src/components/task-drawer/shared/info-tab/task-drawer-info-tab.tsx
+++ b/worklenz-frontend/src/components/task-drawer/shared/info-tab/task-drawer-info-tab.tsx
@@ -125,7 +125,7 @@ const TaskDrawerInfoTab = ({ t }: TaskDrawerInfoTabProps) => {
          <Button
            shape="circle"
            icon={<ReloadOutlined spin={loadingSubTasks} />}
-            onClick={(e) => {
+            onClick={e => {
              e.stopPropagation(); // Prevent click from bubbling up
              fetchSubTasks();
            }}
@@ -182,19 +182,15 @@ const TaskDrawerInfoTab = ({ t }: TaskDrawerInfoTabProps) => {
      label: <Typography.Text strong>{t('taskInfoTab.comments.title')}</Typography.Text>,
      style: panelStyle,
      className: 'custom-task-drawer-info-collapse',
-      children: (
-        <TaskComments
-          taskId={selectedTaskId || ''}
-          t={t}
-        />
-      ),
+      children: <TaskComments taskId={selectedTaskId || ''} t={t} />,
    },
  ];

-  // Filter out the 'subTasks' item if this task is a subtask
-  const infoItems = taskFormViewModel?.task?.parent_task_id 
-    ? allInfoItems.filter(item => item.key !== 'subTasks')
-    : allInfoItems;
+  // Filter out the 'subTasks' item if this task is more than level 2
+  const infoItems =
+    (taskFormViewModel?.task?.task_level ?? 0) >= 2
+      ? allInfoItems.filter(item => item.key !== 'subTasks')
+      : allInfoItems;

  const fetchSubTasks = async () => {
    if (!selectedTaskId || loadingSubTasks) return;
@@ -281,7 +277,7 @@ const TaskDrawerInfoTab = ({ t }: TaskDrawerInfoTabProps) => {
          defaultActiveKey={[
            'details',
            'description',
-            ...(taskFormViewModel?.task?.parent_task_id ? [] : ['subTasks']),
+            'subTasks',
            'dependencies',
            'attachments',
            'comments',
--- a/worklenz-frontend/src/components/task-drawer/task-drawer.tsx
+++ b/worklenz-frontend/src/components/task-drawer/task-drawer.tsx
@@ -32,7 +32,7 @@ const TaskDrawer = () => {
  const [refreshTimeLogTrigger, setRefreshTimeLogTrigger] = useState(0);

  const { showTaskDrawer, timeLogEditing } = useAppSelector(state => state.taskDrawerReducer);
-
+  const { taskFormViewModel, selectedTaskId } = useAppSelector(state => state.taskDrawerReducer);
  const taskNameInputRef = useRef<InputRef>(null);
  const isClosingManually = useRef(false);

@@ -47,20 +47,32 @@ const TaskDrawer = () => {

  const dispatch = useAppDispatch();

-  const handleOnClose = () => {
-    // Set flag to indicate we're manually closing the drawer
-    isClosingManually.current = true;
-    setActiveTab('info');
-
-    // Explicitly clear the task parameter from URL
-    clearTaskFromUrl();
-
-    // Update the Redux state
+  const resetTaskState = () => {
    dispatch(setShowTaskDrawer(false));
    dispatch(setSelectedTaskId(null));
    dispatch(setTaskFormViewModel({}));
    dispatch(setTaskSubscribers([]));
+  };

+  const handleOnClose = (
+    e?: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>
+  ) => {
+    // Set flag to indicate we're manually closing the drawer
+    isClosingManually.current = true;
+    setActiveTab('info');
+    clearTaskFromUrl();
+
+    const isClickOutsideDrawer =
+      e?.target && (e.target as HTMLElement).classList.contains('ant-drawer-mask');
+
+    if (isClickOutsideDrawer || !taskFormViewModel?.task?.is_sub_task) {
+      resetTaskState();
+    } else {
+      dispatch(setSelectedTaskId(null));
+      dispatch(setTaskFormViewModel({}));
+      dispatch(setTaskSubscribers([]));
+      dispatch(setSelectedTaskId(taskFormViewModel?.task?.parent_task_id || null));
+    }
    // Reset the flag after a short delay
    setTimeout(() => {
      isClosingManually.current = false;
@@ -176,8 +188,8 @@ const TaskDrawer = () => {
  // Get conditional body style
  const getBodyStyle = () => {
    const baseStyle = {
-      padding: '24px', 
-      overflow: 'auto'
+      padding: '24px',
+      overflow: 'auto',
    };

    if (activeTab === 'timeLog' && timeLogEditing.isEditing) {