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:
@@ -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;
|
||||
Reference in New Issue
Block a user