bo/worklenz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(enhanced-kanban): clean up TaskCard component structure

Browse Source 
- Reformatted the TaskCard component for improved readability by adjusting indentation and spacing.
- Ensured consistent styling and structure for the drop indicator and task card elements.
- Maintained existing functionality while enhancing code clarity and maintainability.
This commit is contained in:
shancds
2025-07-03 14:08:09 +05:30
parent 8134c6af35
commit e84ab43b36
1 changed files with 51 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx
View File

@@ -4,59 +4,61 @@ import { RootState } from '@/app/store';
import { IProjectTask } from '@/types/project/projectTasksViewModel.types'; import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
interface TaskCardProps { interface TaskCardProps {
task: IProjectTask; task: IProjectTask;
onTaskDragStart: (e: React.DragEvent, taskId: string, groupId: string) => void; onTaskDragStart: (e: React.DragEvent, taskId: string, groupId: string) => void;
onTaskDragOver: (e: React.DragEvent, groupId: string, taskIdx: number) => void; onTaskDragOver: (e: React.DragEvent, groupId: string, taskIdx: number) => void;
onTaskDrop: (e: React.DragEvent, groupId: string, taskIdx: number) => void; onTaskDrop: (e: React.DragEvent, groupId: string, taskIdx: number) => void;
groupId: string; groupId: string;
isDropIndicator: boolean; isDropIndicator: boolean;
idx: number; idx: number;
} }
const TaskCard: React.FC<TaskCardProps> = memo(({ const TaskCard: React.FC<TaskCardProps> = memo(({
task, task,
onTaskDragStart, onTaskDragStart,
onTaskDragOver, onTaskDragOver,
onTaskDrop, onTaskDrop,
groupId, groupId,
isDropIndicator, isDropIndicator,
idx idx
}) => { }) => {
const themeMode = useSelector((state: RootState) => state.themeReducer.mode); const themeMode = useSelector((state: RootState) => state.themeReducer.mode);
const background = themeMode === 'dark' ? '#23272f' : '#fff'; const background = themeMode === 'dark' ? '#23272f' : '#fff';
const color = themeMode === 'dark' ? '#fff' : '#23272f'; const color = themeMode === 'dark' ? '#fff' : '#23272f';
return ( return (
<> <>
{isDropIndicator && ( {isDropIndicator && (
<div <div
style={{ style={{
height: 80, height: 80,
margin: '8px 0', background: themeMode === 'dark' ? '#2a2a2a' : '#f0f0f0',
background: themeMode === 'dark' ? '#2a2a2a' : '#f0f0f0', borderRadius: 6,
borderRadius: 6, border: `5px`
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 <div
onDragStart={e => onTaskDragStart(e, task.id!, groupId)} className="enhanced-kanban-task-card"
onDragOver={e => onTaskDragOver(e, groupId, idx)} draggable
onDrop={e => onTaskDrop(e, groupId, idx)} onDragStart={e => onTaskDragStart(e, task.id!, groupId)}
style={{ background, color }} onDragOver={e => onTaskDragOver(e, groupId, idx)}
> onDrop={e => onTaskDrop(e, groupId, idx)}
<div className="task-content"> style={{ background, color }}
<div className="task-title">{task.name}</div> >
<div className="task-key">{task.task_key}</div> <div className="task-content">
<div className="task-assignees"> <div className="task-title">{task.name}</div>
{task.assignees?.map(a => a.name).join(', ')} <div className="task-key">{task.task_key}</div>
</div> <div className="task-assignees">
</div> {task.assignees?.map(a => a.name).join(', ')}
</div> </div>
</> </div>
); </div>
</>
);
}); });
TaskCard.displayName = 'TaskCard'; TaskCard.displayName = 'TaskCard';