Merge pull request #229 from shancds/test/row-kanban-board-v1.1.1
Test/row kanban board v1.1.1
This commit is contained in:
Chamika J
@@ -0,0 +1,329 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { useSelector, useDispatch } from 'react-redux';
|
||||||
|
import { RootState } from '@/app/store';
|
||||||
|
import '../EnhancedKanbanBoard.css';
|
||||||
|
import '../EnhancedKanbanGroup.css';
|
||||||
|
import '../EnhancedKanbanTaskCard.css';
|
||||||
|
import ImprovedTaskFilters from '../../task-management/improved-task-filters';
|
||||||
|
import Card from 'antd/es/card';
|
||||||
|
import Spin from 'antd/es/spin';
|
||||||
|
import Empty from 'antd/es/empty';
|
||||||
|
import { reorderGroups, reorderEnhancedKanbanGroups, reorderTasks, reorderEnhancedKanbanTasks, fetchEnhancedKanbanLabels, fetchEnhancedKanbanGroups, fetchEnhancedKanbanTaskAssignees } from '@/features/enhanced-kanban/enhanced-kanban.slice';
|
||||||
|
import { fetchStatusesCategories } from '@/features/taskAttributes/taskStatusSlice';
|
||||||
|
import { useAppSelector } from '@/hooks/useAppSelector';
|
||||||
|
import KanbanGroup from './KanbanGroup';
|
||||||
|
import EnhancedKanbanCreateSection from '../EnhancedKanbanCreateSection';
|
||||||
|
import { useSocket } from '@/socket/socketContext';
|
||||||
|
import { SocketEvents } from '@/shared/socket-events';
|
||||||
|
import { useAuthService } from '@/hooks/useAuth';
|
||||||
|
import { statusApiService } from '@/api/taskAttributes/status/status.api.service';
|
||||||
|
import alertService from '@/services/alerts/alertService';
|
||||||
|
import logger from '@/utils/errorLogger';
|
||||||
|
import Skeleton from 'antd/es/skeleton/Skeleton';
|
||||||
|
|
||||||
|
const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ projectId }) => {
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
const authService = useAuthService();
|
||||||
|
const { socket } = useSocket();
|
||||||
|
const project = useAppSelector((state: RootState) => state.projectReducer.project);
|
||||||
|
const groupBy = useSelector((state: RootState) => state.enhancedKanbanReducer.groupBy);
|
||||||
|
const teamId = authService.getCurrentSession()?.team_id;
|
||||||
|
const {
|
||||||
|
taskGroups,
|
||||||
|
loadingGroups,
|
||||||
|
error,
|
||||||
|
} = useSelector((state: RootState) => state.enhancedKanbanReducer);
|
||||||
|
const [draggedGroupId, setDraggedGroupId] = useState<string | null>(null);
|
||||||
|
const [draggedTaskId, setDraggedTaskId] = useState<string | null>(null);
|
||||||
|
const [draggedTaskGroupId, setDraggedTaskGroupId] = useState<string | null>(null);
|
||||||
|
const [hoveredGroupId, setHoveredGroupId] = useState<string | null>(null);
|
||||||
|
const [hoveredTaskIdx, setHoveredTaskIdx] = useState<number | null>(null);
|
||||||
|
const [dragType, setDragType] = useState<'group' | 'task' | null>(null);
|
||||||
|
const { statusCategories, status: existingStatuses } = useAppSelector((state) => state.taskStatusReducer);
|
||||||
|
useEffect(() => {
|
||||||
|
if (projectId) {
|
||||||
|
dispatch(fetchEnhancedKanbanGroups(projectId) as any);
|
||||||
|
// Load filter data for enhanced kanban
|
||||||
|
dispatch(fetchEnhancedKanbanTaskAssignees(projectId) as any);
|
||||||
|
dispatch(fetchEnhancedKanbanLabels(projectId) as any);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!statusCategories.length) {
|
||||||
|
dispatch(fetchStatusesCategories() as any);
|
||||||
|
}
|
||||||
|
}, [dispatch, projectId]);
|
||||||
|
// Reset drag state if taskGroups changes (e.g., real-time update)
|
||||||
|
useEffect(() => {
|
||||||
|
setDraggedGroupId(null);
|
||||||
|
setDraggedTaskId(null);
|
||||||
|
setDraggedTaskGroupId(null);
|
||||||
|
setHoveredGroupId(null);
|
||||||
|
setHoveredTaskIdx(null);
|
||||||
|
setDragType(null);
|
||||||
|
}, [taskGroups]);
|
||||||
|
|
||||||
|
// Group drag handlers
|
||||||
|
const handleGroupDragStart = (e: React.DragEvent, groupId: string) => {
|
||||||
|
setDraggedGroupId(groupId);
|
||||||
|
setDragType('group');
|
||||||
|
e.dataTransfer.effectAllowed = 'move';
|
||||||
|
};
|
||||||
|
const handleGroupDragOver = (e: React.DragEvent) => {
|
||||||
|
if (dragType !== 'group') return;
|
||||||
|
e.preventDefault();
|
||||||
|
};
|
||||||
|
const handleGroupDrop = async (e: React.DragEvent, targetGroupId: string) => {
|
||||||
|
if (dragType !== 'group') return;
|
||||||
|
e.preventDefault();
|
||||||
|
if (!draggedGroupId || draggedGroupId === targetGroupId) return;
|
||||||
|
// Calculate new order and dispatch
|
||||||
|
const fromIdx = taskGroups.findIndex(g => g.id === draggedGroupId);
|
||||||
|
const toIdx = taskGroups.findIndex(g => g.id === targetGroupId);
|
||||||
|
if (fromIdx === -1 || toIdx === -1) return;
|
||||||
|
const reorderedGroups = [...taskGroups];
|
||||||
|
const [moved] = reorderedGroups.splice(fromIdx, 1);
|
||||||
|
reorderedGroups.splice(toIdx, 0, moved);
|
||||||
|
dispatch(reorderGroups({ fromIndex: fromIdx, toIndex: toIdx, reorderedGroups }));
|
||||||
|
dispatch(reorderEnhancedKanbanGroups({ fromIndex: fromIdx, toIndex: toIdx, reorderedGroups }) as any);
|
||||||
|
|
||||||
|
// API call for group order
|
||||||
|
try {
|
||||||
|
const columnOrder = reorderedGroups.map(group => group.id);
|
||||||
|
const requestBody = { status_order: columnOrder };
|
||||||
|
const response = await statusApiService.updateStatusOrder(requestBody, projectId);
|
||||||
|
if (!response.done) {
|
||||||
|
// Revert the change if API call fails
|
||||||
|
const revertedGroups = [...reorderedGroups];
|
||||||
|
const [movedBackGroup] = revertedGroups.splice(toIdx, 1);
|
||||||
|
revertedGroups.splice(fromIdx, 0, movedBackGroup);
|
||||||
|
dispatch(reorderGroups({ fromIndex: toIdx, toIndex: fromIdx, reorderedGroups: revertedGroups }));
|
||||||
|
alertService.error('Failed to update column order', 'Please try again');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
// Revert the change if API call fails
|
||||||
|
const revertedGroups = [...reorderedGroups];
|
||||||
|
const [movedBackGroup] = revertedGroups.splice(toIdx, 1);
|
||||||
|
revertedGroups.splice(fromIdx, 0, movedBackGroup);
|
||||||
|
dispatch(reorderGroups({ fromIndex: toIdx, toIndex: fromIdx, reorderedGroups: revertedGroups }));
|
||||||
|
alertService.error('Failed to update column order', 'Please try again');
|
||||||
|
logger.error('Failed to update column order', error);
|
||||||
|
}
|
||||||
|
|
||||||
|
setDraggedGroupId(null);
|
||||||
|
setDragType(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Task drag handlers
|
||||||
|
const handleTaskDragStart = (e: React.DragEvent, taskId: string, groupId: string) => {
|
||||||
|
setDraggedTaskId(taskId);
|
||||||
|
setDraggedTaskGroupId(groupId);
|
||||||
|
setDragType('task');
|
||||||
|
e.dataTransfer.effectAllowed = 'move';
|
||||||
|
};
|
||||||
|
const handleTaskDragOver = (e: React.DragEvent, groupId: string, taskIdx: number) => {
|
||||||
|
if (dragType !== 'task') return;
|
||||||
|
e.preventDefault();
|
||||||
|
if (draggedTaskId) {
|
||||||
|
setHoveredGroupId(groupId);
|
||||||
|
setHoveredTaskIdx(taskIdx);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const handleTaskDrop = (e: React.DragEvent, targetGroupId: string, targetTaskIdx: number) => {
|
||||||
|
if (dragType !== 'task') return;
|
||||||
|
e.preventDefault();
|
||||||
|
if (!draggedTaskId || !draggedTaskGroupId || hoveredGroupId === null || hoveredTaskIdx === null) return;
|
||||||
|
|
||||||
|
// Calculate new order and dispatch
|
||||||
|
const sourceGroup = taskGroups.find(g => g.id === draggedTaskGroupId);
|
||||||
|
const targetGroup = taskGroups.find(g => g.id === targetGroupId);
|
||||||
|
if (!sourceGroup || !targetGroup) return;
|
||||||
|
|
||||||
|
const taskIdx = sourceGroup.tasks.findIndex(t => t.id === draggedTaskId);
|
||||||
|
if (taskIdx === -1) return;
|
||||||
|
|
||||||
|
const movedTask = sourceGroup.tasks[taskIdx];
|
||||||
|
let insertIdx = hoveredTaskIdx;
|
||||||
|
|
||||||
|
// Handle same group reordering
|
||||||
|
if (sourceGroup.id === targetGroup.id) {
|
||||||
|
// Create a single updated array for the same group
|
||||||
|
const updatedTasks = [...sourceGroup.tasks];
|
||||||
|
updatedTasks.splice(taskIdx, 1); // Remove from original position
|
||||||
|
|
||||||
|
// Adjust insert index if moving forward in the same array
|
||||||
|
if (taskIdx < insertIdx) {
|
||||||
|
insertIdx--;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (insertIdx < 0) insertIdx = 0;
|
||||||
|
if (insertIdx > updatedTasks.length) insertIdx = updatedTasks.length;
|
||||||
|
|
||||||
|
updatedTasks.splice(insertIdx, 0, movedTask); // Insert at new position
|
||||||
|
|
||||||
|
dispatch(reorderTasks({
|
||||||
|
activeGroupId: sourceGroup.id,
|
||||||
|
overGroupId: targetGroup.id,
|
||||||
|
fromIndex: taskIdx,
|
||||||
|
toIndex: insertIdx,
|
||||||
|
task: movedTask,
|
||||||
|
updatedSourceTasks: updatedTasks,
|
||||||
|
updatedTargetTasks: updatedTasks,
|
||||||
|
}));
|
||||||
|
dispatch(reorderEnhancedKanbanTasks({
|
||||||
|
activeGroupId: sourceGroup.id,
|
||||||
|
overGroupId: targetGroup.id,
|
||||||
|
fromIndex: taskIdx,
|
||||||
|
toIndex: insertIdx,
|
||||||
|
task: movedTask,
|
||||||
|
updatedSourceTasks: updatedTasks,
|
||||||
|
updatedTargetTasks: updatedTasks,
|
||||||
|
}) as any);
|
||||||
|
} else {
|
||||||
|
// Handle cross-group reordering
|
||||||
|
const updatedSourceTasks = [...sourceGroup.tasks];
|
||||||
|
updatedSourceTasks.splice(taskIdx, 1);
|
||||||
|
|
||||||
|
const updatedTargetTasks = [...targetGroup.tasks];
|
||||||
|
if (insertIdx < 0) insertIdx = 0;
|
||||||
|
if (insertIdx > updatedTargetTasks.length) insertIdx = updatedTargetTasks.length;
|
||||||
|
updatedTargetTasks.splice(insertIdx, 0, movedTask);
|
||||||
|
|
||||||
|
dispatch(reorderTasks({
|
||||||
|
activeGroupId: sourceGroup.id,
|
||||||
|
overGroupId: targetGroup.id,
|
||||||
|
fromIndex: taskIdx,
|
||||||
|
toIndex: insertIdx,
|
||||||
|
task: movedTask,
|
||||||
|
updatedSourceTasks,
|
||||||
|
updatedTargetTasks,
|
||||||
|
}));
|
||||||
|
dispatch(reorderEnhancedKanbanTasks({
|
||||||
|
activeGroupId: sourceGroup.id,
|
||||||
|
overGroupId: targetGroup.id,
|
||||||
|
fromIndex: taskIdx,
|
||||||
|
toIndex: insertIdx,
|
||||||
|
task: movedTask,
|
||||||
|
updatedSourceTasks,
|
||||||
|
updatedTargetTasks,
|
||||||
|
}) as any);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Socket emit for task order
|
||||||
|
if (socket && projectId && teamId && movedTask) {
|
||||||
|
let toSortOrder = -1;
|
||||||
|
let toLastIndex = false;
|
||||||
|
if (insertIdx === targetGroup.tasks.length) {
|
||||||
|
toSortOrder = -1;
|
||||||
|
toLastIndex = true;
|
||||||
|
} else if (targetGroup.tasks[insertIdx]) {
|
||||||
|
toSortOrder = typeof targetGroup.tasks[insertIdx].sort_order === 'number'
|
||||||
|
? targetGroup.tasks[insertIdx].sort_order
|
||||||
|
: -1;
|
||||||
|
toLastIndex = false;
|
||||||
|
} else if (targetGroup.tasks.length > 0) {
|
||||||
|
const lastSortOrder = targetGroup.tasks[targetGroup.tasks.length - 1].sort_order;
|
||||||
|
toSortOrder = typeof lastSortOrder === 'number' ? lastSortOrder : -1;
|
||||||
|
toLastIndex = false;
|
||||||
|
}
|
||||||
|
socket.emit(SocketEvents.TASK_SORT_ORDER_CHANGE.toString(), {
|
||||||
|
project_id: projectId,
|
||||||
|
from_index: movedTask.sort_order,
|
||||||
|
to_index: toSortOrder,
|
||||||
|
to_last_index: toLastIndex,
|
||||||
|
from_group: sourceGroup.id,
|
||||||
|
to_group: targetGroup.id,
|
||||||
|
group_by: groupBy || 'status',
|
||||||
|
task: movedTask,
|
||||||
|
team_id: teamId,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setDraggedTaskId(null);
|
||||||
|
setDraggedTaskGroupId(null);
|
||||||
|
setHoveredGroupId(null);
|
||||||
|
setHoveredTaskIdx(null);
|
||||||
|
setDragType(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!socket) return;
|
||||||
|
|
||||||
|
// Handler for new task received via socket
|
||||||
|
const handleNewTaskReceived = (data: any) => {
|
||||||
|
if (!data) return;
|
||||||
|
if (data.parent_task_id) {
|
||||||
|
// Subtask: update subtasks in the correct group
|
||||||
|
dispatch({
|
||||||
|
type: 'enhancedKanbanReducer/updateEnhancedKanbanSubtask',
|
||||||
|
payload: { sectionId: '', subtask: data, mode: 'add' }
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// Regular task: add to the correct group
|
||||||
|
let sectionId = '';
|
||||||
|
if (groupBy === 'status') sectionId = data.status;
|
||||||
|
else if (groupBy === 'priority') sectionId = data.priority;
|
||||||
|
else if (groupBy === 'phase') sectionId = data.phase_id;
|
||||||
|
dispatch({
|
||||||
|
type: 'enhancedKanbanReducer/addTaskToGroup',
|
||||||
|
payload: { sectionId, task: data }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
socket.on(SocketEvents.QUICK_TASK.toString(), handleNewTaskReceived);
|
||||||
|
return () => {
|
||||||
|
socket.off(SocketEvents.QUICK_TASK.toString(), handleNewTaskReceived);
|
||||||
|
};
|
||||||
|
}, [socket, groupBy, dispatch]);
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<Empty description={`Error loading tasks: ${error}`} image={Empty.PRESENTED_IMAGE_SIMPLE} />
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="mb-4">
|
||||||
|
<React.Suspense fallback={<div>Loading filters...</div>}>
|
||||||
|
<ImprovedTaskFilters position="board" />
|
||||||
|
</React.Suspense>
|
||||||
|
</div>
|
||||||
|
<div className="enhanced-kanban-board">
|
||||||
|
{loadingGroups ? (
|
||||||
|
<Card>
|
||||||
|
<div className="flex justify-center items-center py-8">
|
||||||
|
<Skeleton active />
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
) : taskGroups.length === 0 ? (
|
||||||
|
<Card>
|
||||||
|
<Empty description="No tasks found" image={Empty.PRESENTED_IMAGE_SIMPLE} />
|
||||||
|
</Card>
|
||||||
|
) : (
|
||||||
|
<div className="kanban-groups-container">
|
||||||
|
{taskGroups.map(group => (
|
||||||
|
<KanbanGroup
|
||||||
|
key={group.id}
|
||||||
|
group={group}
|
||||||
|
onGroupDragStart={handleGroupDragStart}
|
||||||
|
onGroupDragOver={handleGroupDragOver}
|
||||||
|
onGroupDrop={handleGroupDrop}
|
||||||
|
onTaskDragStart={handleTaskDragStart}
|
||||||
|
onTaskDragOver={handleTaskDragOver}
|
||||||
|
onTaskDrop={handleTaskDrop}
|
||||||
|
hoveredTaskIdx={hoveredGroupId === group.id ? hoveredTaskIdx : null}
|
||||||
|
hoveredGroupId={hoveredGroupId}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
<EnhancedKanbanCreateSection />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EnhancedKanbanBoardNativeDnD;
|
||||||
@@ -0,0 +1,169 @@
|
|||||||
|
import React, { memo, useMemo, useState } from 'react';
|
||||||
|
import { useAppSelector } from '@/hooks/useAppSelector';
|
||||||
|
import { ITaskListGroup } from '@/types/tasks/taskList.types';
|
||||||
|
import TaskCard from './TaskCard';
|
||||||
|
import { themeWiseColor } from '@/utils/themeWiseColor';
|
||||||
|
import EnhancedKanbanCreateTaskCard from '../EnhancedKanbanCreateTaskCard';
|
||||||
|
import { PlusOutlined } from '@ant-design/icons';
|
||||||
|
import Button from 'antd/es/button';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { useAuthService } from '@/hooks/useAuth';
|
||||||
|
import useIsProjectManager from '@/hooks/useIsProjectManager';
|
||||||
|
|
||||||
|
interface KanbanGroupProps {
|
||||||
|
group: ITaskListGroup;
|
||||||
|
onGroupDragStart: (e: React.DragEvent, groupId: string) => void;
|
||||||
|
onGroupDragOver: (e: React.DragEvent) => void;
|
||||||
|
onGroupDrop: (e: React.DragEvent, groupId: string) => void;
|
||||||
|
onTaskDragStart: (e: React.DragEvent, taskId: string, groupId: string) => void;
|
||||||
|
onTaskDragOver: (e: React.DragEvent, groupId: string, taskIdx: number) => void;
|
||||||
|
onTaskDrop: (e: React.DragEvent, groupId: string, taskIdx: number) => void;
|
||||||
|
hoveredTaskIdx: number | null;
|
||||||
|
hoveredGroupId: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
|
||||||
|
group,
|
||||||
|
onGroupDragStart,
|
||||||
|
onGroupDragOver,
|
||||||
|
onGroupDrop,
|
||||||
|
onTaskDragStart,
|
||||||
|
onTaskDragOver,
|
||||||
|
onTaskDrop,
|
||||||
|
hoveredTaskIdx,
|
||||||
|
hoveredGroupId
|
||||||
|
}) => {
|
||||||
|
const themeMode = useAppSelector(state => state.themeReducer.mode);
|
||||||
|
const { t } = useTranslation('kanban-board');
|
||||||
|
const isOwnerOrAdmin = useAuthService().isOwnerOrAdmin();
|
||||||
|
const isProjectManager = useIsProjectManager();
|
||||||
|
const [showNewCardTop, setShowNewCardTop] = useState(false);
|
||||||
|
const [showNewCardBottom, setShowNewCardBottom] = useState(false);
|
||||||
|
const headerBackgroundColor = useMemo(() => {
|
||||||
|
if (themeMode === 'dark') {
|
||||||
|
return group.color_code_dark || group.color_code || '#1e1e1e';
|
||||||
|
}
|
||||||
|
return group.color_code || '#f5f5f5';
|
||||||
|
}, [themeMode, group.color_code, group.color_code_dark]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="enhanced-kanban-group">
|
||||||
|
<div
|
||||||
|
className="enhanced-kanban-group-header"
|
||||||
|
style={{
|
||||||
|
backgroundColor: headerBackgroundColor,
|
||||||
|
}}
|
||||||
|
draggable
|
||||||
|
onDragStart={e => onGroupDragStart(e, group.id)}
|
||||||
|
onDragOver={onGroupDragOver}
|
||||||
|
onDrop={e => onGroupDrop(e, group.id)}
|
||||||
|
>
|
||||||
|
<h3>{group.name}</h3>
|
||||||
|
<span className="task-count">{group.tasks.length}</span>
|
||||||
|
</div>
|
||||||
|
<div className="enhanced-kanban-group-tasks">
|
||||||
|
{/* If group is empty, render a drop zone */}
|
||||||
|
{group.tasks.length === 0 && (
|
||||||
|
<div
|
||||||
|
className="empty-drop-zone"
|
||||||
|
style={{
|
||||||
|
padding: 8,
|
||||||
|
height: 500,
|
||||||
|
background: themeWiseColor(
|
||||||
|
'linear-gradient( 180deg, #fafafa, rgba(245, 243, 243, 0))',
|
||||||
|
'linear-gradient( 180deg, #2a2b2d, rgba(42, 43, 45, 0))',
|
||||||
|
themeMode
|
||||||
|
),
|
||||||
|
borderRadius: 6,
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'flex-start',
|
||||||
|
paddingTop: 8,
|
||||||
|
color: '#888',
|
||||||
|
fontStyle: 'italic',
|
||||||
|
}}
|
||||||
|
onDragOver={e => { e.preventDefault(); onTaskDragOver(e, group.id, 0); }}
|
||||||
|
onDrop={e => { e.preventDefault(); onTaskDrop(e, group.id, 0); }}
|
||||||
|
>
|
||||||
|
{/* Drop indicator at the end of the group */}
|
||||||
|
{hoveredGroupId === group.id && hoveredTaskIdx === group.tasks.length && (
|
||||||
|
<div className="drop-preview-indicator">
|
||||||
|
<div className="drop-line" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{(isOwnerOrAdmin || isProjectManager) && !showNewCardTop && !showNewCardBottom && (
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
style={{
|
||||||
|
height: '38px',
|
||||||
|
width: '100%',
|
||||||
|
borderRadius: 6,
|
||||||
|
boxShadow: 'none',
|
||||||
|
}}
|
||||||
|
icon={<PlusOutlined />}
|
||||||
|
onClick={() => {
|
||||||
|
setShowNewCardBottom(false);
|
||||||
|
setShowNewCardTop(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('addTask')}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
{showNewCardTop && <EnhancedKanbanCreateTaskCard sectionId={group.id} setShowNewCard={setShowNewCardTop} position='top' />}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Drop indicator at the top of the group */}
|
||||||
|
{hoveredGroupId === group.id && hoveredTaskIdx === 0 && (
|
||||||
|
<div className="drop-preview-indicator">
|
||||||
|
<div className="drop-line" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{group.tasks.map((task, idx) => (
|
||||||
|
<TaskCard
|
||||||
|
task={task}
|
||||||
|
onTaskDragStart={onTaskDragStart}
|
||||||
|
onTaskDragOver={onTaskDragOver}
|
||||||
|
onTaskDrop={onTaskDrop}
|
||||||
|
groupId={group.id}
|
||||||
|
isDropIndicator={hoveredGroupId === group.id && hoveredTaskIdx === idx}
|
||||||
|
idx={idx}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
{(isOwnerOrAdmin || isProjectManager) && !showNewCardTop && !showNewCardBottom && group.tasks.length > 0 && (
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
style={{
|
||||||
|
height: '40px',
|
||||||
|
width: '100%',
|
||||||
|
borderRadius: 6,
|
||||||
|
boxShadow: 'none',
|
||||||
|
marginTop: 8,
|
||||||
|
}}
|
||||||
|
icon={<PlusOutlined />}
|
||||||
|
onClick={() => {
|
||||||
|
setShowNewCardBottom(true);
|
||||||
|
setShowNewCardTop(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('addTask')}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
{showNewCardBottom && <EnhancedKanbanCreateTaskCard sectionId={group.id} setShowNewCard={setShowNewCardBottom} position='bottom' />}
|
||||||
|
|
||||||
|
{/* Drop indicator at the end of the group */}
|
||||||
|
{hoveredGroupId === group.id && hoveredTaskIdx === group.tasks.length && (
|
||||||
|
<div className="drop-preview-indicator">
|
||||||
|
<div className="drop-line" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
KanbanGroup.displayName = 'KanbanGroup';
|
||||||
|
|
||||||
|
export default KanbanGroup;
|
||||||
@@ -0,0 +1,120 @@
|
|||||||
|
import React, { memo, useCallback } from 'react';
|
||||||
|
import { useSelector } from 'react-redux';
|
||||||
|
import { RootState } from '@/app/store';
|
||||||
|
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 AvatarGroup from '@/components/AvatarGroup';
|
||||||
|
import LazyAssigneeSelectorWrapper from '@/components/task-management/lazy-assignee-selector';
|
||||||
|
import { format } from 'date-fns';
|
||||||
|
|
||||||
|
interface TaskCardProps {
|
||||||
|
task: IProjectTask;
|
||||||
|
onTaskDragStart: (e: React.DragEvent, taskId: string, groupId: string) => void;
|
||||||
|
onTaskDragOver: (e: React.DragEvent, groupId: string, taskIdx: number) => void;
|
||||||
|
onTaskDrop: (e: React.DragEvent, groupId: string, taskIdx: number) => void;
|
||||||
|
groupId: string;
|
||||||
|
isDropIndicator: boolean;
|
||||||
|
idx: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const TaskCard: React.FC<TaskCardProps> = memo(({
|
||||||
|
task,
|
||||||
|
onTaskDragStart,
|
||||||
|
onTaskDragOver,
|
||||||
|
onTaskDrop,
|
||||||
|
groupId,
|
||||||
|
isDropIndicator,
|
||||||
|
idx
|
||||||
|
}) => {
|
||||||
|
const themeMode = useSelector((state: RootState) => state.themeReducer.mode);
|
||||||
|
const background = themeMode === 'dark' ? '#23272f' : '#fff';
|
||||||
|
const color = themeMode === 'dark' ? '#fff' : '#23272f';
|
||||||
|
const dispatch = useAppDispatch();
|
||||||
|
const { t } = useTranslation('kanban-board');
|
||||||
|
|
||||||
|
const handleCardClick = useCallback((e: React.MouseEvent, id: string) => {
|
||||||
|
// Prevent the event from propagating to parent elements
|
||||||
|
e.stopPropagation();
|
||||||
|
dispatch(setSelectedTaskId(id));
|
||||||
|
dispatch(setShowTaskDrawer(true));
|
||||||
|
}, [dispatch]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{isDropIndicator && (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
height: 80,
|
||||||
|
background: themeMode === 'dark' ? '#2a2a2a' : '#f0f0f0',
|
||||||
|
borderRadius: 6,
|
||||||
|
border: `5px`
|
||||||
|
}}
|
||||||
|
onDragStart={e => onTaskDragStart(e, task.id!, groupId)}
|
||||||
|
onDragOver={e => onTaskDragOver(e, groupId, idx)}
|
||||||
|
onDrop={e => onTaskDrop(e, groupId, idx)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<div
|
||||||
|
className="enhanced-kanban-task-card"
|
||||||
|
draggable
|
||||||
|
onDragStart={e => onTaskDragStart(e, task.id!, groupId)}
|
||||||
|
onDragOver={e => onTaskDragOver(e, groupId, idx)}
|
||||||
|
onDrop={e => onTaskDrop(e, groupId, idx)}
|
||||||
|
style={{ background, color }}
|
||||||
|
onClick={e => handleCardClick(e, task.id!)}
|
||||||
|
>
|
||||||
|
<div className="task-content">
|
||||||
|
<div className="task_labels" style={{ display: 'flex', gap: 4, marginBottom: 4 }}>
|
||||||
|
{task.labels?.map(label => (
|
||||||
|
<div
|
||||||
|
key={label.id}
|
||||||
|
className="task-label"
|
||||||
|
style={{
|
||||||
|
backgroundColor: label.color_code,
|
||||||
|
display: 'inline-block',
|
||||||
|
borderRadius: '4px',
|
||||||
|
padding: '2px 8px',
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 8,
|
||||||
|
marginRight: 4,
|
||||||
|
whiteSpace: 'nowrap',
|
||||||
|
minWidth: 0
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{label.name}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="task-content" style={{ display: 'flex', alignItems: 'center' }}>
|
||||||
|
<div
|
||||||
|
className="w-2 h-2 rounded-full"
|
||||||
|
style={{ backgroundColor: task.priority_color || '#d9d9d9' }}
|
||||||
|
/>
|
||||||
|
<div className="task-title" style={{ marginLeft: 8 }}>{task.name}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="task-assignees-row" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
|
||||||
|
<div className="task-due-date" style={{ fontSize: 10, color: '#888', marginRight: 8, whiteSpace: 'nowrap' }}>
|
||||||
|
{task.end_date ? format(new Date(task.end_date), 'MMM d, yyyy') : ''}
|
||||||
|
</div>
|
||||||
|
<div className="task-assignees" style={{ display: 'flex', alignItems: 'center' }}>
|
||||||
|
<AvatarGroup
|
||||||
|
members={task.names || []}
|
||||||
|
maxCount={3}
|
||||||
|
isDarkMode={themeMode === 'dark'}
|
||||||
|
size={24}
|
||||||
|
/>
|
||||||
|
<LazyAssigneeSelectorWrapper task={task} groupId={groupId} isDarkMode={themeMode === 'dark'} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
TaskCard.displayName = 'TaskCard';
|
||||||
|
|
||||||
|
export default TaskCard;
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
export { default } from './EnhancedKanbanBoardNativeDnD';
|
||||||
|
export { default as TaskCard } from './TaskCard';
|
||||||
|
export { default as KanbanGroup } from './KanbanGroup';
|
||||||
@@ -13,6 +13,12 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html.light .enhanced-kanban-task-card {
|
||||||
|
border: 1.5px solid #e1e4e8 !important; /* Asana-like light border */
|
||||||
|
box-shadow: 0 1px 4px 0 rgba(60, 64, 67, 0.08), 0 0.5px 1.5px 0 rgba(60, 64, 67, 0.03);
|
||||||
|
background: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
.enhanced-kanban-task-card:hover {
|
.enhanced-kanban-task-card:hover {
|
||||||
box-shadow: 0 2px 6px var(--ant-color-shadow);
|
box-shadow: 0 2px 6px var(--ant-color-shadow);
|
||||||
transform: translateY(-1px);
|
transform: translateY(-1px);
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { useAppSelector } from '@/hooks/useAppSelector';
|
import { useAppSelector } from '@/hooks/useAppSelector';
|
||||||
import EnhancedKanbanBoard from '@/components/enhanced-kanban/EnhancedKanbanBoard';
|
import EnhancedKanbanBoard from '@/components/enhanced-kanban/EnhancedKanbanBoard';
|
||||||
|
import EnhancedKanbanBoardNativeDnD from '@/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD';
|
||||||
|
|
||||||
const ProjectViewEnhancedBoard: React.FC = () => {
|
const ProjectViewEnhancedBoard: React.FC = () => {
|
||||||
const { project } = useAppSelector(state => state.projectReducer);
|
const { project } = useAppSelector(state => state.projectReducer);
|
||||||
@@ -11,7 +12,8 @@ const ProjectViewEnhancedBoard: React.FC = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="project-view-enhanced-board">
|
<div className="project-view-enhanced-board">
|
||||||
<EnhancedKanbanBoard projectId={project.id} />
|
{/* <EnhancedKanbanBoard projectId={project.id} /> */}
|
||||||
|
<EnhancedKanbanBoardNativeDnD projectId={project.id} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user