Merge branch 'release/v2.0.4-bug-fix' of https://github.com/Worklenz/worklenz into release/v2.0.4-bug-fix
This commit is contained in:
chamikaJ
@@ -20,6 +20,7 @@ import { statusApiService } from '@/api/taskAttributes/status/status.api.service
|
|||||||
import alertService from '@/services/alerts/alertService';
|
import alertService from '@/services/alerts/alertService';
|
||||||
import logger from '@/utils/errorLogger';
|
import logger from '@/utils/errorLogger';
|
||||||
import Skeleton from 'antd/es/skeleton/Skeleton';
|
import Skeleton from 'antd/es/skeleton/Skeleton';
|
||||||
|
import { checkTaskDependencyStatus } from '@/utils/check-task-dependency-status';
|
||||||
|
|
||||||
const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ projectId }) => {
|
const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ projectId }) => {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
@@ -120,15 +121,19 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
|
|||||||
setDragType('task');
|
setDragType('task');
|
||||||
e.dataTransfer.effectAllowed = 'move';
|
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;
|
if (dragType !== 'task') return;
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if (draggedTaskId) {
|
if (draggedTaskId) {
|
||||||
setHoveredGroupId(groupId);
|
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;
|
if (dragType !== 'task') return;
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if (!draggedTaskId || !draggedTaskGroupId || hoveredGroupId === null || hoveredTaskIdx === null) return;
|
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);
|
const targetGroup = taskGroups.find(g => g.id === targetGroupId);
|
||||||
if (!sourceGroup || !targetGroup) return;
|
if (!sourceGroup || !targetGroup) return;
|
||||||
|
|
||||||
|
|
||||||
const taskIdx = sourceGroup.tasks.findIndex(t => t.id === draggedTaskId);
|
const taskIdx = sourceGroup.tasks.findIndex(t => t.id === draggedTaskId);
|
||||||
if (taskIdx === -1) return;
|
if (taskIdx === -1) return;
|
||||||
|
|
||||||
const movedTask = sourceGroup.tasks[taskIdx];
|
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;
|
let insertIdx = hoveredTaskIdx;
|
||||||
|
|
||||||
// Handle same group reordering
|
// Handle same group reordering
|
||||||
@@ -235,6 +253,7 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
|
|||||||
task: movedTask,
|
task: movedTask,
|
||||||
team_id: teamId,
|
team_id: teamId,
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
setDraggedTaskId(null);
|
setDraggedTaskId(null);
|
||||||
|
|||||||
@@ -17,12 +17,12 @@ import { phasesApiService } from '@/api/taskAttributes/phases/phases.api.service
|
|||||||
import { ITaskPhase } from '@/types/tasks/taskPhase.types';
|
import { ITaskPhase } from '@/types/tasks/taskPhase.types';
|
||||||
import { useMixpanelTracking } from '@/hooks/useMixpanelTracking';
|
import { useMixpanelTracking } from '@/hooks/useMixpanelTracking';
|
||||||
import {
|
import {
|
||||||
deleteStatusToggleDrawer,
|
deleteStatusToggleDrawer,
|
||||||
seletedStatusCategory,
|
seletedStatusCategory,
|
||||||
} from '@/features/projects/status/DeleteStatusSlice';
|
} from '@/features/projects/status/DeleteStatusSlice';
|
||||||
import {
|
import {
|
||||||
fetchEnhancedKanbanGroups,
|
fetchEnhancedKanbanGroups,
|
||||||
IGroupBy,
|
IGroupBy,
|
||||||
} from '@/features/enhanced-kanban/enhanced-kanban.slice';
|
} from '@/features/enhanced-kanban/enhanced-kanban.slice';
|
||||||
|
|
||||||
|
|
||||||
@@ -32,8 +32,8 @@ interface KanbanGroupProps {
|
|||||||
onGroupDragOver: (e: React.DragEvent) => void;
|
onGroupDragOver: (e: React.DragEvent) => void;
|
||||||
onGroupDrop: (e: React.DragEvent, groupId: string) => void;
|
onGroupDrop: (e: React.DragEvent, groupId: string) => void;
|
||||||
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 | null) => void;
|
||||||
onTaskDrop: (e: React.DragEvent, groupId: string, taskIdx: number) => void;
|
onTaskDrop: (e: React.DragEvent, groupId: string, taskIdx: number | null) => void;
|
||||||
hoveredTaskIdx: number | null;
|
hoveredTaskIdx: number | null;
|
||||||
hoveredGroupId: string | null;
|
hoveredGroupId: string | null;
|
||||||
}
|
}
|
||||||
@@ -229,324 +229,340 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
|
|||||||
}, [showDropdown]);
|
}, [showDropdown]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="enhanced-kanban-group">
|
<div className="enhanced-kanban-group" style={{ position: 'relative' }}
|
||||||
|
>
|
||||||
|
{/* Background layer - z-index 0 */}
|
||||||
<div
|
<div
|
||||||
className="enhanced-kanban-group-header"
|
className="enhanced-kanban-group-background"
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: headerBackgroundColor,
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
border: `0.1px solid ${themeMode === 'dark' ? '#404040' : '#e0e0e0'}`,
|
||||||
|
borderRadius: '8px',
|
||||||
|
zIndex: 0
|
||||||
}}
|
}}
|
||||||
draggable
|
onDragOver={e => { e.preventDefault(); onTaskDragOver(e, group.id, null); }}
|
||||||
onDragStart={e => onGroupDragStart(e, group.id)}
|
onDrop={e => { e.preventDefault(); onTaskDrop(e, group.id, null); }}
|
||||||
onDragOver={onGroupDragOver}
|
/>
|
||||||
onDrop={e => onGroupDrop(e, group.id)}
|
|
||||||
>
|
{/* Content layer - z-index 1 */}
|
||||||
|
<div style={{ position: 'relative', zIndex: 1 }}>
|
||||||
<div
|
<div
|
||||||
className="flex items-center justify-between w-full font-semibold rounded-md"
|
className="enhanced-kanban-group-header"
|
||||||
onMouseEnter={() => setIsHover(true)}
|
style={{
|
||||||
onMouseLeave={() => setIsHover(false)}
|
backgroundColor: headerBackgroundColor,
|
||||||
|
}}
|
||||||
|
draggable
|
||||||
|
onDragStart={e => onGroupDragStart(e, group.id)}
|
||||||
|
onDragOver={onGroupDragOver}
|
||||||
|
onDrop={e => onGroupDrop(e, group.id)}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="flex items-center gap-2 cursor-pointer"
|
className="flex items-center justify-between w-full font-semibold rounded-md"
|
||||||
onClick={e => {
|
onMouseEnter={() => setIsHover(true)}
|
||||||
e.stopPropagation();
|
onMouseLeave={() => setIsHover(false)}
|
||||||
if ((isProjectManager || isOwnerOrAdmin) && group.name !== t('unmapped'))
|
|
||||||
setIsEditable(true);
|
|
||||||
}}
|
|
||||||
onMouseDown={e => {
|
|
||||||
e.stopPropagation();
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
{isLoading && (
|
<div
|
||||||
<div className="w-4 h-4 border-2 border-gray-300 border-t-blue-600 rounded-full animate-spin"></div>
|
className="flex items-center gap-2 cursor-pointer"
|
||||||
)}
|
onClick={e => {
|
||||||
{isEditable ? (
|
e.stopPropagation();
|
||||||
<input
|
if ((isProjectManager || isOwnerOrAdmin) && group.name !== t('unmapped'))
|
||||||
ref={inputRef}
|
setIsEditable(true);
|
||||||
value={name}
|
}}
|
||||||
className={`bg-transparent border-none outline-none text-sm font-semibold capitalize min-w-[185px] ${
|
onMouseDown={e => {
|
||||||
themeMode === 'dark' ? 'text-gray-800' : 'text-gray-900'
|
e.stopPropagation();
|
||||||
}`}
|
|
||||||
onChange={handleChange}
|
|
||||||
onBlur={handleBlur}
|
|
||||||
onKeyDown={handlePressEnter}
|
|
||||||
onMouseDown={e => {
|
|
||||||
e.stopPropagation();
|
|
||||||
}}
|
|
||||||
onClick={e => {
|
|
||||||
e.stopPropagation();
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div
|
|
||||||
className={`min-w-[185px] text-sm font-semibold capitalize truncate ${
|
|
||||||
themeMode === 'dark' ? 'text-gray-800' : 'text-gray-900'
|
|
||||||
}`}
|
|
||||||
title={isEllipsisActive ? name : undefined}
|
|
||||||
onMouseDown={e => {
|
|
||||||
e.stopPropagation();
|
|
||||||
e.preventDefault();
|
|
||||||
}}
|
|
||||||
onMouseUp={e => {
|
|
||||||
e.stopPropagation();
|
|
||||||
}}
|
|
||||||
onClick={e => {
|
|
||||||
e.stopPropagation();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{name} ({group.tasks.length})
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="w-7 h-7 flex items-center justify-center rounded-full hover:bg-black/10 transition-colors"
|
|
||||||
onClick={() => {
|
|
||||||
setShowNewCardTop(true);
|
|
||||||
setShowNewCardBottom(false);
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<svg className="w-4 h-4 text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
{isLoading && (
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
<div className="w-4 h-4 border-2 border-gray-300 border-t-blue-600 rounded-full animate-spin"></div>
|
||||||
</svg>
|
)}
|
||||||
</button>
|
{isEditable ? (
|
||||||
|
<input
|
||||||
{(isOwnerOrAdmin || isProjectManager) && name !== t('unmapped') && (
|
ref={inputRef}
|
||||||
<div className="relative" ref={dropdownRef}>
|
value={name}
|
||||||
<button
|
className={`bg-transparent border-none outline-none text-sm font-semibold capitalize min-w-[185px] ${themeMode === 'dark' ? 'text-gray-800' : 'text-gray-900'
|
||||||
type="button"
|
}`}
|
||||||
className="w-7 h-7 flex items-center justify-center rounded-full hover:bg-black/10 transition-colors"
|
onChange={handleChange}
|
||||||
onClick={() => setShowDropdown(!showDropdown)}
|
onBlur={handleBlur}
|
||||||
>
|
onKeyDown={handlePressEnter}
|
||||||
<svg className="w-4 h-4 text-gray-800 rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
onMouseDown={e => {
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
|
e.stopPropagation();
|
||||||
</svg>
|
}}
|
||||||
</button>
|
onClick={e => {
|
||||||
|
e.stopPropagation();
|
||||||
{showDropdown && (
|
}}
|
||||||
<div className="absolute right-0 top-full mt-1 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 z-50">
|
/>
|
||||||
<div className="py-1">
|
) : (
|
||||||
<button
|
<div
|
||||||
type="button"
|
className={`min-w-[185px] text-sm font-semibold capitalize truncate ${themeMode === 'dark' ? 'text-gray-800' : 'text-gray-900'
|
||||||
className="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
|
}`}
|
||||||
onClick={handleRename}
|
title={isEllipsisActive ? name : undefined}
|
||||||
>
|
onMouseDown={e => {
|
||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
e.stopPropagation();
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
e.preventDefault();
|
||||||
</svg>
|
}}
|
||||||
{t('rename')}
|
onMouseUp={e => {
|
||||||
</button>
|
e.stopPropagation();
|
||||||
|
}}
|
||||||
{groupBy === IGroupBy.STATUS && statusCategories && (
|
onClick={e => {
|
||||||
<div className="border-t border-gray-200 dark:border-gray-700">
|
e.stopPropagation();
|
||||||
<div className="px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wide">
|
|
||||||
{t('changeCategory')}
|
|
||||||
</div>
|
|
||||||
{statusCategories.map(status => (
|
|
||||||
<button
|
|
||||||
key={status.id}
|
|
||||||
type="button"
|
|
||||||
className="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
|
|
||||||
onClick={() => status.id && handleCategoryChange(status.id)}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="w-3 h-3 rounded-full"
|
|
||||||
style={{ backgroundColor: status.color_code }}
|
|
||||||
></div>
|
|
||||||
<span className={group.category_id === status.id ? 'font-bold' : ''}>
|
|
||||||
{status.name}
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{groupBy !== IGroupBy.PRIORITY && (
|
|
||||||
<div className="border-t border-gray-200 dark:border-gray-700">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2 text-red-600 dark:text-red-400"
|
|
||||||
onClick={e => {
|
|
||||||
e.stopPropagation();
|
|
||||||
handleDelete();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
|
||||||
</svg>
|
|
||||||
{t('delete')}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Simple Delete Confirmation */}
|
|
||||||
{showDeleteConfirm && (
|
|
||||||
<div className="fixed inset-0 bg-black bg-opacity-25 flex items-center justify-center z-50">
|
|
||||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 max-w-sm w-full mx-4">
|
|
||||||
<div className="p-4">
|
|
||||||
<div className="flex items-center gap-3 mb-3">
|
|
||||||
<div className="flex-shrink-0">
|
|
||||||
<svg className="w-5 h-5 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className={`text-base font-medium ${themeMode === 'dark' ? 'text-white' : 'text-gray-900'}`}>
|
|
||||||
{t('deleteConfirmationTitle')}
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<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'
|
|
||||||
? 'border-gray-600 text-gray-300 hover:bg-gray-600'
|
|
||||||
: 'border-gray-300 text-gray-700 hover:bg-gray-50'
|
|
||||||
}`}
|
|
||||||
onClick={() => setShowDeleteConfirm(false)}
|
|
||||||
>
|
|
||||||
{t('deleteConfirmationCancel')}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="px-3 py-1.5 text-sm font-medium text-white bg-red-600 border border-transparent rounded hover:bg-red-700 transition-colors"
|
|
||||||
onClick={() => {
|
|
||||||
handleDeleteSection();
|
|
||||||
setShowDeleteConfirm(false);
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{t('deleteConfirmationOk')}
|
{name} ({group.tasks.length})
|
||||||
</button>
|
</div>
|
||||||
</div>
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="w-7 h-7 flex items-center justify-center rounded-full hover:bg-black/10 transition-colors"
|
||||||
|
onClick={() => {
|
||||||
|
setShowNewCardTop(true);
|
||||||
|
setShowNewCardBottom(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<svg className="w-4 h-4 text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{(isOwnerOrAdmin || isProjectManager) && name !== t('unmapped') && (
|
||||||
|
<div className="relative" ref={dropdownRef}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="w-7 h-7 flex items-center justify-center rounded-full hover:bg-black/10 transition-colors"
|
||||||
|
onClick={() => setShowDropdown(!showDropdown)}
|
||||||
|
>
|
||||||
|
<svg className="w-4 h-4 text-gray-800 rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{showDropdown && (
|
||||||
|
<div className="absolute right-0 top-full mt-1 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 z-50">
|
||||||
|
<div className="py-1">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
|
||||||
|
onClick={handleRename}
|
||||||
|
>
|
||||||
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||||||
|
</svg>
|
||||||
|
{t('rename')}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{groupBy === IGroupBy.STATUS && statusCategories && (
|
||||||
|
<div className="border-t border-gray-200 dark:border-gray-700">
|
||||||
|
<div className="px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wide">
|
||||||
|
{t('changeCategory')}
|
||||||
|
</div>
|
||||||
|
{statusCategories.map(status => (
|
||||||
|
<button
|
||||||
|
key={status.id}
|
||||||
|
type="button"
|
||||||
|
className="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
|
||||||
|
onClick={() => status.id && handleCategoryChange(status.id)}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="w-3 h-3 rounded-full"
|
||||||
|
style={{ backgroundColor: status.color_code }}
|
||||||
|
></div>
|
||||||
|
<span className={group.category_id === status.id ? 'font-bold' : ''}>
|
||||||
|
{status.name}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{groupBy !== IGroupBy.PRIORITY && (
|
||||||
|
<div className="border-t border-gray-200 dark:border-gray-700">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2 text-red-600 dark:text-red-400"
|
||||||
|
onClick={e => {
|
||||||
|
e.stopPropagation();
|
||||||
|
handleDelete();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||||
|
</svg>
|
||||||
|
{t('delete')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
<div className="enhanced-kanban-group-tasks">
|
|
||||||
{/* Create card at top */}
|
|
||||||
{showNewCardTop && (isOwnerOrAdmin || isProjectManager) && (
|
|
||||||
<EnhancedKanbanCreateTaskCard
|
|
||||||
sectionId={group.id}
|
|
||||||
setShowNewCard={setShowNewCardTop}
|
|
||||||
position="top"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* If group is empty, render a drop zone */}
|
{/* Simple Delete Confirmation */}
|
||||||
{group.tasks.length === 0 && !showNewCardTop && !showNewCardBottom &&(
|
{showDeleteConfirm && (
|
||||||
<div
|
<div className="fixed inset-0 bg-black bg-opacity-25 flex items-center justify-center z-50">
|
||||||
className="empty-drop-zone"
|
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 max-w-sm w-full mx-4">
|
||||||
style={{
|
<div className="p-4">
|
||||||
padding: 8,
|
<div className="flex items-center gap-3 mb-3">
|
||||||
height: 500,
|
<div className="flex-shrink-0">
|
||||||
background: themeWiseColor(
|
<svg className="w-5 h-5 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
'linear-gradient( 180deg, #fafafa, rgba(245, 243, 243, 0))',
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
||||||
'linear-gradient( 180deg, #2a2b2d, rgba(42, 43, 45, 0))',
|
</svg>
|
||||||
themeMode
|
</div>
|
||||||
),
|
<div>
|
||||||
borderRadius: 6,
|
<h3 className={`text-base font-medium ${themeMode === 'dark' ? 'text-white' : 'text-gray-900'}`}>
|
||||||
display: 'flex',
|
{t('deleteConfirmationTitle')}
|
||||||
flexDirection: 'column',
|
</h3>
|
||||||
alignItems: 'center',
|
</div>
|
||||||
justifyContent: 'flex-start',
|
</div>
|
||||||
paddingTop: 8,
|
<div className="flex justify-end gap-2">
|
||||||
color: '#888',
|
<button
|
||||||
fontStyle: 'italic',
|
type="button"
|
||||||
}}
|
className={`px-3 py-1.5 text-sm font-medium rounded border transition-colors ${themeMode === 'dark'
|
||||||
onDragOver={e => { e.preventDefault(); onTaskDragOver(e, group.id, 0); }}
|
? 'border-gray-600 text-gray-300 hover:bg-gray-600'
|
||||||
onDrop={e => { e.preventDefault(); onTaskDrop(e, group.id, 0); }}
|
: 'border-gray-300 text-gray-700 hover:bg-gray-50'
|
||||||
>
|
}`}
|
||||||
{/* Drop indicator at the end of the group */}
|
onClick={() => setShowDeleteConfirm(false)}
|
||||||
{hoveredGroupId === group.id && hoveredTaskIdx === group.tasks.length && (
|
>
|
||||||
<div className="drop-preview-indicator">
|
{t('deleteConfirmationCancel')}
|
||||||
<div className="drop-line" />
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="px-3 py-1.5 text-sm font-medium text-white bg-red-600 border border-transparent rounded hover:bg-red-700 transition-colors"
|
||||||
|
onClick={() => {
|
||||||
|
handleDeleteSection();
|
||||||
|
setShowDeleteConfirm(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('deleteConfirmationOk')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
{(isOwnerOrAdmin || isProjectManager) && !showNewCardTop && !showNewCardBottom && (
|
|
||||||
<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"
|
|
||||||
onClick={() => {
|
|
||||||
setShowNewCardBottom(false);
|
|
||||||
setShowNewCardTop(true);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
|
||||||
</svg>
|
|
||||||
{t('addTask')}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
{/* Drop indicator at the top of the group */}
|
|
||||||
{hoveredGroupId === group.id && hoveredTaskIdx === 0 && (
|
|
||||||
<div className="drop-preview-indicator">
|
|
||||||
<div className="drop-line" />
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
<div className="enhanced-kanban-group-tasks">
|
||||||
|
{/* Create card at top */}
|
||||||
|
{showNewCardTop && (
|
||||||
|
<EnhancedKanbanCreateTaskCard
|
||||||
|
sectionId={group.id}
|
||||||
|
setShowNewCard={setShowNewCardTop}
|
||||||
|
position="top"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
{group.tasks.map((task, idx) => (
|
{/* If group is empty, render a drop zone */}
|
||||||
<TaskCard
|
{group.tasks.length === 0 && !showNewCardTop && !showNewCardBottom && (
|
||||||
key={task.id}
|
<div
|
||||||
task={task}
|
className="empty-drop-zone"
|
||||||
onTaskDragStart={onTaskDragStart}
|
style={{
|
||||||
onTaskDragOver={onTaskDragOver}
|
padding: 8,
|
||||||
onTaskDrop={onTaskDrop}
|
height: 500,
|
||||||
groupId={group.id}
|
background: themeWiseColor(
|
||||||
isDropIndicator={hoveredGroupId === group.id && hoveredTaskIdx === idx}
|
'linear-gradient( 180deg, #fafafa, rgba(245, 243, 243, 0))',
|
||||||
idx={idx}
|
'linear-gradient( 180deg, #2a2b2d, rgba(42, 43, 45, 0))',
|
||||||
/>
|
themeMode
|
||||||
))}
|
),
|
||||||
|
borderRadius: 6,
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'flex-start',
|
||||||
|
paddingTop: 8,
|
||||||
|
color: '#888',
|
||||||
|
fontStyle: 'italic',
|
||||||
|
}}
|
||||||
|
onDragOver={e => { e.preventDefault(); onTaskDragOver(e, group.id, 0); }}
|
||||||
|
onDrop={e => { e.preventDefault(); onTaskDrop(e, group.id, 0); }}
|
||||||
|
>
|
||||||
|
{/* Drop indicator at the end of the group */}
|
||||||
|
{hoveredGroupId === group.id && hoveredTaskIdx === group.tasks.length && (
|
||||||
|
<div className="drop-preview-indicator">
|
||||||
|
<div className="drop-line" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{(isOwnerOrAdmin || isProjectManager) && !showNewCardTop && !showNewCardBottom && (
|
||||||
|
<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"
|
||||||
|
onClick={() => {
|
||||||
|
setShowNewCardBottom(false);
|
||||||
|
setShowNewCardTop(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||||||
|
</svg>
|
||||||
|
{t('addTask')}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
{/* Create card at bottom */}
|
|
||||||
{showNewCardBottom && (isOwnerOrAdmin || isProjectManager) && (
|
|
||||||
<EnhancedKanbanCreateTaskCard
|
|
||||||
sectionId={group.id}
|
|
||||||
setShowNewCard={setShowNewCardBottom}
|
|
||||||
position="bottom"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Footer Add Task Button */}
|
{/* Drop indicator at the top of the group */}
|
||||||
{(isOwnerOrAdmin || isProjectManager) && !showNewCardTop && !showNewCardBottom && group.tasks.length > 0 && (
|
{hoveredGroupId === group.id && hoveredTaskIdx === 0 && (
|
||||||
<button
|
<div className="drop-preview-indicator">
|
||||||
type="button"
|
<div className="drop-line" />
|
||||||
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"
|
</div>
|
||||||
onClick={() => {
|
)}
|
||||||
setShowNewCardBottom(true);
|
|
||||||
setShowNewCardTop(false);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
|
||||||
</svg>
|
|
||||||
{t('addTask')}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Drop indicator at the end of the group */}
|
{group.tasks.map((task, idx) => (
|
||||||
{hoveredGroupId === group.id && hoveredTaskIdx === group.tasks.length && (
|
<TaskCard
|
||||||
<div className="drop-preview-indicator">
|
key={task.id}
|
||||||
<div className="drop-line" />
|
task={task}
|
||||||
</div>
|
onTaskDragStart={onTaskDragStart}
|
||||||
)}
|
onTaskDragOver={onTaskDragOver}
|
||||||
|
onTaskDrop={onTaskDrop}
|
||||||
|
groupId={group.id}
|
||||||
|
isDropIndicator={hoveredGroupId === group.id && hoveredTaskIdx === idx}
|
||||||
|
idx={idx}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Create card at bottom */}
|
||||||
|
{showNewCardBottom && (
|
||||||
|
<EnhancedKanbanCreateTaskCard
|
||||||
|
sectionId={group.id}
|
||||||
|
setShowNewCard={setShowNewCardBottom}
|
||||||
|
position="bottom"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Footer Add Task Button */}
|
||||||
|
{!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"
|
||||||
|
onClick={() => {
|
||||||
|
setShowNewCardBottom(true);
|
||||||
|
setShowNewCardTop(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||||||
|
</svg>
|
||||||
|
{t('addTask')}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Drop indicator at the end of the group */}
|
||||||
|
{hoveredGroupId === group.id && hoveredTaskIdx === group.tasks.length && (
|
||||||
|
<div className="drop-preview-indicator">
|
||||||
|
<div className="drop-line" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -203,16 +203,18 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
|
|||||||
<>
|
<>
|
||||||
{isDropIndicator && (
|
{isDropIndicator && (
|
||||||
<div
|
<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,
|
height: 80,
|
||||||
background: themeMode === 'dark' ? '#2a2a2a' : '#f0f0f0',
|
background: themeMode === 'dark' ? '#2a2a2a' : '#f0f0f0',
|
||||||
borderRadius: 6,
|
borderRadius: 6,
|
||||||
border: `5px`
|
border: `5px`
|
||||||
}}
|
}}></div>
|
||||||
onDragStart={e => onTaskDragStart(e, task.id!, groupId)}
|
</div>
|
||||||
onDragOver={e => onTaskDragOver(e, groupId, idx)}
|
|
||||||
onDrop={e => onTaskDrop(e, groupId, idx)}
|
|
||||||
/>
|
|
||||||
)}
|
)}
|
||||||
<div className="enhanced-kanban-task-card" style={{ background, color, display: 'block' }} >
|
<div className="enhanced-kanban-task-card" style={{ background, color, display: 'block' }} >
|
||||||
<div
|
<div
|
||||||
@@ -429,7 +431,16 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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">
|
<div className="mt-2 border-t border-gray-100 dark:border-gray-700 pt-2">
|
||||||
{/* Loading state */}
|
{/* Loading state */}
|
||||||
{task.sub_tasks_loading && (
|
{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 className="py-2 text-xs text-gray-400 dark:text-gray-500">{t('noSubtasks', 'No subtasks')}</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user