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' }}
|
||||
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
|
||||
);
|
||||
@@ -463,7 +487,7 @@ const TaskListV2Section: React.FC = () => {
|
||||
const newRowId = `add-task-${groupId}-${currentRows.length + 1}`;
|
||||
return {
|
||||
...prev,
|
||||
[groupId]: [...currentRows, newRowId],
|
||||
[groupId]: [...currentRows, newRowId]
|
||||
};
|
||||
});
|
||||
}, []);
|
||||
@@ -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,7 +747,7 @@ const TaskListV2Section: React.FC = () => {
|
||||
color: '#fbc84c69',
|
||||
actualCount: 0,
|
||||
count: 1, // For the add task row
|
||||
startIndex: 0,
|
||||
startIndex: 0
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -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 indicators
|
||||
const isTaskBeingDraggedOver = overId === task.id;
|
||||
const isGroupBeingDraggedOver = overId === group.id;
|
||||
const isFirstTaskInGroupBeingDraggedOver =
|
||||
isFirstTaskInGroup && isTaskBeingDraggedOver;
|
||||
// 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';
|
||||
|
||||
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"
|
||||
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 ||
|
||||
@@ -964,6 +990,7 @@ const TaskListV2Section: React.FC = () => {
|
||||
{createPortal(<ConvertToSubtaskDrawer />, document.body, 'convert-to-subtask-drawer')}
|
||||
</div>
|
||||
</DndContext>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -27,115 +27,133 @@ 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';
|
||||
|
||||
|
||||
@@ -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;
|
||||
@@ -40,54 +41,30 @@ 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)!;
|
||||
// Find the group in our copy
|
||||
const groupCopy = updatedGroups.find(g => g.id === group.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);
|
||||
}
|
||||
// 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;
|
||||
const activeTask = allTasks.find(task => task.id === active.id);
|
||||
const overTask = allTasks.find(task => task.id === over.id);
|
||||
|
||||
// Set the overId for drop indicators
|
||||
setOverId(overId as string);
|
||||
if (activeTask && overTask) {
|
||||
const activeGroup = groups.find(group => group.taskIds.includes(activeTask.id));
|
||||
const overGroup = groups.find(group => group.taskIds.includes(overTask.id));
|
||||
|
||||
// Find the active task and the item being dragged over
|
||||
const activeTask = allTasks.find(task => task.id === activeId);
|
||||
if (!activeTask) return;
|
||||
// Only set overId if both tasks are in the same group
|
||||
if (activeGroup && overGroup && activeGroup.id === overGroup.id) {
|
||||
setOverId(over.id as string);
|
||||
|
||||
// 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);
|
||||
// Calculate drop position based on task indices
|
||||
const activeIndex = activeGroup.taskIds.indexOf(activeTask.id);
|
||||
const overIndex = activeGroup.taskIds.indexOf(overTask.id);
|
||||
|
||||
// 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));
|
||||
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
|
||||
|
||||
@@ -706,8 +706,23 @@ const taskManagementSlice = createSlice({
|
||||
const group = state.groups.find(g => g.id === sourceGroupId);
|
||||
if (group) {
|
||||
const newTasks = Array.from(group.taskIds);
|
||||
const [removed] = newTasks.splice(newTasks.indexOf(sourceTaskId), 1);
|
||||
newTasks.splice(newTasks.indexOf(destinationTaskId), 0, removed);
|
||||
const sourceIndex = newTasks.indexOf(sourceTaskId);
|
||||
const destinationIndex = newTasks.indexOf(destinationTaskId);
|
||||
|
||||
// Remove the task from its current position
|
||||
const [removed] = newTasks.splice(sourceIndex, 1);
|
||||
|
||||
// Calculate the insertion index
|
||||
let insertIndex = destinationIndex;
|
||||
if (sourceIndex < destinationIndex) {
|
||||
// When dragging down, we need to insert after the destination
|
||||
insertIndex = destinationIndex;
|
||||
} else {
|
||||
// When dragging up, we insert before the destination
|
||||
insertIndex = destinationIndex;
|
||||
}
|
||||
|
||||
newTasks.splice(insertIndex, 0, removed);
|
||||
group.taskIds = newTasks;
|
||||
|
||||
// Update order for affected tasks using the appropriate sort field
|
||||
|
||||
@@ -244,47 +244,18 @@ export const useTaskSocketHandlers = () => {
|
||||
// Find current group containing the task
|
||||
const currentGroup = groups.find(group => group.taskIds.includes(response.id));
|
||||
|
||||
// Find target group based on new status value with multiple matching strategies
|
||||
let targetGroup = groups.find(group => group.groupValue === newStatusValue);
|
||||
// Find target group based on the actual status ID from response
|
||||
let targetGroup = groups.find(group => group.id === response.status_id);
|
||||
|
||||
// If not found, try case-insensitive matching
|
||||
// If not found by status ID, try matching with group value
|
||||
if (!targetGroup) {
|
||||
targetGroup = groups.find(
|
||||
group => group.groupValue?.toLowerCase() === newStatusValue.toLowerCase()
|
||||
);
|
||||
targetGroup = groups.find(group => group.groupValue === response.status_id);
|
||||
}
|
||||
|
||||
// If still not found, try matching with title
|
||||
if (!targetGroup) {
|
||||
targetGroup = groups.find(
|
||||
group => group.title?.toLowerCase() === newStatusValue.toLowerCase()
|
||||
);
|
||||
}
|
||||
|
||||
// If still not found, try matching common status patterns
|
||||
if (!targetGroup && newStatusValue === 'todo') {
|
||||
targetGroup = groups.find(
|
||||
group =>
|
||||
group.title?.toLowerCase().includes('todo') ||
|
||||
group.title?.toLowerCase().includes('to do') ||
|
||||
group.title?.toLowerCase().includes('pending') ||
|
||||
group.groupValue?.toLowerCase().includes('todo')
|
||||
);
|
||||
} else if (!targetGroup && newStatusValue === 'doing') {
|
||||
targetGroup = groups.find(
|
||||
group =>
|
||||
group.title?.toLowerCase().includes('doing') ||
|
||||
group.title?.toLowerCase().includes('progress') ||
|
||||
group.title?.toLowerCase().includes('active') ||
|
||||
group.groupValue?.toLowerCase().includes('doing')
|
||||
);
|
||||
} else if (!targetGroup && newStatusValue === 'done') {
|
||||
targetGroup = groups.find(
|
||||
group =>
|
||||
group.title?.toLowerCase().includes('done') ||
|
||||
group.title?.toLowerCase().includes('complete') ||
|
||||
group.title?.toLowerCase().includes('finish') ||
|
||||
group.groupValue?.toLowerCase().includes('done')
|
||||
// If still not found, try matching by status name (fallback)
|
||||
if (!targetGroup && response.status) {
|
||||
targetGroup = groups.find(group =>
|
||||
group.title?.toLowerCase() === response.status.toLowerCase()
|
||||
);
|
||||
}
|
||||
|
||||
@@ -298,14 +269,11 @@ export const useTaskSocketHandlers = () => {
|
||||
})
|
||||
);
|
||||
} else if (!targetGroup) {
|
||||
console.log('❌ Target group not found for status:', newStatusValue);
|
||||
} else if (!currentGroup) {
|
||||
console.log('❌ Current group not found for task:', response.id);
|
||||
} else {
|
||||
console.log('🔧 No group movement needed - task already in correct group');
|
||||
// Fallback: refetch tasks to ensure consistency
|
||||
if (projectId) {
|
||||
dispatch(fetchTasksV3(projectId));
|
||||
}
|
||||
}
|
||||
} else {
|
||||
console.log('🔧 Not grouped by status, skipping group movement');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -1,60 +1,18 @@
|
||||
import { Col, ConfigProvider, Layout } from '@/shared/antd-imports';
|
||||
import { Outlet } from 'react-router-dom';
|
||||
import { memo, useMemo, useEffect, useRef } from 'react';
|
||||
import { useMediaQuery } from 'react-responsive';
|
||||
import { ConfigProvider, Layout } from '@/shared/antd-imports';
|
||||
import { Outlet, useLocation } from 'react-router-dom';
|
||||
import { memo, useMemo } from 'react';
|
||||
|
||||
import Navbar from '../features/navbar/navbar';
|
||||
import { useAppSelector } from '../hooks/useAppSelector';
|
||||
import { colors } from '../styles/colors';
|
||||
|
||||
import { useRenderPerformance } from '@/utils/performance';
|
||||
import { DynamicCSSLoader, LayoutStabilizer } from '@/utils/css-optimizations';
|
||||
|
||||
const MainLayout = memo(() => {
|
||||
const themeMode = useAppSelector(state => state.themeReducer.mode);
|
||||
const isDesktop = useMediaQuery({ query: '(min-width: 1024px)' });
|
||||
const layoutRef = useRef<HTMLDivElement>(null);
|
||||
const location = useLocation();
|
||||
|
||||
// Performance monitoring in development
|
||||
useRenderPerformance('MainLayout');
|
||||
const isProjectView = location.pathname.includes('/projects/') &&
|
||||
!location.pathname.endsWith('/projects');
|
||||
|
||||
// Apply layout optimizations
|
||||
useEffect(() => {
|
||||
if (layoutRef.current) {
|
||||
// Prevent layout shifts in main content area
|
||||
LayoutStabilizer.applyContainment(layoutRef.current, 'layout');
|
||||
|
||||
// Load non-critical CSS dynamically
|
||||
DynamicCSSLoader.loadCSS('/styles/non-critical.css', {
|
||||
priority: 'low',
|
||||
media: 'all',
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Memoize styles to prevent object recreation on every render
|
||||
const headerStyles = useMemo(
|
||||
() => ({
|
||||
zIndex: 999,
|
||||
position: 'fixed' as const,
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: 0,
|
||||
borderBottom: themeMode === 'dark' ? '1px solid #303030' : 'none',
|
||||
}),
|
||||
[themeMode]
|
||||
);
|
||||
|
||||
const contentStyles = useMemo(
|
||||
() => ({
|
||||
paddingInline: isDesktop ? 64 : 24,
|
||||
overflowX: 'hidden' as const,
|
||||
}),
|
||||
[isDesktop]
|
||||
);
|
||||
|
||||
// Memoize theme configuration
|
||||
const themeConfig = useMemo(
|
||||
() => ({
|
||||
components: {
|
||||
@@ -67,27 +25,19 @@ const MainLayout = memo(() => {
|
||||
[themeMode]
|
||||
);
|
||||
|
||||
// Memoize header className
|
||||
const headerClassName = useMemo(
|
||||
() => `shadow-md ${themeMode === 'dark' ? '' : 'shadow-[#18181811]'}`,
|
||||
[themeMode]
|
||||
);
|
||||
|
||||
return (
|
||||
<ConfigProvider theme={themeConfig}>
|
||||
<Layout ref={layoutRef} style={{ minHeight: '100vh' }} className="prevent-layout-shift">
|
||||
<Layout.Header className={`${headerClassName} gpu-accelerated`} style={headerStyles}>
|
||||
<Layout className="min-h-screen">
|
||||
<Layout.Header
|
||||
className={`sticky top-0 z-[999] flex items-center p-0 shadow-md ${
|
||||
themeMode === 'dark' ? 'border-b border-[#303030]' : 'shadow-[#18181811]'
|
||||
}`}
|
||||
>
|
||||
<Navbar />
|
||||
</Layout.Header>
|
||||
|
||||
<Layout.Content className="layout-contained">
|
||||
<Col
|
||||
xxl={{ span: 18, offset: 3, flex: '100%' }}
|
||||
style={contentStyles}
|
||||
className="task-content-container"
|
||||
>
|
||||
<Outlet />
|
||||
</Col>
|
||||
<Layout.Content className={`px-4 sm:px-8 lg:px-12 xl:px-16 ${!isProjectView ? 'overflow-x-hidden max-w-[1400px]' : ''} mx-auto w-full`}>
|
||||
<Outlet />
|
||||
</Layout.Content>
|
||||
</Layout>
|
||||
</ConfigProvider>
|
||||
|
||||
@@ -103,7 +103,7 @@ const HomePage = memo(() => {
|
||||
}, [isDesktop, isOwnerOrAdmin]);
|
||||
|
||||
return (
|
||||
<div className="my-24 min-h-[90vh]">
|
||||
<div className="my-8 min-h-[90vh]">
|
||||
<Col className="flex flex-col gap-6">
|
||||
<GreetingWithTime />
|
||||
{CreateProjectButtonComponent}
|
||||
@@ -113,13 +113,13 @@ const HomePage = memo(() => {
|
||||
<Col xs={24} lg={16}>
|
||||
<Flex vertical gap={24}>
|
||||
<TasksList />
|
||||
|
||||
<TodoList />
|
||||
</Flex>
|
||||
</Col>
|
||||
|
||||
<Col xs={24} lg={8}>
|
||||
<Flex vertical gap={24}>
|
||||
<TodoList />
|
||||
|
||||
<UserActivityFeed />
|
||||
|
||||
<RecentAndFavouriteProjectList />
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import { CheckCircleOutlined, SyncOutlined } from '@/shared/antd-imports';
|
||||
import { CheckCircleOutlined, SyncOutlined, DownOutlined, RightOutlined } from '@/shared/antd-imports';
|
||||
import { useRef, useState } from 'react';
|
||||
import Form from 'antd/es/form';
|
||||
import Input, { InputRef } from 'antd/es/input';
|
||||
import Flex from 'antd/es/flex';
|
||||
import Card from 'antd/es/card';
|
||||
import Collapse from 'antd/es/collapse';
|
||||
import ConfigProvider from 'antd/es/config-provider';
|
||||
import Table, { TableProps } from 'antd/es/table';
|
||||
import Tooltip from 'antd/es/tooltip';
|
||||
@@ -23,6 +24,7 @@ import { useCreatePersonalTaskMutation } from '@/api/home-page/home-page.api.ser
|
||||
|
||||
const TodoList = () => {
|
||||
const [isAlertShowing, setIsAlertShowing] = useState(false);
|
||||
const [isCollapsed, setIsCollapsed] = useState(true);
|
||||
const [form] = Form.useForm();
|
||||
const { t } = useTranslation('home');
|
||||
|
||||
@@ -97,73 +99,109 @@ const TodoList = () => {
|
||||
];
|
||||
|
||||
return (
|
||||
<Card
|
||||
title={
|
||||
<Typography.Title level={5} style={{ marginBlockEnd: 0 }}>
|
||||
{t('home:todoList.title')} ({data?.body.length})
|
||||
</Typography.Title>
|
||||
}
|
||||
extra={
|
||||
<Tooltip title={t('home:todoList.refreshTasks')}>
|
||||
<Button shape="circle" icon={<SyncOutlined spin={isFetching} />} onClick={refetch} />
|
||||
</Tooltip>
|
||||
}
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
<div>
|
||||
<Form form={form} onFinish={handleTodoSubmit}>
|
||||
<Form.Item name="name">
|
||||
<Flex vertical>
|
||||
<Input
|
||||
ref={todoInputRef}
|
||||
placeholder={t('home:todoList.addTask')}
|
||||
onChange={e => {
|
||||
const inputValue = e.currentTarget.value;
|
||||
<Card style={{ width: '100%' }} bodyStyle={{ padding: 0 }}>
|
||||
<style>{`
|
||||
.todo-collapse .ant-collapse-header {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
padding: 12px 16px !important;
|
||||
}
|
||||
.todo-collapse .ant-collapse-expand-icon {
|
||||
margin-right: 8px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
`}</style>
|
||||
<Collapse
|
||||
defaultActiveKey={[]}
|
||||
ghost
|
||||
size="small"
|
||||
className="todo-collapse"
|
||||
expandIcon={({ isActive }) =>
|
||||
isActive ? <DownOutlined /> : <RightOutlined />
|
||||
}
|
||||
onChange={(keys) => {
|
||||
setIsCollapsed(keys.length === 0);
|
||||
}}
|
||||
items={[
|
||||
{
|
||||
key: '1',
|
||||
label: (
|
||||
<Flex style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
|
||||
<Typography.Title level={5} style={{ margin: 0 }}>
|
||||
{t('home:todoList.title')} ({data?.body.length})
|
||||
</Typography.Title>
|
||||
<Tooltip title={t('home:todoList.refreshTasks')}>
|
||||
<Button
|
||||
shape="circle"
|
||||
icon={<SyncOutlined spin={isFetching} />}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
refetch();
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Flex>
|
||||
),
|
||||
children: (
|
||||
<div style={{ padding: '0 16px 16px 16px' }}>
|
||||
<Form form={form} onFinish={handleTodoSubmit}>
|
||||
<Form.Item name="name">
|
||||
<Flex vertical>
|
||||
<Input
|
||||
ref={todoInputRef}
|
||||
placeholder={t('home:todoList.addTask')}
|
||||
onChange={e => {
|
||||
const inputValue = e.currentTarget.value;
|
||||
|
||||
if (inputValue.length >= 1) setIsAlertShowing(true);
|
||||
else if (inputValue === '') setIsAlertShowing(false);
|
||||
}}
|
||||
/>
|
||||
{isAlertShowing && (
|
||||
<Alert
|
||||
message={
|
||||
<Typography.Text style={{ fontSize: 11 }}>
|
||||
{t('home:todoList.pressEnter')} <strong>Enter</strong>{' '}
|
||||
{t('home:todoList.toCreate')}
|
||||
</Typography.Text>
|
||||
}
|
||||
type="info"
|
||||
style={{
|
||||
width: 'fit-content',
|
||||
borderRadius: 2,
|
||||
padding: '0 6px',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Flex>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
if (inputValue.length >= 1) setIsAlertShowing(true);
|
||||
else if (inputValue === '') setIsAlertShowing(false);
|
||||
}}
|
||||
/>
|
||||
{isAlertShowing && (
|
||||
<Alert
|
||||
message={
|
||||
<Typography.Text style={{ fontSize: 11 }}>
|
||||
{t('home:todoList.pressEnter')} <strong>Enter</strong>{' '}
|
||||
{t('home:todoList.toCreate')}
|
||||
</Typography.Text>
|
||||
}
|
||||
type="info"
|
||||
style={{
|
||||
width: 'fit-content',
|
||||
borderRadius: 2,
|
||||
padding: '0 6px',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Flex>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
<div style={{ maxHeight: 300, overflow: 'auto' }}>
|
||||
{data?.body.length === 0 ? (
|
||||
<EmptyListPlaceholder
|
||||
imageSrc="https://s3.us-west-2.amazonaws.com/worklenz.com/assets/empty-box.webp"
|
||||
text={t('home:todoList.noTasks')}
|
||||
/>
|
||||
) : (
|
||||
<Table
|
||||
className="custom-two-colors-row-table"
|
||||
rowKey={record => record.id || ''}
|
||||
dataSource={data?.body}
|
||||
columns={columns}
|
||||
showHeader={false}
|
||||
pagination={false}
|
||||
size="small"
|
||||
loading={isFetching}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ maxHeight: 300, overflow: 'auto' }}>
|
||||
{data?.body.length === 0 ? (
|
||||
<EmptyListPlaceholder
|
||||
imageSrc="https://s3.us-west-2.amazonaws.com/worklenz.com/assets/empty-box.webp"
|
||||
text={t('home:todoList.noTasks')}
|
||||
/>
|
||||
) : (
|
||||
<Table
|
||||
className="custom-two-colors-row-table"
|
||||
rowKey={record => record.id || ''}
|
||||
dataSource={data?.body}
|
||||
columns={columns}
|
||||
showHeader={false}
|
||||
pagination={false}
|
||||
size="small"
|
||||
loading={isFetching}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -820,7 +820,7 @@ const ProjectList: React.FC = () => {
|
||||
}, [loadingProjects, isFetchingProjects, viewMode, groupedProjects.loading, isLoading]);
|
||||
|
||||
return (
|
||||
<div style={{ marginBlock: 65, minHeight: '90vh' }}>
|
||||
<div style={{ minHeight: '90vh' }}>
|
||||
<PageHeader
|
||||
className="site-page-header"
|
||||
title={`${projectCount} ${t('projects')}`}
|
||||
|
||||
@@ -369,14 +369,14 @@ const ProjectView = React.memo(() => {
|
||||
// Show loading state while project is being fetched or translations are loading
|
||||
if (projectLoading || !isInitialized || !translationsReady) {
|
||||
return (
|
||||
<div style={{ marginBlockStart: 70, marginBlockEnd: 12, minHeight: '80vh' }}>
|
||||
<div style={{ marginBlockEnd: 12, minHeight: '80vh' }}>
|
||||
<SuspenseFallback />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ marginBlockStart: 70, marginBlockEnd: 12, minHeight: '80vh' }}>
|
||||
<div style={{ marginBlockEnd: 12, minHeight: '80vh' }}>
|
||||
<ProjectViewHeader />
|
||||
|
||||
<Tabs
|
||||
|
||||
@@ -54,7 +54,7 @@ const Schedule: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ marginBlockStart: 65, minHeight: '90vh' }}>
|
||||
<div style={{ minHeight: '90vh' }}>
|
||||
<Flex align="center" justify="space-between">
|
||||
<Flex
|
||||
gap={16}
|
||||
|
||||
Reference in New Issue
Block a user