feat(enhanced-kanban): integrate react-window-infinite-loader and update project view

- Added react-window-infinite-loader to improve performance in rendering large lists.
- Integrated enhancedKanbanReducer into the Redux store for state management.
- Updated ProjectViewEnhancedBoard to utilize EnhancedKanbanBoard for better project visualization.
This commit is contained in:
shancds
2025-06-21 18:24:09 +05:30
parent bbca644b40
commit f7ba4f202b
16 changed files with 1824 additions and 4 deletions

View File

@@ -0,0 +1,63 @@
import React from 'react';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
import './EnhancedKanbanTaskCard.css';
interface EnhancedKanbanTaskCardProps {
task: IProjectTask;
isActive?: boolean;
isDragOverlay?: boolean;
isDropTarget?: boolean;
}
const EnhancedKanbanTaskCard: React.FC<EnhancedKanbanTaskCardProps> = React.memo(({
task,
isActive = false,
isDragOverlay = false,
isDropTarget = false
}) => {
const {
attributes,
listeners,
setNodeRef,
transform,
transition,
isDragging,
} = useSortable({
id: task.id!,
data: {
type: 'task',
task,
},
disabled: isDragOverlay,
});
const style = {
transform: CSS.Transform.toString(transform),
transition,
opacity: isDragging ? 0.5 : 1,
};
return (
<div
ref={setNodeRef}
style={style}
className={`enhanced-kanban-task-card ${isActive ? 'active' : ''} ${isDragging ? 'dragging' : ''} ${isDragOverlay ? 'drag-overlay' : ''} ${isDropTarget ? 'drop-target' : ''}`}
{...attributes}
{...listeners}
>
<div className="task-content">
<div className="task-title">{task.name}</div>
{/* {task.task_key && <div className="task-key">{task.task_key}</div>} */}
{task.assignees && task.assignees.length > 0 && (
<div className="task-assignees">
Assignees: {task.assignees.map(a => a.name).join(', ')}
</div>
)}
</div>
</div>
);
});
export default EnhancedKanbanTaskCard;