feat(enhanced-kanban): enhance task progress and name updates in task drawer
- Integrated updates for task progress and name within the enhanced Kanban feature, allowing for real-time synchronization based on the selected tab (tasks-list or board). - Added new actions to handle task progress updates specifically for the enhanced Kanban view. - Updated task drawer components to dispatch the appropriate actions based on the current tab, improving user experience and state management.
This commit is contained in:
@@ -14,6 +14,7 @@ import { setTaskStatus } from '@/features/task-drawer/task-drawer.slice';
|
|||||||
import { useAppDispatch } from '@/hooks/useAppDispatch';
|
import { useAppDispatch } from '@/hooks/useAppDispatch';
|
||||||
import { updateBoardTaskStatus } from '@/features/board/board-slice';
|
import { updateBoardTaskStatus } from '@/features/board/board-slice';
|
||||||
import { updateTaskProgress, updateTaskStatus } from '@/features/tasks/tasks.slice';
|
import { updateTaskProgress, updateTaskStatus } from '@/features/tasks/tasks.slice';
|
||||||
|
import { updateEnhancedKanbanTaskStatus, updateEnhancedKanbanTaskProgress } from '@/features/enhanced-kanban/enhanced-kanban.slice';
|
||||||
import useTabSearchParam from '@/hooks/useTabSearchParam';
|
import useTabSearchParam from '@/hooks/useTabSearchParam';
|
||||||
|
|
||||||
interface TaskDrawerProgressProps {
|
interface TaskDrawerProgressProps {
|
||||||
@@ -102,6 +103,7 @@ const TaskDrawerProgress = ({ task, form }: TaskDrawerProgressProps) => {
|
|||||||
);
|
);
|
||||||
|
|
||||||
socket?.once(SocketEvents.GET_TASK_PROGRESS.toString(), (data: any) => {
|
socket?.once(SocketEvents.GET_TASK_PROGRESS.toString(), (data: any) => {
|
||||||
|
if (tab === 'tasks-list') {
|
||||||
dispatch(
|
dispatch(
|
||||||
updateTaskProgress({
|
updateTaskProgress({
|
||||||
taskId: task.id,
|
taskId: task.id,
|
||||||
@@ -110,6 +112,18 @@ const TaskDrawerProgress = ({ task, form }: TaskDrawerProgressProps) => {
|
|||||||
completedCount: data.completed_count,
|
completedCount: data.completed_count,
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
}
|
||||||
|
if (tab === 'board') {
|
||||||
|
dispatch(
|
||||||
|
updateEnhancedKanbanTaskProgress({
|
||||||
|
id: task.id,
|
||||||
|
complete_ratio: data.complete_ratio,
|
||||||
|
completed_count: data.completed_count,
|
||||||
|
total_tasks_count: data.total_tasks_count,
|
||||||
|
parent_task: task.parent_task_id || null,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
if (task.id) {
|
if (task.id) {
|
||||||
@@ -185,7 +199,7 @@ const TaskDrawerProgress = ({ task, form }: TaskDrawerProgressProps) => {
|
|||||||
dispatch(updateTaskStatus(data));
|
dispatch(updateTaskStatus(data));
|
||||||
}
|
}
|
||||||
if (tab === 'board') {
|
if (tab === 'board') {
|
||||||
dispatch(updateBoardTaskStatus(data));
|
dispatch(updateEnhancedKanbanTaskStatus(data));
|
||||||
}
|
}
|
||||||
if (data.parent_task)
|
if (data.parent_task)
|
||||||
socket?.emit(SocketEvents.GET_TASK_PROGRESS.toString(), data.parent_task);
|
socket?.emit(SocketEvents.GET_TASK_PROGRESS.toString(), data.parent_task);
|
||||||
|
|||||||
@@ -16,6 +16,9 @@ import { SocketEvents } from '@/shared/socket-events';
|
|||||||
import useTaskDrawerUrlSync from '@/hooks/useTaskDrawerUrlSync';
|
import useTaskDrawerUrlSync from '@/hooks/useTaskDrawerUrlSync';
|
||||||
import { deleteTask } from '@/features/tasks/tasks.slice';
|
import { deleteTask } from '@/features/tasks/tasks.slice';
|
||||||
import { deleteBoardTask, updateTaskName } from '@/features/board/board-slice';
|
import { deleteBoardTask, updateTaskName } from '@/features/board/board-slice';
|
||||||
|
import { updateEnhancedKanbanTaskName } from '@/features/enhanced-kanban/enhanced-kanban.slice';
|
||||||
|
import useTabSearchParam from '@/hooks/useTabSearchParam';
|
||||||
|
import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
|
||||||
|
|
||||||
type TaskDrawerHeaderProps = {
|
type TaskDrawerHeaderProps = {
|
||||||
inputRef: React.RefObject<InputRef | null>;
|
inputRef: React.RefObject<InputRef | null>;
|
||||||
@@ -26,6 +29,7 @@ const TaskDrawerHeader = ({ inputRef, t }: TaskDrawerHeaderProps) => {
|
|||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch();
|
||||||
const { socket, connected } = useSocket();
|
const { socket, connected } = useSocket();
|
||||||
const { clearTaskFromUrl } = useTaskDrawerUrlSync();
|
const { clearTaskFromUrl } = useTaskDrawerUrlSync();
|
||||||
|
const { tab } = useTabSearchParam();
|
||||||
const isDeleting = useRef(false);
|
const isDeleting = useRef(false);
|
||||||
const [isEditing, setIsEditing] = useState(false);
|
const [isEditing, setIsEditing] = useState(false);
|
||||||
|
|
||||||
@@ -84,7 +88,13 @@ const TaskDrawerHeader = ({ inputRef, t }: TaskDrawerHeaderProps) => {
|
|||||||
|
|
||||||
const handleReceivedTaskNameChange = (data: { id: string; parent_task: string; name: string }) => {
|
const handleReceivedTaskNameChange = (data: { id: string; parent_task: string; name: string }) => {
|
||||||
if (data.id === selectedTaskId) {
|
if (data.id === selectedTaskId) {
|
||||||
dispatch(updateTaskName({ task: data }));
|
const taskData = { ...data, manual_progress: false } as IProjectTask;
|
||||||
|
dispatch(updateTaskName({ task: taskData }));
|
||||||
|
|
||||||
|
// Also update enhanced kanban if on board tab
|
||||||
|
if (tab === 'board') {
|
||||||
|
dispatch(updateEnhancedKanbanTaskName({ task: taskData }));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -152,7 +162,7 @@ const TaskDrawerHeader = ({ inputRef, t }: TaskDrawerHeaderProps) => {
|
|||||||
|
|
||||||
<TaskDrawerStatusDropdown
|
<TaskDrawerStatusDropdown
|
||||||
statuses={taskFormViewModel?.statuses ?? []}
|
statuses={taskFormViewModel?.statuses ?? []}
|
||||||
task={taskFormViewModel?.task ?? {}}
|
task={taskFormViewModel?.task ?? {} as ITaskViewModel}
|
||||||
teamId={currentSession?.team_id ?? ''}
|
teamId={currentSession?.team_id ?? ''}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|||||||
@@ -694,6 +694,24 @@ const enhancedKanbanSlice = createSlice({
|
|||||||
state.taskCache[parent_task || id] = task;
|
state.taskCache[parent_task || id] = task;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// Enhanced Kanban task name update (for use in task drawer header)
|
||||||
|
updateEnhancedKanbanTaskName: (
|
||||||
|
state,
|
||||||
|
action: PayloadAction<{
|
||||||
|
task: IProjectTask;
|
||||||
|
}>
|
||||||
|
) => {
|
||||||
|
const { task } = action.payload;
|
||||||
|
|
||||||
|
// Find the task and update it
|
||||||
|
const result = findTaskInAllGroups(state.taskGroups, task.id || '');
|
||||||
|
if (result) {
|
||||||
|
result.task.name = task.name;
|
||||||
|
// Update cache
|
||||||
|
state.taskCache[task.id!] = result.task;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
updateTaskPriority: (state, action: PayloadAction<ITaskListPriorityChangeResponse>) => {
|
updateTaskPriority: (state, action: PayloadAction<ITaskListPriorityChangeResponse>) => {
|
||||||
const { id: task_id, priority_id } = action.payload;
|
const { id: task_id, priority_id } = action.payload;
|
||||||
|
|
||||||
@@ -907,6 +925,7 @@ export const {
|
|||||||
updateEnhancedKanbanTaskAssignees,
|
updateEnhancedKanbanTaskAssignees,
|
||||||
updateEnhancedKanbanTaskLabels,
|
updateEnhancedKanbanTaskLabels,
|
||||||
updateEnhancedKanbanTaskProgress,
|
updateEnhancedKanbanTaskProgress,
|
||||||
|
updateEnhancedKanbanTaskName,
|
||||||
} = enhancedKanbanSlice.actions;
|
} = enhancedKanbanSlice.actions;
|
||||||
|
|
||||||
export default enhancedKanbanSlice.reducer;
|
export default enhancedKanbanSlice.reducer;
|
||||||
Reference in New Issue
Block a user