Merge branch 'release-v2.1.4' of https://github.com/Worklenz/worklenz into feature/team-utilization
This commit is contained in:
chamiakJ
@@ -1,5 +1,4 @@
|
||||
import React, { useMemo, useCallback, useState } from 'react';
|
||||
import { useDroppable } from '@dnd-kit/core';
|
||||
// @ts-ignore: Heroicons module types
|
||||
import {
|
||||
ChevronDownIcon,
|
||||
@@ -382,24 +381,12 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({
|
||||
t,
|
||||
]);
|
||||
|
||||
// Make the group header droppable
|
||||
const { isOver, setNodeRef } = useDroppable({
|
||||
id: group.id,
|
||||
data: {
|
||||
type: 'group',
|
||||
group,
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="relative flex items-center">
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
className={`inline-flex w-max items-center px-1 cursor-pointer hover:opacity-80 transition-opacity duration-200 ease-in-out border-t border-b border-gray-200 dark:border-gray-700 rounded-t-md pr-2 ${
|
||||
isOver ? 'ring-2 ring-blue-400 ring-opacity-50' : ''
|
||||
}`}
|
||||
className="inline-flex w-max items-center px-1 cursor-pointer hover:opacity-80 transition-opacity duration-200 ease-in-out border-t border-b border-gray-200 dark:border-gray-700 rounded-t-md pr-2"
|
||||
style={{
|
||||
backgroundColor: isOver ? `${headerBackgroundColor}dd` : headerBackgroundColor,
|
||||
backgroundColor: headerBackgroundColor,
|
||||
color: headerTextColor,
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
|
||||
@@ -9,8 +9,9 @@ import {
|
||||
KeyboardSensor,
|
||||
TouchSensor,
|
||||
closestCenter,
|
||||
useDroppable,
|
||||
Modifier,
|
||||
} from '@dnd-kit/core';
|
||||
import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
|
||||
import {
|
||||
SortableContext,
|
||||
verticalListSortingStrategy,
|
||||
@@ -67,109 +68,132 @@ import TaskListSkeleton from './components/TaskListSkeleton';
|
||||
import ConvertToSubtaskDrawer from '@/components/task-list-common/convert-to-subtask-drawer/convert-to-subtask-drawer';
|
||||
import EmptyListPlaceholder from '@/components/EmptyListPlaceholder';
|
||||
|
||||
// Empty Group Drop Zone Component
|
||||
const EmptyGroupDropZone: React.FC<{
|
||||
groupId: string;
|
||||
visibleColumns: any[];
|
||||
t: (key: string) => string;
|
||||
}> = ({ groupId, visibleColumns, t }) => {
|
||||
const { setNodeRef, isOver, active } = useDroppable({
|
||||
id: `empty-group-${groupId}`,
|
||||
data: {
|
||||
type: 'group',
|
||||
groupId: groupId,
|
||||
isEmpty: true,
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
className={`relative w-full transition-colors duration-200 ${
|
||||
isOver && active ? 'bg-blue-50 dark:bg-blue-900/20' : ''
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className="flex items-center min-w-max px-1 border-t border-b border-gray-200 dark:border-gray-700"
|
||||
style={{ height: '40px' }}
|
||||
>
|
||||
{visibleColumns.map((column, index) => {
|
||||
const emptyColumnStyle = {
|
||||
width: column.width,
|
||||
flexShrink: 0,
|
||||
};
|
||||
|
||||
// Show text in the title column
|
||||
if (column.id === 'title') {
|
||||
return (
|
||||
<div
|
||||
key={`empty-${column.id}`}
|
||||
className="flex items-center pl-1"
|
||||
style={emptyColumnStyle}
|
||||
>
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">
|
||||
No tasks in this group
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`empty-${column.id}`}
|
||||
className="border-r border-gray-200 dark:border-gray-700"
|
||||
style={emptyColumnStyle}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{isOver && active && (
|
||||
<div className="absolute inset-0 border-2 border-dashed border-blue-400 dark:border-blue-500 rounded-md pointer-events-none" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Placeholder Drop Indicator Component
|
||||
const PlaceholderDropIndicator: React.FC<{
|
||||
isVisible: boolean;
|
||||
visibleColumns: any[];
|
||||
}> = ({ isVisible, visibleColumns }) => {
|
||||
// Drop Spacer Component - creates space between tasks when dragging
|
||||
const DropSpacer: React.FC<{ isVisible: boolean; visibleColumns: any[]; isDarkMode?: boolean }> = ({
|
||||
isVisible,
|
||||
visibleColumns,
|
||||
isDarkMode = false
|
||||
}) => {
|
||||
if (!isVisible) return null;
|
||||
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex items-center min-w-max px-1 border-2 border-dashed border-blue-400 dark:border-blue-500 bg-blue-50 dark:bg-blue-900/20 rounded-md mx-1 my-1 transition-all duration-200 ease-in-out"
|
||||
style={{ minWidth: 'max-content', height: '40px' }}
|
||||
<div
|
||||
className="flex items-center min-w-max px-1 border-2 border-dashed border-blue-400 dark:border-blue-500 bg-blue-50 dark:bg-blue-900/20 transition-all duration-200 ease-in-out"
|
||||
style={{
|
||||
height: isVisible ? '40px' : '0px',
|
||||
opacity: isVisible ? 1 : 0,
|
||||
marginTop: isVisible ? '2px' : '0px',
|
||||
marginBottom: isVisible ? '2px' : '0px',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{visibleColumns.map((column, index) => {
|
||||
// Calculate left position for sticky columns
|
||||
let leftPosition = 0;
|
||||
if (column.isSticky) {
|
||||
for (let i = 0; i < index; i++) {
|
||||
const prevColumn = visibleColumns[i];
|
||||
if (prevColumn.isSticky) {
|
||||
leftPosition += parseInt(prevColumn.width.replace('px', ''));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const columnStyle = {
|
||||
width: column.width,
|
||||
flexShrink: 0,
|
||||
...(column.isSticky && {
|
||||
position: 'sticky' as const,
|
||||
left: leftPosition,
|
||||
zIndex: 10,
|
||||
backgroundColor: 'inherit', // Inherit from parent spacer
|
||||
}),
|
||||
};
|
||||
|
||||
if (column.id === 'title') {
|
||||
return (
|
||||
<div
|
||||
key={`spacer-${column.id}`}
|
||||
className="flex items-center pl-1 border-r border-blue-300 dark:border-blue-600"
|
||||
style={columnStyle}
|
||||
>
|
||||
<span className="text-xs text-blue-600 dark:text-blue-400 font-medium">
|
||||
Drop here
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`placeholder-${column.id}`}
|
||||
className="flex items-center justify-center h-full"
|
||||
key={`spacer-${column.id}`}
|
||||
className="border-r border-blue-300 dark:border-blue-600"
|
||||
style={columnStyle}
|
||||
>
|
||||
{/* Show "Drop task here" message in the title column */}
|
||||
{column.id === 'title' && (
|
||||
<div className="text-xs text-blue-600 dark:text-blue-400 font-medium opacity-75">
|
||||
Drop task here
|
||||
</div>
|
||||
)}
|
||||
{/* Show subtle placeholder content in other columns */}
|
||||
{column.id !== 'title' && column.id !== 'dragHandle' && (
|
||||
<div className="w-full h-4 mx-1 bg-white dark:bg-gray-700 rounded opacity-50" />
|
||||
)}
|
||||
</div>
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Empty Group Message Component
|
||||
const EmptyGroupMessage: React.FC<{ visibleColumns: any[]; isDarkMode?: boolean }> = ({
|
||||
visibleColumns,
|
||||
isDarkMode = false
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex items-center min-w-max px-1 border-b border-gray-200 dark:border-gray-700" style={{ height: '40px' }}>
|
||||
{visibleColumns.map((column, index) => {
|
||||
// Calculate left position for sticky columns
|
||||
let leftPosition = 0;
|
||||
if (column.isSticky) {
|
||||
for (let i = 0; i < index; i++) {
|
||||
const prevColumn = visibleColumns[i];
|
||||
if (prevColumn.isSticky) {
|
||||
leftPosition += parseInt(prevColumn.width.replace('px', ''));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const emptyColumnStyle = {
|
||||
width: column.width,
|
||||
flexShrink: 0,
|
||||
...(column.isSticky && {
|
||||
position: 'sticky' as const,
|
||||
left: leftPosition,
|
||||
zIndex: 10,
|
||||
backgroundColor: 'inherit', // Inherit from parent container
|
||||
}),
|
||||
};
|
||||
|
||||
// Show text in the title column
|
||||
if (column.id === 'title') {
|
||||
return (
|
||||
<div
|
||||
key={`empty-${column.id}`}
|
||||
className="flex items-center pl-1 border-r border-gray-200 dark:border-gray-700"
|
||||
style={emptyColumnStyle}
|
||||
>
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400 italic">
|
||||
No tasks in this group
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`empty-${column.id}`}
|
||||
className="border-r border-gray-200 dark:border-gray-700"
|
||||
style={emptyColumnStyle}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
// Hooks and utilities
|
||||
import { useTaskSocketHandlers } from '@/hooks/useTaskSocketHandlers';
|
||||
import { useSocket } from '@/socket/socketContext';
|
||||
@@ -211,7 +235,7 @@ const TaskListV2Section: React.FC = () => {
|
||||
|
||||
// State hooks
|
||||
const [initializedFromDatabase, setInitializedFromDatabase] = useState(false);
|
||||
const [addTaskRows, setAddTaskRows] = useState<{ [groupId: string]: string[] }>({});
|
||||
const [addTaskRows, setAddTaskRows] = useState<{[groupId: string]: string[]}>({});
|
||||
|
||||
// Configure sensors for drag and drop
|
||||
const sensors = useSensors(
|
||||
@@ -232,7 +256,7 @@ const TaskListV2Section: React.FC = () => {
|
||||
);
|
||||
|
||||
// Custom hooks
|
||||
const { activeId, overId, handleDragStart, handleDragOver, handleDragEnd } = useDragAndDrop(
|
||||
const { activeId, overId, dropPosition, handleDragStart, handleDragOver, handleDragEnd } = useDragAndDrop(
|
||||
allTasks,
|
||||
groups
|
||||
);
|
||||
@@ -453,17 +477,17 @@ const TaskListV2Section: React.FC = () => {
|
||||
const handleTaskAdded = useCallback((rowId: string) => {
|
||||
// Task is now added in real-time via socket, no need to refetch
|
||||
// The global socket handler will handle the real-time update
|
||||
|
||||
|
||||
// Find the group this row belongs to
|
||||
const groupId = rowId.split('-')[2]; // Extract from rowId format: add-task-{groupId}-{index}
|
||||
|
||||
|
||||
// Add a new add task row to this group
|
||||
setAddTaskRows(prev => {
|
||||
const currentRows = prev[groupId] || [];
|
||||
const newRowId = `add-task-${groupId}-${currentRows.length + 1}`;
|
||||
return {
|
||||
...prev,
|
||||
[groupId]: [...currentRows, newRowId],
|
||||
[groupId]: [...currentRows, newRowId]
|
||||
};
|
||||
});
|
||||
}, []);
|
||||
@@ -493,7 +517,7 @@ const TaskListV2Section: React.FC = () => {
|
||||
|
||||
// Get add task rows for this group
|
||||
const groupAddRows = addTaskRows[group.id] || [];
|
||||
const addTaskItems = !isCurrentGroupCollapsed
|
||||
const addTaskItems = !isCurrentGroupCollapsed
|
||||
? [
|
||||
// Default add task row
|
||||
{
|
||||
@@ -516,7 +540,7 @@ const TaskListV2Section: React.FC = () => {
|
||||
projectId: urlProjectId,
|
||||
rowId: rowId,
|
||||
autoFocus: index === groupAddRows.length - 1, // Auto-focus the latest row
|
||||
})),
|
||||
}))
|
||||
]
|
||||
: [];
|
||||
|
||||
@@ -545,6 +569,7 @@ const TaskListV2Section: React.FC = () => {
|
||||
return virtuosoGroups.flatMap(group => group.tasks);
|
||||
}, [virtuosoGroups]);
|
||||
|
||||
|
||||
// Render functions
|
||||
const renderGroup = useCallback(
|
||||
(groupIndex: number) => {
|
||||
@@ -566,12 +591,12 @@ const TaskListV2Section: React.FC = () => {
|
||||
projectId={urlProjectId || ''}
|
||||
/>
|
||||
{isGroupEmpty && !isGroupCollapsed && (
|
||||
<EmptyGroupDropZone groupId={group.id} visibleColumns={visibleColumns} t={t} />
|
||||
<EmptyGroupMessage visibleColumns={visibleColumns} isDarkMode={isDarkMode} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
[virtuosoGroups, collapsedGroups, handleGroupCollapse, visibleColumns, t]
|
||||
[virtuosoGroups, collapsedGroups, handleGroupCollapse, visibleColumns, t, isDarkMode]
|
||||
);
|
||||
|
||||
const renderTask = useCallback(
|
||||
@@ -612,19 +637,40 @@ const TaskListV2Section: React.FC = () => {
|
||||
const renderColumnHeaders = useCallback(
|
||||
() => (
|
||||
<div
|
||||
className="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700"
|
||||
style={{ width: '100%', minWidth: 'max-content' }}
|
||||
className="border-b border-gray-200 dark:border-gray-700"
|
||||
style={{
|
||||
width: '100%',
|
||||
minWidth: 'max-content',
|
||||
backgroundColor: isDarkMode ? '#141414' : '#f9fafb'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="flex items-center px-1 py-3 w-full"
|
||||
style={{ minWidth: 'max-content', height: '44px' }}
|
||||
>
|
||||
{visibleColumns.map((column, index) => {
|
||||
// Calculate left position for sticky columns
|
||||
let leftPosition = 0;
|
||||
if (column.isSticky) {
|
||||
for (let i = 0; i < index; i++) {
|
||||
const prevColumn = visibleColumns[i];
|
||||
if (prevColumn.isSticky) {
|
||||
leftPosition += parseInt(prevColumn.width.replace('px', ''));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const columnStyle: ColumnStyle = {
|
||||
width: column.width,
|
||||
flexShrink: 0,
|
||||
...((column as any).minWidth && { minWidth: (column as any).minWidth }),
|
||||
...((column as any).maxWidth && { maxWidth: (column as any).maxWidth }),
|
||||
...(column.isSticky && {
|
||||
position: 'sticky' as const,
|
||||
left: leftPosition,
|
||||
zIndex: 15,
|
||||
backgroundColor: isDarkMode ? '#141414' : '#f9fafb', // custom dark header : bg-gray-50
|
||||
}),
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -701,9 +747,9 @@ const TaskListV2Section: React.FC = () => {
|
||||
color: '#fbc84c69',
|
||||
actualCount: 0,
|
||||
count: 1, // For the add task row
|
||||
startIndex: 0,
|
||||
startIndex: 0
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
@@ -738,7 +784,7 @@ const TaskListV2Section: React.FC = () => {
|
||||
>
|
||||
{renderColumnHeaders()}
|
||||
</div>
|
||||
|
||||
|
||||
<div style={{ minWidth: 'max-content' }}>
|
||||
<div className="mt-2">
|
||||
<TaskGroupHeader
|
||||
@@ -770,7 +816,7 @@ const TaskListV2Section: React.FC = () => {
|
||||
</DndContext>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
// For other groupings, show the empty state message
|
||||
return (
|
||||
<div className="flex flex-col bg-white dark:bg-gray-900 h-full">
|
||||
@@ -789,13 +835,25 @@ const TaskListV2Section: React.FC = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragStart={handleDragStart}
|
||||
onDragOver={handleDragOver}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<>
|
||||
{/* CSS for sticky column hover effects */}
|
||||
<style>
|
||||
{`
|
||||
.hover\\:bg-gray-50:hover .sticky-column-hover,
|
||||
.dark .hover\\:bg-gray-800:hover .sticky-column-hover {
|
||||
background-color: var(--hover-bg) !important;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragStart={handleDragStart}
|
||||
onDragOver={handleDragOver}
|
||||
onDragEnd={handleDragEnd}
|
||||
modifiers={[restrictToVerticalAxis]}
|
||||
>
|
||||
<div className="flex flex-col bg-white dark:bg-gray-900 h-full overflow-hidden">
|
||||
{/* Table Container */}
|
||||
<div
|
||||
@@ -839,63 +897,31 @@ const TaskListV2Section: React.FC = () => {
|
||||
{renderGroup(groupIndex)}
|
||||
|
||||
{/* Group Tasks */}
|
||||
{!collapsedGroups.has(group.id) &&
|
||||
(group.tasks.length > 0
|
||||
? group.tasks.map((task, taskIndex) => {
|
||||
const globalTaskIndex =
|
||||
virtuosoGroups
|
||||
.slice(0, groupIndex)
|
||||
.reduce((sum, g) => sum + g.count, 0) + taskIndex;
|
||||
{!collapsedGroups.has(group.id) && (
|
||||
group.tasks.length > 0 ? (
|
||||
group.tasks.map((task, taskIndex) => {
|
||||
const globalTaskIndex =
|
||||
virtuosoGroups.slice(0, groupIndex).reduce((sum, g) => sum + g.count, 0) +
|
||||
taskIndex;
|
||||
|
||||
// Check if this is the first actual task in the group (not AddTaskRow)
|
||||
const isFirstTaskInGroup = taskIndex === 0 && !('isAddTaskRow' in task);
|
||||
// Check if this is the first actual task in the group (not AddTaskRow)
|
||||
const isFirstTaskInGroup = taskIndex === 0 && !('isAddTaskRow' in task);
|
||||
|
||||
// Check if we should show drop spacer
|
||||
const isOverThisTask = activeId && overId === task.id && !('isAddTaskRow' in task);
|
||||
const showDropSpacerBefore = isOverThisTask && dropPosition === 'before';
|
||||
const showDropSpacerAfter = isOverThisTask && dropPosition === 'after';
|
||||
|
||||
// Check if we should show drop indicators
|
||||
const isTaskBeingDraggedOver = overId === task.id;
|
||||
const isGroupBeingDraggedOver = overId === group.id;
|
||||
const isFirstTaskInGroupBeingDraggedOver =
|
||||
isFirstTaskInGroup && isTaskBeingDraggedOver;
|
||||
|
||||
return (
|
||||
<div key={task.id || `add-task-${group.id}-${taskIndex}`}>
|
||||
{/* Placeholder drop indicator before first task in group */}
|
||||
{isFirstTaskInGroupBeingDraggedOver && (
|
||||
<PlaceholderDropIndicator
|
||||
isVisible={true}
|
||||
visibleColumns={visibleColumns}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Placeholder drop indicator between tasks */}
|
||||
{isTaskBeingDraggedOver && !isFirstTaskInGroup && (
|
||||
<PlaceholderDropIndicator
|
||||
isVisible={true}
|
||||
visibleColumns={visibleColumns}
|
||||
/>
|
||||
)}
|
||||
|
||||
{renderTask(globalTaskIndex, isFirstTaskInGroup)}
|
||||
|
||||
{/* Placeholder drop indicator at end of group when dragging over group */}
|
||||
{isGroupBeingDraggedOver &&
|
||||
taskIndex === group.tasks.length - 1 && (
|
||||
<PlaceholderDropIndicator
|
||||
isVisible={true}
|
||||
visibleColumns={visibleColumns}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
: // Handle empty groups with placeholder drop indicator
|
||||
overId === group.id && (
|
||||
<div style={{ minWidth: 'max-content' }}>
|
||||
<PlaceholderDropIndicator
|
||||
isVisible={true}
|
||||
visibleColumns={visibleColumns}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
return (
|
||||
<div key={task.id || `add-task-${group.id}-${taskIndex}`}>
|
||||
{showDropSpacerBefore && <DropSpacer isVisible={true} visibleColumns={visibleColumns} isDarkMode={isDarkMode} />}
|
||||
{renderTask(globalTaskIndex, isFirstTaskInGroup)}
|
||||
{showDropSpacerAfter && <DropSpacer isVisible={true} visibleColumns={visibleColumns} isDarkMode={isDarkMode} />}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : null
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -904,15 +930,15 @@ const TaskListV2Section: React.FC = () => {
|
||||
</div>
|
||||
|
||||
{/* Drag Overlay */}
|
||||
<DragOverlay dropAnimation={{ duration: 200, easing: 'ease-in-out' }}>
|
||||
<DragOverlay dropAnimation={{ duration: 200, easing: 'cubic-bezier(0.18, 0.67, 0.6, 1.22)' }}>
|
||||
{activeId ? (
|
||||
<div
|
||||
className="bg-white dark:bg-gray-800 shadow-lg rounded-md border border-blue-400 dark:border-blue-500 opacity-90"
|
||||
<div
|
||||
className="bg-white dark:bg-gray-800 shadow-2xl rounded-lg border-2 border-blue-500 dark:border-blue-400 opacity-95"
|
||||
style={{ width: visibleColumns.find(col => col.id === 'title')?.width || '300px' }}
|
||||
>
|
||||
<div className="px-3 py-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<HolderOutlined className="text-gray-400 dark:text-gray-500 text-xs" />
|
||||
<div className="px-4 py-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<HolderOutlined className="text-blue-500 dark:text-blue-400 text-sm" />
|
||||
<div className="text-sm font-medium text-gray-900 dark:text-white truncate flex-1">
|
||||
{allTasks.find(task => task.id === activeId)?.name ||
|
||||
allTasks.find(task => task.id === activeId)?.title ||
|
||||
@@ -959,12 +985,13 @@ const TaskListV2Section: React.FC = () => {
|
||||
|
||||
{/* Custom Column Modal */}
|
||||
{createPortal(<CustomColumnModal />, document.body, 'custom-column-modal')}
|
||||
|
||||
|
||||
{/* Convert To Subtask Drawer */}
|
||||
{createPortal(<ConvertToSubtaskDrawer />, document.body, 'convert-to-subtask-drawer')}
|
||||
</div>
|
||||
</DndContext>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TaskListV2Section;
|
||||
export default TaskListV2Section;
|
||||
@@ -27,116 +27,134 @@ interface TaskRowProps {
|
||||
depth?: number;
|
||||
}
|
||||
|
||||
const TaskRow: React.FC<TaskRowProps> = memo(
|
||||
({
|
||||
taskId,
|
||||
projectId,
|
||||
visibleColumns,
|
||||
isSubtask = false,
|
||||
isFirstInGroup = false,
|
||||
updateTaskCustomColumnValue,
|
||||
depth = 0,
|
||||
}) => {
|
||||
// Get task data and selection state from Redux
|
||||
const task = useAppSelector(state => selectTaskById(state, taskId));
|
||||
const isSelected = useAppSelector(state => selectIsTaskSelected(state, taskId));
|
||||
const themeMode = useAppSelector(state => state.themeReducer.mode);
|
||||
const isDarkMode = themeMode === 'dark';
|
||||
const TaskRow: React.FC<TaskRowProps> = memo(({
|
||||
taskId,
|
||||
projectId,
|
||||
visibleColumns,
|
||||
isSubtask = false,
|
||||
isFirstInGroup = false,
|
||||
updateTaskCustomColumnValue,
|
||||
depth = 0
|
||||
}) => {
|
||||
// Get task data and selection state from Redux
|
||||
const task = useAppSelector(state => selectTaskById(state, taskId));
|
||||
const isSelected = useAppSelector(state => selectIsTaskSelected(state, taskId));
|
||||
const themeMode = useAppSelector(state => state.themeReducer.mode);
|
||||
const isDarkMode = themeMode === 'dark';
|
||||
|
||||
// Early return if task is not found
|
||||
if (!task) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Use extracted hooks for state management
|
||||
const {
|
||||
activeDatePicker,
|
||||
setActiveDatePicker,
|
||||
editTaskName,
|
||||
setEditTaskName,
|
||||
taskName,
|
||||
setTaskName,
|
||||
taskDisplayName,
|
||||
convertedTask,
|
||||
formattedDates,
|
||||
dateValues,
|
||||
labelsAdapter,
|
||||
} = useTaskRowState(task);
|
||||
|
||||
const { handleCheckboxChange, handleTaskNameSave, handleTaskNameEdit } = useTaskRowActions({
|
||||
task,
|
||||
taskId,
|
||||
taskName,
|
||||
editTaskName,
|
||||
setEditTaskName,
|
||||
});
|
||||
|
||||
// Drag and drop functionality - only enable for parent tasks
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
||||
id: task.id,
|
||||
data: {
|
||||
type: 'task',
|
||||
task,
|
||||
},
|
||||
disabled: isSubtask, // Disable drag and drop for subtasks
|
||||
});
|
||||
|
||||
// Use extracted column renderer hook
|
||||
const { renderColumn } = useTaskRowColumns({
|
||||
task,
|
||||
projectId,
|
||||
isSubtask,
|
||||
isSelected,
|
||||
isDarkMode,
|
||||
visibleColumns,
|
||||
updateTaskCustomColumnValue,
|
||||
taskDisplayName,
|
||||
convertedTask,
|
||||
formattedDates,
|
||||
dateValues,
|
||||
labelsAdapter,
|
||||
activeDatePicker,
|
||||
setActiveDatePicker,
|
||||
editTaskName,
|
||||
taskName,
|
||||
setEditTaskName,
|
||||
setTaskName,
|
||||
handleCheckboxChange,
|
||||
handleTaskNameSave,
|
||||
handleTaskNameEdit,
|
||||
attributes,
|
||||
listeners,
|
||||
depth,
|
||||
});
|
||||
|
||||
// Memoize style object to prevent unnecessary re-renders
|
||||
const style = useMemo(
|
||||
() => ({
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
opacity: isDragging ? 0 : 1, // Completely hide the original task while dragging
|
||||
}),
|
||||
[transform, transition, isDragging]
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={{ ...style, height: '40px' }}
|
||||
className={`flex items-center min-w-max px-1 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 ${
|
||||
isFirstInGroup ? 'border-t border-gray-200 dark:border-gray-700' : ''
|
||||
} ${isDragging ? 'shadow-lg border border-blue-300' : ''}`}
|
||||
>
|
||||
{visibleColumns.map((column, index) => (
|
||||
<React.Fragment key={column.id}>
|
||||
{renderColumn(column.id, column.width, column.isSticky, index)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
// Early return if task is not found
|
||||
if (!task) {
|
||||
return null;
|
||||
}
|
||||
);
|
||||
|
||||
// Use extracted hooks for state management
|
||||
const {
|
||||
activeDatePicker,
|
||||
setActiveDatePicker,
|
||||
editTaskName,
|
||||
setEditTaskName,
|
||||
taskName,
|
||||
setTaskName,
|
||||
taskDisplayName,
|
||||
convertedTask,
|
||||
formattedDates,
|
||||
dateValues,
|
||||
labelsAdapter,
|
||||
} = useTaskRowState(task);
|
||||
|
||||
const {
|
||||
handleCheckboxChange,
|
||||
handleTaskNameSave,
|
||||
handleTaskNameEdit,
|
||||
} = useTaskRowActions({
|
||||
task,
|
||||
taskId,
|
||||
taskName,
|
||||
editTaskName,
|
||||
setEditTaskName,
|
||||
});
|
||||
|
||||
// Drag and drop functionality - only enable for parent tasks
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging, isOver } = useSortable({
|
||||
id: task.id,
|
||||
data: {
|
||||
type: 'task',
|
||||
task,
|
||||
},
|
||||
disabled: isSubtask, // Disable drag and drop for subtasks
|
||||
});
|
||||
|
||||
// Use extracted column renderer hook
|
||||
const { renderColumn } = useTaskRowColumns({
|
||||
task,
|
||||
projectId,
|
||||
isSubtask,
|
||||
isSelected,
|
||||
isDarkMode,
|
||||
visibleColumns,
|
||||
updateTaskCustomColumnValue,
|
||||
taskDisplayName,
|
||||
convertedTask,
|
||||
formattedDates,
|
||||
dateValues,
|
||||
labelsAdapter,
|
||||
activeDatePicker,
|
||||
setActiveDatePicker,
|
||||
editTaskName,
|
||||
taskName,
|
||||
setEditTaskName,
|
||||
setTaskName,
|
||||
handleCheckboxChange,
|
||||
handleTaskNameSave,
|
||||
handleTaskNameEdit,
|
||||
attributes,
|
||||
listeners,
|
||||
depth,
|
||||
});
|
||||
|
||||
// Memoize style object to prevent unnecessary re-renders
|
||||
const style = useMemo(() => ({
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
opacity: isDragging ? 0.3 : 1, // Make original task slightly transparent while dragging
|
||||
}), [transform, transition, isDragging]);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={{ ...style, height: '40px' }}
|
||||
className={`flex items-center min-w-max px-1 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors ${
|
||||
isFirstInGroup ? 'border-t border-gray-200 dark:border-gray-700' : ''
|
||||
} ${
|
||||
isDragging ? 'opacity-50' : ''
|
||||
} ${
|
||||
isOver && !isDragging ? 'bg-blue-50 dark:bg-blue-900/20' : ''
|
||||
}`}
|
||||
>
|
||||
{visibleColumns.map((column, index) => {
|
||||
// Calculate background state for sticky columns - custom dark mode colors
|
||||
const rowBackgrounds = {
|
||||
normal: isDarkMode ? '#1e1e1e' : '#ffffff', // custom dark : bg-white
|
||||
hover: isDarkMode ? '#1f2937' : '#f9fafb', // slightly lighter dark : bg-gray-50
|
||||
dragOver: isDarkMode ? '#1e3a8a33' : '#dbeafe', // bg-blue-900/20 : bg-blue-50
|
||||
};
|
||||
|
||||
let currentBg = rowBackgrounds.normal;
|
||||
if (isOver && !isDragging) {
|
||||
currentBg = rowBackgrounds.dragOver;
|
||||
}
|
||||
// Note: hover state is handled by CSS, so we'll use a CSS custom property
|
||||
|
||||
return (
|
||||
<React.Fragment key={column.id}>
|
||||
{renderColumn(column.id, column.width, column.isSticky, index, currentBg, rowBackgrounds)}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
TaskRow.displayName = 'TaskRow';
|
||||
|
||||
export default TaskRow;
|
||||
export default TaskRow;
|
||||
@@ -19,10 +19,11 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
|
||||
const currentSession = useAuthService().getCurrentSession();
|
||||
const [activeId, setActiveId] = useState<string | null>(null);
|
||||
const [overId, setOverId] = useState<string | null>(null);
|
||||
const [dropPosition, setDropPosition] = useState<'before' | 'after' | null>(null);
|
||||
|
||||
// Helper function to emit socket event for persistence
|
||||
// Helper function to emit socket event for persistence (within-group only)
|
||||
const emitTaskSortChange = useCallback(
|
||||
(taskId: string, sourceGroup: TaskGroup, targetGroup: TaskGroup, insertIndex: number) => {
|
||||
(taskId: string, group: TaskGroup, insertIndex: number) => {
|
||||
if (!socket || !connected || !projectId) {
|
||||
logger.warning('Socket not connected or missing project ID');
|
||||
return;
|
||||
@@ -39,55 +40,31 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
|
||||
|
||||
// Use new bulk update approach - recalculate ALL task orders to prevent duplicates
|
||||
const taskUpdates: any[] = [];
|
||||
|
||||
// Create a copy of all groups and perform the move operation
|
||||
const updatedGroups = groups.map(group => ({
|
||||
...group,
|
||||
taskIds: [...group.taskIds],
|
||||
|
||||
// Create a copy of all groups
|
||||
const updatedGroups = groups.map(g => ({
|
||||
...g,
|
||||
taskIds: [...g.taskIds]
|
||||
}));
|
||||
|
||||
// Find the source and target groups in our copy
|
||||
const sourceGroupCopy = updatedGroups.find(g => g.id === sourceGroup.id)!;
|
||||
const targetGroupCopy = updatedGroups.find(g => g.id === targetGroup.id)!;
|
||||
|
||||
if (sourceGroup.id === targetGroup.id) {
|
||||
// Same group - reorder within the group
|
||||
const sourceIndex = sourceGroupCopy.taskIds.indexOf(taskId);
|
||||
// Remove task from old position
|
||||
sourceGroupCopy.taskIds.splice(sourceIndex, 1);
|
||||
// Insert at new position
|
||||
sourceGroupCopy.taskIds.splice(insertIndex, 0, taskId);
|
||||
} else {
|
||||
// Different groups - move task between groups
|
||||
// Remove from source group
|
||||
const sourceIndex = sourceGroupCopy.taskIds.indexOf(taskId);
|
||||
sourceGroupCopy.taskIds.splice(sourceIndex, 1);
|
||||
|
||||
// Add to target group
|
||||
targetGroupCopy.taskIds.splice(insertIndex, 0, taskId);
|
||||
}
|
||||
|
||||
|
||||
// Find the group in our copy
|
||||
const groupCopy = updatedGroups.find(g => g.id === group.id)!;
|
||||
|
||||
// Reorder within the group
|
||||
const sourceIndex = groupCopy.taskIds.indexOf(taskId);
|
||||
// Remove task from old position
|
||||
groupCopy.taskIds.splice(sourceIndex, 1);
|
||||
// Insert at new position
|
||||
groupCopy.taskIds.splice(insertIndex, 0, taskId);
|
||||
|
||||
// Now assign sequential sort orders to ALL tasks across ALL groups
|
||||
let currentSortOrder = 0;
|
||||
updatedGroups.forEach(group => {
|
||||
group.taskIds.forEach(id => {
|
||||
const update: any = {
|
||||
updatedGroups.forEach(grp => {
|
||||
grp.taskIds.forEach(id => {
|
||||
taskUpdates.push({
|
||||
task_id: id,
|
||||
sort_order: currentSortOrder,
|
||||
};
|
||||
|
||||
// Add group-specific fields for the moved task if it changed groups
|
||||
if (id === taskId && sourceGroup.id !== targetGroup.id) {
|
||||
if (currentGrouping === 'status') {
|
||||
update.status_id = targetGroup.id;
|
||||
} else if (currentGrouping === 'priority') {
|
||||
update.priority_id = targetGroup.id;
|
||||
} else if (currentGrouping === 'phase') {
|
||||
update.phase_id = targetGroup.id;
|
||||
}
|
||||
}
|
||||
|
||||
taskUpdates.push(update);
|
||||
sort_order: currentSortOrder
|
||||
});
|
||||
currentSortOrder++;
|
||||
});
|
||||
});
|
||||
@@ -96,8 +73,8 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
|
||||
project_id: projectId,
|
||||
group_by: currentGrouping || 'status',
|
||||
task_updates: taskUpdates,
|
||||
from_group: sourceGroup.id,
|
||||
to_group: targetGroup.id,
|
||||
from_group: group.id,
|
||||
to_group: group.id,
|
||||
task: {
|
||||
id: task.id,
|
||||
project_id: projectId,
|
||||
@@ -108,38 +85,6 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
|
||||
};
|
||||
|
||||
socket.emit(SocketEvents.TASK_SORT_ORDER_CHANGE.toString(), socketData);
|
||||
|
||||
// Also emit the specific grouping field change event for the moved task
|
||||
if (sourceGroup.id !== targetGroup.id) {
|
||||
if (currentGrouping === 'phase') {
|
||||
// Emit phase change event
|
||||
socket.emit(SocketEvents.TASK_PHASE_CHANGE.toString(), {
|
||||
task_id: taskId,
|
||||
phase_id: targetGroup.id,
|
||||
parent_task: task.parent_task_id || null,
|
||||
});
|
||||
} else if (currentGrouping === 'priority') {
|
||||
// Emit priority change event
|
||||
socket.emit(
|
||||
SocketEvents.TASK_PRIORITY_CHANGE.toString(),
|
||||
JSON.stringify({
|
||||
task_id: taskId,
|
||||
priority_id: targetGroup.id,
|
||||
team_id: teamId,
|
||||
})
|
||||
);
|
||||
} else if (currentGrouping === 'status') {
|
||||
// Emit status change event
|
||||
socket.emit(
|
||||
SocketEvents.TASK_STATUS_CHANGE.toString(),
|
||||
JSON.stringify({
|
||||
task_id: taskId,
|
||||
status_id: targetGroup.id,
|
||||
team_id: teamId,
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
[socket, connected, projectId, allTasks, groups, currentGrouping, currentSession]
|
||||
);
|
||||
@@ -154,32 +99,38 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
|
||||
|
||||
if (!over) {
|
||||
setOverId(null);
|
||||
setDropPosition(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const activeId = active.id;
|
||||
const overId = over.id;
|
||||
|
||||
// Set the overId for drop indicators
|
||||
setOverId(overId as string);
|
||||
|
||||
// Find the active task and the item being dragged over
|
||||
const activeTask = allTasks.find(task => task.id === activeId);
|
||||
if (!activeTask) return;
|
||||
|
||||
// Check if we're dragging over a task or a group
|
||||
const overTask = allTasks.find(task => task.id === overId);
|
||||
const overGroup = groups.find(group => group.id === overId);
|
||||
|
||||
// Find the groups
|
||||
const activeGroup = groups.find(group => group.taskIds.includes(activeTask.id));
|
||||
let targetGroup = overGroup;
|
||||
|
||||
if (overTask) {
|
||||
targetGroup = groups.find(group => group.taskIds.includes(overTask.id));
|
||||
const activeTask = allTasks.find(task => task.id === active.id);
|
||||
const overTask = allTasks.find(task => task.id === over.id);
|
||||
|
||||
if (activeTask && overTask) {
|
||||
const activeGroup = groups.find(group => group.taskIds.includes(activeTask.id));
|
||||
const overGroup = groups.find(group => group.taskIds.includes(overTask.id));
|
||||
|
||||
// Only set overId if both tasks are in the same group
|
||||
if (activeGroup && overGroup && activeGroup.id === overGroup.id) {
|
||||
setOverId(over.id as string);
|
||||
|
||||
// Calculate drop position based on task indices
|
||||
const activeIndex = activeGroup.taskIds.indexOf(activeTask.id);
|
||||
const overIndex = activeGroup.taskIds.indexOf(overTask.id);
|
||||
|
||||
if (activeIndex < overIndex) {
|
||||
setDropPosition('after');
|
||||
} else {
|
||||
setDropPosition('before');
|
||||
}
|
||||
} else {
|
||||
setOverId(null);
|
||||
setDropPosition(null);
|
||||
}
|
||||
} else {
|
||||
setOverId(null);
|
||||
setDropPosition(null);
|
||||
}
|
||||
|
||||
if (!activeGroup || !targetGroup) return;
|
||||
},
|
||||
[allTasks, groups]
|
||||
);
|
||||
@@ -189,6 +140,7 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
|
||||
const { active, over } = event;
|
||||
setActiveId(null);
|
||||
setOverId(null);
|
||||
setDropPosition(null);
|
||||
|
||||
if (!over || active.id === over.id) {
|
||||
return;
|
||||
@@ -204,86 +156,50 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
|
||||
return;
|
||||
}
|
||||
|
||||
// Find the groups
|
||||
// Find the active task's group
|
||||
const activeGroup = groups.find(group => group.taskIds.includes(activeTask.id));
|
||||
if (!activeGroup) {
|
||||
logger.error('Could not find active group for task:', activeId);
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if we're dropping on a task, group, or empty group
|
||||
// Only allow dropping on tasks in the same group
|
||||
const overTask = allTasks.find(task => task.id === overId);
|
||||
const overGroup = groups.find(group => group.id === overId);
|
||||
|
||||
// Check if dropping on empty group drop zone
|
||||
const isEmptyGroupDrop = typeof overId === 'string' && overId.startsWith('empty-group-');
|
||||
const emptyGroupId = isEmptyGroupDrop ? overId.replace('empty-group-', '') : null;
|
||||
const emptyGroup = emptyGroupId ? groups.find(group => group.id === emptyGroupId) : null;
|
||||
|
||||
let targetGroup = overGroup || emptyGroup;
|
||||
let insertIndex = 0;
|
||||
|
||||
if (overTask) {
|
||||
// Dropping on a task
|
||||
targetGroup = groups.find(group => group.taskIds.includes(overTask.id));
|
||||
if (targetGroup) {
|
||||
insertIndex = targetGroup.taskIds.indexOf(overTask.id);
|
||||
}
|
||||
} else if (overGroup) {
|
||||
// Dropping on a group (at the end)
|
||||
targetGroup = overGroup;
|
||||
insertIndex = targetGroup.taskIds.length;
|
||||
} else if (emptyGroup) {
|
||||
// Dropping on an empty group
|
||||
targetGroup = emptyGroup;
|
||||
insertIndex = 0; // First position in empty group
|
||||
}
|
||||
|
||||
if (!targetGroup) {
|
||||
logger.error('Could not find target group');
|
||||
if (!overTask) {
|
||||
return;
|
||||
}
|
||||
|
||||
const overGroup = groups.find(group => group.taskIds.includes(overTask.id));
|
||||
if (!overGroup || overGroup.id !== activeGroup.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
const isCrossGroup = activeGroup.id !== targetGroup.id;
|
||||
const activeIndex = activeGroup.taskIds.indexOf(activeTask.id);
|
||||
const overIndex = activeGroup.taskIds.indexOf(overTask.id);
|
||||
|
||||
if (isCrossGroup) {
|
||||
// Moving task between groups
|
||||
console.log('Moving task between groups:', {
|
||||
task: activeTask.name || activeTask.title,
|
||||
from: activeGroup.title,
|
||||
to: targetGroup.title,
|
||||
newPosition: insertIndex,
|
||||
});
|
||||
|
||||
// reorderTasksInGroup handles both same-group and cross-group moves
|
||||
// No need for separate moveTaskBetweenGroups call
|
||||
if (activeIndex !== overIndex) {
|
||||
// Reorder task within same group
|
||||
dispatch(
|
||||
reorderTasksInGroup({
|
||||
sourceTaskId: activeId as string,
|
||||
destinationTaskId: over.id as string,
|
||||
destinationTaskId: overId as string,
|
||||
sourceGroupId: activeGroup.id,
|
||||
destinationGroupId: targetGroup.id,
|
||||
destinationGroupId: activeGroup.id,
|
||||
})
|
||||
);
|
||||
|
||||
// Emit socket event for persistence
|
||||
emitTaskSortChange(activeId as string, activeGroup, targetGroup, insertIndex);
|
||||
} else {
|
||||
if (activeIndex !== insertIndex) {
|
||||
// Reorder task within same group at drop position
|
||||
dispatch(
|
||||
reorderTasksInGroup({
|
||||
sourceTaskId: activeId as string,
|
||||
destinationTaskId: over.id as string,
|
||||
sourceGroupId: activeGroup.id,
|
||||
destinationGroupId: activeGroup.id,
|
||||
})
|
||||
);
|
||||
|
||||
// Emit socket event for persistence
|
||||
emitTaskSortChange(activeId as string, activeGroup, targetGroup, insertIndex);
|
||||
// Calculate the final index after reordering for socket emission
|
||||
let finalIndex = overIndex;
|
||||
if (activeIndex < overIndex) {
|
||||
// When dragging down, the task ends up just after the destination
|
||||
finalIndex = overIndex;
|
||||
} else {
|
||||
// When dragging up, the task ends up at the destination position
|
||||
finalIndex = overIndex;
|
||||
}
|
||||
|
||||
// Emit socket event for persistence
|
||||
emitTaskSortChange(activeId as string, activeGroup, finalIndex);
|
||||
}
|
||||
},
|
||||
[allTasks, groups, dispatch, emitTaskSortChange]
|
||||
@@ -292,6 +208,7 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
|
||||
return {
|
||||
activeId,
|
||||
overId,
|
||||
dropPosition,
|
||||
handleDragStart,
|
||||
handleDragOver,
|
||||
handleDragEnd,
|
||||
|
||||
@@ -89,8 +89,30 @@ export const useTaskRowColumns = ({
|
||||
listeners,
|
||||
depth = 0,
|
||||
}: UseTaskRowColumnsProps) => {
|
||||
const renderColumn = useCallback(
|
||||
(columnId: string, width: string, isSticky?: boolean, index?: number) => {
|
||||
|
||||
const renderColumn = useCallback((columnId: string, width: string, isSticky?: boolean, index?: number, currentBg?: string, rowBackgrounds?: any) => {
|
||||
// Calculate left position for sticky columns
|
||||
let leftPosition = 0;
|
||||
if (isSticky && typeof index === 'number') {
|
||||
for (let i = 0; i < index; i++) {
|
||||
const prevColumn = visibleColumns[i];
|
||||
if (prevColumn.isSticky) {
|
||||
leftPosition += parseInt(prevColumn.width.replace('px', ''));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Create wrapper style for sticky positioning
|
||||
const wrapperStyle = isSticky ? {
|
||||
position: 'sticky' as const,
|
||||
left: leftPosition,
|
||||
zIndex: 5, // Lower than header but above regular content
|
||||
backgroundColor: currentBg || (isDarkMode ? '#1e1e1e' : '#ffffff'), // Use dynamic background or fallback
|
||||
overflow: 'hidden', // Prevent content from spilling over
|
||||
width: width, // Ensure the wrapper respects column width
|
||||
} : {};
|
||||
|
||||
const renderColumnContent = () => {
|
||||
switch (columnId) {
|
||||
case 'dragHandle':
|
||||
return (
|
||||
@@ -102,172 +124,245 @@ export const useTaskRowColumns = ({
|
||||
/>
|
||||
);
|
||||
|
||||
case 'checkbox':
|
||||
return (
|
||||
<CheckboxColumn
|
||||
width={width}
|
||||
isSelected={isSelected}
|
||||
onCheckboxChange={handleCheckboxChange}
|
||||
/>
|
||||
);
|
||||
case 'checkbox':
|
||||
return (
|
||||
<CheckboxColumn
|
||||
width={width}
|
||||
isSelected={isSelected}
|
||||
onCheckboxChange={handleCheckboxChange}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'taskKey':
|
||||
return <TaskKeyColumn width={width} taskKey={task.task_key || ''} />;
|
||||
case 'taskKey':
|
||||
return (
|
||||
<TaskKeyColumn
|
||||
width={width}
|
||||
taskKey={task.task_key || ''}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'title':
|
||||
case 'title':
|
||||
return (
|
||||
<TitleColumn
|
||||
width={width}
|
||||
task={task}
|
||||
projectId={projectId}
|
||||
isSubtask={isSubtask}
|
||||
taskDisplayName={taskDisplayName}
|
||||
editTaskName={editTaskName}
|
||||
taskName={taskName}
|
||||
onEditTaskName={setEditTaskName}
|
||||
onTaskNameChange={setTaskName}
|
||||
onTaskNameSave={handleTaskNameSave}
|
||||
depth={depth}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'description':
|
||||
return (
|
||||
<DescriptionColumn
|
||||
width={width}
|
||||
description={task.description || ''}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'status':
|
||||
return (
|
||||
<StatusColumn
|
||||
width={width}
|
||||
task={task}
|
||||
projectId={projectId}
|
||||
isDarkMode={isDarkMode}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'assignees':
|
||||
return (
|
||||
<AssigneesColumn
|
||||
width={width}
|
||||
task={task}
|
||||
convertedTask={convertedTask}
|
||||
isDarkMode={isDarkMode}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'priority':
|
||||
return (
|
||||
<PriorityColumn
|
||||
width={width}
|
||||
task={task}
|
||||
projectId={projectId}
|
||||
isDarkMode={isDarkMode}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'dueDate':
|
||||
return (
|
||||
<DatePickerColumn
|
||||
width={width}
|
||||
task={task}
|
||||
field="dueDate"
|
||||
formattedDate={formattedDates.due}
|
||||
dateValue={dateValues.due}
|
||||
isDarkMode={isDarkMode}
|
||||
activeDatePicker={activeDatePicker}
|
||||
onActiveDatePickerChange={setActiveDatePicker}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'startDate':
|
||||
return (
|
||||
<DatePickerColumn
|
||||
width={width}
|
||||
task={task}
|
||||
field="startDate"
|
||||
formattedDate={formattedDates.start}
|
||||
dateValue={dateValues.start}
|
||||
isDarkMode={isDarkMode}
|
||||
activeDatePicker={activeDatePicker}
|
||||
onActiveDatePickerChange={setActiveDatePicker}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'progress':
|
||||
return (
|
||||
<ProgressColumn
|
||||
width={width}
|
||||
task={task}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'labels':
|
||||
return (
|
||||
<LabelsColumn
|
||||
width={width}
|
||||
task={task}
|
||||
labelsAdapter={labelsAdapter}
|
||||
isDarkMode={isDarkMode}
|
||||
visibleColumns={visibleColumns}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'phase':
|
||||
return (
|
||||
<PhaseColumn
|
||||
width={width}
|
||||
task={task}
|
||||
projectId={projectId}
|
||||
isDarkMode={isDarkMode}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'timeTracking':
|
||||
return (
|
||||
<TimeTrackingColumn
|
||||
width={width}
|
||||
taskId={task.id || ''}
|
||||
isDarkMode={isDarkMode}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'estimation':
|
||||
return (
|
||||
<EstimationColumn
|
||||
width={width}
|
||||
task={task}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'completedDate':
|
||||
return (
|
||||
<DateColumn
|
||||
width={width}
|
||||
formattedDate={formattedDates.completed}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'createdDate':
|
||||
return (
|
||||
<DateColumn
|
||||
width={width}
|
||||
formattedDate={formattedDates.created}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'lastUpdated':
|
||||
return (
|
||||
<DateColumn
|
||||
width={width}
|
||||
formattedDate={formattedDates.updated}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'reporter':
|
||||
return (
|
||||
<ReporterColumn
|
||||
width={width}
|
||||
reporter={task.reporter || ''}
|
||||
/>
|
||||
);
|
||||
|
||||
default:
|
||||
// Handle custom columns
|
||||
const column = visibleColumns.find(col => col.id === columnId);
|
||||
if (column && (column.custom_column || column.isCustom) && updateTaskCustomColumnValue) {
|
||||
return (
|
||||
<TitleColumn
|
||||
<DragHandleColumn
|
||||
width={width}
|
||||
task={task}
|
||||
projectId={projectId}
|
||||
isSubtask={isSubtask}
|
||||
taskDisplayName={taskDisplayName}
|
||||
editTaskName={editTaskName}
|
||||
taskName={taskName}
|
||||
onEditTaskName={setEditTaskName}
|
||||
onTaskNameChange={setTaskName}
|
||||
onTaskNameSave={handleTaskNameSave}
|
||||
depth={depth}
|
||||
attributes={attributes}
|
||||
listeners={listeners}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'description':
|
||||
return <DescriptionColumn width={width} description={task.description || ''} />;
|
||||
|
||||
case 'status':
|
||||
return (
|
||||
<StatusColumn width={width} task={task} projectId={projectId} isDarkMode={isDarkMode} />
|
||||
);
|
||||
|
||||
case 'assignees':
|
||||
return (
|
||||
<AssigneesColumn
|
||||
width={width}
|
||||
task={task}
|
||||
convertedTask={convertedTask}
|
||||
isDarkMode={isDarkMode}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'priority':
|
||||
return (
|
||||
<PriorityColumn
|
||||
width={width}
|
||||
task={task}
|
||||
projectId={projectId}
|
||||
isDarkMode={isDarkMode}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'dueDate':
|
||||
return (
|
||||
<DatePickerColumn
|
||||
width={width}
|
||||
task={task}
|
||||
field="dueDate"
|
||||
formattedDate={formattedDates.due}
|
||||
dateValue={dateValues.due}
|
||||
isDarkMode={isDarkMode}
|
||||
activeDatePicker={activeDatePicker}
|
||||
onActiveDatePickerChange={setActiveDatePicker}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'startDate':
|
||||
return (
|
||||
<DatePickerColumn
|
||||
width={width}
|
||||
task={task}
|
||||
field="startDate"
|
||||
formattedDate={formattedDates.start}
|
||||
dateValue={dateValues.start}
|
||||
isDarkMode={isDarkMode}
|
||||
activeDatePicker={activeDatePicker}
|
||||
onActiveDatePickerChange={setActiveDatePicker}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'progress':
|
||||
return <ProgressColumn width={width} task={task} />;
|
||||
|
||||
case 'labels':
|
||||
return (
|
||||
<LabelsColumn
|
||||
width={width}
|
||||
task={task}
|
||||
labelsAdapter={labelsAdapter}
|
||||
isDarkMode={isDarkMode}
|
||||
visibleColumns={visibleColumns}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'phase':
|
||||
return (
|
||||
<PhaseColumn width={width} task={task} projectId={projectId} isDarkMode={isDarkMode} />
|
||||
);
|
||||
|
||||
case 'timeTracking':
|
||||
return (
|
||||
<TimeTrackingColumn width={width} taskId={task.id || ''} isDarkMode={isDarkMode} />
|
||||
);
|
||||
|
||||
case 'estimation':
|
||||
return <EstimationColumn width={width} task={task} />;
|
||||
|
||||
case 'completedDate':
|
||||
return <DateColumn width={width} formattedDate={formattedDates.completed} />;
|
||||
|
||||
case 'createdDate':
|
||||
return <DateColumn width={width} formattedDate={formattedDates.created} />;
|
||||
|
||||
case 'lastUpdated':
|
||||
return <DateColumn width={width} formattedDate={formattedDates.updated} />;
|
||||
|
||||
case 'reporter':
|
||||
return <ReporterColumn width={width} reporter={task.reporter || ''} />;
|
||||
|
||||
default:
|
||||
// Handle custom columns
|
||||
const column = visibleColumns.find(col => col.id === columnId);
|
||||
if (column && (column.custom_column || column.isCustom) && updateTaskCustomColumnValue) {
|
||||
return (
|
||||
<CustomColumn
|
||||
width={width}
|
||||
column={column}
|
||||
task={task}
|
||||
updateTaskCustomColumnValue={updateTaskCustomColumnValue}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
},
|
||||
[
|
||||
task,
|
||||
projectId,
|
||||
isSubtask,
|
||||
isSelected,
|
||||
isDarkMode,
|
||||
visibleColumns,
|
||||
updateTaskCustomColumnValue,
|
||||
taskDisplayName,
|
||||
convertedTask,
|
||||
formattedDates,
|
||||
dateValues,
|
||||
labelsAdapter,
|
||||
activeDatePicker,
|
||||
setActiveDatePicker,
|
||||
editTaskName,
|
||||
taskName,
|
||||
setEditTaskName,
|
||||
setTaskName,
|
||||
handleCheckboxChange,
|
||||
handleTaskNameSave,
|
||||
handleTaskNameEdit,
|
||||
attributes,
|
||||
listeners,
|
||||
]
|
||||
);
|
||||
};
|
||||
|
||||
// Wrap content with sticky positioning if needed
|
||||
const content = renderColumnContent();
|
||||
if (isSticky) {
|
||||
const hoverBg = rowBackgrounds?.hover || (isDarkMode ? '#2a2a2a' : '#f9fafb');
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
...wrapperStyle,
|
||||
'--hover-bg': hoverBg,
|
||||
} as React.CSSProperties}
|
||||
className="border-r border-gray-200 dark:border-gray-700 overflow-hidden sticky-column-hover hover:bg-[var(--hover-bg)]"
|
||||
>
|
||||
{content}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return content;
|
||||
}, [
|
||||
task,
|
||||
projectId,
|
||||
isSubtask,
|
||||
isSelected,
|
||||
isDarkMode,
|
||||
visibleColumns,
|
||||
updateTaskCustomColumnValue,
|
||||
taskDisplayName,
|
||||
convertedTask,
|
||||
formattedDates,
|
||||
dateValues,
|
||||
labelsAdapter,
|
||||
activeDatePicker,
|
||||
setActiveDatePicker,
|
||||
editTaskName,
|
||||
taskName,
|
||||
setEditTaskName,
|
||||
setTaskName,
|
||||
handleCheckboxChange,
|
||||
handleTaskNameSave,
|
||||
handleTaskNameEdit,
|
||||
attributes,
|
||||
listeners,
|
||||
depth,
|
||||
]);
|
||||
|
||||
return { renderColumn };
|
||||
};
|
||||
|
||||
@@ -8,6 +8,8 @@ import { Task } from '@/types/task-management.types';
|
||||
import {
|
||||
updateTask,
|
||||
selectCurrentGroupingV3,
|
||||
selectGroups,
|
||||
moveTaskBetweenGroups,
|
||||
} from '@/features/task-management/task-management.slice';
|
||||
|
||||
interface TaskStatusDropdownProps {
|
||||
@@ -30,6 +32,7 @@ const TaskStatusDropdown: React.FC<TaskStatusDropdownProps> = ({
|
||||
|
||||
const statusList = useAppSelector(state => state.taskStatusReducer.status);
|
||||
const currentGroupingV3 = useAppSelector(selectCurrentGroupingV3);
|
||||
const groups = useAppSelector(selectGroups);
|
||||
|
||||
// Find current status details
|
||||
const currentStatus = useMemo(() => {
|
||||
@@ -44,21 +47,53 @@ const TaskStatusDropdown: React.FC<TaskStatusDropdownProps> = ({
|
||||
(statusId: string, statusName: string) => {
|
||||
if (!task.id || !statusId || !connected) return;
|
||||
|
||||
console.log('🎯 Status change initiated:', { taskId: task.id, statusId, statusName });
|
||||
// Optimistic update: immediately update the task status in Redux for instant feedback
|
||||
const updatedTask = {
|
||||
...task,
|
||||
status: statusId,
|
||||
updatedAt: new Date().toISOString(),
|
||||
};
|
||||
dispatch(updateTask(updatedTask));
|
||||
|
||||
// Handle group movement if grouping by status
|
||||
if (currentGroupingV3 === 'status' && groups && groups.length > 0) {
|
||||
// Find current group containing the task
|
||||
const currentGroup = groups.find(group => group.taskIds.includes(task.id));
|
||||
|
||||
// Find target group based on the new status ID
|
||||
let targetGroup = groups.find(group => group.id === statusId);
|
||||
|
||||
// If not found by status ID, try matching with group value
|
||||
if (!targetGroup) {
|
||||
targetGroup = groups.find(group => group.groupValue === statusId);
|
||||
}
|
||||
|
||||
if (currentGroup && targetGroup && currentGroup.id !== targetGroup.id) {
|
||||
// Move task between groups immediately for instant feedback
|
||||
dispatch(
|
||||
moveTaskBetweenGroups({
|
||||
taskId: task.id,
|
||||
sourceGroupId: currentGroup.id,
|
||||
targetGroupId: targetGroup.id,
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Emit socket event for server-side update and real-time sync
|
||||
socket?.emit(
|
||||
SocketEvents.TASK_STATUS_CHANGE.toString(),
|
||||
JSON.stringify({
|
||||
task_id: task.id,
|
||||
status_id: statusId,
|
||||
parent_task: null, // Assuming top-level tasks for now
|
||||
team_id: projectId, // Using projectId as teamId
|
||||
parent_task: task.parent_task_id || null,
|
||||
team_id: projectId,
|
||||
})
|
||||
);
|
||||
socket?.emit(SocketEvents.GET_TASK_PROGRESS.toString(), task.id);
|
||||
setIsOpen(false);
|
||||
},
|
||||
[task.id, connected, socket, projectId]
|
||||
[task, connected, socket, projectId, dispatch, currentGroupingV3, groups]
|
||||
);
|
||||
|
||||
// Calculate dropdown position and handle outside clicks
|
||||
|
||||
Reference in New Issue
Block a user