Merge branch 'imp/task-list-performance-fixes' of https://github.com/Worklenz/worklenz into release/v2.0.4
This commit is contained in:
chamiakJ
@@ -967,4 +967,212 @@ export default class TasksControllerV2 extends TasksControllerBase {
|
||||
log_error(`Error updating task weight: ${error}`);
|
||||
}
|
||||
}
|
||||
|
||||
@HandleExceptions()
|
||||
public static async getTasksV3(req: IWorkLenzRequest, res: IWorkLenzResponse): Promise<IWorkLenzResponse> {
|
||||
const isSubTasks = !!req.query.parent_task;
|
||||
const groupBy = (req.query.group || GroupBy.STATUS) as string;
|
||||
const archived = req.query.archived === "true";
|
||||
|
||||
// Skip heavy progress calculation for initial load to improve performance
|
||||
// Progress values are already calculated and stored in the database
|
||||
// Only refresh if explicitly requested
|
||||
if (req.query.refresh_progress === "true" && req.params.id) {
|
||||
await this.refreshProjectTaskProgressValues(req.params.id);
|
||||
}
|
||||
|
||||
const q = TasksControllerV2.getQuery(req.user?.id as string, req.query);
|
||||
const params = isSubTasks ? [req.params.id || null, req.query.parent_task] : [req.params.id || null];
|
||||
|
||||
const result = await db.query(q, params);
|
||||
const tasks = [...result.rows];
|
||||
|
||||
// Get groups metadata dynamically from database
|
||||
const groups = await this.getGroups(groupBy, req.params.id);
|
||||
|
||||
// Create priority value to name mapping
|
||||
const priorityMap: Record<string, string> = {
|
||||
"0": "low",
|
||||
"1": "medium",
|
||||
"2": "high"
|
||||
};
|
||||
|
||||
// Create status category mapping based on actual status names from database
|
||||
const statusCategoryMap: Record<string, string> = {};
|
||||
for (const group of groups) {
|
||||
if (groupBy === GroupBy.STATUS && group.id) {
|
||||
// Use the actual status name from database, convert to lowercase for consistency
|
||||
statusCategoryMap[group.id] = group.name.toLowerCase().replace(/\s+/g, "_");
|
||||
}
|
||||
}
|
||||
|
||||
// Transform tasks with all necessary data preprocessing
|
||||
const transformedTasks = tasks.map((task, index) => {
|
||||
// Update task with calculated values (lightweight version)
|
||||
TasksControllerV2.updateTaskViewModel(task);
|
||||
task.index = index;
|
||||
|
||||
// Convert time values
|
||||
const convertTimeValue = (value: any): number => {
|
||||
if (typeof value === "number") return value;
|
||||
if (typeof value === "string") {
|
||||
const parsed = parseFloat(value);
|
||||
return isNaN(parsed) ? 0 : parsed;
|
||||
}
|
||||
if (value && typeof value === "object") {
|
||||
if ("hours" in value || "minutes" in value) {
|
||||
const hours = Number(value.hours || 0);
|
||||
const minutes = Number(value.minutes || 0);
|
||||
return hours + (minutes / 60);
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
|
||||
return {
|
||||
id: task.id,
|
||||
task_key: task.task_key || "",
|
||||
title: task.name || "",
|
||||
description: task.description || "",
|
||||
// Use dynamic status mapping from database
|
||||
status: statusCategoryMap[task.status] || task.status,
|
||||
// Pre-processed priority using mapping
|
||||
priority: priorityMap[task.priority_value?.toString()] || "medium",
|
||||
// Use actual phase name from database
|
||||
phase: task.phase_name || "Development",
|
||||
progress: typeof task.complete_ratio === "number" ? task.complete_ratio : 0,
|
||||
assignees: task.assignees?.map((a: any) => a.team_member_id) || [],
|
||||
assignee_names: task.assignee_names || task.names || [],
|
||||
labels: task.labels?.map((l: any) => ({
|
||||
id: l.id || l.label_id,
|
||||
name: l.name,
|
||||
color: l.color_code || "#1890ff",
|
||||
end: l.end,
|
||||
names: l.names
|
||||
})) || [],
|
||||
dueDate: task.end_date,
|
||||
timeTracking: {
|
||||
estimated: convertTimeValue(task.total_time),
|
||||
logged: convertTimeValue(task.time_spent),
|
||||
},
|
||||
customFields: {},
|
||||
createdAt: task.created_at || new Date().toISOString(),
|
||||
updatedAt: task.updated_at || new Date().toISOString(),
|
||||
order: typeof task.sort_order === "number" ? task.sort_order : 0,
|
||||
// Additional metadata for frontend
|
||||
originalStatusId: task.status,
|
||||
originalPriorityId: task.priority,
|
||||
statusColor: task.status_color,
|
||||
priorityColor: task.priority_color,
|
||||
};
|
||||
});
|
||||
|
||||
// Create groups based on dynamic data from database
|
||||
const groupedResponse: Record<string, any> = {};
|
||||
|
||||
// Initialize groups from database data
|
||||
groups.forEach(group => {
|
||||
const groupKey = groupBy === GroupBy.STATUS
|
||||
? group.name.toLowerCase().replace(/\s+/g, "_")
|
||||
: groupBy === GroupBy.PRIORITY
|
||||
? priorityMap[(group as any).value?.toString()] || group.name.toLowerCase()
|
||||
: group.name.toLowerCase().replace(/\s+/g, "_");
|
||||
|
||||
groupedResponse[groupKey] = {
|
||||
id: group.id,
|
||||
title: group.name,
|
||||
groupType: groupBy,
|
||||
groupValue: groupKey,
|
||||
collapsed: false,
|
||||
tasks: [],
|
||||
taskIds: [],
|
||||
color: group.color_code || this.getDefaultGroupColor(groupBy, groupKey),
|
||||
// Include additional metadata from database
|
||||
category_id: group.category_id,
|
||||
start_date: group.start_date,
|
||||
end_date: group.end_date,
|
||||
sort_index: (group as any).sort_index,
|
||||
};
|
||||
});
|
||||
|
||||
// Distribute tasks into groups
|
||||
transformedTasks.forEach(task => {
|
||||
let groupKey: string;
|
||||
if (groupBy === GroupBy.STATUS) {
|
||||
groupKey = task.status;
|
||||
} else if (groupBy === GroupBy.PRIORITY) {
|
||||
groupKey = task.priority;
|
||||
} else {
|
||||
groupKey = task.phase.toLowerCase().replace(/\s+/g, "_");
|
||||
}
|
||||
|
||||
if (groupedResponse[groupKey]) {
|
||||
groupedResponse[groupKey].tasks.push(task);
|
||||
groupedResponse[groupKey].taskIds.push(task.id);
|
||||
}
|
||||
});
|
||||
|
||||
// Sort tasks within each group by order
|
||||
Object.values(groupedResponse).forEach((group: any) => {
|
||||
group.tasks.sort((a: any, b: any) => a.order - b.order);
|
||||
});
|
||||
|
||||
// Convert to array format expected by frontend, maintaining database order
|
||||
const responseGroups = groups
|
||||
.map(group => {
|
||||
const groupKey = groupBy === GroupBy.STATUS
|
||||
? group.name.toLowerCase().replace(/\s+/g, "_")
|
||||
: groupBy === GroupBy.PRIORITY
|
||||
? priorityMap[(group as any).value?.toString()] || group.name.toLowerCase()
|
||||
: group.name.toLowerCase().replace(/\s+/g, "_");
|
||||
|
||||
return groupedResponse[groupKey];
|
||||
})
|
||||
.filter(group => group && (group.tasks.length > 0 || req.query.include_empty === "true"));
|
||||
|
||||
return res.status(200).send(new ServerResponse(true, {
|
||||
groups: responseGroups,
|
||||
allTasks: transformedTasks,
|
||||
grouping: groupBy,
|
||||
totalTasks: transformedTasks.length
|
||||
}));
|
||||
}
|
||||
|
||||
private static getDefaultGroupColor(groupBy: string, groupValue: string): string {
|
||||
const colorMaps: Record<string, Record<string, string>> = {
|
||||
[GroupBy.STATUS]: {
|
||||
todo: "#f0f0f0",
|
||||
doing: "#1890ff",
|
||||
done: "#52c41a",
|
||||
},
|
||||
[GroupBy.PRIORITY]: {
|
||||
critical: "#ff4d4f",
|
||||
high: "#ff7a45",
|
||||
medium: "#faad14",
|
||||
low: "#52c41a",
|
||||
},
|
||||
[GroupBy.PHASE]: {
|
||||
planning: "#722ed1",
|
||||
development: "#1890ff",
|
||||
testing: "#faad14",
|
||||
deployment: "#52c41a",
|
||||
},
|
||||
};
|
||||
|
||||
return colorMaps[groupBy]?.[groupValue] || "#d9d9d9";
|
||||
}
|
||||
|
||||
@HandleExceptions()
|
||||
public static async refreshTaskProgress(req: IWorkLenzRequest, res: IWorkLenzResponse): Promise<IWorkLenzResponse> {
|
||||
try {
|
||||
if (req.params.id) {
|
||||
await this.refreshProjectTaskProgressValues(req.params.id);
|
||||
return res.status(200).send(new ServerResponse(true, { message: "Task progress refreshed successfully" }));
|
||||
}
|
||||
return res.status(400).send(new ServerResponse(false, "Project ID is required"));
|
||||
} catch (error) {
|
||||
log_error(`Error refreshing task progress: ${error}`);
|
||||
return res.status(500).send(new ServerResponse(false, "Failed to refresh task progress"));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -42,6 +42,8 @@ tasksApiRouter.get("/list/columns/:id", idParamValidator, safeControllerFunction
|
||||
tasksApiRouter.put("/list/columns/:id", idParamValidator, safeControllerFunction(TaskListColumnsController.toggleColumn));
|
||||
|
||||
tasksApiRouter.get("/list/v2/:id", idParamValidator, safeControllerFunction(getList));
|
||||
tasksApiRouter.get("/list/v3/:id", idParamValidator, safeControllerFunction(TasksControllerV2.getTasksV3));
|
||||
tasksApiRouter.post("/refresh-progress/:id", idParamValidator, safeControllerFunction(TasksControllerV2.refreshTaskProgress));
|
||||
tasksApiRouter.get("/assignees/:id", idParamValidator, safeControllerFunction(TasksController.getProjectTaskAssignees));
|
||||
|
||||
tasksApiRouter.put("/bulk/status", mapTasksToBulkUpdate, bulkTasksStatusValidator, safeControllerFunction(TasksController.bulkChangeStatus));
|
||||
|
||||
11
worklenz-frontend/package-lock.json
generated
11
worklenz-frontend/package-lock.json
generated
@@ -67,6 +67,7 @@
|
||||
"@types/node": "^20.8.4",
|
||||
"@types/react": "19.0.0",
|
||||
"@types/react-dom": "19.0.0",
|
||||
"@types/react-window": "^1.8.8",
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"postcss": "^8.5.2",
|
||||
@@ -2636,6 +2637,16 @@
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-window": {
|
||||
"version": "1.8.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.8.tgz",
|
||||
"integrity": "sha512-8Ls660bHR1AUA2kuRvVG9D/4XpRC6wjAaPT9dil7Ckc76eP9TKWZwwmgfq8Q1LANX3QNDnoU4Zp48A3w+zK69Q==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/trusted-types": {
|
||||
"version": "2.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
|
||||
|
||||
@@ -71,6 +71,7 @@
|
||||
"@types/node": "^20.8.4",
|
||||
"@types/react": "19.0.0",
|
||||
"@types/react-dom": "19.0.0",
|
||||
"@types/react-window": "^1.8.8",
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"postcss": "^8.5.2",
|
||||
|
||||
@@ -30,6 +30,22 @@ export interface ITaskListConfigV2 {
|
||||
isSubtasksInclude: boolean;
|
||||
}
|
||||
|
||||
export interface ITaskListV3Response {
|
||||
groups: Array<{
|
||||
id: string;
|
||||
title: string;
|
||||
groupType: 'status' | 'priority' | 'phase';
|
||||
groupValue: string;
|
||||
collapsed: boolean;
|
||||
tasks: any[];
|
||||
taskIds: string[];
|
||||
color: string;
|
||||
}>;
|
||||
allTasks: any[];
|
||||
grouping: string;
|
||||
totalTasks: number;
|
||||
}
|
||||
|
||||
export const tasksApiService = {
|
||||
getTaskList: async (config: ITaskListConfigV2): Promise<IServerResponse<ITaskListGroup[]>> => {
|
||||
const q = toQueryString(config);
|
||||
@@ -119,4 +135,15 @@ export const tasksApiService = {
|
||||
const response = await apiClient.get(`${rootUrl}/dependency-status${q}`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
getTaskListV3: async (config: ITaskListConfigV2): Promise<IServerResponse<ITaskListV3Response>> => {
|
||||
const q = toQueryString(config);
|
||||
const response = await apiClient.get(`${rootUrl}/list/v3/${config.id}${q}`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
refreshTaskProgress: async (projectId: string): Promise<IServerResponse<{ message: string }>> => {
|
||||
const response = await apiClient.post(`${rootUrl}/refresh-progress/${projectId}`);
|
||||
return response.data;
|
||||
},
|
||||
};
|
||||
|
||||
220
worklenz-frontend/src/components/AssigneeSelector.tsx
Normal file
220
worklenz-frontend/src/components/AssigneeSelector.tsx
Normal file
@@ -0,0 +1,220 @@
|
||||
import React, { useState, useRef, useEffect, useMemo } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { PlusOutlined, UserAddOutlined } from '@ant-design/icons';
|
||||
import { RootState } from '@/app/store';
|
||||
import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
|
||||
import { ITeamMembersViewModel } from '@/types/teamMembers/teamMembersViewModel.types';
|
||||
import { useSocket } from '@/socket/socketContext';
|
||||
import { SocketEvents } from '@/shared/socket-events';
|
||||
import { useAuthService } from '@/hooks/useAuth';
|
||||
import { Avatar, Button, Checkbox } from '@/components';
|
||||
import { sortTeamMembers } from '@/utils/sort-team-members';
|
||||
|
||||
interface AssigneeSelectorProps {
|
||||
task: IProjectTask;
|
||||
groupId?: string | null;
|
||||
isDarkMode?: boolean;
|
||||
}
|
||||
|
||||
const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
|
||||
task,
|
||||
groupId = null,
|
||||
isDarkMode = false
|
||||
}) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [teamMembers, setTeamMembers] = useState<ITeamMembersViewModel>({ data: [], total: 0 });
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
const searchInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const { projectId } = useSelector((state: RootState) => state.projectReducer);
|
||||
const members = useSelector((state: RootState) => state.teamMembersReducer.teamMembers);
|
||||
const currentSession = useAuthService().getCurrentSession();
|
||||
const { socket } = useSocket();
|
||||
|
||||
const filteredMembers = useMemo(() => {
|
||||
return teamMembers?.data?.filter(member =>
|
||||
member.name?.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
);
|
||||
}, [teamMembers, searchQuery]);
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
const handleDropdownToggle = () => {
|
||||
if (!isOpen) {
|
||||
// Prepare team members data when opening
|
||||
const assignees = task?.assignees?.map(assignee => assignee.team_member_id);
|
||||
const membersData = (members?.data || []).map(member => ({
|
||||
...member,
|
||||
selected: assignees?.includes(member.id),
|
||||
}));
|
||||
const sortedMembers = sortTeamMembers(membersData);
|
||||
setTeamMembers({ data: sortedMembers });
|
||||
|
||||
// Focus search input after opening
|
||||
setTimeout(() => {
|
||||
searchInputRef.current?.focus();
|
||||
}, 0);
|
||||
}
|
||||
setIsOpen(!isOpen);
|
||||
};
|
||||
|
||||
const handleMemberToggle = (memberId: string, checked: boolean) => {
|
||||
if (!memberId || !projectId || !task?.id || !currentSession?.id) return;
|
||||
|
||||
const body = {
|
||||
team_member_id: memberId,
|
||||
project_id: projectId,
|
||||
task_id: task.id,
|
||||
reporter_id: currentSession.id,
|
||||
mode: checked ? 0 : 1,
|
||||
parent_task: task.parent_task_id,
|
||||
};
|
||||
|
||||
socket?.emit(SocketEvents.QUICK_ASSIGNEES_UPDATE.toString(), JSON.stringify(body));
|
||||
};
|
||||
|
||||
const checkMemberSelected = (memberId: string) => {
|
||||
if (!memberId) return false;
|
||||
const assignees = task?.assignees?.map(assignee => assignee.team_member_id);
|
||||
return assignees?.includes(memberId) || false;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative" ref={dropdownRef}>
|
||||
<button
|
||||
onClick={handleDropdownToggle}
|
||||
className={`
|
||||
w-5 h-5 rounded-full border border-dashed flex items-center justify-center
|
||||
transition-colors duration-200
|
||||
${isDarkMode
|
||||
? 'border-gray-600 hover:border-gray-500 hover:bg-gray-800 text-gray-400'
|
||||
: 'border-gray-300 hover:border-gray-400 hover:bg-gray-100 text-gray-600'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<PlusOutlined className="text-xs" />
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<div
|
||||
className={`
|
||||
absolute top-6 left-0 z-50 w-72 rounded-md shadow-lg border
|
||||
${isDarkMode
|
||||
? 'bg-gray-800 border-gray-600'
|
||||
: 'bg-white border-gray-200'
|
||||
}
|
||||
`}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className={`p-2 border-b ${isDarkMode ? 'border-gray-600' : 'border-gray-300'}`}>
|
||||
<input
|
||||
ref={searchInputRef}
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Search members..."
|
||||
className={`
|
||||
w-full px-2 py-1 text-xs rounded border
|
||||
${isDarkMode
|
||||
? 'bg-gray-700 border-gray-600 text-gray-100 placeholder-gray-400 focus:border-blue-500'
|
||||
: 'bg-white border-gray-300 text-gray-900 placeholder-gray-500 focus:border-blue-500'
|
||||
}
|
||||
focus:outline-none focus:ring-1 focus:ring-blue-500
|
||||
`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Members List */}
|
||||
<div className="max-h-48 overflow-y-auto">
|
||||
{filteredMembers && filteredMembers.length > 0 ? (
|
||||
filteredMembers.map((member) => (
|
||||
<div
|
||||
key={member.id}
|
||||
className={`
|
||||
flex items-center gap-2 p-2 cursor-pointer transition-colors
|
||||
${member.pending_invitation
|
||||
? 'opacity-50 cursor-not-allowed'
|
||||
: isDarkMode
|
||||
? 'hover:bg-gray-700'
|
||||
: 'hover:bg-gray-50'
|
||||
}
|
||||
`}
|
||||
onClick={() => {
|
||||
if (!member.pending_invitation) {
|
||||
const isSelected = checkMemberSelected(member.id || '');
|
||||
handleMemberToggle(member.id || '', !isSelected);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Checkbox
|
||||
checked={checkMemberSelected(member.id || '')}
|
||||
onChange={(checked) => handleMemberToggle(member.id || '', checked)}
|
||||
disabled={member.pending_invitation}
|
||||
isDarkMode={isDarkMode}
|
||||
/>
|
||||
|
||||
<Avatar
|
||||
src={member.avatar_url}
|
||||
name={member.name || ''}
|
||||
size={24}
|
||||
isDarkMode={isDarkMode}
|
||||
/>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className={`text-xs font-medium truncate ${isDarkMode ? 'text-gray-100' : 'text-gray-900'}`}>
|
||||
{member.name}
|
||||
</div>
|
||||
<div className={`text-xs truncate ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}`}>
|
||||
{member.email}
|
||||
{member.pending_invitation && (
|
||||
<span className="text-red-400 ml-1">(Pending)</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className={`p-4 text-center ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}`}>
|
||||
<div className="text-xs">No members found</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className={`p-2 border-t ${isDarkMode ? 'border-gray-600' : 'border-gray-200'}`}>
|
||||
<button
|
||||
className={`
|
||||
w-full flex items-center justify-center gap-1 px-2 py-1 text-xs rounded
|
||||
transition-colors
|
||||
${isDarkMode
|
||||
? 'text-blue-400 hover:bg-gray-700'
|
||||
: 'text-blue-600 hover:bg-blue-50'
|
||||
}
|
||||
`}
|
||||
onClick={() => {
|
||||
// TODO: Implement invite member functionality
|
||||
console.log('Invite member clicked');
|
||||
}}
|
||||
>
|
||||
<UserAddOutlined />
|
||||
Invite member
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AssigneeSelector;
|
||||
89
worklenz-frontend/src/components/Avatar.tsx
Normal file
89
worklenz-frontend/src/components/Avatar.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
import React from 'react';
|
||||
|
||||
interface AvatarProps {
|
||||
name?: string;
|
||||
size?: number | 'small' | 'default' | 'large';
|
||||
isDarkMode?: boolean;
|
||||
className?: string;
|
||||
src?: string;
|
||||
backgroundColor?: string;
|
||||
onClick?: (e: React.MouseEvent) => void;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
const Avatar: React.FC<AvatarProps> = ({
|
||||
name = '',
|
||||
size = 'default',
|
||||
isDarkMode = false,
|
||||
className = '',
|
||||
src,
|
||||
backgroundColor,
|
||||
onClick,
|
||||
style = {}
|
||||
}) => {
|
||||
// Handle both numeric and string sizes
|
||||
const getSize = () => {
|
||||
if (typeof size === 'number') {
|
||||
return { width: size, height: size, fontSize: `${size * 0.4}px` };
|
||||
}
|
||||
|
||||
const sizeMap = {
|
||||
small: { width: 24, height: 24, fontSize: '10px' },
|
||||
default: { width: 32, height: 32, fontSize: '14px' },
|
||||
large: { width: 48, height: 48, fontSize: '18px' }
|
||||
};
|
||||
|
||||
return sizeMap[size];
|
||||
};
|
||||
|
||||
const sizeStyle = getSize();
|
||||
|
||||
const lightColors = [
|
||||
'#f56565', '#4299e1', '#48bb78', '#ed8936', '#9f7aea',
|
||||
'#ed64a6', '#667eea', '#38b2ac', '#f6ad55', '#4fd1c7'
|
||||
];
|
||||
|
||||
const darkColors = [
|
||||
'#e53e3e', '#3182ce', '#38a169', '#dd6b20', '#805ad5',
|
||||
'#d53f8c', '#5a67d8', '#319795', '#d69e2e', '#319795'
|
||||
];
|
||||
|
||||
const colors = isDarkMode ? darkColors : lightColors;
|
||||
const colorIndex = name.charCodeAt(0) % colors.length;
|
||||
const defaultBgColor = backgroundColor || colors[colorIndex];
|
||||
|
||||
const handleClick = (e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
onClick?.(e);
|
||||
};
|
||||
|
||||
const avatarStyle = {
|
||||
...sizeStyle,
|
||||
backgroundColor: defaultBgColor,
|
||||
...style
|
||||
};
|
||||
|
||||
if (src) {
|
||||
return (
|
||||
<img
|
||||
src={src}
|
||||
alt={name}
|
||||
onClick={handleClick}
|
||||
className={`rounded-full object-cover shadow-sm cursor-pointer ${className}`}
|
||||
style={avatarStyle}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={handleClick}
|
||||
className={`rounded-full flex items-center justify-center text-white font-medium shadow-sm cursor-pointer ${className}`}
|
||||
style={avatarStyle}
|
||||
>
|
||||
{name.charAt(0)?.toUpperCase() || '?'}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Avatar;
|
||||
111
worklenz-frontend/src/components/AvatarGroup.tsx
Normal file
111
worklenz-frontend/src/components/AvatarGroup.tsx
Normal file
@@ -0,0 +1,111 @@
|
||||
import React, { useCallback, useMemo } from 'react';
|
||||
import { Avatar, Tooltip } from './index';
|
||||
|
||||
interface Member {
|
||||
id?: string;
|
||||
team_member_id?: string;
|
||||
name?: string;
|
||||
names?: string[];
|
||||
avatar_url?: string;
|
||||
color_code?: string;
|
||||
end?: boolean;
|
||||
}
|
||||
|
||||
interface AvatarGroupProps {
|
||||
members: Member[];
|
||||
maxCount?: number;
|
||||
size?: number | 'small' | 'default' | 'large';
|
||||
isDarkMode?: boolean;
|
||||
className?: string;
|
||||
onClick?: (e: React.MouseEvent) => void;
|
||||
}
|
||||
|
||||
const AvatarGroup: React.FC<AvatarGroupProps> = ({
|
||||
members,
|
||||
maxCount,
|
||||
size = 28,
|
||||
isDarkMode = false,
|
||||
className = '',
|
||||
onClick
|
||||
}) => {
|
||||
const stopPropagation = useCallback((e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
onClick?.(e);
|
||||
}, [onClick]);
|
||||
|
||||
const renderAvatar = useCallback((member: Member, index: number) => {
|
||||
const memberName = member.end && member.names ? member.names.join(', ') : member.name || '';
|
||||
const displayName = member.end && member.names ? member.name : member.name?.charAt(0).toUpperCase();
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
key={member.team_member_id || member.id || index}
|
||||
title={memberName}
|
||||
isDarkMode={isDarkMode}
|
||||
>
|
||||
<Avatar
|
||||
name={member.name || ''}
|
||||
src={member.avatar_url}
|
||||
size={size}
|
||||
isDarkMode={isDarkMode}
|
||||
backgroundColor={member.color_code}
|
||||
onClick={stopPropagation}
|
||||
className="border-2 border-white"
|
||||
style={isDarkMode ? { borderColor: '#374151' } : {}}
|
||||
/>
|
||||
</Tooltip>
|
||||
);
|
||||
}, [stopPropagation, size, isDarkMode]);
|
||||
|
||||
const visibleMembers = useMemo(() => {
|
||||
return maxCount ? members.slice(0, maxCount) : members;
|
||||
}, [members, maxCount]);
|
||||
|
||||
const remainingCount = useMemo(() => {
|
||||
return maxCount ? Math.max(0, members.length - maxCount) : 0;
|
||||
}, [members.length, maxCount]);
|
||||
|
||||
const avatarElements = useMemo(() => {
|
||||
return visibleMembers.map((member, index) => renderAvatar(member, index));
|
||||
}, [visibleMembers, renderAvatar]);
|
||||
|
||||
const getSizeStyle = () => {
|
||||
if (typeof size === 'number') {
|
||||
return { width: size, height: size, fontSize: `${size * 0.4}px` };
|
||||
}
|
||||
|
||||
const sizeMap = {
|
||||
small: { width: 24, height: 24, fontSize: '10px' },
|
||||
default: { width: 32, height: 32, fontSize: '14px' },
|
||||
large: { width: 48, height: 48, fontSize: '18px' }
|
||||
};
|
||||
|
||||
return sizeMap[size];
|
||||
};
|
||||
|
||||
return (
|
||||
<div onClick={stopPropagation} className={`flex -space-x-1 ${className}`}>
|
||||
{avatarElements}
|
||||
{remainingCount > 0 && (
|
||||
<Tooltip
|
||||
title={`${remainingCount} more`}
|
||||
isDarkMode={isDarkMode}
|
||||
>
|
||||
<div
|
||||
className={`rounded-full flex items-center justify-center text-white font-medium shadow-sm border-2 cursor-pointer ${
|
||||
isDarkMode
|
||||
? 'bg-gray-600 border-gray-700'
|
||||
: 'bg-gray-400 border-white'
|
||||
}`}
|
||||
style={getSizeStyle()}
|
||||
onClick={stopPropagation}
|
||||
>
|
||||
+{remainingCount}
|
||||
</div>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AvatarGroup;
|
||||
64
worklenz-frontend/src/components/Button.tsx
Normal file
64
worklenz-frontend/src/components/Button.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
import React from 'react';
|
||||
|
||||
interface ButtonProps {
|
||||
children?: React.ReactNode;
|
||||
onClick?: () => void;
|
||||
variant?: 'text' | 'default' | 'primary' | 'danger';
|
||||
size?: 'small' | 'default' | 'large';
|
||||
className?: string;
|
||||
icon?: React.ReactNode;
|
||||
isDarkMode?: boolean;
|
||||
disabled?: boolean;
|
||||
type?: 'button' | 'submit' | 'reset';
|
||||
}
|
||||
|
||||
const Button: React.FC<ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>> = ({
|
||||
children,
|
||||
onClick,
|
||||
variant = 'default',
|
||||
size = 'default',
|
||||
className = '',
|
||||
icon,
|
||||
isDarkMode = false,
|
||||
disabled = false,
|
||||
type = 'button',
|
||||
...props
|
||||
}) => {
|
||||
const baseClasses = `inline-flex items-center justify-center font-medium transition-colors duration-200 focus:outline-none focus:ring-2 ${isDarkMode ? 'focus:ring-blue-400' : 'focus:ring-blue-500'} focus:ring-offset-1 ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`;
|
||||
|
||||
const variantClasses = {
|
||||
text: isDarkMode
|
||||
? 'text-gray-400 hover:text-gray-200 hover:bg-gray-700/50'
|
||||
: 'text-gray-600 hover:text-gray-800 hover:bg-gray-100',
|
||||
default: isDarkMode
|
||||
? 'bg-gray-800 border border-gray-600 text-gray-200 hover:bg-gray-700'
|
||||
: 'bg-white border border-gray-300 text-gray-700 hover:bg-gray-50',
|
||||
primary: isDarkMode
|
||||
? 'bg-blue-600 text-white hover:bg-blue-700'
|
||||
: 'bg-blue-500 text-white hover:bg-blue-600',
|
||||
danger: isDarkMode
|
||||
? 'bg-red-600 text-white hover:bg-red-700'
|
||||
: 'bg-red-500 text-white hover:bg-red-600'
|
||||
};
|
||||
|
||||
const sizeClasses = {
|
||||
small: 'px-2 py-1 text-xs rounded',
|
||||
default: 'px-3 py-2 text-sm rounded-md',
|
||||
large: 'px-4 py-3 text-base rounded-lg'
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
type={type}
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
className={`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`}
|
||||
{...props}
|
||||
>
|
||||
{icon && <span className={children ? "mr-1" : ""}>{icon}</span>}
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default Button;
|
||||
42
worklenz-frontend/src/components/Checkbox.tsx
Normal file
42
worklenz-frontend/src/components/Checkbox.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import React from 'react';
|
||||
|
||||
interface CheckboxProps {
|
||||
checked: boolean;
|
||||
onChange: (checked: boolean) => void;
|
||||
isDarkMode?: boolean;
|
||||
className?: string;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const Checkbox: React.FC<CheckboxProps> = ({
|
||||
checked,
|
||||
onChange,
|
||||
isDarkMode = false,
|
||||
className = '',
|
||||
disabled = false
|
||||
}) => {
|
||||
return (
|
||||
<label className={`inline-flex items-center cursor-pointer ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className}`}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
onChange={(e) => !disabled && onChange(e.target.checked)}
|
||||
disabled={disabled}
|
||||
className="sr-only"
|
||||
/>
|
||||
<div className={`w-4 h-4 border-2 rounded transition-all duration-200 flex items-center justify-center ${
|
||||
checked
|
||||
? `${isDarkMode ? 'bg-blue-600 border-blue-600' : 'bg-blue-500 border-blue-500'}`
|
||||
: `${isDarkMode ? 'bg-gray-800 border-gray-600 hover:border-gray-500' : 'bg-white border-gray-300 hover:border-gray-400'}`
|
||||
} ${disabled ? 'cursor-not-allowed' : ''}`}>
|
||||
{checked && (
|
||||
<svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
</label>
|
||||
);
|
||||
};
|
||||
|
||||
export default Checkbox;
|
||||
30
worklenz-frontend/src/components/CustomColordLabel.tsx
Normal file
30
worklenz-frontend/src/components/CustomColordLabel.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import React from 'react';
|
||||
import { Tooltip } from 'antd';
|
||||
import { Label } from '@/types/task-management.types';
|
||||
|
||||
interface CustomColordLabelProps {
|
||||
label: Label;
|
||||
isDarkMode?: boolean;
|
||||
}
|
||||
|
||||
const CustomColordLabel: React.FC<CustomColordLabelProps> = ({
|
||||
label,
|
||||
isDarkMode = false
|
||||
}) => {
|
||||
const truncatedName = label.name && label.name.length > 10
|
||||
? `${label.name.substring(0, 10)}...`
|
||||
: label.name;
|
||||
|
||||
return (
|
||||
<Tooltip title={label.name}>
|
||||
<span
|
||||
className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium text-white flex-shrink-0 max-w-[120px]"
|
||||
style={{ backgroundColor: label.color }}
|
||||
>
|
||||
<span className="truncate">{truncatedName}</span>
|
||||
</span>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomColordLabel;
|
||||
30
worklenz-frontend/src/components/CustomNumberLabel.tsx
Normal file
30
worklenz-frontend/src/components/CustomNumberLabel.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import React from 'react';
|
||||
import { Tooltip } from 'antd';
|
||||
|
||||
interface CustomNumberLabelProps {
|
||||
labelList: string[];
|
||||
namesString: string;
|
||||
isDarkMode?: boolean;
|
||||
}
|
||||
|
||||
const CustomNumberLabel: React.FC<CustomNumberLabelProps> = ({
|
||||
labelList,
|
||||
namesString,
|
||||
isDarkMode = false
|
||||
}) => {
|
||||
return (
|
||||
<Tooltip title={labelList.join(', ')}>
|
||||
<span
|
||||
className={`
|
||||
inline-flex items-center px-2 py-0.5 rounded text-xs font-medium
|
||||
${isDarkMode ? 'bg-gray-600 text-gray-100' : 'bg-gray-200 text-gray-700'}
|
||||
cursor-help
|
||||
`}
|
||||
>
|
||||
{namesString}
|
||||
</span>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomNumberLabel;
|
||||
279
worklenz-frontend/src/components/LabelsSelector.tsx
Normal file
279
worklenz-frontend/src/components/LabelsSelector.tsx
Normal file
@@ -0,0 +1,279 @@
|
||||
import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { PlusOutlined, TagOutlined } from '@ant-design/icons';
|
||||
import { RootState } from '@/app/store';
|
||||
import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
|
||||
import { ITaskLabel } from '@/types/tasks/taskLabel.types';
|
||||
import { useSocket } from '@/socket/socketContext';
|
||||
import { SocketEvents } from '@/shared/socket-events';
|
||||
import { useAuthService } from '@/hooks/useAuth';
|
||||
import { Button, Checkbox, Tag } from '@/components';
|
||||
|
||||
interface LabelsSelectorProps {
|
||||
task: IProjectTask;
|
||||
isDarkMode?: boolean;
|
||||
}
|
||||
|
||||
const LabelsSelector: React.FC<LabelsSelectorProps> = ({
|
||||
task,
|
||||
isDarkMode = false
|
||||
}) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0 });
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
const buttonRef = useRef<HTMLButtonElement>(null);
|
||||
const searchInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const { labels } = useSelector((state: RootState) => state.taskLabelsReducer);
|
||||
const currentSession = useAuthService().getCurrentSession();
|
||||
const { socket } = useSocket();
|
||||
|
||||
const filteredLabels = useMemo(() => {
|
||||
return (labels as ITaskLabel[])?.filter(label =>
|
||||
label.name?.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
) || [];
|
||||
}, [labels, searchQuery]);
|
||||
|
||||
// Update dropdown position
|
||||
const updateDropdownPosition = useCallback(() => {
|
||||
if (buttonRef.current) {
|
||||
const rect = buttonRef.current.getBoundingClientRect();
|
||||
setDropdownPosition({
|
||||
top: rect.bottom + window.scrollY + 2,
|
||||
left: rect.left + window.scrollX,
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Close dropdown when clicking outside and handle scroll
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node) &&
|
||||
buttonRef.current && !buttonRef.current.contains(event.target as Node)) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleScroll = () => {
|
||||
if (isOpen) {
|
||||
updateDropdownPosition();
|
||||
}
|
||||
};
|
||||
|
||||
const handleResize = () => {
|
||||
if (isOpen) {
|
||||
updateDropdownPosition();
|
||||
}
|
||||
};
|
||||
|
||||
if (isOpen) {
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
window.addEventListener('scroll', handleScroll, true);
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
window.removeEventListener('scroll', handleScroll, true);
|
||||
window.removeEventListener('resize', handleResize);
|
||||
};
|
||||
} else {
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}
|
||||
}, [isOpen, updateDropdownPosition]);
|
||||
|
||||
const handleDropdownToggle = (e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
console.log('Labels dropdown toggle clicked, current state:', isOpen);
|
||||
|
||||
if (!isOpen) {
|
||||
updateDropdownPosition();
|
||||
setIsOpen(true);
|
||||
// Focus search input after opening
|
||||
setTimeout(() => {
|
||||
searchInputRef.current?.focus();
|
||||
}, 0);
|
||||
} else {
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
const handleLabelToggle = (label: ITaskLabel) => {
|
||||
const labelData = {
|
||||
task_id: task.id,
|
||||
label_id: label.id,
|
||||
parent_task: task.parent_task_id,
|
||||
team_id: currentSession?.team_id,
|
||||
};
|
||||
|
||||
socket?.emit(SocketEvents.TASK_LABELS_CHANGE.toString(), JSON.stringify(labelData));
|
||||
};
|
||||
|
||||
const handleCreateLabel = () => {
|
||||
if (!searchQuery.trim()) return;
|
||||
|
||||
const labelData = {
|
||||
task_id: task.id,
|
||||
label: searchQuery.trim(),
|
||||
parent_task: task.parent_task_id,
|
||||
team_id: currentSession?.team_id,
|
||||
};
|
||||
|
||||
socket?.emit(SocketEvents.CREATE_LABEL.toString(), JSON.stringify(labelData));
|
||||
setSearchQuery('');
|
||||
};
|
||||
|
||||
const checkLabelSelected = (labelId: string) => {
|
||||
return task?.all_labels?.some(existingLabel => existingLabel.id === labelId) || false;
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
const existingLabel = filteredLabels.find(
|
||||
label => label.name?.toLowerCase() === searchQuery.toLowerCase()
|
||||
);
|
||||
|
||||
if (!existingLabel && e.key === 'Enter') {
|
||||
handleCreateLabel();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
ref={buttonRef}
|
||||
onClick={handleDropdownToggle}
|
||||
className={`
|
||||
w-5 h-5 rounded border border-dashed flex items-center justify-center
|
||||
transition-colors duration-200
|
||||
${isOpen
|
||||
? isDarkMode
|
||||
? 'border-blue-500 bg-blue-900/20 text-blue-400'
|
||||
: 'border-blue-500 bg-blue-50 text-blue-600'
|
||||
: isDarkMode
|
||||
? 'border-gray-600 hover:border-gray-500 hover:bg-gray-800 text-gray-400'
|
||||
: 'border-gray-300 hover:border-gray-400 hover:bg-gray-100 text-gray-600'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<PlusOutlined className="text-xs" />
|
||||
</button>
|
||||
|
||||
{isOpen && createPortal(
|
||||
<div
|
||||
ref={dropdownRef}
|
||||
className={`
|
||||
fixed z-[9999] w-72 rounded-md shadow-lg border
|
||||
${isDarkMode
|
||||
? 'bg-gray-800 border-gray-600'
|
||||
: 'bg-white border-gray-200'
|
||||
}
|
||||
`}
|
||||
style={{
|
||||
top: dropdownPosition.top,
|
||||
left: dropdownPosition.left,
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className={`p-2 border-b ${isDarkMode ? 'border-gray-600' : 'border-gray-300'}`}>
|
||||
<input
|
||||
ref={searchInputRef}
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="Search labels..."
|
||||
className={`
|
||||
w-full px-2 py-1 text-xs rounded border
|
||||
${isDarkMode
|
||||
? 'bg-gray-700 border-gray-600 text-gray-100 placeholder-gray-400 focus:border-blue-500'
|
||||
: 'bg-white border-gray-300 text-gray-900 placeholder-gray-500 focus:border-blue-500'
|
||||
}
|
||||
focus:outline-none focus:ring-1 focus:ring-blue-500
|
||||
`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Labels List */}
|
||||
<div className="max-h-48 overflow-y-auto">
|
||||
{filteredLabels && filteredLabels.length > 0 ? (
|
||||
filteredLabels.map((label) => (
|
||||
<div
|
||||
key={label.id}
|
||||
className={`
|
||||
flex items-center gap-2 p-2 cursor-pointer transition-colors
|
||||
${isDarkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-50'}
|
||||
`}
|
||||
onClick={() => handleLabelToggle(label)}
|
||||
>
|
||||
<Checkbox
|
||||
checked={checkLabelSelected(label.id || '')}
|
||||
onChange={() => handleLabelToggle(label)}
|
||||
isDarkMode={isDarkMode}
|
||||
/>
|
||||
|
||||
<div
|
||||
className="w-3 h-3 rounded-full flex-shrink-0"
|
||||
style={{ backgroundColor: label.color_code }}
|
||||
/>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className={`text-xs font-medium truncate ${isDarkMode ? 'text-gray-100' : 'text-gray-900'}`}>
|
||||
{label.name}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className={`p-4 text-center ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}`}>
|
||||
<div className="text-xs">No labels found</div>
|
||||
{searchQuery.trim() && (
|
||||
<button
|
||||
onClick={handleCreateLabel}
|
||||
className={`
|
||||
mt-2 px-3 py-1 text-xs rounded border transition-colors
|
||||
${isDarkMode
|
||||
? 'border-gray-600 text-gray-300 hover:bg-gray-700'
|
||||
: 'border-gray-300 text-gray-600 hover:bg-gray-50'
|
||||
}
|
||||
`}
|
||||
>
|
||||
Create "{searchQuery}"
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className={`p-2 border-t ${isDarkMode ? 'border-gray-600' : 'border-gray-200'}`}>
|
||||
<button
|
||||
className={`
|
||||
w-full flex items-center justify-center gap-1 px-2 py-1 text-xs rounded
|
||||
transition-colors
|
||||
${isDarkMode
|
||||
? 'text-blue-400 hover:bg-gray-700'
|
||||
: 'text-blue-600 hover:bg-blue-50'
|
||||
}
|
||||
`}
|
||||
onClick={() => {
|
||||
// TODO: Implement manage labels functionality
|
||||
console.log('Manage labels clicked');
|
||||
}}
|
||||
>
|
||||
<TagOutlined />
|
||||
Manage labels
|
||||
</button>
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default LabelsSelector;
|
||||
84
worklenz-frontend/src/components/Progress.tsx
Normal file
84
worklenz-frontend/src/components/Progress.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
import React from 'react';
|
||||
|
||||
interface ProgressProps {
|
||||
percent: number;
|
||||
type?: 'line' | 'circle';
|
||||
size?: number;
|
||||
strokeColor?: string;
|
||||
strokeWidth?: number;
|
||||
showInfo?: boolean;
|
||||
isDarkMode?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const Progress: React.FC<ProgressProps> = ({
|
||||
percent,
|
||||
type = 'line',
|
||||
size = 24,
|
||||
strokeColor = '#1890ff',
|
||||
strokeWidth = 2,
|
||||
showInfo = true,
|
||||
isDarkMode = false,
|
||||
className = ''
|
||||
}) => {
|
||||
// Ensure percent is between 0 and 100
|
||||
const normalizedPercent = Math.min(Math.max(percent, 0), 100);
|
||||
|
||||
if (type === 'circle') {
|
||||
const radius = (size - strokeWidth) / 2;
|
||||
const circumference = radius * 2 * Math.PI;
|
||||
const strokeDasharray = circumference;
|
||||
const strokeDashoffset = circumference - (normalizedPercent / 100) * circumference;
|
||||
|
||||
return (
|
||||
<div className={`relative inline-flex items-center justify-center ${className}`}>
|
||||
<svg width={size} height={size} className="transform -rotate-90">
|
||||
<circle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={radius}
|
||||
stroke={isDarkMode ? '#4b5563' : '#e5e7eb'}
|
||||
strokeWidth={strokeWidth}
|
||||
fill="none"
|
||||
/>
|
||||
<circle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={radius}
|
||||
stroke={normalizedPercent === 100 ? '#52c41a' : strokeColor}
|
||||
strokeWidth={strokeWidth}
|
||||
fill="none"
|
||||
strokeDasharray={strokeDasharray}
|
||||
strokeDashoffset={strokeDashoffset}
|
||||
strokeLinecap="round"
|
||||
className="transition-all duration-300"
|
||||
/>
|
||||
</svg>
|
||||
{showInfo && (
|
||||
<span className={`absolute text-xs font-medium ${isDarkMode ? 'text-gray-300' : 'text-gray-700'}`}>
|
||||
{normalizedPercent}%
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`w-full rounded-full h-2 ${isDarkMode ? 'bg-gray-600' : 'bg-gray-200'} ${className}`}>
|
||||
<div
|
||||
className="h-2 rounded-full transition-all duration-300"
|
||||
style={{
|
||||
width: `${normalizedPercent}%`,
|
||||
backgroundColor: normalizedPercent === 100 ? '#52c41a' : strokeColor
|
||||
}}
|
||||
/>
|
||||
{showInfo && (
|
||||
<div className={`mt-1 text-xs ${isDarkMode ? 'text-gray-300' : 'text-gray-700'}`}>
|
||||
{normalizedPercent}%
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Progress;
|
||||
54
worklenz-frontend/src/components/Tag.tsx
Normal file
54
worklenz-frontend/src/components/Tag.tsx
Normal file
@@ -0,0 +1,54 @@
|
||||
import React from 'react';
|
||||
|
||||
interface TagProps {
|
||||
children: React.ReactNode;
|
||||
color?: string;
|
||||
backgroundColor?: string;
|
||||
className?: string;
|
||||
size?: 'small' | 'default';
|
||||
variant?: 'default' | 'outlined';
|
||||
isDarkMode?: boolean;
|
||||
}
|
||||
|
||||
const Tag: React.FC<TagProps> = ({
|
||||
children,
|
||||
color = 'white',
|
||||
backgroundColor = '#1890ff',
|
||||
className = '',
|
||||
size = 'default',
|
||||
variant = 'default',
|
||||
isDarkMode = false
|
||||
}) => {
|
||||
const sizeClasses = {
|
||||
small: 'px-1 py-0.5 text-xs',
|
||||
default: 'px-2 py-1 text-xs'
|
||||
};
|
||||
|
||||
const baseClasses = `inline-flex items-center font-medium rounded ${sizeClasses[size]}`;
|
||||
|
||||
if (variant === 'outlined') {
|
||||
return (
|
||||
<span
|
||||
className={`${baseClasses} border ${className}`}
|
||||
style={{
|
||||
borderColor: backgroundColor,
|
||||
color: backgroundColor,
|
||||
backgroundColor: 'transparent'
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<span
|
||||
className={`${baseClasses} ${className}`}
|
||||
style={{ backgroundColor, color }}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export default Tag;
|
||||
35
worklenz-frontend/src/components/Tooltip.tsx
Normal file
35
worklenz-frontend/src/components/Tooltip.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import React from 'react';
|
||||
|
||||
interface TooltipProps {
|
||||
title: string | React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
isDarkMode?: boolean;
|
||||
placement?: 'top' | 'bottom' | 'left' | 'right';
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const Tooltip: React.FC<TooltipProps> = ({
|
||||
title,
|
||||
children,
|
||||
isDarkMode = false,
|
||||
placement = 'top',
|
||||
className = ''
|
||||
}) => {
|
||||
const placementClasses = {
|
||||
top: 'bottom-full left-1/2 transform -translate-x-1/2 mb-2',
|
||||
bottom: 'top-full left-1/2 transform -translate-x-1/2 mt-2',
|
||||
left: 'right-full top-1/2 transform -translate-y-1/2 mr-2',
|
||||
right: 'left-full top-1/2 transform -translate-y-1/2 ml-2'
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`relative group ${className}`}>
|
||||
{children}
|
||||
<div className={`absolute ${placementClasses[placement]} px-2 py-1 text-xs text-white ${isDarkMode ? 'bg-gray-700' : 'bg-gray-900'} rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-50 pointer-events-none min-w-max`}>
|
||||
{title}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Tooltip;
|
||||
12
worklenz-frontend/src/components/index.ts
Normal file
12
worklenz-frontend/src/components/index.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
// Reusable UI Components
|
||||
export { default as AssigneeSelector } from './AssigneeSelector';
|
||||
export { default as Avatar } from './Avatar';
|
||||
export { default as AvatarGroup } from './AvatarGroup';
|
||||
export { default as Button } from './Button';
|
||||
export { default as Checkbox } from './Checkbox';
|
||||
export { default as CustomColordLabel } from './CustomColordLabel';
|
||||
export { default as CustomNumberLabel } from './CustomNumberLabel';
|
||||
export { default as LabelsSelector } from './LabelsSelector';
|
||||
export { default as Progress } from './Progress';
|
||||
export { default as Tag } from './Tag';
|
||||
export { default as Tooltip } from './Tooltip';
|
||||
@@ -0,0 +1,820 @@
|
||||
import React, { useState, useCallback, useMemo, useEffect, useRef } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
import { createSelector } from '@reduxjs/toolkit';
|
||||
import {
|
||||
SearchOutlined,
|
||||
FilterOutlined,
|
||||
CloseOutlined,
|
||||
DownOutlined,
|
||||
TeamOutlined,
|
||||
TagOutlined,
|
||||
FlagOutlined,
|
||||
GroupOutlined,
|
||||
EyeOutlined,
|
||||
InboxOutlined,
|
||||
CheckOutlined,
|
||||
SettingOutlined,
|
||||
MoreOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { RootState } from '@/app/store';
|
||||
import { AppDispatch } from '@/app/store';
|
||||
import { useAppSelector } from '@/hooks/useAppSelector';
|
||||
import { useAppDispatch } from '@/hooks/useAppDispatch';
|
||||
import useTabSearchParam from '@/hooks/useTabSearchParam';
|
||||
import { useSocket } from '@/socket/socketContext';
|
||||
import { SocketEvents } from '@/shared/socket-events';
|
||||
import { colors } from '@/styles/colors';
|
||||
import SingleAvatar from '@components/common/single-avatar/single-avatar';
|
||||
import { useFilterDataLoader } from '@/hooks/useFilterDataLoader';
|
||||
|
||||
// Import Redux actions
|
||||
import { fetchTasksV3, setSelectedPriorities } from '@/features/task-management/task-management.slice';
|
||||
import { setCurrentGrouping, selectCurrentGrouping } from '@/features/task-management/grouping.slice';
|
||||
import { fetchPriorities } from '@/features/taskAttributes/taskPrioritySlice';
|
||||
import { fetchLabelsByProject, fetchTaskAssignees, setMembers, setLabels } from '@/features/tasks/tasks.slice';
|
||||
import { getTeamMembers } from '@/features/team-members/team-members.slice';
|
||||
import { ITaskPriority } from '@/types/tasks/taskPriority.types';
|
||||
import { ITaskListColumn } from '@/types/tasks/taskList.types';
|
||||
import { IGroupBy } from '@/features/tasks/tasks.slice';
|
||||
|
||||
// Memoized selectors to prevent unnecessary re-renders
|
||||
const selectPriorities = createSelector(
|
||||
[(state: any) => state.priorityReducer.priorities],
|
||||
(priorities) => priorities || []
|
||||
);
|
||||
|
||||
const selectTaskPriorities = createSelector(
|
||||
[(state: any) => state.taskReducer.priorities],
|
||||
(priorities) => priorities || []
|
||||
);
|
||||
|
||||
const selectBoardPriorities = createSelector(
|
||||
[(state: any) => state.boardReducer.priorities],
|
||||
(priorities) => priorities || []
|
||||
);
|
||||
|
||||
const selectTaskLabels = createSelector(
|
||||
[(state: any) => state.taskReducer.labels],
|
||||
(labels) => labels || []
|
||||
);
|
||||
|
||||
const selectBoardLabels = createSelector(
|
||||
[(state: any) => state.boardReducer.labels],
|
||||
(labels) => labels || []
|
||||
);
|
||||
|
||||
const selectTaskAssignees = createSelector(
|
||||
[(state: any) => state.taskReducer.taskAssignees],
|
||||
(assignees) => assignees || []
|
||||
);
|
||||
|
||||
const selectBoardAssignees = createSelector(
|
||||
[(state: any) => state.boardReducer.taskAssignees],
|
||||
(assignees) => assignees || []
|
||||
);
|
||||
|
||||
const selectProject = createSelector(
|
||||
[(state: any) => state.projectReducer.project],
|
||||
(project) => project
|
||||
);
|
||||
|
||||
const selectSelectedPriorities = createSelector(
|
||||
[(state: any) => state.taskManagement.selectedPriorities],
|
||||
(selectedPriorities) => selectedPriorities || []
|
||||
);
|
||||
|
||||
// Types
|
||||
interface FilterOption {
|
||||
id: string;
|
||||
label: string;
|
||||
value: string;
|
||||
color?: string;
|
||||
avatar?: string;
|
||||
count?: number;
|
||||
selected?: boolean;
|
||||
}
|
||||
|
||||
interface FilterSection {
|
||||
id: string;
|
||||
label: string;
|
||||
icon: React.ComponentType<{ className?: string }>;
|
||||
options: FilterOption[];
|
||||
selectedValues: string[];
|
||||
multiSelect: boolean;
|
||||
searchable?: boolean;
|
||||
}
|
||||
|
||||
interface ImprovedTaskFiltersProps {
|
||||
position: 'board' | 'list';
|
||||
className?: string;
|
||||
}
|
||||
|
||||
// Get real filter data from Redux state
|
||||
const useFilterData = (): FilterSection[] => {
|
||||
const { t } = useTranslation('task-list-filters');
|
||||
const [searchParams] = useSearchParams();
|
||||
const { projectView } = useTabSearchParam();
|
||||
|
||||
// Use memoized selectors to prevent unnecessary re-renders
|
||||
const priorities = useAppSelector(selectPriorities);
|
||||
const taskPriorities = useAppSelector(selectTaskPriorities);
|
||||
const boardPriorities = useAppSelector(selectBoardPriorities);
|
||||
const taskLabels = useAppSelector(selectTaskLabels);
|
||||
const boardLabels = useAppSelector(selectBoardLabels);
|
||||
const taskAssignees = useAppSelector(selectTaskAssignees);
|
||||
const boardAssignees = useAppSelector(selectBoardAssignees);
|
||||
const taskGroupBy = useAppSelector(state => state.taskReducer.groupBy);
|
||||
const boardGroupBy = useAppSelector(state => state.boardReducer.groupBy);
|
||||
const project = useAppSelector(selectProject);
|
||||
const currentGrouping = useAppSelector(selectCurrentGrouping);
|
||||
const selectedPriorities = useAppSelector(selectSelectedPriorities);
|
||||
|
||||
const tab = searchParams.get('tab');
|
||||
const currentProjectView = tab === 'tasks-list' ? 'list' : 'kanban';
|
||||
|
||||
// Debug logging
|
||||
console.log('Filter Data Debug:', {
|
||||
priorities: priorities?.length,
|
||||
taskAssignees: taskAssignees?.length,
|
||||
boardAssignees: boardAssignees?.length,
|
||||
labels: taskLabels?.length,
|
||||
boardLabels: boardLabels?.length,
|
||||
currentProjectView,
|
||||
projectId: project?.id
|
||||
});
|
||||
|
||||
return useMemo(() => {
|
||||
const currentPriorities = currentProjectView === 'list' ? taskPriorities : boardPriorities;
|
||||
const currentLabels = currentProjectView === 'list' ? taskLabels : boardLabels;
|
||||
const currentAssignees = currentProjectView === 'list' ? taskAssignees : boardAssignees;
|
||||
const groupByValue = currentGrouping || 'status';
|
||||
|
||||
return [
|
||||
{
|
||||
id: 'priority',
|
||||
label: 'Priority',
|
||||
options: priorities.map((p: any) => ({
|
||||
value: p.id,
|
||||
label: p.name,
|
||||
color: p.color_code,
|
||||
})),
|
||||
selectedValues: selectedPriorities,
|
||||
multiSelect: true,
|
||||
searchable: false,
|
||||
icon: FlagOutlined,
|
||||
},
|
||||
{
|
||||
id: 'assignees',
|
||||
label: t('membersText'),
|
||||
icon: TeamOutlined,
|
||||
multiSelect: true,
|
||||
searchable: true,
|
||||
selectedValues: currentAssignees.filter((m: any) => m.selected && m.id).map((m: any) => m.id || ''),
|
||||
options: currentAssignees.map((assignee: any) => ({
|
||||
id: assignee.id || '',
|
||||
label: assignee.name || '',
|
||||
value: assignee.id || '',
|
||||
avatar: assignee.avatar_url,
|
||||
selected: assignee.selected,
|
||||
})),
|
||||
},
|
||||
{
|
||||
id: 'labels',
|
||||
label: t('labelsText'),
|
||||
icon: TagOutlined,
|
||||
multiSelect: true,
|
||||
searchable: true,
|
||||
selectedValues: currentLabels.filter((l: any) => l.selected && l.id).map((l: any) => l.id || ''),
|
||||
options: currentLabels.map((label: any) => ({
|
||||
id: label.id || '',
|
||||
label: label.name || '',
|
||||
value: label.id || '',
|
||||
color: label.color_code,
|
||||
selected: label.selected,
|
||||
})),
|
||||
},
|
||||
{
|
||||
id: 'groupBy',
|
||||
label: t('groupByText'),
|
||||
icon: GroupOutlined,
|
||||
multiSelect: false,
|
||||
searchable: false,
|
||||
selectedValues: [groupByValue],
|
||||
options: [
|
||||
{ id: 'status', label: t('statusText'), value: 'status' },
|
||||
{ id: 'priority', label: t('priorityText'), value: 'priority' },
|
||||
{ id: 'phase', label: project?.phase_label || t('phaseText'), value: 'phase' },
|
||||
],
|
||||
},
|
||||
];
|
||||
}, [
|
||||
priorities,
|
||||
taskPriorities,
|
||||
boardPriorities,
|
||||
taskLabels,
|
||||
boardLabels,
|
||||
taskAssignees,
|
||||
boardAssignees,
|
||||
taskGroupBy,
|
||||
boardGroupBy,
|
||||
project,
|
||||
currentProjectView,
|
||||
t,
|
||||
currentGrouping,
|
||||
selectedPriorities
|
||||
]);
|
||||
};
|
||||
|
||||
// Filter Dropdown Component
|
||||
const FilterDropdown: React.FC<{
|
||||
section: FilterSection;
|
||||
onSelectionChange: (sectionId: string, values: string[]) => void;
|
||||
isOpen: boolean;
|
||||
onToggle: () => void;
|
||||
themeClasses: any;
|
||||
isDarkMode: boolean;
|
||||
className?: string;
|
||||
}> = ({ section, onSelectionChange, isOpen, onToggle, themeClasses, isDarkMode, className = '' }) => {
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [filteredOptions, setFilteredOptions] = useState(section.options);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Filter options based on search term
|
||||
useEffect(() => {
|
||||
if (!section.searchable || !searchTerm.trim()) {
|
||||
setFilteredOptions(section.options);
|
||||
return;
|
||||
}
|
||||
|
||||
const filtered = section.options.filter(option =>
|
||||
option.label.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
setFilteredOptions(filtered);
|
||||
}, [searchTerm, section.options, section.searchable]);
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
||||
if (isOpen) onToggle();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, [isOpen, onToggle]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen) {
|
||||
setSearchTerm('');
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
const handleOptionToggle = useCallback((optionValue: string) => {
|
||||
if (section.multiSelect) {
|
||||
const newValues = section.selectedValues.includes(optionValue)
|
||||
? section.selectedValues.filter(v => v !== optionValue)
|
||||
: [...section.selectedValues, optionValue];
|
||||
onSelectionChange(section.id, newValues);
|
||||
} else {
|
||||
onSelectionChange(section.id, [optionValue]);
|
||||
onToggle();
|
||||
}
|
||||
}, [section, onSelectionChange, onToggle]);
|
||||
|
||||
const clearSelection = useCallback(() => {
|
||||
onSelectionChange(section.id, []);
|
||||
}, [section.id, onSelectionChange]);
|
||||
|
||||
const selectedCount = section.selectedValues.length;
|
||||
const IconComponent = section.icon;
|
||||
|
||||
return (
|
||||
<div className={`relative ${className}`} ref={dropdownRef}>
|
||||
{/* Trigger Button */}
|
||||
<button
|
||||
onClick={onToggle}
|
||||
className={`
|
||||
inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-md
|
||||
border transition-all duration-200 ease-in-out
|
||||
${selectedCount > 0
|
||||
? (isDarkMode ? 'bg-blue-600 text-white border-blue-500' : 'bg-blue-50 text-blue-800 border-blue-300 font-semibold')
|
||||
: `${themeClasses.buttonBg} ${themeClasses.buttonBorder} ${themeClasses.buttonText}`
|
||||
}
|
||||
hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1
|
||||
${themeClasses.containerBg === 'bg-gray-800' ? 'focus:ring-offset-gray-900' : 'focus:ring-offset-white'}
|
||||
`}
|
||||
aria-expanded={isOpen}
|
||||
aria-haspopup="true"
|
||||
>
|
||||
<IconComponent className="w-3.5 h-3.5" />
|
||||
<span>{section.label}</span>
|
||||
{selectedCount > 0 && (
|
||||
<span className="inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-blue-500 rounded-full">
|
||||
{selectedCount}
|
||||
</span>
|
||||
)}
|
||||
<DownOutlined
|
||||
className={`w-3.5 h-3.5 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
|
||||
/>
|
||||
</button>
|
||||
|
||||
{/* Dropdown Panel */}
|
||||
{isOpen && (
|
||||
<div className={`absolute top-full left-0 z-50 mt-1 w-64 ${themeClasses.dropdownBg} rounded-md shadow-lg border ${themeClasses.dropdownBorder}`}>
|
||||
{/* Search Input */}
|
||||
{section.searchable && (
|
||||
<div className={`p-2 border-b ${themeClasses.dividerBorder}`}>
|
||||
<div className="relative w-full">
|
||||
<SearchOutlined className="absolute left-2.5 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
|
||||
<input
|
||||
value={searchTerm}
|
||||
onChange={e => setSearchTerm(e.target.value)}
|
||||
placeholder={`Search ${section.label.toLowerCase()}...`}
|
||||
className={`w-full pl-8 pr-2 py-1 rounded border focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-150 ${
|
||||
isDarkMode
|
||||
? 'bg-gray-700 text-gray-100 placeholder-gray-400 border-gray-600'
|
||||
: 'bg-white text-gray-900 placeholder-gray-400 border-gray-300'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Options List */}
|
||||
<div className="max-h-48 overflow-y-auto">
|
||||
{filteredOptions.length === 0 ? (
|
||||
<div className={`p-2 text-xs text-center ${themeClasses.secondaryText}`}>
|
||||
No options found
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-0.5">
|
||||
{filteredOptions.map((option) => {
|
||||
const isSelected = section.selectedValues.includes(option.value);
|
||||
|
||||
return (
|
||||
<button
|
||||
key={option.id}
|
||||
onClick={() => handleOptionToggle(option.value)}
|
||||
className={`
|
||||
w-full flex items-center gap-2 px-2 py-1.5 text-xs rounded
|
||||
transition-colors duration-150 text-left
|
||||
${isSelected
|
||||
? (isDarkMode ? 'bg-blue-600 text-white' : 'bg-blue-50 text-blue-800 font-semibold')
|
||||
: `${themeClasses.optionText} ${themeClasses.optionHover}`
|
||||
}
|
||||
`}
|
||||
>
|
||||
{/* Checkbox/Radio indicator */}
|
||||
<div className={`
|
||||
flex items-center justify-center w-3.5 h-3.5 border rounded
|
||||
${isSelected
|
||||
? 'bg-blue-500 border-blue-500 text-white'
|
||||
: 'border-gray-300 dark:border-gray-600'
|
||||
}
|
||||
`}>
|
||||
{isSelected && <CheckOutlined className="w-2.5 h-2.5" />}
|
||||
</div>
|
||||
|
||||
{/* Color indicator */}
|
||||
{option.color && (
|
||||
<div
|
||||
className="w-2.5 h-2.5 rounded-full"
|
||||
style={{ backgroundColor: option.color }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Avatar */}
|
||||
{option.avatar && (
|
||||
<div className="w-5 h-5 bg-gray-300 rounded-full flex items-center justify-center text-xs font-medium text-gray-700 dark:bg-gray-600 dark:text-gray-300">
|
||||
<img
|
||||
src={option.avatar}
|
||||
alt={option.label}
|
||||
className="w-5 h-5 rounded-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Label and Count */}
|
||||
<div className="flex-1 flex items-center justify-between">
|
||||
<span className="truncate">{option.label}</span>
|
||||
{option.count !== undefined && (
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400">
|
||||
{option.count}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Search Component
|
||||
const SearchFilter: React.FC<{
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
placeholder?: string;
|
||||
themeClasses: any;
|
||||
className?: string;
|
||||
}> = ({ value, onChange, placeholder = 'Search tasks...', themeClasses, className = '' }) => {
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
const [localValue, setLocalValue] = useState(value);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleToggle = useCallback(() => {
|
||||
setIsExpanded(!isExpanded);
|
||||
if (!isExpanded) {
|
||||
setTimeout(() => inputRef.current?.focus(), 100);
|
||||
}
|
||||
}, [isExpanded]);
|
||||
|
||||
const handleSubmit = useCallback((e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
onChange(localValue);
|
||||
}, [localValue, onChange]);
|
||||
|
||||
const handleClear = useCallback(() => {
|
||||
setLocalValue('');
|
||||
onChange('');
|
||||
setIsExpanded(false);
|
||||
}, [onChange]);
|
||||
|
||||
// Redux selectors for theme and other state
|
||||
const isDarkMode = useAppSelector(state => state.themeReducer?.mode === 'dark');
|
||||
|
||||
return (
|
||||
<div className={`relative ${className}`}>
|
||||
{!isExpanded ? (
|
||||
<button
|
||||
onClick={handleToggle}
|
||||
className={`inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-md border transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 ${themeClasses.buttonBg} ${themeClasses.buttonBorder} ${themeClasses.buttonText} ${
|
||||
themeClasses.containerBg === 'bg-gray-800' ? 'focus:ring-offset-gray-900' : 'focus:ring-offset-white'
|
||||
}`}
|
||||
>
|
||||
<SearchOutlined className="w-3.5 h-3.5" />
|
||||
<span>Search</span>
|
||||
</button>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="flex items-center gap-1.5">
|
||||
<div className="relative w-full">
|
||||
<SearchOutlined className="absolute left-2.5 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={localValue}
|
||||
onChange={(e) => setLocalValue(e.target.value)}
|
||||
placeholder={placeholder}
|
||||
className={`w-full pr-4 pl-8 py-1 rounded border focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-150 ${
|
||||
isDarkMode
|
||||
? 'bg-gray-700 text-gray-100 placeholder-gray-400 border-gray-600'
|
||||
: 'bg-white text-gray-900 placeholder-gray-400 border-gray-300'
|
||||
}`}
|
||||
/>
|
||||
{localValue && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleClear}
|
||||
className={`absolute right-1.5 top-1/2 transform -translate-y-1/2 ${themeClasses.secondaryText} hover:${themeClasses.optionText} transition-colors duration-150`}
|
||||
>
|
||||
<CloseOutlined className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className="px-2.5 py-1.5 text-xs font-medium text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 transition-colors duration-200"
|
||||
>
|
||||
Search
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsExpanded(false)}
|
||||
className={`px-2.5 py-1.5 text-xs font-medium transition-colors duration-200 ${themeClasses.secondaryText} hover:${themeClasses.optionText}`}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Main Component
|
||||
const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({
|
||||
position,
|
||||
className = ''
|
||||
}) => {
|
||||
const { t } = useTranslation('task-list-filters');
|
||||
const dispatch = useAppDispatch();
|
||||
const { socket, connected } = useSocket();
|
||||
|
||||
// Get current state values for filter updates
|
||||
const currentTaskAssignees = useAppSelector(state => state.taskReducer.taskAssignees);
|
||||
const currentBoardAssignees = useAppSelector(state => state.boardReducer.taskAssignees);
|
||||
const currentTaskLabels = useAppSelector(state => state.taskReducer.labels);
|
||||
const currentBoardLabels = useAppSelector(state => state.boardReducer.labels);
|
||||
|
||||
// Use the filter data loader hook
|
||||
useFilterDataLoader();
|
||||
|
||||
// Local state for filter sections
|
||||
const [filterSections, setFilterSections] = useState<FilterSection[]>([]);
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const [showArchived, setShowArchived] = useState(false);
|
||||
const [openDropdown, setOpenDropdown] = useState<string | null>(null);
|
||||
const [activeFiltersCount, setActiveFiltersCount] = useState(0);
|
||||
|
||||
// Get real filter data
|
||||
const filterSectionsData = useFilterData();
|
||||
|
||||
// Check if data is loaded - memoize this computation
|
||||
const isDataLoaded = useMemo(() => {
|
||||
return filterSectionsData.some(section => section.options.length > 0);
|
||||
}, [filterSectionsData]);
|
||||
|
||||
// Initialize filter sections from data - memoize this to prevent unnecessary updates
|
||||
const memoizedFilterSections = useMemo(() => {
|
||||
return filterSectionsData;
|
||||
}, [filterSectionsData]);
|
||||
|
||||
useEffect(() => {
|
||||
setFilterSections(memoizedFilterSections);
|
||||
}, [memoizedFilterSections]);
|
||||
|
||||
// Redux selectors for theme and other state
|
||||
const isDarkMode = useAppSelector(state => state.themeReducer?.mode === 'dark');
|
||||
const { projectId } = useAppSelector(state => state.projectReducer);
|
||||
const { projectView } = useTabSearchParam();
|
||||
const { columns } = useAppSelector(state => state.taskReducer);
|
||||
|
||||
// Theme-aware class names - memoize to prevent unnecessary re-renders
|
||||
const themeClasses = useMemo(() => ({
|
||||
containerBg: isDarkMode ? 'bg-gray-800' : 'bg-white',
|
||||
containerBorder: isDarkMode ? 'border-gray-700' : 'border-gray-200',
|
||||
buttonBg: isDarkMode ? 'bg-gray-700 hover:bg-gray-600' : 'bg-white hover:bg-gray-50',
|
||||
buttonBorder: isDarkMode ? 'border-gray-600' : 'border-gray-300',
|
||||
buttonText: isDarkMode ? 'text-gray-200' : 'text-gray-700',
|
||||
dropdownBg: isDarkMode ? 'bg-gray-800' : 'bg-white',
|
||||
dropdownBorder: isDarkMode ? 'border-gray-700' : 'border-gray-200',
|
||||
optionText: isDarkMode ? 'text-gray-200' : 'text-gray-700',
|
||||
optionHover: isDarkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-50',
|
||||
secondaryText: isDarkMode ? 'text-gray-400' : 'text-gray-500',
|
||||
dividerBorder: isDarkMode ? 'border-gray-700' : 'border-gray-200',
|
||||
pillBg: isDarkMode ? 'bg-gray-700' : 'bg-gray-100',
|
||||
pillText: isDarkMode ? 'text-gray-200' : 'text-gray-700',
|
||||
pillActiveBg: isDarkMode ? 'bg-blue-600' : 'bg-blue-100',
|
||||
pillActiveText: isDarkMode ? 'text-white' : 'text-blue-800',
|
||||
searchBg: isDarkMode ? 'bg-gray-700' : 'bg-gray-50',
|
||||
searchBorder: isDarkMode ? 'border-gray-600' : 'border-gray-300',
|
||||
searchText: isDarkMode ? 'text-gray-200' : 'text-gray-900',
|
||||
}), [isDarkMode]);
|
||||
|
||||
// Calculate active filters count
|
||||
useEffect(() => {
|
||||
const count = filterSections.reduce((acc, section) => acc + section.selectedValues.length, 0);
|
||||
setActiveFiltersCount(count + (searchValue ? 1 : 0));
|
||||
}, [filterSections, searchValue]);
|
||||
|
||||
// Handlers
|
||||
const handleDropdownToggle = useCallback((sectionId: string) => {
|
||||
setOpenDropdown(current => current === sectionId ? null : sectionId);
|
||||
}, []);
|
||||
|
||||
const handleSelectionChange = useCallback((sectionId: string, values: string[]) => {
|
||||
if (!projectId) return;
|
||||
|
||||
// Prevent clearing all group by options
|
||||
if (sectionId === 'groupBy' && values.length === 0) {
|
||||
return; // Do nothing
|
||||
}
|
||||
|
||||
// Update local state first
|
||||
setFilterSections(prev => prev.map(section =>
|
||||
section.id === sectionId
|
||||
? { ...section, selectedValues: values }
|
||||
: section
|
||||
));
|
||||
|
||||
// Use task management slices for groupBy
|
||||
if (sectionId === 'groupBy' && values.length > 0) {
|
||||
dispatch(setCurrentGrouping(values[0] as 'status' | 'priority' | 'phase'));
|
||||
dispatch(fetchTasksV3(projectId));
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle priorities
|
||||
if (sectionId === 'priority') {
|
||||
console.log('Priority selection changed:', { sectionId, values, projectId });
|
||||
dispatch(setSelectedPriorities(values));
|
||||
dispatch(fetchTasksV3(projectId));
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle assignees (members)
|
||||
if (sectionId === 'assignees') {
|
||||
// Update selected property for each assignee
|
||||
const updatedAssignees = currentTaskAssignees.map(member => ({
|
||||
...member,
|
||||
selected: values.includes(member.id || '')
|
||||
}));
|
||||
dispatch(setMembers(updatedAssignees));
|
||||
dispatch(fetchTasksV3(projectId));
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle labels
|
||||
if (sectionId === 'labels') {
|
||||
// Update selected property for each label
|
||||
const updatedLabels = currentTaskLabels.map(label => ({
|
||||
...label,
|
||||
selected: values.includes(label.id || '')
|
||||
}));
|
||||
dispatch(setLabels(updatedLabels));
|
||||
dispatch(fetchTasksV3(projectId));
|
||||
return;
|
||||
}
|
||||
}, [dispatch, projectId, currentTaskAssignees, currentTaskLabels]);
|
||||
|
||||
const handleSearchChange = useCallback((value: string) => {
|
||||
setSearchValue(value);
|
||||
|
||||
// Log the search change for now
|
||||
console.log('Search change:', value, { projectView, projectId });
|
||||
|
||||
// TODO: Implement proper search dispatch
|
||||
}, [projectView, projectId]);
|
||||
|
||||
const clearAllFilters = useCallback(() => {
|
||||
// TODO: Implement clear all filters
|
||||
console.log('Clear all filters');
|
||||
setSearchValue('');
|
||||
setShowArchived(false);
|
||||
}, []);
|
||||
|
||||
const toggleArchived = useCallback(() => {
|
||||
setShowArchived(!showArchived);
|
||||
// TODO: Implement proper archived toggle
|
||||
console.log('Toggle archived:', !showArchived);
|
||||
}, [showArchived]);
|
||||
|
||||
// Show fields dropdown functionality
|
||||
const handleColumnVisibilityChange = useCallback(async (col: ITaskListColumn) => {
|
||||
if (!projectId) return;
|
||||
console.log('Column visibility change:', col);
|
||||
// TODO: Implement column visibility change
|
||||
}, [projectId]);
|
||||
|
||||
return (
|
||||
<div className={`${themeClasses.containerBg} border ${themeClasses.containerBorder} rounded-md p-3 shadow-sm ${className}`}>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{/* Left Section - Main Filters */}
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{/* Search */}
|
||||
<SearchFilter
|
||||
value={searchValue}
|
||||
onChange={handleSearchChange}
|
||||
placeholder="Search tasks..."
|
||||
themeClasses={themeClasses}
|
||||
/>
|
||||
|
||||
{/* Filter Dropdowns - Only render when data is loaded */}
|
||||
{isDataLoaded ? (
|
||||
filterSectionsData.map((section) => (
|
||||
<FilterDropdown
|
||||
key={section.id}
|
||||
section={section}
|
||||
onSelectionChange={handleSelectionChange}
|
||||
isOpen={openDropdown === section.id}
|
||||
onToggle={() => handleDropdownToggle(section.id)}
|
||||
themeClasses={themeClasses}
|
||||
isDarkMode={isDarkMode}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
// Loading state
|
||||
<div className={`flex items-center gap-2 px-2.5 py-1.5 text-xs ${themeClasses.secondaryText}`}>
|
||||
<div className="animate-spin rounded-full h-3.5 w-3.5 border-b-2 border-blue-500"></div>
|
||||
<span>Loading filters...</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right Section - Additional Controls */}
|
||||
<div className="flex items-center gap-2 ml-auto">
|
||||
{/* Active Filters Indicator */}
|
||||
{activeFiltersCount > 0 && (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className={`text-xs ${themeClasses.secondaryText}`}>
|
||||
{activeFiltersCount} filter{activeFiltersCount !== 1 ? 's' : ''} active
|
||||
</span>
|
||||
<button
|
||||
onClick={clearAllFilters}
|
||||
className={`text-xs text-blue-600 hover:text-blue-700 font-medium transition-colors duration-150 ${
|
||||
isDarkMode ? 'text-blue-400 hover:text-blue-300' : ''
|
||||
}`}
|
||||
>
|
||||
Clear all
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Show Archived Toggle (for list view) */}
|
||||
{position === 'list' && (
|
||||
<label className="flex items-center gap-1.5 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={showArchived}
|
||||
onChange={toggleArchived}
|
||||
className={`w-3.5 h-3.5 text-blue-600 rounded focus:ring-blue-500 transition-colors duration-150 ${
|
||||
isDarkMode
|
||||
? 'border-gray-600 bg-gray-700 focus:ring-offset-gray-800'
|
||||
: 'border-gray-300 bg-white focus:ring-offset-white'
|
||||
}`}
|
||||
/>
|
||||
<span className={`text-xs ${themeClasses.optionText}`}>
|
||||
Show archived
|
||||
</span>
|
||||
<InboxOutlined className={`w-3.5 h-3.5 ${themeClasses.secondaryText}`} />
|
||||
</label>
|
||||
)}
|
||||
|
||||
{/* Show Fields Button (for list view) */}
|
||||
{position === 'list' && (
|
||||
<button className={`inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-md border transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 ${themeClasses.buttonBg} ${themeClasses.buttonBorder} ${themeClasses.buttonText} ${
|
||||
isDarkMode ? 'focus:ring-offset-gray-800' : 'focus:ring-offset-white'
|
||||
}`}>
|
||||
<EyeOutlined className="w-3.5 h-3.5" />
|
||||
<span>Fields</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Active Filters Pills */}
|
||||
{activeFiltersCount > 0 && (
|
||||
<div className={`flex flex-wrap items-center gap-1.5 mt-2 pt-2 border-t ${themeClasses.dividerBorder}`}>
|
||||
{searchValue && (
|
||||
<div className={`inline-flex items-center gap-1 px-1.5 py-0.5 text-xs font-medium rounded-full ${themeClasses.pillActiveBg} ${themeClasses.pillActiveText}`}>
|
||||
<SearchOutlined className="w-2.5 h-2.5" />
|
||||
<span>"{searchValue}"</span>
|
||||
<button
|
||||
onClick={() => setSearchValue('')}
|
||||
className={`ml-1 rounded-full p-0.5 transition-colors duration-150 ${
|
||||
isDarkMode ? 'hover:bg-blue-800' : 'hover:bg-blue-200'
|
||||
}`}
|
||||
>
|
||||
<CloseOutlined className="w-2.5 h-2.5" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{filterSectionsData
|
||||
.filter(section => section.id !== 'groupBy') // <-- skip groupBy
|
||||
.map((section) =>
|
||||
section.selectedValues.map((value) => {
|
||||
const option = section.options.find(opt => opt.value === value);
|
||||
if (!option) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`${section.id}-${value}`}
|
||||
className={`inline-flex items-center gap-1 px-1.5 py-0.5 text-xs font-medium rounded-full ${themeClasses.pillBg} ${themeClasses.pillText}`}
|
||||
>
|
||||
{option.color && (
|
||||
<div
|
||||
className="w-2 h-2 rounded-full"
|
||||
style={{ backgroundColor: option.color }}
|
||||
/>
|
||||
)}
|
||||
<span>{option.label}</span>
|
||||
<button
|
||||
onClick={() => {
|
||||
const newValues = section.selectedValues.filter(v => v !== value);
|
||||
handleSelectionChange(section.id, newValues);
|
||||
}}
|
||||
className={`ml-1 rounded-full p-0.5 transition-colors duration-150 ${
|
||||
isDarkMode ? 'hover:bg-gray-600' : 'hover:bg-gray-200'
|
||||
}`}
|
||||
>
|
||||
<CloseOutlined className="w-2.5 h-2.5" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(ImprovedTaskFilters);
|
||||
@@ -1,12 +1,11 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState, useMemo, useCallback } from 'react';
|
||||
import { useDroppable } from '@dnd-kit/core';
|
||||
import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { Button, Typography } from 'antd';
|
||||
import { PlusOutlined, RightOutlined, DownOutlined } from '@ant-design/icons';
|
||||
import { ITaskListGroup } from '@/types/tasks/taskList.types';
|
||||
import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
|
||||
import { IGroupBy, COLUMN_KEYS } from '@/features/tasks/tasks.slice';
|
||||
import { TaskGroup as TaskGroupType, Task } from '@/types/task-management.types';
|
||||
import { taskManagementSelectors } from '@/features/task-management/task-management.slice';
|
||||
import { RootState } from '@/app/store';
|
||||
import TaskRow from './task-row';
|
||||
import AddTaskListRow from '@/pages/projects/projectView/taskList/task-list-table/task-list-table-rows/add-task-list-row';
|
||||
@@ -14,9 +13,9 @@ import AddTaskListRow from '@/pages/projects/projectView/taskList/task-list-tabl
|
||||
const { Text } = Typography;
|
||||
|
||||
interface TaskGroupProps {
|
||||
group: ITaskListGroup;
|
||||
group: TaskGroupType;
|
||||
projectId: string;
|
||||
currentGrouping: IGroupBy;
|
||||
currentGrouping: 'status' | 'priority' | 'phase';
|
||||
selectedTaskIds: string[];
|
||||
onAddTask?: (groupId: string) => void;
|
||||
onToggleCollapse?: (groupId: string) => void;
|
||||
@@ -24,7 +23,40 @@ interface TaskGroupProps {
|
||||
onToggleSubtasks?: (taskId: string) => void;
|
||||
}
|
||||
|
||||
const TaskGroup: React.FC<TaskGroupProps> = ({
|
||||
// Group color mapping - moved outside component for better performance
|
||||
const GROUP_COLORS = {
|
||||
status: {
|
||||
todo: '#faad14',
|
||||
doing: '#1890ff',
|
||||
done: '#52c41a',
|
||||
},
|
||||
priority: {
|
||||
high: '#fa8c16',
|
||||
medium: '#faad14',
|
||||
low: '#52c41a',
|
||||
},
|
||||
phase: '#722ed1',
|
||||
default: '#d9d9d9',
|
||||
} as const;
|
||||
|
||||
// Column configurations for consistent layout
|
||||
const FIXED_COLUMNS = [
|
||||
{ key: 'drag', label: '', width: 40, fixed: true },
|
||||
{ key: 'select', label: '', width: 40, fixed: true },
|
||||
{ key: 'key', label: 'Key', width: 80, fixed: true },
|
||||
{ key: 'task', label: 'Task', width: 475, fixed: true },
|
||||
];
|
||||
|
||||
const SCROLLABLE_COLUMNS = [
|
||||
{ key: 'progress', label: 'Progress', width: 90 },
|
||||
{ key: 'members', label: 'Members', width: 150 },
|
||||
{ key: 'labels', label: 'Labels', width: 200 },
|
||||
{ key: 'status', label: 'Status', width: 100 },
|
||||
{ key: 'priority', label: 'Priority', width: 100 },
|
||||
{ key: 'timeTracking', label: 'Time Tracking', width: 120 },
|
||||
];
|
||||
|
||||
const TaskGroup: React.FC<TaskGroupProps> = React.memo(({
|
||||
group,
|
||||
projectId,
|
||||
currentGrouping,
|
||||
@@ -34,7 +66,7 @@ const TaskGroup: React.FC<TaskGroupProps> = ({
|
||||
onSelectTask,
|
||||
onToggleSubtasks,
|
||||
}) => {
|
||||
const [isCollapsed, setIsCollapsed] = useState(false);
|
||||
const [isCollapsed, setIsCollapsed] = useState(group.collapsed || false);
|
||||
|
||||
const { setNodeRef, isOver } = useDroppable({
|
||||
id: group.id,
|
||||
@@ -44,197 +76,182 @@ const TaskGroup: React.FC<TaskGroupProps> = ({
|
||||
},
|
||||
});
|
||||
|
||||
// Get column visibility from Redux store
|
||||
const columns = useSelector((state: RootState) => state.taskReducer.columns);
|
||||
// Get all tasks from the store
|
||||
const allTasks = useSelector(taskManagementSelectors.selectAll);
|
||||
|
||||
// Get theme from Redux store
|
||||
const isDarkMode = useSelector((state: RootState) => state.themeReducer?.mode === 'dark');
|
||||
|
||||
// Get tasks for this group using memoization for performance
|
||||
const groupTasks = useMemo(() => {
|
||||
return group.taskIds
|
||||
.map(taskId => allTasks.find(task => task.id === taskId))
|
||||
.filter((task): task is Task => task !== undefined);
|
||||
}, [group.taskIds, allTasks]);
|
||||
|
||||
// Helper function to check if a column is visible
|
||||
const isColumnVisible = (columnKey: string) => {
|
||||
const column = columns.find(col => col.key === columnKey);
|
||||
return column ? column.pinned : true; // Default to visible if column not found
|
||||
};
|
||||
// Calculate group statistics - memoized
|
||||
const { completedTasks, totalTasks, completionRate } = useMemo(() => {
|
||||
const completed = groupTasks.filter(task => task.progress === 100).length;
|
||||
const total = groupTasks.length;
|
||||
const rate = total > 0 ? Math.round((completed / total) * 100) : 0;
|
||||
|
||||
return {
|
||||
completedTasks: completed,
|
||||
totalTasks: total,
|
||||
completionRate: rate,
|
||||
};
|
||||
}, [groupTasks]);
|
||||
|
||||
// Get task IDs for sortable context
|
||||
const taskIds = group.tasks.map(task => task.id!);
|
||||
|
||||
// Calculate group statistics
|
||||
const completedTasks = group.tasks.filter(
|
||||
task => task.status_category?.is_done || task.complete_ratio === 100
|
||||
).length;
|
||||
const totalTasks = group.tasks.length;
|
||||
const completionRate = totalTasks > 0 ? Math.round((completedTasks / totalTasks) * 100) : 0;
|
||||
|
||||
// Get group color based on grouping type
|
||||
const getGroupColor = () => {
|
||||
if (group.color_code) return group.color_code;
|
||||
// Get group color based on grouping type - memoized
|
||||
const groupColor = useMemo(() => {
|
||||
if (group.color) return group.color;
|
||||
|
||||
// Fallback colors based on group value
|
||||
switch (currentGrouping) {
|
||||
case 'status':
|
||||
return group.id === 'todo' ? '#faad14' : group.id === 'doing' ? '#1890ff' : '#52c41a';
|
||||
return GROUP_COLORS.status[group.groupValue as keyof typeof GROUP_COLORS.status] || GROUP_COLORS.default;
|
||||
case 'priority':
|
||||
return group.id === 'critical'
|
||||
? '#ff4d4f'
|
||||
: group.id === 'high'
|
||||
? '#fa8c16'
|
||||
: group.id === 'medium'
|
||||
? '#faad14'
|
||||
: '#52c41a';
|
||||
return GROUP_COLORS.priority[group.groupValue as keyof typeof GROUP_COLORS.priority] || GROUP_COLORS.default;
|
||||
case 'phase':
|
||||
return '#722ed1';
|
||||
return GROUP_COLORS.phase;
|
||||
default:
|
||||
return '#d9d9d9';
|
||||
return GROUP_COLORS.default;
|
||||
}
|
||||
};
|
||||
}, [group.color, group.groupValue, currentGrouping]);
|
||||
|
||||
const handleToggleCollapse = () => {
|
||||
// Memoized event handlers
|
||||
const handleToggleCollapse = useCallback(() => {
|
||||
setIsCollapsed(!isCollapsed);
|
||||
onToggleCollapse?.(group.id);
|
||||
};
|
||||
}, [isCollapsed, onToggleCollapse, group.id]);
|
||||
|
||||
const handleAddTask = () => {
|
||||
const handleAddTask = useCallback(() => {
|
||||
onAddTask?.(group.id);
|
||||
};
|
||||
}, [onAddTask, group.id]);
|
||||
|
||||
// Memoized style object
|
||||
const containerStyle = useMemo(() => ({
|
||||
backgroundColor: isOver
|
||||
? (isDarkMode ? '#1a2332' : '#f0f8ff')
|
||||
: undefined,
|
||||
}), [isOver, isDarkMode]);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
className={`task-group ${isOver ? 'drag-over' : ''}`}
|
||||
style={{
|
||||
backgroundColor: isOver ? '#f0f8ff' : undefined,
|
||||
}}
|
||||
className={`task-group`}
|
||||
style={{ ...containerStyle, overflowX: 'unset' }}
|
||||
>
|
||||
{/* Group Header Row */}
|
||||
<div className="task-group-header">
|
||||
<div className="task-group-header-row">
|
||||
<div
|
||||
className="task-group-header-content"
|
||||
style={{ backgroundColor: getGroupColor() }}
|
||||
>
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={isCollapsed ? <RightOutlined /> : <DownOutlined />}
|
||||
onClick={handleToggleCollapse}
|
||||
className="task-group-header-button"
|
||||
/>
|
||||
<Text strong className="task-group-header-text">
|
||||
{group.name} ({totalTasks})
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Column Headers */}
|
||||
{!isCollapsed && totalTasks > 0 && (
|
||||
<div
|
||||
className="task-group-column-headers"
|
||||
style={{ borderLeft: `4px solid ${getGroupColor()}` }}
|
||||
>
|
||||
<div className="task-group-column-headers-row">
|
||||
<div className="task-table-fixed-columns">
|
||||
<div
|
||||
className="task-table-cell task-table-header-cell"
|
||||
style={{ width: '40px' }}
|
||||
></div>
|
||||
<div
|
||||
className="task-table-cell task-table-header-cell"
|
||||
style={{ width: '40px' }}
|
||||
></div>
|
||||
<div className="task-table-cell task-table-header-cell" style={{ width: '80px' }}>
|
||||
<Text className="column-header-text">Key</Text>
|
||||
</div>
|
||||
<div className="task-table-cell task-table-header-cell" style={{ width: '475px' }}>
|
||||
<Text className="column-header-text">Task</Text>
|
||||
<div className="task-group-scroll-wrapper" style={{ overflowX: 'auto', width: '100%' }}>
|
||||
<div style={{ minWidth: FIXED_COLUMNS.reduce((sum, col) => sum + col.width, 0) + SCROLLABLE_COLUMNS.reduce((sum, col) => sum + col.width, 0) }}>
|
||||
{/* Group Header Row */}
|
||||
<div className="task-group-header">
|
||||
<div className="task-group-header-row">
|
||||
<div
|
||||
className="task-group-header-content"
|
||||
style={{ backgroundColor: groupColor }}
|
||||
>
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={isCollapsed ? <RightOutlined /> : <DownOutlined />}
|
||||
onClick={handleToggleCollapse}
|
||||
className="task-group-header-button"
|
||||
/>
|
||||
<Text strong className="task-group-header-text">
|
||||
{group.title} ({totalTasks})
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
<div className="task-table-scrollable-columns">
|
||||
{isColumnVisible(COLUMN_KEYS.PROGRESS) && (
|
||||
<div className="task-table-cell task-table-header-cell" style={{ width: '90px' }}>
|
||||
<Text className="column-header-text">Progress</Text>
|
||||
</div>
|
||||
)}
|
||||
{isColumnVisible(COLUMN_KEYS.ASSIGNEES) && (
|
||||
<div className="task-table-cell task-table-header-cell" style={{ width: '150px' }}>
|
||||
<Text className="column-header-text">Members</Text>
|
||||
</div>
|
||||
)}
|
||||
{isColumnVisible(COLUMN_KEYS.LABELS) && (
|
||||
<div className="task-table-cell task-table-header-cell" style={{ width: '150px' }}>
|
||||
<Text className="column-header-text">Labels</Text>
|
||||
</div>
|
||||
)}
|
||||
{isColumnVisible(COLUMN_KEYS.STATUS) && (
|
||||
<div className="task-table-cell task-table-header-cell" style={{ width: '100px' }}>
|
||||
<Text className="column-header-text">Status</Text>
|
||||
</div>
|
||||
)}
|
||||
{isColumnVisible(COLUMN_KEYS.PRIORITY) && (
|
||||
<div className="task-table-cell task-table-header-cell" style={{ width: '100px' }}>
|
||||
<Text className="column-header-text">Priority</Text>
|
||||
</div>
|
||||
)}
|
||||
{isColumnVisible(COLUMN_KEYS.TIME_TRACKING) && (
|
||||
<div className="task-table-cell task-table-header-cell" style={{ width: '120px' }}>
|
||||
<Text className="column-header-text">Time Tracking</Text>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tasks List */}
|
||||
{!isCollapsed && (
|
||||
<div
|
||||
className="task-group-body"
|
||||
style={{ borderLeft: `4px solid ${getGroupColor()}` }}
|
||||
>
|
||||
{group.tasks.length === 0 ? (
|
||||
<div className="task-group-empty">
|
||||
<div className="task-table-fixed-columns">
|
||||
<div style={{ width: '380px', padding: '20px 12px' }}>
|
||||
<div className="text-center text-gray-500">
|
||||
<Text type="secondary">No tasks in this group</Text>
|
||||
<br />
|
||||
<Button
|
||||
type="link"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={handleAddTask}
|
||||
className="mt-2"
|
||||
{/* Column Headers */}
|
||||
{!isCollapsed && totalTasks > 0 && (
|
||||
<div
|
||||
className="task-group-column-headers"
|
||||
style={{ borderLeft: `4px solid ${groupColor}` }}
|
||||
>
|
||||
<div className="task-group-column-headers-row">
|
||||
<div className="task-table-fixed-columns">
|
||||
{FIXED_COLUMNS.map(col => (
|
||||
<div
|
||||
key={col.key}
|
||||
className="task-table-cell task-table-header-cell"
|
||||
style={{ width: col.width }}
|
||||
>
|
||||
Add first task
|
||||
</Button>
|
||||
</div>
|
||||
{col.label && <Text className="column-header-text">{col.label}</Text>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="task-table-scrollable-columns">
|
||||
{SCROLLABLE_COLUMNS.map(col => (
|
||||
<div
|
||||
key={col.key}
|
||||
className="task-table-cell task-table-header-cell"
|
||||
style={{ width: col.width }}
|
||||
>
|
||||
<Text className="column-header-text">{col.label}</Text>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<SortableContext items={taskIds} strategy={verticalListSortingStrategy}>
|
||||
<div className="task-group-tasks">
|
||||
{group.tasks.map((task, index) => (
|
||||
<TaskRow
|
||||
key={task.id}
|
||||
task={task}
|
||||
projectId={projectId}
|
||||
groupId={group.id}
|
||||
currentGrouping={currentGrouping}
|
||||
isSelected={selectedTaskIds.includes(task.id!)}
|
||||
index={index}
|
||||
onSelect={onSelectTask}
|
||||
onToggleSubtasks={onToggleSubtasks}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</SortableContext>
|
||||
)}
|
||||
|
||||
{/* Add Task Row - Always show when not collapsed */}
|
||||
<div className="task-group-add-task">
|
||||
<AddTaskListRow groupId={group.id} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* Tasks List */}
|
||||
{!isCollapsed && (
|
||||
<div
|
||||
className="task-group-body"
|
||||
style={{ borderLeft: `4px solid ${groupColor}` }}
|
||||
>
|
||||
{groupTasks.length === 0 ? (
|
||||
<div className="task-group-empty">
|
||||
<div className="task-table-fixed-columns">
|
||||
<div style={{ width: '380px', padding: '20px 12px' }}>
|
||||
<div className="text-center text-gray-500">
|
||||
<Text type="secondary">No tasks in this group</Text>
|
||||
<br />
|
||||
<Button
|
||||
type="link"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={handleAddTask}
|
||||
className="mt-2"
|
||||
>
|
||||
Add first task
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<SortableContext items={group.taskIds} strategy={verticalListSortingStrategy}>
|
||||
<div className="task-group-tasks">
|
||||
{groupTasks.map((task, index) => (
|
||||
<TaskRow
|
||||
key={task.id}
|
||||
task={task}
|
||||
projectId={projectId}
|
||||
groupId={group.id}
|
||||
currentGrouping={currentGrouping}
|
||||
isSelected={selectedTaskIds.includes(task.id)}
|
||||
index={index}
|
||||
onSelect={onSelectTask}
|
||||
onToggleSubtasks={onToggleSubtasks}
|
||||
fixedColumns={FIXED_COLUMNS}
|
||||
scrollableColumns={SCROLLABLE_COLUMNS}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</SortableContext>
|
||||
)}
|
||||
|
||||
{/* Add Task Row - Always show when not collapsed */}
|
||||
<div className="task-group-add-task">
|
||||
<AddTaskListRow groupId={group.id} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<style>{`
|
||||
.task-group {
|
||||
border: 1px solid var(--task-border-primary, #e8e8e8);
|
||||
@@ -242,7 +259,6 @@ const TaskGroup: React.FC<TaskGroupProps> = ({
|
||||
margin-bottom: 16px;
|
||||
background: var(--task-bg-primary, white);
|
||||
box-shadow: 0 1px 3px var(--task-shadow, rgba(0, 0, 0, 0.1));
|
||||
overflow-x: auto;
|
||||
overflow-y: visible;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
@@ -258,14 +274,14 @@ const TaskGroup: React.FC<TaskGroupProps> = ({
|
||||
}
|
||||
|
||||
.task-group-header-row {
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
height: auto;
|
||||
max-height: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.task-group-header-content {
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px 6px 0 0;
|
||||
@@ -322,7 +338,6 @@ const TaskGroup: React.FC<TaskGroupProps> = ({
|
||||
max-height: 40px;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
min-width: 1200px; /* Ensure minimum width for all columns */
|
||||
}
|
||||
|
||||
.task-table-header-cell {
|
||||
@@ -387,11 +402,7 @@ const TaskGroup: React.FC<TaskGroupProps> = ({
|
||||
.task-table-fixed-columns {
|
||||
display: flex;
|
||||
background: var(--task-bg-secondary, #f5f5f5);
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 11;
|
||||
border-right: 2px solid var(--task-border-primary, #e8e8e8);
|
||||
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
@@ -445,6 +456,17 @@ const TaskGroup: React.FC<TaskGroupProps> = ({
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}, (prevProps, nextProps) => {
|
||||
// Simplified comparison for better performance
|
||||
return (
|
||||
prevProps.group.id === nextProps.group.id &&
|
||||
prevProps.group.taskIds.length === nextProps.group.taskIds.length &&
|
||||
prevProps.group.collapsed === nextProps.group.collapsed &&
|
||||
prevProps.selectedTaskIds.length === nextProps.selectedTaskIds.length &&
|
||||
prevProps.currentGrouping === nextProps.currentGrouping
|
||||
);
|
||||
});
|
||||
|
||||
TaskGroup.displayName = 'TaskGroup';
|
||||
|
||||
export default TaskGroup;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useState, useMemo } from 'react';
|
||||
import React, { useEffect, useState, useMemo, useCallback, useRef } from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import {
|
||||
DndContext,
|
||||
@@ -12,25 +12,41 @@ import {
|
||||
useSensor,
|
||||
useSensors,
|
||||
} from '@dnd-kit/core';
|
||||
import {
|
||||
sortableKeyboardCoordinates,
|
||||
} from '@dnd-kit/sortable';
|
||||
import { sortableKeyboardCoordinates } from '@dnd-kit/sortable';
|
||||
import { Card, Spin, Empty } from 'antd';
|
||||
import { RootState } from '@/app/store';
|
||||
import {
|
||||
IGroupBy,
|
||||
setGroup,
|
||||
fetchTaskGroups,
|
||||
taskManagementSelectors,
|
||||
reorderTasks,
|
||||
} from '@/features/tasks/tasks.slice';
|
||||
import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
|
||||
import TaskGroup from './task-group';
|
||||
moveTaskToGroup,
|
||||
optimisticTaskMove,
|
||||
setLoading,
|
||||
fetchTasks,
|
||||
fetchTasksV3,
|
||||
selectTaskGroupsV3,
|
||||
selectCurrentGroupingV3,
|
||||
} from '@/features/task-management/task-management.slice';
|
||||
import {
|
||||
selectTaskGroups,
|
||||
selectCurrentGrouping,
|
||||
setCurrentGrouping,
|
||||
} from '@/features/task-management/grouping.slice';
|
||||
import {
|
||||
selectSelectedTaskIds,
|
||||
toggleTaskSelection,
|
||||
clearSelection,
|
||||
} from '@/features/task-management/selection.slice';
|
||||
import { Task } from '@/types/task-management.types';
|
||||
import { useTaskSocketHandlers } from '@/hooks/useTaskSocketHandlers';
|
||||
import TaskRow from './task-row';
|
||||
import BulkActionBar from './bulk-action-bar';
|
||||
// import BulkActionBar from './bulk-action-bar';
|
||||
import VirtualizedTaskList from './virtualized-task-list';
|
||||
import { AppDispatch } from '@/app/store';
|
||||
|
||||
// Import the TaskListFilters component
|
||||
const TaskListFilters = React.lazy(() => import('@/pages/projects/projectView/taskList/task-list-filters/task-list-filters'));
|
||||
// Import the improved TaskListFilters component
|
||||
const ImprovedTaskFilters = React.lazy(
|
||||
() => import('./improved-task-filters')
|
||||
);
|
||||
|
||||
interface TaskListBoardProps {
|
||||
projectId: string;
|
||||
@@ -38,10 +54,34 @@ interface TaskListBoardProps {
|
||||
}
|
||||
|
||||
interface DragState {
|
||||
activeTask: IProjectTask | null;
|
||||
activeTask: Task | null;
|
||||
activeGroupId: string | null;
|
||||
}
|
||||
|
||||
// Throttle utility for performance optimization
|
||||
const throttle = <T extends (...args: any[]) => void>(func: T, delay: number): T => {
|
||||
let timeoutId: NodeJS.Timeout | null = null;
|
||||
let lastExecTime = 0;
|
||||
|
||||
return ((...args: any[]) => {
|
||||
const currentTime = Date.now();
|
||||
|
||||
if (currentTime - lastExecTime > delay) {
|
||||
func(...args);
|
||||
lastExecTime = currentTime;
|
||||
} else {
|
||||
if (timeoutId) clearTimeout(timeoutId);
|
||||
timeoutId = setTimeout(
|
||||
() => {
|
||||
func(...args);
|
||||
lastExecTime = Date.now();
|
||||
},
|
||||
delay - (currentTime - lastExecTime)
|
||||
);
|
||||
}
|
||||
}) as T;
|
||||
};
|
||||
|
||||
const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = '' }) => {
|
||||
const dispatch = useDispatch<AppDispatch>();
|
||||
const [dragState, setDragState] = useState<DragState>({
|
||||
@@ -49,24 +89,29 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
|
||||
activeGroupId: null,
|
||||
});
|
||||
|
||||
// Redux selectors
|
||||
const {
|
||||
taskGroups,
|
||||
loadingGroups,
|
||||
error,
|
||||
groupBy,
|
||||
search,
|
||||
archived,
|
||||
} = useSelector((state: RootState) => state.taskReducer);
|
||||
// Refs for performance optimization
|
||||
const dragOverTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Selection state
|
||||
const [selectedTaskIds, setSelectedTaskIds] = useState<string[]>([]);
|
||||
// Enable real-time socket updates for task changes
|
||||
useTaskSocketHandlers();
|
||||
|
||||
// Drag and Drop sensors
|
||||
// Redux selectors using V3 API (pre-processed data, minimal loops)
|
||||
const tasks = useSelector(taskManagementSelectors.selectAll);
|
||||
const taskGroups = useSelector(selectTaskGroupsV3); // Pre-processed groups from backend
|
||||
const currentGrouping = useSelector(selectCurrentGroupingV3); // Current grouping from backend
|
||||
const selectedTaskIds = useSelector(selectSelectedTaskIds);
|
||||
const loading = useSelector((state: RootState) => state.taskManagement.loading);
|
||||
const error = useSelector((state: RootState) => state.taskManagement.error);
|
||||
|
||||
// Get theme from Redux store
|
||||
const isDarkMode = useSelector((state: RootState) => state.themeReducer?.mode === 'dark');
|
||||
|
||||
// Drag and Drop sensors - optimized for better performance
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, {
|
||||
activationConstraint: {
|
||||
distance: 8,
|
||||
distance: 3, // Reduced from 8 for more responsive dragging
|
||||
},
|
||||
}),
|
||||
useSensor(KeyboardSensor, {
|
||||
@@ -77,227 +122,322 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
|
||||
// Fetch task groups when component mounts or dependencies change
|
||||
useEffect(() => {
|
||||
if (projectId) {
|
||||
dispatch(fetchTaskGroups(projectId));
|
||||
// Fetch real tasks from V3 API (minimal processing needed)
|
||||
dispatch(fetchTasksV3(projectId));
|
||||
}
|
||||
}, [dispatch, projectId, groupBy, search, archived]);
|
||||
|
||||
// Memoized calculations
|
||||
const allTaskIds = useMemo(() => {
|
||||
return taskGroups.flatMap(group => group.tasks.map(task => task.id!));
|
||||
}, [taskGroups]);
|
||||
|
||||
const totalTasksCount = useMemo(() => {
|
||||
return taskGroups.reduce((sum, group) => sum + group.tasks.length, 0);
|
||||
}, [taskGroups]);
|
||||
}, [dispatch, projectId, currentGrouping]);
|
||||
|
||||
// Memoized calculations - optimized
|
||||
const allTaskIds = useMemo(() => tasks.map(task => task.id), [tasks]);
|
||||
const totalTasksCount = useMemo(() => tasks.length, [tasks]);
|
||||
const hasSelection = selectedTaskIds.length > 0;
|
||||
|
||||
// Handlers
|
||||
const handleGroupingChange = (newGroupBy: IGroupBy) => {
|
||||
dispatch(setGroup(newGroupBy));
|
||||
};
|
||||
// Memoized handlers for better performance
|
||||
const handleGroupingChange = useCallback(
|
||||
(newGroupBy: 'status' | 'priority' | 'phase') => {
|
||||
dispatch(setCurrentGrouping(newGroupBy));
|
||||
},
|
||||
[dispatch]
|
||||
);
|
||||
|
||||
const handleDragStart = (event: DragStartEvent) => {
|
||||
const { active } = event;
|
||||
const taskId = active.id as string;
|
||||
|
||||
// Find the task and its group
|
||||
let activeTask: IProjectTask | null = null;
|
||||
let activeGroupId: string | null = null;
|
||||
const handleDragStart = useCallback(
|
||||
(event: DragStartEvent) => {
|
||||
const { active } = event;
|
||||
const taskId = active.id as string;
|
||||
|
||||
for (const group of taskGroups) {
|
||||
const task = group.tasks.find(t => t.id === taskId);
|
||||
if (task) {
|
||||
activeTask = task;
|
||||
activeGroupId = group.id;
|
||||
break;
|
||||
}
|
||||
}
|
||||
// Find the task and its group
|
||||
const activeTask = tasks.find(t => t.id === taskId) || null;
|
||||
let activeGroupId: string | null = null;
|
||||
|
||||
setDragState({
|
||||
activeTask,
|
||||
activeGroupId,
|
||||
});
|
||||
};
|
||||
|
||||
const handleDragOver = (event: DragOverEvent) => {
|
||||
// Handle drag over logic if needed for visual feedback
|
||||
};
|
||||
|
||||
const handleDragEnd = (event: DragEndEvent) => {
|
||||
const { active, over } = event;
|
||||
|
||||
setDragState({
|
||||
activeTask: null,
|
||||
activeGroupId: null,
|
||||
});
|
||||
|
||||
if (!over || !dragState.activeTask || !dragState.activeGroupId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const activeTaskId = active.id as string;
|
||||
const overContainer = over.id as string;
|
||||
|
||||
// Determine if dropping on a group or task
|
||||
const overGroup = taskGroups.find(g => g.id === overContainer);
|
||||
let targetGroupId = overContainer;
|
||||
let targetIndex = -1;
|
||||
|
||||
if (!overGroup) {
|
||||
// Dropping on a task, find which group it belongs to
|
||||
for (const group of taskGroups) {
|
||||
const taskIndex = group.tasks.findIndex(t => t.id === overContainer);
|
||||
if (taskIndex !== -1) {
|
||||
targetGroupId = group.id;
|
||||
targetIndex = taskIndex;
|
||||
break;
|
||||
if (activeTask) {
|
||||
// Determine group ID based on current grouping
|
||||
if (currentGrouping === 'status') {
|
||||
activeGroupId = `status-${activeTask.status}`;
|
||||
} else if (currentGrouping === 'priority') {
|
||||
activeGroupId = `priority-${activeTask.priority}`;
|
||||
} else if (currentGrouping === 'phase') {
|
||||
activeGroupId = `phase-${activeTask.phase}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const sourceGroup = taskGroups.find(g => g.id === dragState.activeGroupId);
|
||||
const targetGroup = taskGroups.find(g => g.id === targetGroupId);
|
||||
setDragState({
|
||||
activeTask,
|
||||
activeGroupId,
|
||||
});
|
||||
},
|
||||
[tasks, currentGrouping]
|
||||
);
|
||||
|
||||
if (!sourceGroup || !targetGroup) return;
|
||||
// Throttled drag over handler for better performance
|
||||
const handleDragOver = useCallback(
|
||||
throttle((event: DragOverEvent) => {
|
||||
const { active, over } = event;
|
||||
|
||||
const sourceIndex = sourceGroup.tasks.findIndex(t => t.id === activeTaskId);
|
||||
if (sourceIndex === -1) return;
|
||||
if (!over || !dragState.activeTask) return;
|
||||
|
||||
// Calculate new positions
|
||||
const finalTargetIndex = targetIndex === -1 ? targetGroup.tasks.length : targetIndex;
|
||||
const activeTaskId = active.id as string;
|
||||
const overContainer = over.id as string;
|
||||
|
||||
// Create updated task arrays
|
||||
const updatedSourceTasks = [...sourceGroup.tasks];
|
||||
const [movedTask] = updatedSourceTasks.splice(sourceIndex, 1);
|
||||
|
||||
let updatedTargetTasks: IProjectTask[];
|
||||
if (sourceGroup.id === targetGroup.id) {
|
||||
// Moving within the same group
|
||||
updatedTargetTasks = updatedSourceTasks;
|
||||
updatedTargetTasks.splice(finalTargetIndex, 0, movedTask);
|
||||
} else {
|
||||
// Moving between different groups
|
||||
updatedTargetTasks = [...targetGroup.tasks];
|
||||
updatedTargetTasks.splice(finalTargetIndex, 0, movedTask);
|
||||
}
|
||||
|
||||
// Dispatch the reorder action
|
||||
dispatch(reorderTasks({
|
||||
activeGroupId: sourceGroup.id,
|
||||
overGroupId: targetGroup.id,
|
||||
fromIndex: sourceIndex,
|
||||
toIndex: finalTargetIndex,
|
||||
task: movedTask,
|
||||
updatedSourceTasks,
|
||||
updatedTargetTasks,
|
||||
}));
|
||||
};
|
||||
|
||||
|
||||
|
||||
const handleSelectTask = (taskId: string, selected: boolean) => {
|
||||
setSelectedTaskIds(prev => {
|
||||
if (selected) {
|
||||
return [...prev, taskId];
|
||||
} else {
|
||||
return prev.filter(id => id !== taskId);
|
||||
// Clear any existing timeout
|
||||
if (dragOverTimeoutRef.current) {
|
||||
clearTimeout(dragOverTimeoutRef.current);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleToggleSubtasks = (taskId: string) => {
|
||||
// Optimistic update with throttling
|
||||
dragOverTimeoutRef.current = setTimeout(() => {
|
||||
// Only update if we're hovering over a different container
|
||||
const targetTask = tasks.find(t => t.id === overContainer);
|
||||
let targetGroupId = overContainer;
|
||||
|
||||
if (targetTask) {
|
||||
if (currentGrouping === 'status') {
|
||||
targetGroupId = `status-${targetTask.status}`;
|
||||
} else if (currentGrouping === 'priority') {
|
||||
targetGroupId = `priority-${targetTask.priority}`;
|
||||
} else if (currentGrouping === 'phase') {
|
||||
targetGroupId = `phase-${targetTask.phase}`;
|
||||
}
|
||||
}
|
||||
|
||||
if (targetGroupId !== dragState.activeGroupId) {
|
||||
// Perform optimistic update for visual feedback
|
||||
const targetGroup = taskGroups.find(g => g.id === targetGroupId);
|
||||
if (targetGroup) {
|
||||
dispatch(
|
||||
optimisticTaskMove({
|
||||
taskId: activeTaskId,
|
||||
newGroupId: targetGroupId,
|
||||
newIndex: targetGroup.taskIds.length,
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
}, 50); // 50ms throttle for drag over events
|
||||
}, 50),
|
||||
[dragState, tasks, taskGroups, currentGrouping, dispatch]
|
||||
);
|
||||
|
||||
const handleDragEnd = useCallback(
|
||||
(event: DragEndEvent) => {
|
||||
const { active, over } = event;
|
||||
|
||||
// Clear any pending drag over timeouts
|
||||
if (dragOverTimeoutRef.current) {
|
||||
clearTimeout(dragOverTimeoutRef.current);
|
||||
dragOverTimeoutRef.current = null;
|
||||
}
|
||||
|
||||
// Reset drag state immediately for better UX
|
||||
const currentDragState = dragState;
|
||||
setDragState({
|
||||
activeTask: null,
|
||||
activeGroupId: null,
|
||||
});
|
||||
|
||||
if (!over || !currentDragState.activeTask || !currentDragState.activeGroupId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const activeTaskId = active.id as string;
|
||||
const overContainer = over.id as string;
|
||||
|
||||
// Parse the group ID to get group type and value - optimized
|
||||
const parseGroupId = (groupId: string) => {
|
||||
const [groupType, ...groupValueParts] = groupId.split('-');
|
||||
return {
|
||||
groupType: groupType as 'status' | 'priority' | 'phase',
|
||||
groupValue: groupValueParts.join('-'),
|
||||
};
|
||||
};
|
||||
|
||||
// Determine target group
|
||||
let targetGroupId = overContainer;
|
||||
let targetIndex = -1;
|
||||
|
||||
// Check if dropping on a task or a group
|
||||
const targetTask = tasks.find(t => t.id === overContainer);
|
||||
if (targetTask) {
|
||||
// Dropping on a task, determine its group
|
||||
if (currentGrouping === 'status') {
|
||||
targetGroupId = `status-${targetTask.status}`;
|
||||
} else if (currentGrouping === 'priority') {
|
||||
targetGroupId = `priority-${targetTask.priority}`;
|
||||
} else if (currentGrouping === 'phase') {
|
||||
targetGroupId = `phase-${targetTask.phase}`;
|
||||
}
|
||||
|
||||
// Find the index of the target task within its group
|
||||
const targetGroup = taskGroups.find(g => g.id === targetGroupId);
|
||||
if (targetGroup) {
|
||||
targetIndex = targetGroup.taskIds.indexOf(targetTask.id);
|
||||
}
|
||||
}
|
||||
|
||||
const sourceGroupInfo = parseGroupId(currentDragState.activeGroupId);
|
||||
const targetGroupInfo = parseGroupId(targetGroupId);
|
||||
|
||||
// If moving between different groups, update the task's group property
|
||||
if (currentDragState.activeGroupId !== targetGroupId) {
|
||||
dispatch(
|
||||
moveTaskToGroup({
|
||||
taskId: activeTaskId,
|
||||
groupType: targetGroupInfo.groupType,
|
||||
groupValue: targetGroupInfo.groupValue,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
// Handle reordering within the same group or between groups
|
||||
const sourceGroup = taskGroups.find(g => g.id === currentDragState.activeGroupId);
|
||||
const targetGroup = taskGroups.find(g => g.id === targetGroupId);
|
||||
|
||||
if (sourceGroup && targetGroup && targetIndex !== -1) {
|
||||
const sourceIndex = sourceGroup.taskIds.indexOf(activeTaskId);
|
||||
const finalTargetIndex = targetIndex === -1 ? targetGroup.taskIds.length : targetIndex;
|
||||
|
||||
// Only reorder if actually moving to a different position
|
||||
if (sourceGroup.id !== targetGroup.id || sourceIndex !== finalTargetIndex) {
|
||||
// Calculate new order values - simplified
|
||||
const allTasksInTargetGroup = targetGroup.taskIds.map(
|
||||
id => tasks.find(t => t.id === id)!
|
||||
);
|
||||
const newOrder = allTasksInTargetGroup.map((task, index) => {
|
||||
if (index < finalTargetIndex) return task.order;
|
||||
if (index === finalTargetIndex) return currentDragState.activeTask!.order;
|
||||
return task.order + 1;
|
||||
});
|
||||
|
||||
// Dispatch reorder action
|
||||
dispatch(
|
||||
reorderTasks({
|
||||
taskIds: [activeTaskId, ...allTasksInTargetGroup.map(t => t.id)],
|
||||
newOrder: [currentDragState.activeTask!.order, ...newOrder],
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
[dragState, tasks, taskGroups, currentGrouping, dispatch]
|
||||
);
|
||||
|
||||
const handleSelectTask = useCallback(
|
||||
(taskId: string, selected: boolean) => {
|
||||
dispatch(toggleTaskSelection(taskId));
|
||||
},
|
||||
[dispatch]
|
||||
);
|
||||
|
||||
const handleToggleSubtasks = useCallback((taskId: string) => {
|
||||
// Implementation for toggling subtasks
|
||||
console.log('Toggle subtasks for task:', taskId);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Memoized DragOverlay content for better performance
|
||||
const dragOverlayContent = useMemo(() => {
|
||||
if (!dragState.activeTask || !dragState.activeGroupId) return null;
|
||||
|
||||
return (
|
||||
<TaskRow
|
||||
task={dragState.activeTask}
|
||||
projectId={projectId}
|
||||
groupId={dragState.activeGroupId}
|
||||
currentGrouping={(currentGrouping as 'status' | 'priority' | 'phase') || 'status'}
|
||||
isSelected={false}
|
||||
isDragOverlay
|
||||
/>
|
||||
);
|
||||
}, [dragState.activeTask, dragState.activeGroupId, projectId, currentGrouping]);
|
||||
|
||||
// Cleanup effect
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (dragOverTimeoutRef.current) {
|
||||
clearTimeout(dragOverTimeoutRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Card className={className}>
|
||||
<Empty
|
||||
description={`Error loading tasks: ${error}`}
|
||||
image={Empty.PRESENTED_IMAGE_SIMPLE}
|
||||
/>
|
||||
<Empty description={`Error loading tasks: ${error}`} image={Empty.PRESENTED_IMAGE_SIMPLE} />
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`task-list-board ${className}`}>
|
||||
{/* Task Filters */}
|
||||
<Card
|
||||
size="small"
|
||||
className="mb-4"
|
||||
styles={{ body: { padding: '12px 16px' } }}
|
||||
<div className={`task-list-board ${className}`} ref={containerRef}>
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCorners}
|
||||
onDragStart={handleDragStart}
|
||||
onDragOver={handleDragOver}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<React.Suspense fallback={<div>Loading filters...</div>}>
|
||||
<TaskListFilters position="list" />
|
||||
</React.Suspense>
|
||||
</Card>
|
||||
{/* Task Filters */}
|
||||
<div className="mb-4">
|
||||
<React.Suspense fallback={<div>Loading filters...</div>}>
|
||||
<ImprovedTaskFilters position="list" />
|
||||
</React.Suspense>
|
||||
</div>
|
||||
|
||||
{/* Bulk Action Bar */}
|
||||
{hasSelection && (
|
||||
<BulkActionBar
|
||||
selectedTaskIds={selectedTaskIds}
|
||||
totalSelected={selectedTaskIds.length}
|
||||
currentGrouping={groupBy}
|
||||
projectId={projectId}
|
||||
onClearSelection={() => setSelectedTaskIds([])}
|
||||
/>
|
||||
)}
|
||||
{/* Virtualized Task Groups Container */}
|
||||
<div className="task-groups-container">
|
||||
{loading ? (
|
||||
<Card>
|
||||
<div className="flex justify-center items-center py-8">
|
||||
<Spin size="large" />
|
||||
</div>
|
||||
</Card>
|
||||
) : taskGroups.length === 0 ? (
|
||||
<Card>
|
||||
<Empty description="No tasks found" image={Empty.PRESENTED_IMAGE_SIMPLE} />
|
||||
</Card>
|
||||
) : (
|
||||
<div className="virtualized-task-groups">
|
||||
{taskGroups.map((group, index) => {
|
||||
// Calculate dynamic height for each group
|
||||
const groupTasks = group.taskIds.length;
|
||||
const baseHeight = 120; // Header + column headers + add task row
|
||||
const taskRowsHeight = groupTasks * 40; // 40px per task row
|
||||
const minGroupHeight = 300; // Minimum height for better visual appearance
|
||||
const maxGroupHeight = 600; // Increased maximum height per group
|
||||
const calculatedHeight = baseHeight + taskRowsHeight;
|
||||
const groupHeight = Math.max(
|
||||
minGroupHeight,
|
||||
Math.min(calculatedHeight, maxGroupHeight)
|
||||
);
|
||||
|
||||
{/* Task Groups Container */}
|
||||
<div className="task-groups-container">
|
||||
{loadingGroups ? (
|
||||
<Card>
|
||||
<div className="flex justify-center items-center py-8">
|
||||
<Spin size="large" />
|
||||
</div>
|
||||
</Card>
|
||||
) : taskGroups.length === 0 ? (
|
||||
<Card>
|
||||
<Empty
|
||||
description="No tasks found"
|
||||
image={Empty.PRESENTED_IMAGE_SIMPLE}
|
||||
/>
|
||||
</Card>
|
||||
) : (
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCorners}
|
||||
onDragStart={handleDragStart}
|
||||
onDragOver={handleDragOver}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<div className="task-groups">
|
||||
{taskGroups.map((group) => (
|
||||
<TaskGroup
|
||||
key={group.id}
|
||||
group={group}
|
||||
projectId={projectId}
|
||||
currentGrouping={groupBy}
|
||||
selectedTaskIds={selectedTaskIds}
|
||||
onSelectTask={handleSelectTask}
|
||||
onToggleSubtasks={handleToggleSubtasks}
|
||||
/>
|
||||
))}
|
||||
return (
|
||||
<VirtualizedTaskList
|
||||
key={group.id}
|
||||
group={group}
|
||||
projectId={projectId}
|
||||
currentGrouping={
|
||||
(currentGrouping as 'status' | 'priority' | 'phase') || 'status'
|
||||
}
|
||||
selectedTaskIds={selectedTaskIds}
|
||||
onSelectTask={handleSelectTask}
|
||||
onToggleSubtasks={handleToggleSubtasks}
|
||||
height={groupHeight}
|
||||
width={1200}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DragOverlay>
|
||||
{dragState.activeTask ? (
|
||||
<TaskRow
|
||||
task={dragState.activeTask}
|
||||
projectId={projectId}
|
||||
groupId={dragState.activeGroupId!}
|
||||
currentGrouping={groupBy}
|
||||
isSelected={false}
|
||||
isDragOverlay
|
||||
/>
|
||||
) : null}
|
||||
</DragOverlay>
|
||||
</DndContext>
|
||||
)}
|
||||
</div>
|
||||
<DragOverlay
|
||||
adjustScale={false}
|
||||
dropAnimation={null}
|
||||
style={{
|
||||
cursor: 'grabbing',
|
||||
}}
|
||||
>
|
||||
{dragOverlayContent}
|
||||
</DragOverlay>
|
||||
</DndContext>
|
||||
|
||||
<style>{`
|
||||
.task-groups-container {
|
||||
@@ -306,13 +446,189 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
|
||||
overflow-x: visible;
|
||||
padding: 8px 8px 8px 0;
|
||||
border-radius: 8px;
|
||||
transition: background-color 0.3s ease;
|
||||
position: relative;
|
||||
/* GPU acceleration for smooth scrolling */
|
||||
transform: translateZ(0);
|
||||
will-change: scroll-position;
|
||||
}
|
||||
|
||||
.virtualized-task-groups {
|
||||
min-width: fit-content;
|
||||
position: relative;
|
||||
/* GPU acceleration for drag operations */
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.virtualized-task-group {
|
||||
border: 1px solid var(--task-border-primary, #e8e8e8);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
background: var(--task-bg-primary, white);
|
||||
box-shadow: 0 1px 3px var(--task-shadow, rgba(0, 0, 0, 0.1));
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.task-groups {
|
||||
min-width: fit-content;
|
||||
.virtualized-task-group:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Task group header styles */
|
||||
.task-group-header {
|
||||
background: var(--task-bg-primary, white);
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.task-group-header-row {
|
||||
display: inline-flex;
|
||||
height: auto;
|
||||
max-height: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.task-group-header-content {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px 6px 0 0;
|
||||
background-color: #f0f0f0;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.task-group-header-text {
|
||||
color: white !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* Column headers styles */
|
||||
.task-group-column-headers {
|
||||
background: var(--task-bg-secondary, #f5f5f5);
|
||||
border-bottom: 1px solid var(--task-border-tertiary, #d9d9d9);
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.task-group-column-headers-row {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
max-height: 40px;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
min-width: 1200px;
|
||||
}
|
||||
|
||||
.task-table-header-cell {
|
||||
background: var(--task-bg-secondary, #f5f5f5);
|
||||
font-weight: 600;
|
||||
color: var(--task-text-secondary, #595959);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
border-bottom: 1px solid var(--task-border-tertiary, #d9d9d9);
|
||||
height: 32px;
|
||||
max-height: 32px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.column-header-text {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--task-text-secondary, #595959);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
/* Add task row styles */
|
||||
.task-group-add-task {
|
||||
background: var(--task-bg-primary, white);
|
||||
border-top: 1px solid var(--task-border-secondary, #f0f0f0);
|
||||
transition: all 0.3s ease;
|
||||
padding: 0 12px;
|
||||
width: 100%;
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.task-group-add-task:hover {
|
||||
background: var(--task-hover-bg, #fafafa);
|
||||
}
|
||||
|
||||
.task-table-fixed-columns {
|
||||
display: flex;
|
||||
background: var(--task-bg-secondary, #f5f5f5);
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 11;
|
||||
border-right: 2px solid var(--task-border-primary, #e8e8e8);
|
||||
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.task-table-scrollable-columns {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.task-table-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
border-right: 1px solid var(--task-border-secondary, #f0f0f0);
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
height: 40px;
|
||||
max-height: 40px;
|
||||
min-height: 40px;
|
||||
overflow: hidden;
|
||||
color: var(--task-text-primary, #262626);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.task-table-cell:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
/* Optimized drag overlay styles */
|
||||
[data-dnd-overlay] {
|
||||
/* GPU acceleration for smooth dragging */
|
||||
transform: translateZ(0);
|
||||
will-change: transform;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Fix drag overlay positioning */
|
||||
[data-rbd-drag-handle-dragging-id] {
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
/* DndKit drag overlay specific styles */
|
||||
.dndkit-drag-overlay {
|
||||
z-index: 9999;
|
||||
pointer-events: none;
|
||||
transform: translateZ(0);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
/* Ensure drag overlay follows cursor properly */
|
||||
[data-dnd-context] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Fix for scrollable containers affecting drag overlay */
|
||||
.task-groups-container [data-dnd-overlay] {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
transform: translateZ(0);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
/* Dark mode support */
|
||||
@@ -352,9 +668,32 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
|
||||
--task-drag-over-bg: #1a2332;
|
||||
--task-drag-over-border: #40a9ff;
|
||||
}
|
||||
|
||||
/* Performance optimizations */
|
||||
.virtualized-task-group {
|
||||
contain: layout style paint;
|
||||
}
|
||||
|
||||
.task-row {
|
||||
contain: layout style;
|
||||
}
|
||||
|
||||
/* Reduce layout thrashing */
|
||||
.task-table-cell {
|
||||
contain: layout;
|
||||
}
|
||||
|
||||
/* React Window specific optimizations */
|
||||
.react-window-list {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.react-window-list-item {
|
||||
contain: layout style;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TaskListBoard;
|
||||
export default TaskListBoard;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,163 @@
|
||||
import React, { useMemo, useCallback } from 'react';
|
||||
import { FixedSizeList as List } from 'react-window';
|
||||
import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { taskManagementSelectors } from '@/features/task-management/task-management.slice';
|
||||
import { Task } from '@/types/task-management.types';
|
||||
import TaskRow from './task-row';
|
||||
|
||||
interface VirtualizedTaskGroupProps {
|
||||
group: any;
|
||||
projectId: string;
|
||||
currentGrouping: 'status' | 'priority' | 'phase';
|
||||
selectedTaskIds: string[];
|
||||
onSelectTask: (taskId: string, selected: boolean) => void;
|
||||
onToggleSubtasks: (taskId: string) => void;
|
||||
height: number;
|
||||
width: number;
|
||||
}
|
||||
|
||||
const VirtualizedTaskGroup: React.FC<VirtualizedTaskGroupProps> = React.memo(({
|
||||
group,
|
||||
projectId,
|
||||
currentGrouping,
|
||||
selectedTaskIds,
|
||||
onSelectTask,
|
||||
onToggleSubtasks,
|
||||
height,
|
||||
width
|
||||
}) => {
|
||||
const allTasks = useSelector(taskManagementSelectors.selectAll);
|
||||
|
||||
// Get tasks for this group using memoization for performance
|
||||
const groupTasks = useMemo(() => {
|
||||
return group.taskIds
|
||||
.map((taskId: string) => allTasks.find((task: Task) => task.id === taskId))
|
||||
.filter((task: Task | undefined): task is Task => task !== undefined);
|
||||
}, [group.taskIds, allTasks]);
|
||||
|
||||
const TASK_ROW_HEIGHT = 40;
|
||||
const GROUP_HEADER_HEIGHT = 40;
|
||||
const COLUMN_HEADER_HEIGHT = 40;
|
||||
const ADD_TASK_ROW_HEIGHT = 40;
|
||||
|
||||
// Calculate total height for the group
|
||||
const totalHeight = GROUP_HEADER_HEIGHT + COLUMN_HEADER_HEIGHT + (groupTasks.length * TASK_ROW_HEIGHT) + ADD_TASK_ROW_HEIGHT;
|
||||
|
||||
// Row renderer for virtualization
|
||||
const Row = useCallback(({ index, style }: { index: number; style: React.CSSProperties }) => {
|
||||
// Header row
|
||||
if (index === 0) {
|
||||
return (
|
||||
<div style={style}>
|
||||
<div className="task-group-header">
|
||||
<div className="task-group-header-row">
|
||||
<div className="task-group-header-content">
|
||||
<span className="task-group-header-text">
|
||||
{group.title} ({groupTasks.length})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Column headers row
|
||||
if (index === 1) {
|
||||
return (
|
||||
<div style={style}>
|
||||
<div className="task-group-column-headers">
|
||||
<div className="task-group-column-headers-row">
|
||||
<div className="task-table-fixed-columns">
|
||||
<div className="task-table-cell task-table-header-cell" style={{ width: '40px' }}></div>
|
||||
<div className="task-table-cell task-table-header-cell" style={{ width: '40px' }}></div>
|
||||
<div className="task-table-cell task-table-header-cell" style={{ width: '80px' }}>
|
||||
<span className="column-header-text">Key</span>
|
||||
</div>
|
||||
<div className="task-table-cell task-table-header-cell" style={{ width: '475px' }}>
|
||||
<span className="column-header-text">Task</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="task-table-scrollable-columns">
|
||||
<div className="task-table-cell task-table-header-cell" style={{ width: '90px' }}>
|
||||
<span className="column-header-text">Progress</span>
|
||||
</div>
|
||||
<div className="task-table-cell task-table-header-cell" style={{ width: '150px' }}>
|
||||
<span className="column-header-text">Members</span>
|
||||
</div>
|
||||
<div className="task-table-cell task-table-header-cell" style={{ width: '200px' }}>
|
||||
<span className="column-header-text">Labels</span>
|
||||
</div>
|
||||
<div className="task-table-cell task-table-header-cell" style={{ width: '100px' }}>
|
||||
<span className="column-header-text">Status</span>
|
||||
</div>
|
||||
<div className="task-table-cell task-table-header-cell" style={{ width: '100px' }}>
|
||||
<span className="column-header-text">Priority</span>
|
||||
</div>
|
||||
<div className="task-table-cell task-table-header-cell" style={{ width: '120px' }}>
|
||||
<span className="column-header-text">Time Tracking</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Task rows
|
||||
const taskIndex = index - 2;
|
||||
if (taskIndex >= 0 && taskIndex < groupTasks.length) {
|
||||
const task = groupTasks[taskIndex];
|
||||
return (
|
||||
<div style={style}>
|
||||
<TaskRow
|
||||
task={task}
|
||||
projectId={projectId}
|
||||
groupId={group.id}
|
||||
currentGrouping={currentGrouping}
|
||||
isSelected={selectedTaskIds.includes(task.id)}
|
||||
index={taskIndex}
|
||||
onSelect={onSelectTask}
|
||||
onToggleSubtasks={onToggleSubtasks}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Add task row (last row)
|
||||
if (taskIndex === groupTasks.length) {
|
||||
return (
|
||||
<div style={style}>
|
||||
<div className="task-group-add-task">
|
||||
<div className="task-table-fixed-columns">
|
||||
<div style={{ width: '380px', padding: '8px 12px' }}>
|
||||
<span className="text-gray-500">+ Add task</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
}, [group, groupTasks, projectId, currentGrouping, selectedTaskIds, onSelectTask, onToggleSubtasks]);
|
||||
|
||||
return (
|
||||
<div className="virtualized-task-group">
|
||||
<SortableContext items={group.taskIds} strategy={verticalListSortingStrategy}>
|
||||
<List
|
||||
height={Math.min(height, totalHeight)}
|
||||
width={width}
|
||||
itemCount={groupTasks.length + 3} // +3 for header, column headers, and add task row
|
||||
itemSize={TASK_ROW_HEIGHT}
|
||||
overscanCount={5} // Render 5 extra items for smooth scrolling
|
||||
>
|
||||
{Row}
|
||||
</List>
|
||||
</SortableContext>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default VirtualizedTaskGroup;
|
||||
@@ -0,0 +1,416 @@
|
||||
import React, { useMemo, useCallback, useEffect, useRef } from 'react';
|
||||
import { FixedSizeList as List } from 'react-window';
|
||||
import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { taskManagementSelectors } from '@/features/task-management/task-management.slice';
|
||||
import { Task } from '@/types/task-management.types';
|
||||
import TaskRow from './task-row';
|
||||
import AddTaskListRow from '@/pages/projects/projectView/taskList/task-list-table/task-list-table-rows/add-task-list-row';
|
||||
|
||||
interface VirtualizedTaskListProps {
|
||||
group: any;
|
||||
projectId: string;
|
||||
currentGrouping: 'status' | 'priority' | 'phase';
|
||||
selectedTaskIds: string[];
|
||||
onSelectTask: (taskId: string, selected: boolean) => void;
|
||||
onToggleSubtasks: (taskId: string) => void;
|
||||
height: number;
|
||||
width: number;
|
||||
}
|
||||
|
||||
const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = React.memo(({
|
||||
group,
|
||||
projectId,
|
||||
currentGrouping,
|
||||
selectedTaskIds,
|
||||
onSelectTask,
|
||||
onToggleSubtasks,
|
||||
height,
|
||||
width
|
||||
}) => {
|
||||
const allTasks = useSelector(taskManagementSelectors.selectAll);
|
||||
|
||||
// Get tasks for this group using memoization for performance
|
||||
const groupTasks = useMemo(() => {
|
||||
return group.taskIds
|
||||
.map((taskId: string) => allTasks.find((task: Task) => task.id === taskId))
|
||||
.filter((task: Task | undefined): task is Task => task !== undefined);
|
||||
}, [group.taskIds, allTasks]);
|
||||
|
||||
const TASK_ROW_HEIGHT = 40;
|
||||
const HEADER_HEIGHT = 40;
|
||||
const COLUMN_HEADER_HEIGHT = 40;
|
||||
|
||||
// Calculate the actual height needed for the virtualized list
|
||||
const actualContentHeight = HEADER_HEIGHT + COLUMN_HEADER_HEIGHT + (groupTasks.length * TASK_ROW_HEIGHT);
|
||||
const listHeight = Math.min(height - 40, actualContentHeight);
|
||||
|
||||
// Calculate item count - only include actual content
|
||||
const getItemCount = () => {
|
||||
return groupTasks.length + 2; // +2 for header and column headers only
|
||||
};
|
||||
|
||||
// Debug logging
|
||||
useEffect(() => {
|
||||
console.log('VirtualizedTaskList:', {
|
||||
groupId: group.id,
|
||||
groupTasks: groupTasks.length,
|
||||
height,
|
||||
listHeight,
|
||||
itemCount: getItemCount(),
|
||||
isVirtualized: groupTasks.length > 10, // Show if virtualization should be active
|
||||
minHeight: 300,
|
||||
maxHeight: 600
|
||||
});
|
||||
}, [group.id, groupTasks.length, height, listHeight]);
|
||||
|
||||
const scrollContainerRef = useRef<HTMLDivElement>(null);
|
||||
const headerScrollRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Synchronize header scroll with body scroll
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
if (headerScrollRef.current && scrollContainerRef.current) {
|
||||
headerScrollRef.current.scrollLeft = scrollContainerRef.current.scrollLeft;
|
||||
}
|
||||
};
|
||||
const scrollDiv = scrollContainerRef.current;
|
||||
if (scrollDiv) {
|
||||
scrollDiv.addEventListener('scroll', handleScroll);
|
||||
}
|
||||
return () => {
|
||||
if (scrollDiv) {
|
||||
scrollDiv.removeEventListener('scroll', handleScroll);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Define columns array for alignment
|
||||
const columns = [
|
||||
{ key: 'drag', label: '', width: 40, fixed: true },
|
||||
{ key: 'select', label: '', width: 40, fixed: true },
|
||||
{ key: 'key', label: 'KEY', width: 80, fixed: true },
|
||||
{ key: 'task', label: 'TASK', width: 475, fixed: true },
|
||||
{ key: 'progress', label: 'PROGRESS', width: 90 },
|
||||
{ key: 'members', label: 'MEMBERS', width: 150 },
|
||||
{ key: 'labels', label: 'LABELS', width: 200 },
|
||||
{ key: 'status', label: 'STATUS', width: 100 },
|
||||
{ key: 'priority', label: 'PRIORITY', width: 100 },
|
||||
{ key: 'timeTracking', label: 'TIME TRACKING', width: 120 },
|
||||
];
|
||||
const fixedColumns = columns.filter(col => col.fixed);
|
||||
const scrollableColumns = columns.filter(col => !col.fixed);
|
||||
const fixedWidth = fixedColumns.reduce((sum, col) => sum + col.width, 0);
|
||||
const scrollableWidth = scrollableColumns.reduce((sum, col) => sum + col.width, 0);
|
||||
const totalTableWidth = fixedWidth + scrollableWidth;
|
||||
|
||||
// Row renderer for virtualization (remove header/column header rows)
|
||||
const Row = useCallback(({ index, style }: { index: number; style: React.CSSProperties }) => {
|
||||
const task = groupTasks[index];
|
||||
if (!task) return null;
|
||||
return (
|
||||
<div
|
||||
className="task-row-container"
|
||||
style={{
|
||||
...style,
|
||||
'--group-color': group.color || '#f0f0f0'
|
||||
} as React.CSSProperties}
|
||||
>
|
||||
<TaskRow
|
||||
task={task}
|
||||
projectId={projectId}
|
||||
groupId={group.id}
|
||||
currentGrouping={currentGrouping}
|
||||
isSelected={selectedTaskIds.includes(task.id)}
|
||||
index={index}
|
||||
onSelect={onSelectTask}
|
||||
onToggleSubtasks={onToggleSubtasks}
|
||||
fixedColumns={fixedColumns}
|
||||
scrollableColumns={scrollableColumns}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}, [group, groupTasks, projectId, currentGrouping, selectedTaskIds, onSelectTask, onToggleSubtasks]);
|
||||
|
||||
return (
|
||||
<div className="virtualized-task-list" style={{ height: height }}>
|
||||
{/* Group Header */}
|
||||
<div className="task-group-header">
|
||||
<div className="task-group-header-row">
|
||||
<div
|
||||
className="task-group-header-content"
|
||||
style={{
|
||||
backgroundColor: group.color || '#f0f0f0',
|
||||
borderLeft: `4px solid ${group.color || '#f0f0f0'}`
|
||||
}}
|
||||
>
|
||||
<span className="task-group-header-text">
|
||||
{group.title} ({groupTasks.length})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Column Headers (sync scroll) */}
|
||||
<div
|
||||
className="task-group-column-headers-scroll"
|
||||
ref={headerScrollRef}
|
||||
style={{ overflowX: 'auto', overflowY: 'hidden' }}
|
||||
>
|
||||
<div
|
||||
className="task-group-column-headers"
|
||||
style={{ borderLeft: `4px solid ${group.color || '#f0f0f0'}`, minWidth: totalTableWidth, display: 'flex', position: 'relative' }}
|
||||
>
|
||||
<div className="fixed-columns-header" style={{ display: 'flex', position: 'sticky', left: 0, zIndex: 2, background: 'inherit', width: fixedWidth }}>
|
||||
{fixedColumns.map(col => (
|
||||
<div
|
||||
key={col.key}
|
||||
className="task-table-cell task-table-header-cell fixed-column"
|
||||
style={{ width: col.width }}
|
||||
>
|
||||
<span className="column-header-text">{col.label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="scrollable-columns-header" style={{ display: 'flex', minWidth: scrollableWidth }}>
|
||||
{scrollableColumns.map(col => (
|
||||
<div
|
||||
key={col.key}
|
||||
className="task-table-cell task-table-header-cell"
|
||||
style={{ width: col.width }}
|
||||
>
|
||||
<span className="column-header-text">{col.label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Scrollable List */}
|
||||
<div
|
||||
className="task-list-scroll-container"
|
||||
ref={scrollContainerRef}
|
||||
style={{ overflowX: 'auto', overflowY: 'hidden', width: '100%', minWidth: totalTableWidth }}
|
||||
>
|
||||
<SortableContext items={group.taskIds} strategy={verticalListSortingStrategy}>
|
||||
<List
|
||||
height={listHeight}
|
||||
width={width}
|
||||
itemCount={groupTasks.length}
|
||||
itemSize={TASK_ROW_HEIGHT}
|
||||
overscanCount={15}
|
||||
className="react-window-list"
|
||||
style={{ minWidth: totalTableWidth }}
|
||||
>
|
||||
{Row}
|
||||
</List>
|
||||
</SortableContext>
|
||||
</div>
|
||||
{/* Add Task Row - Always show at the bottom */}
|
||||
<div
|
||||
className="task-group-add-task"
|
||||
style={{ borderLeft: `4px solid ${group.color || '#f0f0f0'}` }}
|
||||
>
|
||||
<AddTaskListRow groupId={group.id} />
|
||||
</div>
|
||||
<style>{`
|
||||
.virtualized-task-list {
|
||||
border: 1px solid var(--task-border-primary, #e8e8e8);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
background: var(--task-bg-primary, white);
|
||||
box-shadow: 0 1px 3px var(--task-shadow, rgba(0, 0, 0, 0.1));
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.task-group-header {
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
}
|
||||
.task-group-column-headers-scroll {
|
||||
width: 100%;
|
||||
}
|
||||
.task-group-column-headers {
|
||||
background: var(--task-bg-secondary, #f5f5f5);
|
||||
border-bottom: 1px solid var(--task-border-tertiary, #d9d9d9);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-width: 1200px;
|
||||
}
|
||||
.task-list-scroll-container {
|
||||
width: 100%;
|
||||
}
|
||||
.react-window-list {
|
||||
outline: none;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.react-window-list-item {
|
||||
contain: layout style;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
/* Task row container styles */
|
||||
.task-row-container {
|
||||
position: relative;
|
||||
background: var(--task-bg-primary, white);
|
||||
}
|
||||
.task-row-container::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
background-color: var(--group-color, #f0f0f0);
|
||||
z-index: 10;
|
||||
}
|
||||
/* Ensure no gaps between list items */
|
||||
.react-window-list > div {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
/* Task group header styles */
|
||||
.task-group-header-row {
|
||||
display: inline-flex;
|
||||
height: auto;
|
||||
max-height: none;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.task-group-header-content {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px 6px 0 0;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
margin: 0;
|
||||
border: none;
|
||||
}
|
||||
.task-group-header-text {
|
||||
color: white !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
/* Column headers styles */
|
||||
.task-table-header-cell {
|
||||
background: var(--task-bg-secondary, #f5f5f5);
|
||||
font-weight: 600;
|
||||
color: var(--task-text-secondary, #595959);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
border-bottom: 1px solid var(--task-border-tertiary, #d9d9d9);
|
||||
height: 32px;
|
||||
max-height: 32px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.column-header-text {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--task-text-secondary, #595959);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
/* Add task row styles */
|
||||
.task-group-add-task {
|
||||
background: var(--task-bg-primary, white);
|
||||
border-top: 1px solid var(--task-border-secondary, #f0f0f0);
|
||||
transition: all 0.3s ease;
|
||||
padding: 0 12px;
|
||||
width: 100%;
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.task-group-add-task:hover {
|
||||
background: var(--task-hover-bg, #fafafa);
|
||||
}
|
||||
.task-table-fixed-columns {
|
||||
display: flex;
|
||||
background: var(--task-bg-secondary, #f5f5f5);
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 11;
|
||||
border-right: 2px solid var(--task-border-primary, #e8e8e8);
|
||||
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.task-table-scrollable-columns {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.task-table-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
border-right: 1px solid var(--task-border-secondary, #f0f0f0);
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
height: 40px;
|
||||
max-height: 40px;
|
||||
min-height: 40px;
|
||||
overflow: hidden;
|
||||
color: var(--task-text-primary, #262626);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.task-table-cell:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
/* Performance optimizations */
|
||||
.virtualized-task-list {
|
||||
contain: layout style paint;
|
||||
}
|
||||
/* Dark mode support */
|
||||
:root {
|
||||
--task-bg-primary: #ffffff;
|
||||
--task-bg-secondary: #f5f5f5;
|
||||
--task-bg-tertiary: #f8f9fa;
|
||||
--task-border-primary: #e8e8e8;
|
||||
--task-border-secondary: #f0f0f0;
|
||||
--task-border-tertiary: #d9d9d9;
|
||||
--task-text-primary: #262626;
|
||||
--task-text-secondary: #595959;
|
||||
--task-text-tertiary: #8c8c8c;
|
||||
--task-shadow: rgba(0, 0, 0, 0.1);
|
||||
--task-hover-bg: #fafafa;
|
||||
--task-selected-bg: #e6f7ff;
|
||||
--task-selected-border: #1890ff;
|
||||
--task-drag-over-bg: #f0f8ff;
|
||||
--task-drag-over-border: #40a9ff;
|
||||
}
|
||||
.dark .virtualized-task-list,
|
||||
[data-theme="dark"] .virtualized-task-list {
|
||||
--task-bg-primary: #1f1f1f;
|
||||
--task-bg-secondary: #141414;
|
||||
--task-bg-tertiary: #262626;
|
||||
--task-border-primary: #303030;
|
||||
--task-border-secondary: #404040;
|
||||
--task-border-tertiary: #505050;
|
||||
--task-text-primary: #ffffff;
|
||||
--task-text-secondary: #d9d9d9;
|
||||
--task-text-tertiary: #8c8c8c;
|
||||
--task-shadow: rgba(0, 0, 0, 0.3);
|
||||
--task-hover-bg: #2a2a2a;
|
||||
--task-selected-bg: #1a2332;
|
||||
--task-selected-border: #1890ff;
|
||||
--task-drag-over-bg: #1a2332;
|
||||
--task-drag-over-border: #40a9ff;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default VirtualizedTaskList;
|
||||
@@ -76,6 +76,10 @@ interface BoardState {
|
||||
priorities: string[];
|
||||
members: string[];
|
||||
editableSectionId: string | null;
|
||||
|
||||
allTasks: IProjectTask[];
|
||||
grouping: string;
|
||||
totalTasks: number;
|
||||
}
|
||||
|
||||
const initialState: BoardState = {
|
||||
@@ -98,6 +102,9 @@ const initialState: BoardState = {
|
||||
priorities: [],
|
||||
members: [],
|
||||
editableSectionId: null,
|
||||
allTasks: [],
|
||||
grouping: '',
|
||||
totalTasks: 0,
|
||||
};
|
||||
|
||||
const deleteTaskFromGroup = (
|
||||
@@ -186,7 +193,7 @@ export const fetchBoardTaskGroups = createAsyncThunk(
|
||||
priorities: boardReducer.priorities.join(' '),
|
||||
};
|
||||
|
||||
const response = await tasksApiService.getTaskList(config);
|
||||
const response = await tasksApiService.getTaskListV3(config);
|
||||
return response.body;
|
||||
} catch (error) {
|
||||
logger.error('Fetch Task Groups', error);
|
||||
@@ -803,7 +810,10 @@ const boardSlice = createSlice({
|
||||
})
|
||||
.addCase(fetchBoardTaskGroups.fulfilled, (state, action) => {
|
||||
state.loadingGroups = false;
|
||||
state.taskGroups = action.payload;
|
||||
state.taskGroups = action.payload && action.payload.groups ? action.payload.groups : [];
|
||||
state.allTasks = action.payload && action.payload.allTasks ? action.payload.allTasks : [];
|
||||
state.grouping = action.payload && action.payload.grouping ? action.payload.grouping : '';
|
||||
state.totalTasks = action.payload && action.payload.totalTasks ? action.payload.totalTasks : 0;
|
||||
})
|
||||
.addCase(fetchBoardTaskGroups.rejected, (state, action) => {
|
||||
state.loadingGroups = false;
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import { createSlice, createEntityAdapter, PayloadAction } from '@reduxjs/toolkit';
|
||||
import { createSlice, createEntityAdapter, PayloadAction, createAsyncThunk } from '@reduxjs/toolkit';
|
||||
import { Task, TaskManagementState } from '@/types/task-management.types';
|
||||
import { RootState } from '@/app/store';
|
||||
import { tasksApiService, ITaskListConfigV2, ITaskListV3Response } from '@/api/tasks/tasks.api.service';
|
||||
import logger from '@/utils/errorLogger';
|
||||
|
||||
// Entity adapter for normalized state
|
||||
const tasksAdapter = createEntityAdapter<Task>({
|
||||
selectId: (task) => task.id,
|
||||
sortComparer: (a, b) => a.order - b.order,
|
||||
});
|
||||
|
||||
@@ -13,8 +14,198 @@ const initialState: TaskManagementState = {
|
||||
ids: [],
|
||||
loading: false,
|
||||
error: null,
|
||||
groups: [],
|
||||
grouping: null,
|
||||
selectedPriorities: [],
|
||||
};
|
||||
|
||||
// Async thunk to fetch tasks from API
|
||||
export const fetchTasks = createAsyncThunk(
|
||||
'taskManagement/fetchTasks',
|
||||
async (projectId: string, { rejectWithValue, getState }) => {
|
||||
try {
|
||||
const state = getState() as RootState;
|
||||
const currentGrouping = state.grouping.currentGrouping;
|
||||
|
||||
const config: ITaskListConfigV2 = {
|
||||
id: projectId,
|
||||
archived: false,
|
||||
group: currentGrouping,
|
||||
field: '',
|
||||
order: '',
|
||||
search: '',
|
||||
statuses: '',
|
||||
members: '',
|
||||
projects: '',
|
||||
isSubtasksInclude: false,
|
||||
labels: '',
|
||||
priorities: '',
|
||||
};
|
||||
|
||||
const response = await tasksApiService.getTaskList(config);
|
||||
|
||||
// Helper function to safely convert time values
|
||||
const convertTimeValue = (value: any): number => {
|
||||
if (typeof value === 'number') return value;
|
||||
if (typeof value === 'string') {
|
||||
const parsed = parseFloat(value);
|
||||
return isNaN(parsed) ? 0 : parsed;
|
||||
}
|
||||
if (typeof value === 'object' && value !== null) {
|
||||
// Handle time objects like {hours: 2, minutes: 30}
|
||||
if ('hours' in value || 'minutes' in value) {
|
||||
const hours = Number(value.hours || 0);
|
||||
const minutes = Number(value.minutes || 0);
|
||||
return hours + (minutes / 60);
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
|
||||
// Create a mapping from status IDs to group names
|
||||
const statusIdToNameMap: Record<string, string> = {};
|
||||
const priorityIdToNameMap: Record<string, string> = {};
|
||||
|
||||
response.body.forEach((group: any) => {
|
||||
statusIdToNameMap[group.id] = group.name.toLowerCase();
|
||||
});
|
||||
|
||||
// For priority mapping, we need to get priority names from the tasks themselves
|
||||
// Since the API doesn't provide priority names in the group structure
|
||||
response.body.forEach((group: any) => {
|
||||
group.tasks.forEach((task: any) => {
|
||||
// Map priority value to name (this is an assumption based on common patterns)
|
||||
if (task.priority_value !== undefined) {
|
||||
switch (task.priority_value) {
|
||||
case 0: priorityIdToNameMap[task.priority] = 'low'; break;
|
||||
case 1: priorityIdToNameMap[task.priority] = 'medium'; break;
|
||||
case 2: priorityIdToNameMap[task.priority] = 'high'; break;
|
||||
case 3: priorityIdToNameMap[task.priority] = 'critical'; break;
|
||||
default: priorityIdToNameMap[task.priority] = 'medium';
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Transform the API response to our Task type
|
||||
const tasks: Task[] = response.body.flatMap((group: any) =>
|
||||
group.tasks.map((task: any) => ({
|
||||
id: task.id,
|
||||
task_key: task.task_key || '',
|
||||
title: task.name || '',
|
||||
description: task.description || '',
|
||||
status: statusIdToNameMap[task.status] || 'todo',
|
||||
priority: priorityIdToNameMap[task.priority] || 'medium',
|
||||
phase: task.phase_name || 'Development',
|
||||
progress: typeof task.complete_ratio === 'number' ? task.complete_ratio : 0,
|
||||
assignees: task.assignees?.map((a: any) => a.team_member_id) || [],
|
||||
assignee_names: task.assignee_names || task.names || [],
|
||||
labels: task.labels?.map((l: any) => ({
|
||||
id: l.id || l.label_id,
|
||||
name: l.name,
|
||||
color: l.color_code || '#1890ff',
|
||||
end: l.end,
|
||||
names: l.names
|
||||
})) || [],
|
||||
dueDate: task.end_date,
|
||||
timeTracking: {
|
||||
estimated: convertTimeValue(task.total_time),
|
||||
logged: convertTimeValue(task.time_spent),
|
||||
},
|
||||
customFields: {},
|
||||
createdAt: task.created_at || new Date().toISOString(),
|
||||
updatedAt: task.updated_at || new Date().toISOString(),
|
||||
order: typeof task.sort_order === 'number' ? task.sort_order : 0,
|
||||
}))
|
||||
);
|
||||
|
||||
return tasks;
|
||||
} catch (error) {
|
||||
logger.error('Fetch Tasks', error);
|
||||
if (error instanceof Error) {
|
||||
return rejectWithValue(error.message);
|
||||
}
|
||||
return rejectWithValue('Failed to fetch tasks');
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// New V3 fetch that minimizes frontend processing
|
||||
export const fetchTasksV3 = createAsyncThunk(
|
||||
'taskManagement/fetchTasksV3',
|
||||
async (projectId: string, { rejectWithValue, getState }) => {
|
||||
try {
|
||||
const state = getState() as RootState;
|
||||
const currentGrouping = state.grouping.currentGrouping;
|
||||
|
||||
// Get selected labels from taskReducer
|
||||
const selectedLabels = state.taskReducer.labels
|
||||
? state.taskReducer.labels.filter(l => l.selected).map(l => l.id).join(',')
|
||||
: '';
|
||||
|
||||
// Get selected assignees from taskReducer
|
||||
const selectedAssignees = state.taskReducer.taskAssignees
|
||||
? state.taskReducer.taskAssignees.filter(m => m.selected).map(m => m.id).join(',')
|
||||
: '';
|
||||
|
||||
// Get selected priorities from taskManagement slice
|
||||
const selectedPriorities = state.taskManagement.selectedPriorities
|
||||
? state.taskManagement.selectedPriorities.join(',')
|
||||
: '';
|
||||
|
||||
console.log('fetchTasksV3 - selectedPriorities:', selectedPriorities);
|
||||
|
||||
const config: ITaskListConfigV2 = {
|
||||
id: projectId,
|
||||
archived: false,
|
||||
group: currentGrouping,
|
||||
field: '',
|
||||
order: '',
|
||||
search: '',
|
||||
statuses: '',
|
||||
members: selectedAssignees,
|
||||
projects: '',
|
||||
isSubtasksInclude: false,
|
||||
labels: selectedLabels,
|
||||
priorities: selectedPriorities,
|
||||
};
|
||||
|
||||
const response = await tasksApiService.getTaskListV3(config);
|
||||
|
||||
// Minimal processing - tasks are already processed by backend
|
||||
return {
|
||||
tasks: response.body.allTasks,
|
||||
groups: response.body.groups,
|
||||
grouping: response.body.grouping,
|
||||
totalTasks: response.body.totalTasks
|
||||
};
|
||||
} catch (error) {
|
||||
logger.error('Fetch Tasks V3', error);
|
||||
if (error instanceof Error) {
|
||||
return rejectWithValue(error.message);
|
||||
}
|
||||
return rejectWithValue('Failed to fetch tasks');
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Refresh task progress separately to avoid slowing down initial load
|
||||
export const refreshTaskProgress = createAsyncThunk(
|
||||
'taskManagement/refreshTaskProgress',
|
||||
async (projectId: string, { rejectWithValue }) => {
|
||||
try {
|
||||
const response = await tasksApiService.refreshTaskProgress(projectId);
|
||||
return response.body;
|
||||
} catch (error) {
|
||||
logger.error('Refresh Task Progress', error);
|
||||
if (error instanceof Error) {
|
||||
return rejectWithValue(error.message);
|
||||
}
|
||||
return rejectWithValue('Failed to refresh task progress');
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const taskManagementSlice = createSlice({
|
||||
name: 'taskManagement',
|
||||
initialState: tasksAdapter.getInitialState(initialState),
|
||||
@@ -61,13 +252,19 @@ const taskManagementSlice = createSlice({
|
||||
tasksAdapter.removeMany(state, action.payload);
|
||||
},
|
||||
|
||||
// Drag and drop operations
|
||||
// Optimized drag and drop operations
|
||||
reorderTasks: (state, action: PayloadAction<{ taskIds: string[]; newOrder: number[] }>) => {
|
||||
const { taskIds, newOrder } = action.payload;
|
||||
|
||||
// Batch update for better performance
|
||||
const updates = taskIds.map((id, index) => ({
|
||||
id,
|
||||
changes: { order: newOrder[index] },
|
||||
changes: {
|
||||
order: newOrder[index],
|
||||
updatedAt: new Date().toISOString(),
|
||||
},
|
||||
}));
|
||||
|
||||
tasksAdapter.updateMany(state, updates);
|
||||
},
|
||||
|
||||
@@ -89,6 +286,34 @@ const taskManagementSlice = createSlice({
|
||||
tasksAdapter.updateOne(state, { id: taskId, changes });
|
||||
},
|
||||
|
||||
// Optimistic update for drag operations - reduces perceived lag
|
||||
optimisticTaskMove: (state, action: PayloadAction<{ taskId: string; newGroupId: string; newIndex: number }>) => {
|
||||
const { taskId, newGroupId, newIndex } = action.payload;
|
||||
const task = state.entities[taskId];
|
||||
|
||||
if (task) {
|
||||
// Parse group ID to determine new values
|
||||
const [groupType, ...groupValueParts] = newGroupId.split('-');
|
||||
const groupValue = groupValueParts.join('-');
|
||||
|
||||
const changes: Partial<Task> = {
|
||||
order: newIndex,
|
||||
updatedAt: new Date().toISOString(),
|
||||
};
|
||||
|
||||
// Update group-specific field
|
||||
if (groupType === 'status') {
|
||||
changes.status = groupValue as Task['status'];
|
||||
} else if (groupType === 'priority') {
|
||||
changes.priority = groupValue as Task['priority'];
|
||||
} else if (groupType === 'phase') {
|
||||
changes.phase = groupValue;
|
||||
}
|
||||
|
||||
tasksAdapter.updateOne(state, { id: taskId, changes });
|
||||
}
|
||||
},
|
||||
|
||||
// Loading states
|
||||
setLoading: (state, action: PayloadAction<boolean>) => {
|
||||
state.loading = action.payload;
|
||||
@@ -98,6 +323,54 @@ const taskManagementSlice = createSlice({
|
||||
state.error = action.payload;
|
||||
state.loading = false;
|
||||
},
|
||||
|
||||
// Filter actions
|
||||
setSelectedPriorities: (state, action: PayloadAction<string[]>) => {
|
||||
state.selectedPriorities = action.payload;
|
||||
},
|
||||
},
|
||||
extraReducers: (builder) => {
|
||||
builder
|
||||
.addCase(fetchTasks.pending, (state) => {
|
||||
state.loading = true;
|
||||
state.error = null;
|
||||
})
|
||||
.addCase(fetchTasks.fulfilled, (state, action) => {
|
||||
state.loading = false;
|
||||
state.error = null;
|
||||
tasksAdapter.setAll(state, action.payload);
|
||||
})
|
||||
.addCase(fetchTasks.rejected, (state, action) => {
|
||||
state.loading = false;
|
||||
state.error = action.payload as string || 'Failed to fetch tasks';
|
||||
})
|
||||
.addCase(fetchTasksV3.pending, (state) => {
|
||||
state.loading = true;
|
||||
state.error = null;
|
||||
})
|
||||
.addCase(fetchTasksV3.fulfilled, (state, action) => {
|
||||
state.loading = false;
|
||||
state.error = null;
|
||||
// Tasks are already processed by backend, minimal setup needed
|
||||
tasksAdapter.setAll(state, action.payload.tasks);
|
||||
state.groups = action.payload.groups;
|
||||
state.grouping = action.payload.grouping;
|
||||
})
|
||||
.addCase(fetchTasksV3.rejected, (state, action) => {
|
||||
state.loading = false;
|
||||
state.error = action.payload as string || 'Failed to fetch tasks';
|
||||
})
|
||||
.addCase(refreshTaskProgress.pending, (state) => {
|
||||
// Don't set loading to true for refresh to avoid UI blocking
|
||||
state.error = null;
|
||||
})
|
||||
.addCase(refreshTaskProgress.fulfilled, (state) => {
|
||||
state.error = null;
|
||||
// Progress refresh completed successfully
|
||||
})
|
||||
.addCase(refreshTaskProgress.rejected, (state, action) => {
|
||||
state.error = action.payload as string || 'Failed to refresh task progress';
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
@@ -110,16 +383,20 @@ export const {
|
||||
bulkDeleteTasks,
|
||||
reorderTasks,
|
||||
moveTaskToGroup,
|
||||
optimisticTaskMove,
|
||||
setLoading,
|
||||
setError,
|
||||
setSelectedPriorities,
|
||||
} = taskManagementSlice.actions;
|
||||
|
||||
export default taskManagementSlice.reducer;
|
||||
|
||||
// Selectors
|
||||
export const taskManagementSelectors = tasksAdapter.getSelectors<RootState>(
|
||||
(state) => state.taskManagement
|
||||
);
|
||||
|
||||
// Additional selectors
|
||||
// Enhanced selectors for better performance
|
||||
export const selectTasksByStatus = (state: RootState, status: string) =>
|
||||
taskManagementSelectors.selectAll(state).filter(task => task.status === status);
|
||||
|
||||
@@ -132,4 +409,6 @@ export const selectTasksByPhase = (state: RootState, phase: string) =>
|
||||
export const selectTasksLoading = (state: RootState) => state.taskManagement.loading;
|
||||
export const selectTasksError = (state: RootState) => state.taskManagement.error;
|
||||
|
||||
export default taskManagementSlice.reducer;
|
||||
// V3 API selectors - no processing needed, data is pre-processed by backend
|
||||
export const selectTaskGroupsV3 = (state: RootState) => state.taskManagement.groups;
|
||||
export const selectCurrentGroupingV3 = (state: RootState) => state.taskManagement.grouping;
|
||||
@@ -80,6 +80,9 @@ interface ITaskState {
|
||||
convertToSubtaskDrawerOpen: boolean;
|
||||
customColumns: ITaskListColumn[];
|
||||
customColumnValues: Record<string, Record<string, any>>;
|
||||
allTasks: IProjectTask[];
|
||||
grouping: string;
|
||||
totalTasks: number;
|
||||
}
|
||||
|
||||
const initialState: ITaskState = {
|
||||
@@ -105,6 +108,9 @@ const initialState: ITaskState = {
|
||||
convertToSubtaskDrawerOpen: false,
|
||||
customColumns: [],
|
||||
customColumnValues: {},
|
||||
allTasks: [],
|
||||
grouping: '',
|
||||
totalTasks: 0,
|
||||
};
|
||||
|
||||
export const COLUMN_KEYS = {
|
||||
@@ -165,7 +171,7 @@ export const fetchTaskGroups = createAsyncThunk(
|
||||
priorities: taskReducer.priorities.join(' '),
|
||||
};
|
||||
|
||||
const response = await tasksApiService.getTaskList(config);
|
||||
const response = await tasksApiService.getTaskListV3(config);
|
||||
return response.body;
|
||||
} catch (error) {
|
||||
logger.error('Fetch Task Groups', error);
|
||||
@@ -234,9 +240,9 @@ export const fetchSubTasks = createAsyncThunk(
|
||||
parent_task: taskId,
|
||||
};
|
||||
try {
|
||||
const response = await tasksApiService.getTaskList(config);
|
||||
const response = await tasksApiService.getTaskListV3(config);
|
||||
// Only expand if we actually fetched subtasks
|
||||
if (response.body.length > 0) {
|
||||
if (response.body && response.body.groups && response.body.groups.length > 0) {
|
||||
dispatch(toggleTaskRowExpansion(taskId));
|
||||
}
|
||||
return response.body;
|
||||
@@ -1026,7 +1032,10 @@ const taskSlice = createSlice({
|
||||
})
|
||||
.addCase(fetchTaskGroups.fulfilled, (state, action) => {
|
||||
state.loadingGroups = false;
|
||||
state.taskGroups = action.payload;
|
||||
state.taskGroups = action.payload && action.payload.groups ? action.payload.groups : [];
|
||||
state.allTasks = action.payload && action.payload.allTasks ? action.payload.allTasks : [];
|
||||
state.grouping = action.payload && action.payload.grouping ? action.payload.grouping : '';
|
||||
state.totalTasks = action.payload && action.payload.totalTasks ? action.payload.totalTasks : 0;
|
||||
})
|
||||
.addCase(fetchTaskGroups.rejected, (state, action) => {
|
||||
state.loadingGroups = false;
|
||||
@@ -1035,14 +1044,16 @@ const taskSlice = createSlice({
|
||||
.addCase(fetchSubTasks.pending, state => {
|
||||
state.error = null;
|
||||
})
|
||||
.addCase(fetchSubTasks.fulfilled, (state, action: PayloadAction<IProjectTask[]>) => {
|
||||
if (action.payload.length > 0) {
|
||||
const taskId = action.payload[0].parent_task_id;
|
||||
.addCase(fetchSubTasks.fulfilled, (state, action) => {
|
||||
if (action.payload && action.payload.groups && action.payload.groups.length > 0) {
|
||||
// Assuming subtasks are in the first group for this context
|
||||
const subtasks = action.payload.groups[0].tasks;
|
||||
const taskId = subtasks.length > 0 ? subtasks[0].parent_task_id : null;
|
||||
if (taskId) {
|
||||
for (const group of state.taskGroups) {
|
||||
const task = group.tasks.find(t => t.id === taskId);
|
||||
if (task) {
|
||||
task.sub_tasks = action.payload;
|
||||
task.sub_tasks = subtasks;
|
||||
task.show_sub_tasks = true;
|
||||
break;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
|
||||
@import url("./styles/customOverrides.css");
|
||||
@import url("./styles/task-management.css");
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
|
||||
@@ -1,54 +1,49 @@
|
||||
import { useEffect } from 'react';
|
||||
import { Flex } from 'antd';
|
||||
import TaskListFilters from './taskListFilters/TaskListFilters';
|
||||
import { useAppSelector } from '@/hooks/useAppSelector';
|
||||
import { useAppDispatch } from '@/hooks/useAppDispatch';
|
||||
import { fetchStatusesCategories } from '@/features/taskAttributes/taskStatusSlice';
|
||||
import { fetchTaskGroups } from '@/features/tasks/tasks.slice';
|
||||
import { ITaskListConfigV2 } from '@/types/tasks/taskList.types';
|
||||
import TanStackTable from '../task-list/task-list-custom';
|
||||
import TaskListCustom from '../task-list/task-list-custom';
|
||||
import TaskListTableWrapper from '../task-list/task-list-table-wrapper/task-list-table-wrapper';
|
||||
import { fetchTasksV3 } from '@/features/task-management/task-management.slice';
|
||||
import { deselectAll } from '@/features/projects/bulkActions/bulkActionSlice';
|
||||
import TaskListBoard from '@/components/task-management/task-list-board';
|
||||
|
||||
const ProjectViewTaskList = () => {
|
||||
// sample data from task reducer
|
||||
const dispatch = useAppDispatch();
|
||||
const { taskGroups, loadingGroups } = useAppSelector(state => state.taskReducer);
|
||||
const { statusCategories } = useAppSelector(state => state.taskStatusReducer);
|
||||
const projectId = useAppSelector(state => state.projectReducer.projectId);
|
||||
const { statusCategories } = useAppSelector(state => state.taskStatusReducer);
|
||||
|
||||
useEffect(() => {
|
||||
if (projectId) {
|
||||
const config: ITaskListConfigV2 = {
|
||||
id: projectId,
|
||||
field: 'id',
|
||||
order: 'desc',
|
||||
search: '',
|
||||
statuses: '',
|
||||
members: '',
|
||||
projects: '',
|
||||
isSubtasksInclude: true,
|
||||
};
|
||||
dispatch(fetchTaskGroups(config));
|
||||
// Use the optimized V3 API for faster loading
|
||||
dispatch(fetchTasksV3(projectId));
|
||||
}
|
||||
if (!statusCategories.length) {
|
||||
dispatch(fetchStatusesCategories());
|
||||
}
|
||||
}, [dispatch, projectId]);
|
||||
|
||||
// Cleanup effect - reset values when component is destroyed
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
// Clear any selected tasks when component unmounts
|
||||
dispatch(deselectAll());
|
||||
};
|
||||
}, [dispatch]);
|
||||
|
||||
if (!projectId) {
|
||||
return (
|
||||
<Flex vertical gap={16} style={{ overflowX: 'hidden' }}>
|
||||
<div>No project selected</div>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Flex vertical gap={16} style={{ overflowX: 'hidden' }}>
|
||||
<TaskListFilters position="list" />
|
||||
|
||||
{taskGroups.map(group => (
|
||||
<TaskListTableWrapper
|
||||
key={group.id}
|
||||
taskList={group}
|
||||
name={group.name || ''}
|
||||
color={group.color_code || ''}
|
||||
groupId={group.id || ''}
|
||||
/>
|
||||
))}
|
||||
<TaskListBoard
|
||||
projectId={projectId}
|
||||
className="task-list-board"
|
||||
/>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -31,7 +31,7 @@ import { SocketEvents } from '@/shared/socket-events';
|
||||
import logger from '@/utils/errorLogger';
|
||||
import TaskListTable from '../task-list-table/task-list-table';
|
||||
import Collapsible from '@/components/collapsible/collapsible';
|
||||
import TaskListBulkActionsBar from '@/components/taskListCommon/task-list-bulk-actions-bar/task-list-bulk-actions-bar';
|
||||
|
||||
import TaskTemplateDrawer from '@/components/task-templates/task-template-drawer';
|
||||
import { createPortal } from 'react-dom';
|
||||
|
||||
@@ -232,7 +232,7 @@ const TaskGroupList = ({ taskGroups, groupBy }: TaskGroupListProps) => {
|
||||
</Flex>
|
||||
</ConfigProvider>
|
||||
|
||||
{createPortal(<TaskListBulkActionsBar />, document.body, 'bulk-action-container')}
|
||||
|
||||
{createPortal(
|
||||
<TaskTemplateDrawer showDrawer={false} selectedTemplateId={''} onClose={() => {}} />,
|
||||
document.body,
|
||||
|
||||
@@ -7,7 +7,7 @@ import { ITaskListGroup } from '@/types/tasks/taskList.types';
|
||||
import { useAppSelector } from '@/hooks/useAppSelector';
|
||||
|
||||
import TaskListTableWrapper from './task-list-table/task-list-table-wrapper/task-list-table-wrapper';
|
||||
import TaskListBulkActionsBar from '@/components/taskListCommon/task-list-bulk-actions-bar/task-list-bulk-actions-bar';
|
||||
|
||||
import TaskTemplateDrawer from '@/components/task-templates/task-template-drawer';
|
||||
|
||||
import { useTaskSocketHandlers } from '@/hooks/useTaskSocketHandlers';
|
||||
@@ -69,7 +69,7 @@ const TaskGroupWrapperOptimized = ({ taskGroups, groupBy }: TaskGroupWrapperOpti
|
||||
/>
|
||||
))}
|
||||
|
||||
{createPortal(<TaskListBulkActionsBar />, document.body, 'bulk-action-container')}
|
||||
|
||||
|
||||
{createPortal(
|
||||
<TaskTemplateDrawer showDrawer={false} selectedTemplateId="" onClose={() => {}} />,
|
||||
|
||||
@@ -61,7 +61,7 @@ import {
|
||||
import { deselectAll } from '@/features/projects/bulkActions/bulkActionSlice';
|
||||
|
||||
import TaskListTableWrapper from '@/pages/projects/projectView/taskList/task-list-table/task-list-table-wrapper/task-list-table-wrapper';
|
||||
import TaskListBulkActionsBar from '@/components/taskListCommon/task-list-bulk-actions-bar/task-list-bulk-actions-bar';
|
||||
|
||||
import TaskTemplateDrawer from '@/components/task-templates/task-template-drawer';
|
||||
|
||||
import { useMixpanelTracking } from '@/hooks/useMixpanelTracking';
|
||||
@@ -686,7 +686,7 @@ const TaskGroupWrapper = ({ taskGroups, groupBy }: TaskGroupWrapperProps) => {
|
||||
/>
|
||||
))}
|
||||
|
||||
{createPortal(<TaskListBulkActionsBar />, document.body, 'bulk-action-container')}
|
||||
|
||||
|
||||
{createPortal(
|
||||
<TaskTemplateDrawer showDrawer={false} selectedTemplateId="" onClose={() => {}} />,
|
||||
|
||||
@@ -213,389 +213,283 @@
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Dark mode support */
|
||||
[data-theme="dark"] .task-list-board {
|
||||
/* Dark mode support using class-based selectors */
|
||||
.dark .task-list-board {
|
||||
background-color: #141414;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.task-list-board {
|
||||
background-color: #141414;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
/* Task Groups */
|
||||
.task-group {
|
||||
background-color: #1f1f1f;
|
||||
border-color: #303030;
|
||||
}
|
||||
|
||||
.task-group.drag-over {
|
||||
border-color: #1890ff !important;
|
||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.3);
|
||||
background-color: rgba(24, 144, 255, 0.1);
|
||||
}
|
||||
|
||||
.task-group .group-header {
|
||||
background: #262626;
|
||||
border-bottom-color: #303030;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.task-group .group-header:hover {
|
||||
background: #2f2f2f;
|
||||
}
|
||||
|
||||
/* Task Rows */
|
||||
.task-row {
|
||||
background-color: #1f1f1f;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
border-color: #303030;
|
||||
}
|
||||
|
||||
.task-row:hover {
|
||||
background-color: #262626 !important;
|
||||
border-left-color: #595959;
|
||||
}
|
||||
|
||||
.task-row.selected {
|
||||
background-color: rgba(24, 144, 255, 0.15) !important;
|
||||
border-left-color: #1890ff;
|
||||
}
|
||||
|
||||
.task-row .drag-handle {
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
.task-row .drag-handle:hover {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
/* Progress bars */
|
||||
.ant-progress-bg {
|
||||
background-color: #303030;
|
||||
}
|
||||
|
||||
/* Text colors */
|
||||
.task-row .ant-typography {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.task-row .text-gray-500 {
|
||||
color: rgba(255, 255, 255, 0.45) !important;
|
||||
}
|
||||
|
||||
.task-row .text-gray-600 {
|
||||
color: rgba(255, 255, 255, 0.65) !important;
|
||||
}
|
||||
|
||||
.task-row .text-gray-400 {
|
||||
color: rgba(255, 255, 255, 0.45) !important;
|
||||
}
|
||||
|
||||
/* Completed task styling */
|
||||
.task-row .line-through {
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
/* Bulk Action Bar */
|
||||
.bulk-action-bar {
|
||||
background: rgba(24, 144, 255, 0.15);
|
||||
border-color: rgba(24, 144, 255, 0.3);
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
/* Cards and containers */
|
||||
.ant-card {
|
||||
background-color: #1f1f1f;
|
||||
border-color: #303030;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.ant-card-head {
|
||||
background-color: #262626;
|
||||
border-bottom-color: #303030;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.ant-card-body {
|
||||
background-color: #1f1f1f;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.ant-btn {
|
||||
border-color: #303030;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.ant-btn:hover {
|
||||
border-color: #595959;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.ant-btn-primary {
|
||||
background-color: #1890ff;
|
||||
border-color: #1890ff;
|
||||
}
|
||||
|
||||
.ant-btn-primary:hover {
|
||||
background-color: #40a9ff;
|
||||
border-color: #40a9ff;
|
||||
}
|
||||
|
||||
/* Dropdowns and menus */
|
||||
.ant-dropdown-menu {
|
||||
background-color: #1f1f1f;
|
||||
border-color: #303030;
|
||||
}
|
||||
|
||||
.ant-dropdown-menu-item {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.ant-dropdown-menu-item:hover {
|
||||
background-color: #262626;
|
||||
}
|
||||
|
||||
/* Select components */
|
||||
.ant-select-selector {
|
||||
background-color: #1f1f1f !important;
|
||||
border-color: #303030 !important;
|
||||
color: rgba(255, 255, 255, 0.85) !important;
|
||||
}
|
||||
|
||||
.ant-select-arrow {
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
/* Checkboxes */
|
||||
.ant-checkbox-wrapper {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.ant-checkbox-inner {
|
||||
background-color: #1f1f1f;
|
||||
border-color: #303030;
|
||||
}
|
||||
|
||||
.ant-checkbox-checked .ant-checkbox-inner {
|
||||
background-color: #1890ff;
|
||||
border-color: #1890ff;
|
||||
}
|
||||
|
||||
/* Tags and labels */
|
||||
.ant-tag {
|
||||
background-color: #262626;
|
||||
border-color: #303030;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
/* Avatars */
|
||||
.ant-avatar {
|
||||
background-color: #595959;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
/* Tooltips */
|
||||
.ant-tooltip-inner {
|
||||
background-color: #262626;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.ant-tooltip-arrow-content {
|
||||
background-color: #262626;
|
||||
}
|
||||
|
||||
/* Popconfirm */
|
||||
.ant-popover-inner {
|
||||
background-color: #1f1f1f;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.ant-popover-arrow-content {
|
||||
background-color: #1f1f1f;
|
||||
}
|
||||
|
||||
/* Subtasks */
|
||||
.task-subtasks {
|
||||
border-left-color: #303030;
|
||||
}
|
||||
|
||||
.task-subtasks .task-row {
|
||||
background-color: #141414;
|
||||
}
|
||||
|
||||
.task-subtasks .task-row:hover {
|
||||
background-color: #1f1f1f !important;
|
||||
}
|
||||
|
||||
/* Scrollbars */
|
||||
.task-groups-container::-webkit-scrollbar-track {
|
||||
background: #141414;
|
||||
}
|
||||
|
||||
.task-groups-container::-webkit-scrollbar-thumb {
|
||||
background: #595959;
|
||||
}
|
||||
|
||||
.task-groups-container::-webkit-scrollbar-thumb:hover {
|
||||
background: #777777;
|
||||
}
|
||||
|
||||
/* Loading states */
|
||||
.ant-spin-dot-item {
|
||||
background-color: #1890ff;
|
||||
}
|
||||
|
||||
/* Empty states */
|
||||
.ant-empty {
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
.ant-empty-description {
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
/* Focus styles for dark mode */
|
||||
.task-row:focus-within {
|
||||
outline-color: #40a9ff;
|
||||
}
|
||||
|
||||
.drag-handle:focus {
|
||||
outline-color: #40a9ff;
|
||||
}
|
||||
|
||||
/* Border colors */
|
||||
.border-gray-100 {
|
||||
border-color: #303030 !important;
|
||||
}
|
||||
|
||||
.border-gray-200 {
|
||||
border-color: #404040 !important;
|
||||
}
|
||||
|
||||
.border-gray-300 {
|
||||
border-color: #595959 !important;
|
||||
}
|
||||
|
||||
/* Background utilities */
|
||||
.bg-gray-50 {
|
||||
background-color: #141414 !important;
|
||||
}
|
||||
|
||||
.bg-gray-100 {
|
||||
background-color: #1f1f1f !important;
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
background-color: #1f1f1f !important;
|
||||
}
|
||||
|
||||
/* Due date colors in dark mode */
|
||||
.text-red-500 {
|
||||
color: #ff7875 !important;
|
||||
}
|
||||
|
||||
.text-orange-500 {
|
||||
color: #ffa940 !important;
|
||||
}
|
||||
|
||||
/* Group progress bar in dark mode */
|
||||
.task-group .group-header .bg-gray-200 {
|
||||
background-color: #303030 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Specific dark mode styles using data-theme attribute */
|
||||
[data-theme="dark"] .task-group {
|
||||
.dark .task-group {
|
||||
background-color: #1f1f1f;
|
||||
border-color: #303030;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .task-group.drag-over {
|
||||
.dark .task-group.drag-over {
|
||||
border-color: #1890ff !important;
|
||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.3);
|
||||
background-color: rgba(24, 144, 255, 0.1);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .task-group .group-header {
|
||||
.dark .task-group .group-header {
|
||||
background: #262626;
|
||||
border-bottom-color: #303030;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .task-group .group-header:hover {
|
||||
.dark .task-group .group-header:hover {
|
||||
background: #2f2f2f;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .task-row {
|
||||
.dark .task-row {
|
||||
background-color: #1f1f1f;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
border-color: #303030;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .task-row:hover {
|
||||
.dark .task-row:hover {
|
||||
background-color: #262626 !important;
|
||||
border-left-color: #595959;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .task-row.selected {
|
||||
.dark .task-row.selected {
|
||||
background-color: rgba(24, 144, 255, 0.15) !important;
|
||||
border-left-color: #1890ff;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .task-row .drag-handle {
|
||||
.dark .task-row .drag-handle {
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .task-row .drag-handle:hover {
|
||||
.dark .task-row .drag-handle:hover {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .bulk-action-bar {
|
||||
.dark .bulk-action-bar {
|
||||
background: rgba(24, 144, 255, 0.15);
|
||||
border-color: rgba(24, 144, 255, 0.3);
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .task-row .ant-typography {
|
||||
.dark .task-row .ant-typography {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .task-row .text-gray-500 {
|
||||
.dark .task-row .text-gray-500 {
|
||||
color: rgba(255, 255, 255, 0.45) !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .task-row .text-gray-600 {
|
||||
.dark .task-row .text-gray-600 {
|
||||
color: rgba(255, 255, 255, 0.65) !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .task-row .text-gray-400 {
|
||||
.dark .task-row .text-gray-400 {
|
||||
color: rgba(255, 255, 255, 0.45) !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .task-row .line-through {
|
||||
.dark .task-row .line-through {
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .task-subtasks {
|
||||
.dark .ant-card {
|
||||
background-color: #1f1f1f;
|
||||
border-color: #303030;
|
||||
}
|
||||
|
||||
.dark .ant-card-head {
|
||||
background-color: #262626;
|
||||
border-bottom-color: #303030;
|
||||
}
|
||||
|
||||
.dark .ant-card-body {
|
||||
background-color: #1f1f1f;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.dark .ant-btn {
|
||||
background-color: #262626;
|
||||
border-color: #404040;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.dark .ant-btn:hover {
|
||||
background-color: #2f2f2f;
|
||||
border-color: #505050;
|
||||
}
|
||||
|
||||
.dark .ant-btn-primary {
|
||||
background-color: #1890ff;
|
||||
border-color: #1890ff;
|
||||
}
|
||||
|
||||
.dark .ant-btn-primary:hover {
|
||||
background-color: #40a9ff;
|
||||
border-color: #40a9ff;
|
||||
}
|
||||
|
||||
.dark .ant-dropdown-menu {
|
||||
background-color: #1f1f1f;
|
||||
border-color: #303030;
|
||||
}
|
||||
|
||||
.dark .ant-dropdown-menu-item {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.dark .ant-dropdown-menu-item:hover {
|
||||
background-color: #262626;
|
||||
}
|
||||
|
||||
.dark .ant-select-selector {
|
||||
background-color: #262626 !important;
|
||||
border-color: #404040 !important;
|
||||
color: rgba(255, 255, 255, 0.85) !important;
|
||||
}
|
||||
|
||||
.dark .ant-select-arrow {
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
.dark .ant-checkbox-wrapper {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.dark .ant-checkbox-inner {
|
||||
background-color: #262626;
|
||||
border-color: #404040;
|
||||
}
|
||||
|
||||
.dark .ant-checkbox-checked .ant-checkbox-inner {
|
||||
background-color: #1890ff;
|
||||
border-color: #1890ff;
|
||||
}
|
||||
|
||||
.dark .ant-tag {
|
||||
background-color: #262626;
|
||||
border-color: #404040;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.dark .ant-avatar {
|
||||
background-color: #404040;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.dark .ant-tooltip-inner {
|
||||
background-color: #1f1f1f;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.dark .ant-tooltip-arrow-content {
|
||||
background-color: #1f1f1f;
|
||||
}
|
||||
|
||||
.dark .ant-popover-inner {
|
||||
background-color: #1f1f1f;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.dark .ant-popover-arrow-content {
|
||||
background-color: #1f1f1f;
|
||||
}
|
||||
|
||||
.dark .task-subtasks {
|
||||
border-left-color: #303030;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .task-subtasks .task-row {
|
||||
.dark .task-subtasks .task-row {
|
||||
background-color: #141414;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .task-subtasks .task-row:hover {
|
||||
.dark .task-subtasks .task-row:hover {
|
||||
background-color: #1a1a1a;
|
||||
}
|
||||
|
||||
.dark .task-groups-container::-webkit-scrollbar-track {
|
||||
background-color: #262626;
|
||||
}
|
||||
|
||||
.dark .task-groups-container::-webkit-scrollbar-thumb {
|
||||
background-color: #404040;
|
||||
}
|
||||
|
||||
.dark .task-groups-container::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #505050;
|
||||
}
|
||||
|
||||
.dark .ant-spin-dot-item {
|
||||
background-color: #1890ff;
|
||||
}
|
||||
|
||||
.dark .ant-empty {
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
.dark .ant-empty-description {
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
.dark .task-row:focus-within {
|
||||
outline-color: #1890ff;
|
||||
}
|
||||
|
||||
.dark .drag-handle:focus {
|
||||
outline-color: #1890ff;
|
||||
}
|
||||
|
||||
.dark .border-gray-100 {
|
||||
border-color: #262626 !important;
|
||||
}
|
||||
|
||||
.dark .border-gray-200 {
|
||||
border-color: #303030 !important;
|
||||
}
|
||||
|
||||
.dark .border-gray-300 {
|
||||
border-color: #404040 !important;
|
||||
}
|
||||
|
||||
.dark .bg-gray-50 {
|
||||
background-color: #141414 !important;
|
||||
}
|
||||
|
||||
.dark .bg-gray-100 {
|
||||
background-color: #1a1a1a !important;
|
||||
}
|
||||
|
||||
.dark .bg-white {
|
||||
background-color: #1f1f1f !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .text-red-500 {
|
||||
.dark .text-red-500 {
|
||||
color: #ff7875 !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .text-orange-500 {
|
||||
.dark .text-orange-500 {
|
||||
color: #ffa940 !important;
|
||||
}
|
||||
|
||||
.dark .task-group .group-header .bg-gray-200 {
|
||||
background-color: #262626 !important;
|
||||
}
|
||||
|
||||
/* System preference fallback */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.task-list-board:not(.light) {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.task-group:not(.light) {
|
||||
background-color: #1f1f1f;
|
||||
}
|
||||
|
||||
.task-row:not(.light) {
|
||||
background-color: #1f1f1f;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
border-color: #303030;
|
||||
}
|
||||
|
||||
.task-row:not(.light):hover {
|
||||
background-color: #262626 !important;
|
||||
border-left-color: #595959;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,8 @@
|
||||
import { InlineMember } from './teamMembers/inlineMember.types';
|
||||
|
||||
export interface Task {
|
||||
id: string;
|
||||
task_key: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
status: 'todo' | 'doing' | 'done';
|
||||
@@ -7,7 +10,8 @@ export interface Task {
|
||||
phase: string; // Custom phases like 'planning', 'development', 'testing', 'deployment'
|
||||
progress: number; // 0-100
|
||||
assignees: string[];
|
||||
labels: string[];
|
||||
assignee_names?: InlineMember[];
|
||||
labels: Label[];
|
||||
dueDate?: string;
|
||||
timeTracking: {
|
||||
estimated?: number;
|
||||
@@ -56,6 +60,8 @@ export interface Label {
|
||||
id: string;
|
||||
name: string;
|
||||
color: string;
|
||||
end?: boolean;
|
||||
names?: string[];
|
||||
}
|
||||
|
||||
// Redux State Interfaces
|
||||
@@ -64,6 +70,9 @@ export interface TaskManagementState {
|
||||
ids: string[];
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
groups: TaskGroup[]; // Pre-processed groups from V3 API
|
||||
grouping: string | null; // Current grouping from V3 API
|
||||
selectedPriorities: string[]; // Selected priority filters
|
||||
}
|
||||
|
||||
export interface TaskGroupsState {
|
||||
|
||||
@@ -29,7 +29,7 @@ export default defineConfig(({ command, mode }) => {
|
||||
|
||||
// **Development Server**
|
||||
server: {
|
||||
port: 3000,
|
||||
port: 5173,
|
||||
open: true,
|
||||
hmr: {
|
||||
overlay: false,
|
||||
@@ -108,9 +108,6 @@ export default defineConfig(({ command, mode }) => {
|
||||
|
||||
// **Preserve modules to avoid context issues**
|
||||
preserveEntrySignatures: 'strict',
|
||||
|
||||
// **Ensure proper module interop**
|
||||
interop: 'auto',
|
||||
},
|
||||
|
||||
// **Experimental features for better performance**
|
||||
|
||||
Reference in New Issue
Block a user