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';
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;
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 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 themeMode = useSelector((state: RootState) => state.themeReducer.mode);
const background = themeMode === 'dark' ? '#23272f' : '#fff';
const color = themeMode === 'dark' ? '#fff' : '#23272f';
return (
<>
{isDropIndicator && (
<div
style={{
height: 80,
margin: '8px 0',
background: themeMode === 'dark' ? '#2a2a2a' : '#f0f0f0',
borderRadius: 6,
border: `5px`
}}
/>
)}
<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 }}
>
<div className="task-content">
<div className="task-title">{task.name}</div>
<div className="task-key">{task.task_key}</div>
<div className="task-assignees">
{task.assignees?.map(a => a.name).join(', ')}
</div>
</div>
</div>
</>
);
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 }}
>
<div className="task-content">
<div className="task-title">{task.name}</div>
<div className="task-key">{task.task_key}</div>
<div className="task-assignees">
{task.assignees?.map(a => a.name).join(', ')}
</div>
</div>
</div>
</>
);
});
TaskCard.displayName = 'TaskCard';