feat(components): introduce new UI components and enhance Vite configuration
- Added AssigneeSelector, Avatar, AvatarGroup, Button, Checkbox, CustomColordLabel, CustomNumberLabel, LabelsSelector, Progress, Tag, and Tooltip components for improved UI functionality. - Updated Vite configuration to change the development server port to 5173 and removed unnecessary interop settings for module compatibility. - Enhanced task management components to utilize new task structure and improve performance.
This commit is contained in:
chamiakJ
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'
|
||||
: 'border-gray-300 hover:border-gray-400 hover:bg-gray-100'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<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 border-gray-200 dark:border-gray-600">
|
||||
<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'
|
||||
: 'border-blue-500 bg-blue-50'
|
||||
: isDarkMode
|
||||
? 'border-gray-600 hover:border-gray-500 hover:bg-gray-800'
|
||||
: 'border-gray-300 hover:border-gray-400 hover:bg-gray-100'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<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';
|
||||
@@ -1,12 +1,11 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState, useMemo } 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;
|
||||
@@ -34,7 +33,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,41 +43,37 @@ 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);
|
||||
|
||||
// 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
|
||||
};
|
||||
|
||||
// Get task IDs for sortable context
|
||||
const taskIds = group.tasks.map(task => task.id!);
|
||||
// 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]);
|
||||
|
||||
// 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 completedTasks = useMemo(() => {
|
||||
return groupTasks.filter(task => task.progress === 100).length;
|
||||
}, [groupTasks]);
|
||||
|
||||
const totalTasks = groupTasks.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;
|
||||
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.groupValue === 'todo' ? '#faad14' :
|
||||
group.groupValue === 'doing' ? '#1890ff' : '#52c41a';
|
||||
case 'priority':
|
||||
return group.id === 'critical'
|
||||
? '#ff4d4f'
|
||||
: group.id === 'high'
|
||||
? '#fa8c16'
|
||||
: group.id === 'medium'
|
||||
? '#faad14'
|
||||
: '#52c41a';
|
||||
return group.groupValue === 'critical' ? '#ff4d4f' :
|
||||
group.groupValue === 'high' ? '#fa8c16' :
|
||||
group.groupValue === 'medium' ? '#faad14' : '#52c41a';
|
||||
case 'phase':
|
||||
return '#722ed1';
|
||||
default:
|
||||
@@ -118,7 +113,7 @@ const TaskGroup: React.FC<TaskGroupProps> = ({
|
||||
className="task-group-header-button"
|
||||
/>
|
||||
<Text strong className="task-group-header-text">
|
||||
{group.name} ({totalTasks})
|
||||
{group.title} ({totalTasks})
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
@@ -148,36 +143,24 @@ const TaskGroup: React.FC<TaskGroupProps> = ({
|
||||
</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 className="task-table-cell task-table-header-cell" style={{ width: '90px' }}>
|
||||
<Text className="column-header-text">Progress</Text>
|
||||
</div>
|
||||
<div className="task-table-cell task-table-header-cell" style={{ width: '150px' }}>
|
||||
<Text className="column-header-text">Members</Text>
|
||||
</div>
|
||||
<div className="task-table-cell task-table-header-cell" style={{ width: '200px' }}>
|
||||
<Text className="column-header-text">Labels</Text>
|
||||
</div>
|
||||
<div className="task-table-cell task-table-header-cell" style={{ width: '100px' }}>
|
||||
<Text className="column-header-text">Status</Text>
|
||||
</div>
|
||||
<div className="task-table-cell task-table-header-cell" style={{ width: '100px' }}>
|
||||
<Text className="column-header-text">Priority</Text>
|
||||
</div>
|
||||
<div className="task-table-cell task-table-header-cell" style={{ width: '120px' }}>
|
||||
<Text className="column-header-text">Time Tracking</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -189,7 +172,7 @@ const TaskGroup: React.FC<TaskGroupProps> = ({
|
||||
className="task-group-body"
|
||||
style={{ borderLeft: `4px solid ${getGroupColor()}` }}
|
||||
>
|
||||
{group.tasks.length === 0 ? (
|
||||
{groupTasks.length === 0 ? (
|
||||
<div className="task-group-empty">
|
||||
<div className="task-table-fixed-columns">
|
||||
<div style={{ width: '380px', padding: '20px 12px' }}>
|
||||
@@ -209,16 +192,16 @@ const TaskGroup: React.FC<TaskGroupProps> = ({
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<SortableContext items={taskIds} strategy={verticalListSortingStrategy}>
|
||||
<SortableContext items={group.taskIds} strategy={verticalListSortingStrategy}>
|
||||
<div className="task-group-tasks">
|
||||
{group.tasks.map((task, index) => (
|
||||
{groupTasks.map((task, index) => (
|
||||
<TaskRow
|
||||
key={task.id}
|
||||
task={task}
|
||||
projectId={projectId}
|
||||
groupId={group.id}
|
||||
currentGrouping={currentGrouping}
|
||||
isSelected={selectedTaskIds.includes(task.id!)}
|
||||
isSelected={selectedTaskIds.includes(task.id)}
|
||||
index={index}
|
||||
onSelect={onSelectTask}
|
||||
onToggleSubtasks={onToggleSubtasks}
|
||||
|
||||
@@ -18,12 +18,24 @@ import {
|
||||
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';
|
||||
moveTaskToGroup,
|
||||
setLoading,
|
||||
fetchTasks
|
||||
} 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 TaskGroup from './task-group';
|
||||
import TaskRow from './task-row';
|
||||
import BulkActionBar from './bulk-action-bar';
|
||||
@@ -38,7 +50,7 @@ interface TaskListBoardProps {
|
||||
}
|
||||
|
||||
interface DragState {
|
||||
activeTask: IProjectTask | null;
|
||||
activeTask: Task | null;
|
||||
activeGroupId: string | null;
|
||||
}
|
||||
|
||||
@@ -49,18 +61,16 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
|
||||
activeGroupId: null,
|
||||
});
|
||||
|
||||
// Redux selectors
|
||||
const {
|
||||
taskGroups,
|
||||
loadingGroups,
|
||||
error,
|
||||
groupBy,
|
||||
search,
|
||||
archived,
|
||||
} = useSelector((state: RootState) => state.taskReducer);
|
||||
// Enable real-time socket updates for task changes
|
||||
useTaskSocketHandlers();
|
||||
|
||||
// Selection state
|
||||
const [selectedTaskIds, setSelectedTaskIds] = useState<string[]>([]);
|
||||
// Redux selectors using new task management slices
|
||||
const tasks = useSelector(taskManagementSelectors.selectAll);
|
||||
const taskGroups = useSelector(selectTaskGroups);
|
||||
const currentGrouping = useSelector(selectCurrentGrouping);
|
||||
const selectedTaskIds = useSelector(selectSelectedTaskIds);
|
||||
const loading = useSelector((state: RootState) => state.taskManagement.loading);
|
||||
const error = useSelector((state: RootState) => state.taskManagement.error);
|
||||
|
||||
// Drag and Drop sensors
|
||||
const sensors = useSensors(
|
||||
@@ -77,24 +87,25 @@ 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 API
|
||||
dispatch(fetchTasks(projectId));
|
||||
}
|
||||
}, [dispatch, projectId, groupBy, search, archived]);
|
||||
}, [dispatch, projectId, currentGrouping]);
|
||||
|
||||
// Memoized calculations
|
||||
const allTaskIds = useMemo(() => {
|
||||
return taskGroups.flatMap(group => group.tasks.map(task => task.id!));
|
||||
}, [taskGroups]);
|
||||
return tasks.map(task => task.id);
|
||||
}, [tasks]);
|
||||
|
||||
const totalTasksCount = useMemo(() => {
|
||||
return taskGroups.reduce((sum, group) => sum + group.tasks.length, 0);
|
||||
}, [taskGroups]);
|
||||
return tasks.length;
|
||||
}, [tasks]);
|
||||
|
||||
const hasSelection = selectedTaskIds.length > 0;
|
||||
|
||||
// Handlers
|
||||
const handleGroupingChange = (newGroupBy: IGroupBy) => {
|
||||
dispatch(setGroup(newGroupBy));
|
||||
const handleGroupingChange = (newGroupBy: typeof currentGrouping) => {
|
||||
dispatch(setCurrentGrouping(newGroupBy));
|
||||
};
|
||||
|
||||
const handleDragStart = (event: DragStartEvent) => {
|
||||
@@ -102,15 +113,17 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
|
||||
const taskId = active.id as string;
|
||||
|
||||
// Find the task and its group
|
||||
let activeTask: IProjectTask | null = null;
|
||||
const activeTask = tasks.find(t => t.id === taskId) || null;
|
||||
let activeGroupId: string | null = null;
|
||||
|
||||
for (const group of taskGroups) {
|
||||
const task = group.tasks.find(t => t.id === taskId);
|
||||
if (task) {
|
||||
activeTask = task;
|
||||
activeGroupId = group.id;
|
||||
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}`;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -139,71 +152,76 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
|
||||
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);
|
||||
// Parse the group ID to get group type and value
|
||||
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;
|
||||
|
||||
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;
|
||||
}
|
||||
// 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(dragState.activeGroupId);
|
||||
const targetGroupInfo = parseGroupId(targetGroupId);
|
||||
|
||||
// If moving between different groups, update the task's group property
|
||||
if (dragState.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 === dragState.activeGroupId);
|
||||
const targetGroup = taskGroups.find(g => g.id === targetGroupId);
|
||||
|
||||
if (!sourceGroup || !targetGroup) return;
|
||||
if (sourceGroup && targetGroup) {
|
||||
const sourceIndex = sourceGroup.taskIds.indexOf(activeTaskId);
|
||||
const finalTargetIndex = targetIndex === -1 ? targetGroup.taskIds.length : targetIndex;
|
||||
|
||||
const sourceIndex = sourceGroup.tasks.findIndex(t => t.id === activeTaskId);
|
||||
if (sourceIndex === -1) return;
|
||||
// Calculate new order values
|
||||
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 dragState.activeTask!.order;
|
||||
return task.order + 1;
|
||||
});
|
||||
|
||||
// Calculate new positions
|
||||
const finalTargetIndex = targetIndex === -1 ? targetGroup.tasks.length : targetIndex;
|
||||
|
||||
// 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 reorder action
|
||||
dispatch(reorderTasks({
|
||||
taskIds: [activeTaskId, ...allTasksInTargetGroup.map(t => t.id)],
|
||||
newOrder: [dragState.activeTask!.order, ...newOrder]
|
||||
}));
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
});
|
||||
dispatch(toggleTaskSelection(taskId));
|
||||
};
|
||||
|
||||
const handleToggleSubtasks = (taskId: string) => {
|
||||
@@ -240,15 +258,15 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
|
||||
<BulkActionBar
|
||||
selectedTaskIds={selectedTaskIds}
|
||||
totalSelected={selectedTaskIds.length}
|
||||
currentGrouping={groupBy}
|
||||
currentGrouping={currentGrouping as any}
|
||||
projectId={projectId}
|
||||
onClearSelection={() => setSelectedTaskIds([])}
|
||||
onClearSelection={() => dispatch(clearSelection())}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Task Groups Container */}
|
||||
<div className="task-groups-container">
|
||||
{loadingGroups ? (
|
||||
{loading ? (
|
||||
<Card>
|
||||
<div className="flex justify-center items-center py-8">
|
||||
<Spin size="large" />
|
||||
@@ -275,7 +293,7 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
|
||||
key={group.id}
|
||||
group={group}
|
||||
projectId={projectId}
|
||||
currentGrouping={groupBy}
|
||||
currentGrouping={currentGrouping}
|
||||
selectedTaskIds={selectedTaskIds}
|
||||
onSelectTask={handleSelectTask}
|
||||
onToggleSubtasks={handleToggleSubtasks}
|
||||
@@ -289,7 +307,7 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
|
||||
task={dragState.activeTask}
|
||||
projectId={projectId}
|
||||
groupId={dragState.activeGroupId!}
|
||||
currentGrouping={groupBy}
|
||||
currentGrouping={currentGrouping}
|
||||
isSelected={false}
|
||||
isDragOverlay
|
||||
/>
|
||||
|
||||
@@ -1,26 +1,22 @@
|
||||
import React from 'react';
|
||||
import React, { useMemo, useCallback } from 'react';
|
||||
import { useSortable } from '@dnd-kit/sortable';
|
||||
import { CSS } from '@dnd-kit/utilities';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { Checkbox, Avatar, Tag, Progress, Typography, Space, Button, Tooltip } from 'antd';
|
||||
import {
|
||||
HolderOutlined,
|
||||
EyeOutlined,
|
||||
MessageOutlined,
|
||||
PaperClipOutlined,
|
||||
ClockCircleOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
|
||||
import { IGroupBy, COLUMN_KEYS } from '@/features/tasks/tasks.slice';
|
||||
import { Task } from '@/types/task-management.types';
|
||||
import { RootState } from '@/app/store';
|
||||
|
||||
const { Text } = Typography;
|
||||
import { AssigneeSelector, Avatar, AvatarGroup, Button, Checkbox, CustomColordLabel, CustomNumberLabel, LabelsSelector, Progress, Tag, Tooltip } from '@/components';
|
||||
|
||||
interface TaskRowProps {
|
||||
task: IProjectTask;
|
||||
task: Task;
|
||||
projectId: string;
|
||||
groupId: string;
|
||||
currentGrouping: IGroupBy;
|
||||
currentGrouping: 'status' | 'priority' | 'phase';
|
||||
isSelected: boolean;
|
||||
isDragOverlay?: boolean;
|
||||
index?: number;
|
||||
@@ -28,7 +24,7 @@ interface TaskRowProps {
|
||||
onToggleSubtasks?: (taskId: string) => void;
|
||||
}
|
||||
|
||||
const TaskRow: React.FC<TaskRowProps> = ({
|
||||
const TaskRow: React.FC<TaskRowProps> = React.memo(({
|
||||
task,
|
||||
projectId,
|
||||
groupId,
|
||||
@@ -47,7 +43,7 @@ const TaskRow: React.FC<TaskRowProps> = ({
|
||||
transition,
|
||||
isDragging,
|
||||
} = useSortable({
|
||||
id: task.id!,
|
||||
id: task.id,
|
||||
data: {
|
||||
type: 'task',
|
||||
taskId: task.id,
|
||||
@@ -56,33 +52,32 @@ const TaskRow: React.FC<TaskRowProps> = ({
|
||||
disabled: isDragOverlay,
|
||||
});
|
||||
|
||||
// Get column visibility from Redux store
|
||||
const columns = useSelector((state: RootState) => state.taskReducer.columns);
|
||||
// Get theme from Redux store
|
||||
const themeMode = useSelector((state: RootState) => state.themeReducer?.mode || 'light');
|
||||
|
||||
// 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
|
||||
};
|
||||
// Memoize derived values for performance
|
||||
const isDarkMode = useMemo(() => themeMode === 'dark', [themeMode]);
|
||||
|
||||
const style = {
|
||||
// Memoize style calculations
|
||||
const style = useMemo(() => ({
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
opacity: isDragging ? 0.5 : 1,
|
||||
};
|
||||
}), [transform, transition, isDragging]);
|
||||
|
||||
const handleSelectChange = (checked: boolean) => {
|
||||
onSelect?.(task.id!, checked);
|
||||
};
|
||||
// Memoize event handlers to prevent unnecessary re-renders
|
||||
const handleSelectChange = useCallback((checked: boolean) => {
|
||||
onSelect?.(task.id, checked);
|
||||
}, [onSelect, task.id]);
|
||||
|
||||
const handleToggleSubtasks = () => {
|
||||
onToggleSubtasks?.(task.id!);
|
||||
};
|
||||
const handleToggleSubtasks = useCallback(() => {
|
||||
onToggleSubtasks?.(task.id);
|
||||
}, [onToggleSubtasks, task.id]);
|
||||
|
||||
// Format due date
|
||||
const formatDueDate = (dateString?: string) => {
|
||||
if (!dateString) return null;
|
||||
const date = new Date(dateString);
|
||||
// Format due date - memoized for performance
|
||||
const dueDate = useMemo(() => {
|
||||
if (!task.dueDate) return null;
|
||||
const date = new Date(task.dueDate);
|
||||
const now = new Date();
|
||||
const diffTime = date.getTime() - now.getTime();
|
||||
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
||||
@@ -96,557 +91,286 @@ const TaskRow: React.FC<TaskRowProps> = ({
|
||||
} else {
|
||||
return { text: `Due ${date.toLocaleDateString()}`, color: 'default' };
|
||||
}
|
||||
}, [task.dueDate]);
|
||||
|
||||
// Memoize assignees for AvatarGroup to prevent unnecessary re-renders
|
||||
const avatarGroupMembers = useMemo(() => {
|
||||
return task.assignees?.map(assigneeId => ({
|
||||
id: assigneeId,
|
||||
team_member_id: assigneeId,
|
||||
name: assigneeId // TODO: Map to actual user names
|
||||
})) || [];
|
||||
}, [task.assignees]);
|
||||
|
||||
// Memoize class names for better performance
|
||||
const containerClassName = useMemo(() => `
|
||||
border-b transition-all duration-300
|
||||
${isDarkMode
|
||||
? `border-gray-700 bg-gray-900 hover:bg-gray-800 ${isSelected ? 'bg-blue-900/20' : ''}`
|
||||
: `border-gray-200 bg-white hover:bg-gray-50 ${isSelected ? 'bg-blue-50' : ''}`
|
||||
}
|
||||
${isSelected ? 'border-l-4 border-l-blue-500' : ''}
|
||||
${isDragOverlay
|
||||
? `rounded shadow-lg ${isDarkMode ? 'bg-gray-900 border border-gray-600' : 'bg-white border border-gray-300'}`
|
||||
: ''
|
||||
}
|
||||
`, [isDarkMode, isSelected, isDragOverlay]);
|
||||
|
||||
const fixedColumnsClassName = useMemo(() => `
|
||||
flex sticky left-0 z-10 border-r-2 shadow-sm ${isDarkMode ? 'bg-gray-900 border-gray-700' : 'bg-white border-gray-200'}
|
||||
`, [isDarkMode]);
|
||||
|
||||
const taskNameClassName = useMemo(() => `
|
||||
text-sm font-medium flex-1
|
||||
overflow-hidden text-ellipsis whitespace-nowrap transition-colors duration-300
|
||||
${isDarkMode ? 'text-gray-100' : 'text-gray-900'}
|
||||
${task.progress === 100
|
||||
? `line-through ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}`
|
||||
: ''
|
||||
}
|
||||
`, [isDarkMode, task.progress]);
|
||||
|
||||
// Get priority color
|
||||
const getPriorityColor = (priority: string) => {
|
||||
const colors = {
|
||||
critical: '#ff4d4f',
|
||||
high: '#ff7a45',
|
||||
medium: '#faad14',
|
||||
low: '#52c41a',
|
||||
};
|
||||
return colors[priority as keyof typeof colors] || '#d9d9d9';
|
||||
};
|
||||
|
||||
const dueDate = formatDueDate(task.end_date);
|
||||
// Get status color
|
||||
const getStatusColor = (status: string) => {
|
||||
const colors = {
|
||||
todo: '#f0f0f0',
|
||||
doing: '#1890ff',
|
||||
done: '#52c41a',
|
||||
};
|
||||
return colors[status as keyof typeof colors] || '#d9d9d9';
|
||||
};
|
||||
|
||||
// Create adapter for LabelsSelector to work with new Task type
|
||||
const taskAdapter = useMemo(() => {
|
||||
// Convert new Task type to IProjectTask for compatibility
|
||||
return {
|
||||
id: task.id,
|
||||
name: task.title,
|
||||
parent_task_id: null, // TODO: Add parent task support
|
||||
all_labels: task.labels?.map(label => ({
|
||||
id: label.id,
|
||||
name: label.name,
|
||||
color_code: label.color
|
||||
})) || [],
|
||||
labels: task.labels?.map(label => ({
|
||||
id: label.id,
|
||||
name: label.name,
|
||||
color_code: label.color
|
||||
})) || [],
|
||||
} as any; // Type assertion for compatibility
|
||||
}, [task.id, task.title, task.labels]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
className={`task-row ${isSelected ? 'task-row-selected' : ''} ${isDragOverlay ? 'task-row-drag-overlay' : ''}`}
|
||||
className={containerClassName}
|
||||
>
|
||||
<div className="task-row-content">
|
||||
<div className="flex h-10 max-h-10 overflow-visible relative min-w-[1200px]">
|
||||
{/* Fixed Columns */}
|
||||
<div className="task-table-fixed-columns">
|
||||
<div className={fixedColumnsClassName}>
|
||||
{/* Drag Handle */}
|
||||
<div className="task-table-cell task-table-cell-drag" style={{ width: '40px' }}>
|
||||
<div className={`w-10 flex items-center justify-center px-2 border-r ${isDarkMode ? 'border-gray-700' : 'border-gray-200'}`}>
|
||||
<Button
|
||||
type="text"
|
||||
variant="text"
|
||||
size="small"
|
||||
icon={<HolderOutlined />}
|
||||
className="drag-handle opacity-40 hover:opacity-100 cursor-grab active:cursor-grabbing"
|
||||
className="opacity-40 hover:opacity-100 cursor-grab active:cursor-grabbing"
|
||||
isDarkMode={isDarkMode}
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
/>
|
||||
>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Selection Checkbox */}
|
||||
<div className="task-table-cell task-table-cell-checkbox" style={{ width: '40px' }}>
|
||||
<div className={`w-10 flex items-center justify-center px-2 border-r ${isDarkMode ? 'border-gray-700' : 'border-gray-200'}`}>
|
||||
<Checkbox
|
||||
checked={isSelected}
|
||||
onChange={(e) => handleSelectChange(e.target.checked)}
|
||||
onChange={handleSelectChange}
|
||||
isDarkMode={isDarkMode}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Task Key */}
|
||||
<div className="task-table-cell task-table-cell-key" style={{ width: '80px' }}>
|
||||
{task.project_id && task.task_key && (
|
||||
<Text code className="task-key">
|
||||
{task.task_key}
|
||||
</Text>
|
||||
)}
|
||||
<div className={`w-20 flex items-center px-2 border-r ${isDarkMode ? 'border-gray-700' : 'border-gray-200'}`}>
|
||||
<Tag
|
||||
backgroundColor={isDarkMode ? "#374151" : "#f0f0f0"}
|
||||
color={isDarkMode ? "#d1d5db" : "#666"}
|
||||
className="truncate whitespace-nowrap max-w-full"
|
||||
>
|
||||
{task.task_key}
|
||||
</Tag>
|
||||
</div>
|
||||
|
||||
{/* Task Name */}
|
||||
<div className="task-table-cell task-table-cell-task" style={{ width: '475px' }}>
|
||||
<div className="task-content">
|
||||
<div className="task-header">
|
||||
<Text
|
||||
strong
|
||||
className={`task-name ${task.complete_ratio === 100 ? 'task-completed' : ''}`}
|
||||
>
|
||||
{task.name}
|
||||
</Text>
|
||||
{task.sub_tasks_count && task.sub_tasks_count > 0 && (
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
onClick={handleToggleSubtasks}
|
||||
className="subtask-toggle"
|
||||
>
|
||||
{task.show_sub_tasks ? '−' : '+'} {task.sub_tasks_count}
|
||||
</Button>
|
||||
)}
|
||||
<div className="w-[475px] flex items-center px-2">
|
||||
<div className="flex-1 min-w-0 flex flex-col justify-center h-full overflow-hidden">
|
||||
<div className="flex items-center gap-2 h-5 overflow-hidden">
|
||||
<span className={taskNameClassName}>
|
||||
{task.title}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scrollable Columns */}
|
||||
<div className="task-table-scrollable-columns">
|
||||
<div className="flex flex-1 min-w-0">
|
||||
{/* Progress */}
|
||||
{isColumnVisible(COLUMN_KEYS.PROGRESS) && (
|
||||
<div className="task-table-cell" style={{ width: '90px' }}>
|
||||
{task.complete_ratio !== undefined && task.complete_ratio >= 0 && (
|
||||
<div className="task-progress">
|
||||
<Progress
|
||||
type="circle"
|
||||
percent={task.complete_ratio}
|
||||
size={32}
|
||||
strokeColor={task.complete_ratio === 100 ? '#52c41a' : '#1890ff'}
|
||||
strokeWidth={4}
|
||||
showInfo={true}
|
||||
format={(percent) => <span style={{ fontSize: '10px', fontWeight: '500' }}>{percent}%</span>}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className={`w-[90px] flex items-center justify-center px-2 border-r ${isDarkMode ? 'border-gray-700' : 'border-gray-200'}`}>
|
||||
{task.progress !== undefined && task.progress >= 0 && (
|
||||
<Progress
|
||||
type="circle"
|
||||
percent={task.progress}
|
||||
size={24}
|
||||
strokeColor={task.progress === 100 ? '#52c41a' : '#1890ff'}
|
||||
strokeWidth={2}
|
||||
showInfo={true}
|
||||
isDarkMode={isDarkMode}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Members */}
|
||||
{isColumnVisible(COLUMN_KEYS.ASSIGNEES) && (
|
||||
<div className="task-table-cell" style={{ width: '150px' }}>
|
||||
{task.assignees && task.assignees.length > 0 && (
|
||||
<Avatar.Group size="small" maxCount={3}>
|
||||
{task.assignees.map((assignee) => (
|
||||
<Tooltip key={assignee.id} title={assignee.name}>
|
||||
<Avatar
|
||||
size="small"
|
||||
>
|
||||
{assignee.name?.charAt(0)?.toUpperCase()}
|
||||
</Avatar>
|
||||
</Tooltip>
|
||||
))}
|
||||
</Avatar.Group>
|
||||
<div className={`w-[150px] flex items-center px-2 border-r ${isDarkMode ? 'border-gray-700' : 'border-gray-200'}`}>
|
||||
<div className="flex items-center gap-2">
|
||||
{avatarGroupMembers.length > 0 && (
|
||||
<AvatarGroup
|
||||
members={avatarGroupMembers}
|
||||
size={24}
|
||||
maxCount={3}
|
||||
isDarkMode={isDarkMode}
|
||||
/>
|
||||
)}
|
||||
<button
|
||||
className={`
|
||||
w-6 h-6 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'
|
||||
}
|
||||
`}
|
||||
onClick={() => {
|
||||
// TODO: Implement assignee selector functionality
|
||||
console.log('Add assignee clicked for task:', task.id);
|
||||
}}
|
||||
>
|
||||
<span className="text-xs">+</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Labels */}
|
||||
{isColumnVisible(COLUMN_KEYS.LABELS) && (
|
||||
<div className="task-table-cell" style={{ width: '150px' }}>
|
||||
{task.labels && task.labels.length > 0 && (
|
||||
<div className="task-labels-column">
|
||||
{task.labels.slice(0, 3).map((label) => (
|
||||
<Tag
|
||||
key={label.id}
|
||||
className="task-label"
|
||||
style={{
|
||||
backgroundColor: label.color_code,
|
||||
border: 'none',
|
||||
color: 'white',
|
||||
}}
|
||||
>
|
||||
{label.name}
|
||||
</Tag>
|
||||
))}
|
||||
{task.labels.length > 3 && (
|
||||
<Text type="secondary" className="task-labels-more">
|
||||
+{task.labels.length - 3}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className={`w-[200px] max-w-[200px] flex items-center px-2 border-r ${isDarkMode ? 'border-gray-700' : 'border-gray-200'}`}>
|
||||
<div className="flex items-center gap-1 flex-wrap h-full w-full overflow-visible relative">
|
||||
{task.labels?.map((label, index) => (
|
||||
label.end && label.names && label.name ? (
|
||||
<CustomNumberLabel
|
||||
key={`${label.id}-${index}`}
|
||||
labelList={label.names}
|
||||
namesString={label.name}
|
||||
isDarkMode={isDarkMode}
|
||||
/>
|
||||
) : (
|
||||
<CustomColordLabel
|
||||
key={`${label.id}-${index}`}
|
||||
label={label}
|
||||
isDarkMode={isDarkMode}
|
||||
/>
|
||||
)
|
||||
))}
|
||||
<LabelsSelector
|
||||
task={taskAdapter}
|
||||
isDarkMode={isDarkMode}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Status */}
|
||||
{isColumnVisible(COLUMN_KEYS.STATUS) && (
|
||||
<div className="task-table-cell" style={{ width: '100px' }}>
|
||||
{task.status_name && (
|
||||
<div
|
||||
className="task-status"
|
||||
style={{
|
||||
backgroundColor: task.status_color,
|
||||
color: 'white',
|
||||
}}
|
||||
>
|
||||
{task.status_name}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className={`w-[100px] flex items-center px-2 border-r ${isDarkMode ? 'border-gray-700' : 'border-gray-200'}`}>
|
||||
<Tag
|
||||
backgroundColor={getStatusColor(task.status)}
|
||||
color="white"
|
||||
className="text-xs font-medium uppercase"
|
||||
>
|
||||
{task.status}
|
||||
</Tag>
|
||||
</div>
|
||||
|
||||
{/* Priority */}
|
||||
{isColumnVisible(COLUMN_KEYS.PRIORITY) && (
|
||||
<div className="task-table-cell" style={{ width: '100px' }}>
|
||||
{task.priority_name && (
|
||||
<div className="task-priority">
|
||||
<div
|
||||
className="task-priority-indicator"
|
||||
style={{ backgroundColor: task.priority_color }}
|
||||
/>
|
||||
<Text className="task-priority-text">{task.priority_name}</Text>
|
||||
<div className={`w-[100px] flex items-center px-2 border-r ${isDarkMode ? 'border-gray-700' : 'border-gray-200'}`}>
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className="w-2 h-2 rounded-full"
|
||||
style={{ backgroundColor: getPriorityColor(task.priority) }}
|
||||
/>
|
||||
<span className={`text-xs ${isDarkMode ? 'text-gray-400' : 'text-gray-600'}`}>
|
||||
{task.priority}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Time Tracking */}
|
||||
<div className={`w-[120px] flex items-center px-2 border-r ${isDarkMode ? 'border-gray-700' : 'border-gray-200'}`}>
|
||||
<div className="flex items-center gap-2 h-full overflow-hidden">
|
||||
{task.timeTracking?.logged && task.timeTracking.logged > 0 && (
|
||||
<div className="flex items-center gap-1">
|
||||
<ClockCircleOutlined className={`text-xs ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}`} />
|
||||
<span className={`text-xs ${isDarkMode ? 'text-gray-400' : 'text-gray-600'}`}>
|
||||
{typeof task.timeTracking.logged === 'number'
|
||||
? `${task.timeTracking.logged}h`
|
||||
: task.timeTracking.logged
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Time Tracking */}
|
||||
{isColumnVisible(COLUMN_KEYS.TIME_TRACKING) && (
|
||||
<div className="task-table-cell" style={{ width: '120px' }}>
|
||||
<div className="task-time-tracking">
|
||||
{task.time_spent_string && (
|
||||
<div className="task-time-spent">
|
||||
<ClockCircleOutlined className="task-time-icon" />
|
||||
<Text className="task-time-text">{task.time_spent_string}</Text>
|
||||
</div>
|
||||
)}
|
||||
{/* Task Indicators */}
|
||||
<div className="task-indicators">
|
||||
{task.comments_count && task.comments_count > 0 && (
|
||||
<div className="task-indicator">
|
||||
<MessageOutlined />
|
||||
<span>{task.comments_count}</span>
|
||||
</div>
|
||||
)}
|
||||
{task.attachments_count && task.attachments_count > 0 && (
|
||||
<div className="task-indicator">
|
||||
<PaperClipOutlined />
|
||||
<span>{task.attachments_count}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Subtasks */}
|
||||
{task.show_sub_tasks && task.sub_tasks && task.sub_tasks.length > 0 && (
|
||||
<div className="task-subtasks">
|
||||
{task.sub_tasks.map((subtask) => (
|
||||
<TaskRow
|
||||
key={subtask.id}
|
||||
task={subtask}
|
||||
projectId={projectId}
|
||||
groupId={groupId}
|
||||
currentGrouping={currentGrouping}
|
||||
isSelected={isSelected}
|
||||
onSelect={onSelect}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<style>{`
|
||||
.task-row {
|
||||
border-bottom: 1px solid var(--task-border-secondary, #f0f0f0);
|
||||
background: var(--task-bg-primary, white);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.task-row:hover {
|
||||
background-color: var(--task-hover-bg, #fafafa);
|
||||
}
|
||||
|
||||
.task-row-selected {
|
||||
background-color: var(--task-selected-bg, #e6f7ff);
|
||||
border-left: 3px solid var(--task-selected-border, #1890ff);
|
||||
}
|
||||
|
||||
.task-row-drag-overlay {
|
||||
background: var(--task-bg-primary, white);
|
||||
border: 1px solid var(--task-border-tertiary, #d9d9d9);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 12px var(--task-shadow, rgba(0, 0, 0, 0.15));
|
||||
}
|
||||
|
||||
.task-row-content {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
max-height: 40px;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
min-width: 1200px; /* Ensure minimum width for all columns */
|
||||
}
|
||||
|
||||
.task-table-fixed-columns {
|
||||
display: flex;
|
||||
background: var(--task-bg-primary, white);
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
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 8px;
|
||||
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;
|
||||
}
|
||||
|
||||
.task-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.task-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 1px;
|
||||
height: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.task-key {
|
||||
font-size: 10px;
|
||||
color: var(--task-text-tertiary, #666);
|
||||
background: var(--task-bg-secondary, #f0f0f0);
|
||||
padding: 1px 4px;
|
||||
border-radius: 2px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.task-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--task-text-primary, #262626);
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.task-completed {
|
||||
text-decoration: line-through;
|
||||
color: var(--task-text-tertiary, #8c8c8c);
|
||||
}
|
||||
|
||||
.subtask-toggle {
|
||||
font-size: 10px;
|
||||
color: var(--task-text-tertiary, #666);
|
||||
padding: 0 4px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.task-labels {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
flex-wrap: nowrap;
|
||||
overflow: hidden;
|
||||
height: 18px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.task-label {
|
||||
font-size: 10px;
|
||||
padding: 0 4px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
border-radius: 2px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.task-label-small {
|
||||
font-size: 9px;
|
||||
padding: 0 3px;
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
border-radius: 2px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.task-labels-more {
|
||||
font-size: 10px;
|
||||
color: var(--task-text-tertiary, #8c8c8c);
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.task-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.task-progress .ant-progress {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.task-progress-text {
|
||||
font-size: 10px;
|
||||
color: var(--task-text-tertiary, #666);
|
||||
min-width: 24px;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.task-labels-column {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
flex-wrap: nowrap;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.task-status {
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 2px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.task-priority {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.task-priority-indicator {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.task-priority-text {
|
||||
font-size: 11px;
|
||||
color: var(--task-text-tertiary, #666);
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.task-time-tracking {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.task-time-spent {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.task-time-icon {
|
||||
font-size: 10px;
|
||||
color: var(--task-text-tertiary, #8c8c8c);
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.task-time-text {
|
||||
font-size: 10px;
|
||||
color: var(--task-text-tertiary, #666);
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.task-indicators {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.task-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
font-size: 10px;
|
||||
color: var(--task-text-tertiary, #8c8c8c);
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.task-subtasks {
|
||||
margin-left: 40px;
|
||||
border-left: 2px solid var(--task-border-secondary, #f0f0f0);
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
opacity: 0.4;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.drag-handle:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Ensure buttons and components fit within row height */
|
||||
.task-row .ant-btn {
|
||||
height: auto;
|
||||
max-height: 24px;
|
||||
padding: 0 4px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.task-row .ant-checkbox-wrapper {
|
||||
height: 24px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.task-row .ant-avatar-group {
|
||||
height: 24px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.task-row .ant-avatar {
|
||||
width: 24px !important;
|
||||
height: 24px !important;
|
||||
line-height: 24px !important;
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
.task-row .ant-tag {
|
||||
margin: 0;
|
||||
padding: 0 4px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.task-row .ant-progress {
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.task-row .ant-progress-line {
|
||||
height: 6px !important;
|
||||
}
|
||||
|
||||
.task-row .ant-progress-bg {
|
||||
height: 6px !important;
|
||||
}
|
||||
|
||||
/* Dark mode specific adjustments for Ant Design components */
|
||||
.dark .task-row .ant-progress-bg,
|
||||
[data-theme="dark"] .task-row .ant-progress-bg {
|
||||
background-color: var(--task-border-primary, #303030) !important;
|
||||
}
|
||||
|
||||
.dark .task-row .ant-checkbox-wrapper,
|
||||
[data-theme="dark"] .task-row .ant-checkbox-wrapper {
|
||||
color: var(--task-text-primary, #ffffff);
|
||||
}
|
||||
|
||||
.dark .task-row .ant-btn,
|
||||
[data-theme="dark"] .task-row .ant-btn {
|
||||
color: var(--task-text-secondary, #d9d9d9);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.dark .task-row .ant-btn:hover,
|
||||
[data-theme="dark"] .task-row .ant-btn:hover {
|
||||
color: var(--task-text-primary, #ffffff);
|
||||
background-color: var(--task-hover-bg, #2a2a2a);
|
||||
}
|
||||
`}</style>
|
||||
</>
|
||||
);
|
||||
};
|
||||
}, (prevProps, nextProps) => {
|
||||
// Custom comparison function for React.memo
|
||||
// Only re-render if these specific props change
|
||||
const labelsEqual = prevProps.task.labels.length === nextProps.task.labels.length &&
|
||||
prevProps.task.labels.every((label, index) =>
|
||||
label.id === nextProps.task.labels[index]?.id &&
|
||||
label.name === nextProps.task.labels[index]?.name &&
|
||||
label.color === nextProps.task.labels[index]?.color &&
|
||||
label.end === nextProps.task.labels[index]?.end &&
|
||||
JSON.stringify(label.names) === JSON.stringify(nextProps.task.labels[index]?.names)
|
||||
);
|
||||
|
||||
return (
|
||||
prevProps.task.id === nextProps.task.id &&
|
||||
prevProps.task.assignees === nextProps.task.assignees &&
|
||||
prevProps.task.title === nextProps.task.title &&
|
||||
prevProps.task.progress === nextProps.task.progress &&
|
||||
prevProps.task.status === nextProps.task.status &&
|
||||
prevProps.task.priority === nextProps.task.priority &&
|
||||
labelsEqual &&
|
||||
prevProps.isSelected === nextProps.isSelected &&
|
||||
prevProps.isDragOverlay === nextProps.isDragOverlay &&
|
||||
prevProps.groupId === nextProps.groupId
|
||||
);
|
||||
});
|
||||
|
||||
TaskRow.displayName = 'TaskRow';
|
||||
|
||||
export default TaskRow;
|
||||
@@ -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 } 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,
|
||||
});
|
||||
|
||||
@@ -15,6 +16,91 @@ const initialState: TaskManagementState = {
|
||||
error: null,
|
||||
};
|
||||
|
||||
// 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;
|
||||
};
|
||||
|
||||
// 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: task.status_name?.toLowerCase() || 'todo',
|
||||
priority: task.priority_name?.toLowerCase() || '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) || [],
|
||||
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');
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const taskManagementSlice = createSlice({
|
||||
name: 'taskManagement',
|
||||
initialState: tasksAdapter.getInitialState(initialState),
|
||||
@@ -99,6 +185,22 @@ const taskManagementSlice = createSlice({
|
||||
state.loading = false;
|
||||
},
|
||||
},
|
||||
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;
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
export const {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
export interface Task {
|
||||
id: string;
|
||||
task_key: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
status: 'todo' | 'doing' | 'done';
|
||||
@@ -7,7 +8,7 @@ export interface Task {
|
||||
phase: string; // Custom phases like 'planning', 'development', 'testing', 'deployment'
|
||||
progress: number; // 0-100
|
||||
assignees: string[];
|
||||
labels: string[];
|
||||
labels: Label[];
|
||||
dueDate?: string;
|
||||
timeTracking: {
|
||||
estimated?: number;
|
||||
@@ -56,6 +57,8 @@ export interface Label {
|
||||
id: string;
|
||||
name: string;
|
||||
color: string;
|
||||
end?: boolean;
|
||||
names?: string[];
|
||||
}
|
||||
|
||||
// Redux State Interfaces
|
||||
|
||||
@@ -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