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

Merge branch 'release/v2.0.4-bug-fix' of https://github.com/Worklenz/worklenz into release/v2.0.4-bug-fix

Browse Source
This commit is contained in:
chamikaJ
2025-07-07 14:10:36 +05:30
parent 3887cc477d 6c03bf71c2
commit 9ec422c6e2
3 changed files with 358 additions and 312 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,6 +20,7 @@ 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';
import { checkTaskDependencyStatus } from '@/utils/check-task-dependency-status';
const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ projectId }) => {
const dispatch = useDispatch();
@@ -120,15 +121,19 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
setDragType('task');
e.dataTransfer.effectAllowed = 'move';
};
const handleTaskDragOver = (e: React.DragEvent, groupId: string, taskIdx: number) => {
const handleTaskDragOver = (e: React.DragEvent, groupId: string, taskIdx: number | null) => {
if (dragType !== 'task') return;
e.preventDefault();
if (draggedTaskId) {
setHoveredGroupId(groupId);
setHoveredTaskIdx(taskIdx);
}
if(taskIdx === null) {
setHoveredTaskIdx(0);
}else{
setHoveredTaskIdx(taskIdx);
};
const handleTaskDrop = (e: React.DragEvent, targetGroupId: string, targetTaskIdx: number) => {
};
const handleTaskDrop = async (e: React.DragEvent, targetGroupId: string, targetTaskIdx: number | null) => {
if (dragType !== 'task') return;
e.preventDefault();
if (!draggedTaskId || !draggedTaskGroupId || hoveredGroupId === null || hoveredTaskIdx === null) return;
@@ -138,10 +143,23 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
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];
if (groupBy === 'status' && movedTask.id) {
if (sourceGroup.id !== targetGroup.id) {
const canContinue = await checkTaskDependencyStatus(movedTask.id, targetGroupId);
if (!canContinue) {
alertService.error(
'Task is not completed',
'Please complete the task dependencies before proceeding'
);
return;
}
}
}
let insertIdx = hoveredTaskIdx;
// Handle same group reordering
@@ -235,6 +253,7 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
task: movedTask,
team_id: teamId,
});
}
setDraggedTaskId(null);

46
worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/KanbanGroup.tsx
View File

@@ -32,8 +32,8 @@ interface KanbanGroupProps {
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;
onTaskDragOver: (e: React.DragEvent, groupId: string, taskIdx: number | null) => void;
onTaskDrop: (e: React.DragEvent, groupId: string, taskIdx: number | null) => void;
hoveredTaskIdx: number | null;
hoveredGroupId: string | null;
}
@@ -229,7 +229,27 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
}, [showDropdown]);
return (
<div className="enhanced-kanban-group">
<div className="enhanced-kanban-group" style={{ position: 'relative' }}
>
{/* Background layer - z-index 0 */}
<div
className="enhanced-kanban-group-background"
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
border: `0.1px solid ${themeMode === 'dark' ? '#404040' : '#e0e0e0'}`,
borderRadius: '8px',
zIndex: 0
}}
onDragOver={e => { e.preventDefault(); onTaskDragOver(e, group.id, null); }}
onDrop={e => { e.preventDefault(); onTaskDrop(e, group.id, null); }}
/>
{/* Content layer - z-index 1 */}
<div style={{ position: 'relative', zIndex: 1 }}>
<div
className="enhanced-kanban-group-header"
style={{
@@ -263,8 +283,7 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
<input
ref={inputRef}
value={name}
className={`bg-transparent border-none outline-none text-sm font-semibold capitalize min-w-[185px] ${
themeMode === 'dark' ? 'text-gray-800' : 'text-gray-900'
className={`bg-transparent border-none outline-none text-sm font-semibold capitalize min-w-[185px] ${themeMode === 'dark' ? 'text-gray-800' : 'text-gray-900'
}`}
onChange={handleChange}
onBlur={handleBlur}
@@ -278,8 +297,7 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
/>
) : (
<div
className={`min-w-[185px] text-sm font-semibold capitalize truncate ${
themeMode === 'dark' ? 'text-gray-800' : 'text-gray-900'
className={`min-w-[185px] text-sm font-semibold capitalize truncate ${themeMode === 'dark' ? 'text-gray-800' : 'text-gray-900'
}`}
title={isEllipsisActive ? name : undefined}
onMouseDown={e => {
@@ -408,8 +426,7 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
<div className="flex justify-end gap-2">
<button
type="button"
className={`px-3 py-1.5 text-sm font-medium rounded border transition-colors ${
themeMode === 'dark'
className={`px-3 py-1.5 text-sm font-medium rounded border transition-colors ${themeMode === 'dark'
? 'border-gray-600 text-gray-300 hover:bg-gray-600'
: 'border-gray-300 text-gray-700 hover:bg-gray-50'
}`}
@@ -434,7 +451,7 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
)}
<div className="enhanced-kanban-group-tasks">
{/* Create card at top */}
{showNewCardTop && (isOwnerOrAdmin || isProjectManager) && (
{showNewCardTop && (
<EnhancedKanbanCreateTaskCard
sectionId={group.id}
setShowNewCard={setShowNewCardTop}
@@ -443,7 +460,7 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
)}
{/* If group is empty, render a drop zone */}
{group.tasks.length === 0 && !showNewCardTop && !showNewCardBottom &&(
{group.tasks.length === 0 && !showNewCardTop && !showNewCardBottom && (
<div
className="empty-drop-zone"
style={{
@@ -513,7 +530,7 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
))}
{/* Create card at bottom */}
{showNewCardBottom && (isOwnerOrAdmin || isProjectManager) && (
{showNewCardBottom && (
<EnhancedKanbanCreateTaskCard
sectionId={group.id}
setShowNewCard={setShowNewCardBottom}
@@ -522,7 +539,7 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
)}
{/* Footer Add Task Button */}
{(isOwnerOrAdmin || isProjectManager) && !showNewCardTop && !showNewCardBottom && group.tasks.length > 0 && (
{!showNewCardTop && !showNewCardBottom && group.tasks.length > 0 && (
<button
type="button"
className="h-10 w-full rounded-md border-2 border-dashed border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500 transition-colors flex items-center justify-center gap-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 mt-2"
@@ -545,8 +562,7 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
</div>
)}
</div>
</div>
</div>
);
});

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

@@ -203,16 +203,18 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
<>
{isDropIndicator && (
<div
style={{
onDragStart={e => onTaskDragStart(e, task.id!, groupId)}
onDragOver={e => onTaskDragOver(e, groupId, idx)}
onDrop={e => onTaskDrop(e, groupId, idx)}
>
<div className="w-full h-full bg-red-500"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>
</div>
)}
<div className="enhanced-kanban-task-card" style={{ background, color, display: 'block' }} >
<div
@@ -429,7 +431,16 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
</div>
</div>
</div>
{task.show_sub_tasks && (
<div
className="subtasks-container"
style={{
overflow: 'hidden',
transition: 'all 0.3s ease-in-out',
maxHeight: task.show_sub_tasks ? '500px' : '0px',
opacity: task.show_sub_tasks ? 1 : 0,
transform: task.show_sub_tasks ? 'translateY(0)' : 'translateY(-10px)',
}}
>
<div className="mt-2 border-t border-gray-100 dark:border-gray-700 pt-2">
{/* Loading state */}
{task.sub_tasks_loading && (
@@ -469,7 +480,7 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
<div className="py-2 text-xs text-gray-400 dark:text-gray-500">{t('noSubtasks', 'No subtasks')}</div>
)}
</div>
)}
</div>
</div>
</>
);