feat(task-management): introduce optimized bulk action bar component
- Added a new `OptimizedBulkActionBar` component for enhanced task management. - Implemented performance optimizations, including memoization and smooth animations. - Integrated bulk action handlers for status, priority, phase changes, and more. - Updated `TaskListBoard` to utilize the new bulk action bar, improving user experience for task selection and actions. - Included responsive design adjustments and accessibility features.
This commit is contained in:
chamiakJ
@@ -0,0 +1,253 @@
|
||||
/* Optimized Bulk Action Bar Styles */
|
||||
.optimized-bulk-action-bar {
|
||||
/* GPU acceleration for smooth animations */
|
||||
will-change: transform, opacity;
|
||||
transform: translateZ(0);
|
||||
|
||||
/* Smooth backdrop blur with fallback */
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
|
||||
/* Prevent layout shifts */
|
||||
contain: layout style paint;
|
||||
|
||||
/* Optimize for animations */
|
||||
animation-fill-mode: both;
|
||||
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Entrance animation */
|
||||
@keyframes slideUpFadeIn {
|
||||
from {
|
||||
transform: translateX(-50%) translateY(20px);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
to {
|
||||
transform: translateX(-50%) translateY(0);
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
/* Exit animation */
|
||||
@keyframes slideDownFadeOut {
|
||||
from {
|
||||
transform: translateX(-50%) translateY(0);
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
to {
|
||||
transform: translateX(-50%) translateY(20px);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.optimized-bulk-action-bar.entering {
|
||||
animation: slideUpFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.optimized-bulk-action-bar.exiting {
|
||||
animation: slideDownFadeOut 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Action button optimizations */
|
||||
.bulk-action-button {
|
||||
/* GPU acceleration */
|
||||
will-change: transform, background-color;
|
||||
transform: translateZ(0);
|
||||
|
||||
/* Smooth hover transitions */
|
||||
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
/* Prevent text selection */
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
|
||||
/* Optimize for touch */
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.bulk-action-button:hover {
|
||||
transform: translateZ(0) scale(1.05);
|
||||
}
|
||||
|
||||
.bulk-action-button:active {
|
||||
transform: translateZ(0) scale(0.95);
|
||||
transition-duration: 0.1s;
|
||||
}
|
||||
|
||||
/* Button loading state optimization */
|
||||
.bulk-action-button.loading {
|
||||
pointer-events: none;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Danger button styling */
|
||||
.bulk-action-button.danger:hover {
|
||||
background-color: rgba(239, 68, 68, 0.1) !important;
|
||||
color: #ef4444 !important;
|
||||
}
|
||||
|
||||
/* Dark mode optimizations */
|
||||
.dark .bulk-action-button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.dark .bulk-action-button.danger:hover {
|
||||
background-color: rgba(239, 68, 68, 0.1) !important;
|
||||
}
|
||||
|
||||
/* Divider styling for better visual separation */
|
||||
.bulk-action-divider {
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
/* Badge styling optimizations */
|
||||
.bulk-action-badge {
|
||||
/* Smooth scaling animation */
|
||||
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.bulk-action-badge.updating {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* Tooltip optimizations */
|
||||
.ant-tooltip {
|
||||
/* Faster tooltip animations */
|
||||
transition: opacity 0.1s ease !important;
|
||||
}
|
||||
|
||||
/* Dropdown optimizations */
|
||||
.bulk-action-dropdown {
|
||||
/* Smooth dropdown animations */
|
||||
animation-duration: 0.2s !important;
|
||||
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
}
|
||||
|
||||
/* Mobile responsive optimizations */
|
||||
@media (max-width: 768px) {
|
||||
.optimized-bulk-action-bar {
|
||||
/* Adjust for mobile */
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
right: auto;
|
||||
transform: translateX(-50%);
|
||||
max-width: calc(100vw - 32px);
|
||||
padding: 10px 16px;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.bulk-action-button {
|
||||
/* Smaller buttons on mobile */
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
/* Hide some actions on very small screens */
|
||||
.bulk-action-secondary {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.optimized-bulk-action-bar {
|
||||
/* Even more compact on small screens */
|
||||
bottom: 16px;
|
||||
padding: 8px 12px;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
/* Show only essential actions */
|
||||
.bulk-action-tertiary {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* High contrast mode support */
|
||||
@media (prefers-contrast: high) {
|
||||
.optimized-bulk-action-bar {
|
||||
border: 2px solid currentColor;
|
||||
background: var(--background-color);
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
|
||||
.bulk-action-button {
|
||||
border: 1px solid currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduced motion support */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.optimized-bulk-action-bar,
|
||||
.bulk-action-button,
|
||||
.bulk-action-badge {
|
||||
transition: none !important;
|
||||
animation: none !important;
|
||||
will-change: auto !important;
|
||||
}
|
||||
|
||||
.bulk-action-button:hover {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Focus management for accessibility */
|
||||
.bulk-action-button:focus-visible {
|
||||
outline: 2px solid #2563eb;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.dark .bulk-action-button:focus-visible {
|
||||
outline-color: #3b82f6;
|
||||
}
|
||||
|
||||
/* Performance optimization classes */
|
||||
.bulk-action-gpu-accelerated {
|
||||
transform: translateZ(0);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.bulk-action-contain-layout {
|
||||
contain: layout style paint;
|
||||
}
|
||||
|
||||
/* Loading spinner optimization */
|
||||
.bulk-action-loading-spinner {
|
||||
animation: spin 1s linear infinite;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Smooth color transitions for theme switching */
|
||||
.bulk-action-theme-transition {
|
||||
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
/* Optimize for 60fps animations */
|
||||
.bulk-action-60fps {
|
||||
animation-duration: 0.25s;
|
||||
animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
/* Prevent layout thrashing during animations */
|
||||
.bulk-action-stable-layout {
|
||||
contain: layout;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
@@ -0,0 +1,498 @@
|
||||
import React, { useMemo, useCallback, useState, useRef, useEffect } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import {
|
||||
Button,
|
||||
Typography,
|
||||
Dropdown,
|
||||
Popconfirm,
|
||||
Tooltip,
|
||||
Space,
|
||||
Badge,
|
||||
Divider
|
||||
} from 'antd';
|
||||
import {
|
||||
DeleteOutlined,
|
||||
CloseOutlined,
|
||||
MoreOutlined,
|
||||
RetweetOutlined,
|
||||
UserAddOutlined,
|
||||
InboxOutlined,
|
||||
TagsOutlined,
|
||||
UsergroupAddOutlined,
|
||||
CheckOutlined,
|
||||
EditOutlined,
|
||||
CopyOutlined,
|
||||
ExportOutlined,
|
||||
CalendarOutlined,
|
||||
FlagOutlined,
|
||||
BulbOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { RootState } from '@/app/store';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
interface OptimizedBulkActionBarProps {
|
||||
selectedTaskIds: string[];
|
||||
totalSelected: number;
|
||||
projectId: string;
|
||||
onClearSelection?: () => void;
|
||||
onBulkStatusChange?: (statusId: string) => void;
|
||||
onBulkPriorityChange?: (priorityId: string) => void;
|
||||
onBulkPhaseChange?: (phaseId: string) => void;
|
||||
onBulkAssignToMe?: () => void;
|
||||
onBulkAssignMembers?: (memberIds: string[]) => void;
|
||||
onBulkAddLabels?: (labelIds: string[]) => void;
|
||||
onBulkArchive?: () => void;
|
||||
onBulkDelete?: () => void;
|
||||
onBulkDuplicate?: () => void;
|
||||
onBulkExport?: () => void;
|
||||
onBulkSetDueDate?: (date: string) => void;
|
||||
}
|
||||
|
||||
// Performance-optimized memoized action button component
|
||||
const ActionButton = React.memo<{
|
||||
icon: React.ReactNode;
|
||||
tooltip: string;
|
||||
onClick?: () => void;
|
||||
loading?: boolean;
|
||||
danger?: boolean;
|
||||
disabled?: boolean;
|
||||
isDarkMode: boolean;
|
||||
badge?: number;
|
||||
}>(({ icon, tooltip, onClick, loading = false, danger = false, disabled = false, isDarkMode, badge }) => {
|
||||
const buttonStyle = useMemo(() => ({
|
||||
background: 'transparent',
|
||||
color: isDarkMode ? '#e5e7eb' : '#374151',
|
||||
border: 'none',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: '6px',
|
||||
height: '32px',
|
||||
width: '32px',
|
||||
fontSize: '14px',
|
||||
borderRadius: '6px',
|
||||
transition: 'all 0.15s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
cursor: disabled ? 'not-allowed' : 'pointer',
|
||||
opacity: disabled ? 0.5 : 1,
|
||||
...(danger && {
|
||||
color: '#ef4444',
|
||||
}),
|
||||
}), [isDarkMode, danger, disabled]);
|
||||
|
||||
const hoverStyle = useMemo(() => ({
|
||||
backgroundColor: isDarkMode
|
||||
? (danger ? 'rgba(239, 68, 68, 0.1)' : 'rgba(255, 255, 255, 0.1)')
|
||||
: (danger ? 'rgba(239, 68, 68, 0.1)' : 'rgba(0, 0, 0, 0.05)'),
|
||||
transform: 'scale(1.05)',
|
||||
}), [isDarkMode, danger]);
|
||||
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
|
||||
const combinedStyle = useMemo(() => ({
|
||||
...buttonStyle,
|
||||
...(isHovered && !disabled ? hoverStyle : {}),
|
||||
}), [buttonStyle, hoverStyle, isHovered, disabled]);
|
||||
|
||||
const ButtonComponent = (
|
||||
<Button
|
||||
icon={icon}
|
||||
style={combinedStyle}
|
||||
size="small"
|
||||
loading={loading}
|
||||
disabled={disabled}
|
||||
onClick={onClick}
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
type="text"
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<Tooltip title={tooltip} placement="top">
|
||||
{badge && badge > 0 ? (
|
||||
<Badge count={badge} size="small" offset={[-2, 2]}>
|
||||
{ButtonComponent}
|
||||
</Badge>
|
||||
) : (
|
||||
ButtonComponent
|
||||
)}
|
||||
</Tooltip>
|
||||
);
|
||||
});
|
||||
|
||||
ActionButton.displayName = 'ActionButton';
|
||||
|
||||
// Performance-optimized main component
|
||||
const OptimizedBulkActionBarContent: React.FC<OptimizedBulkActionBarProps> = React.memo(({
|
||||
selectedTaskIds,
|
||||
totalSelected,
|
||||
projectId,
|
||||
onClearSelection,
|
||||
onBulkStatusChange,
|
||||
onBulkPriorityChange,
|
||||
onBulkPhaseChange,
|
||||
onBulkAssignToMe,
|
||||
onBulkAssignMembers,
|
||||
onBulkAddLabels,
|
||||
onBulkArchive,
|
||||
onBulkDelete,
|
||||
onBulkDuplicate,
|
||||
onBulkExport,
|
||||
onBulkSetDueDate,
|
||||
}) => {
|
||||
const { t } = useTranslation('task-management');
|
||||
const isDarkMode = useSelector((state: RootState) => state.themeReducer?.mode === 'dark');
|
||||
|
||||
// Performance state management
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const [loadingStates, setLoadingStates] = useState({
|
||||
status: false,
|
||||
priority: false,
|
||||
phase: false,
|
||||
assignToMe: false,
|
||||
assignMembers: false,
|
||||
labels: false,
|
||||
archive: false,
|
||||
delete: false,
|
||||
duplicate: false,
|
||||
export: false,
|
||||
dueDate: false,
|
||||
});
|
||||
|
||||
// Smooth entrance animation
|
||||
useEffect(() => {
|
||||
if (totalSelected > 0) {
|
||||
// Micro-delay for smoother animation
|
||||
const timer = setTimeout(() => setIsVisible(true), 50);
|
||||
return () => clearTimeout(timer);
|
||||
} else {
|
||||
setIsVisible(false);
|
||||
}
|
||||
}, [totalSelected]);
|
||||
|
||||
// Optimized loading state updater
|
||||
const updateLoadingState = useCallback((action: keyof typeof loadingStates, loading: boolean) => {
|
||||
setLoadingStates(prev => ({ ...prev, [action]: loading }));
|
||||
}, []);
|
||||
|
||||
// Memoized handlers with loading states
|
||||
const handleStatusChange = useCallback(async () => {
|
||||
updateLoadingState('status', true);
|
||||
try {
|
||||
await onBulkStatusChange?.('new-status-id');
|
||||
} finally {
|
||||
updateLoadingState('status', false);
|
||||
}
|
||||
}, [onBulkStatusChange, updateLoadingState]);
|
||||
|
||||
const handlePriorityChange = useCallback(async () => {
|
||||
updateLoadingState('priority', true);
|
||||
try {
|
||||
await onBulkPriorityChange?.('new-priority-id');
|
||||
} finally {
|
||||
updateLoadingState('priority', false);
|
||||
}
|
||||
}, [onBulkPriorityChange, updateLoadingState]);
|
||||
|
||||
const handlePhaseChange = useCallback(async () => {
|
||||
updateLoadingState('phase', true);
|
||||
try {
|
||||
await onBulkPhaseChange?.('new-phase-id');
|
||||
} finally {
|
||||
updateLoadingState('phase', false);
|
||||
}
|
||||
}, [onBulkPhaseChange, updateLoadingState]);
|
||||
|
||||
const handleAssignToMe = useCallback(async () => {
|
||||
updateLoadingState('assignToMe', true);
|
||||
try {
|
||||
await onBulkAssignToMe?.();
|
||||
} finally {
|
||||
updateLoadingState('assignToMe', false);
|
||||
}
|
||||
}, [onBulkAssignToMe, updateLoadingState]);
|
||||
|
||||
const handleArchive = useCallback(async () => {
|
||||
updateLoadingState('archive', true);
|
||||
try {
|
||||
await onBulkArchive?.();
|
||||
} finally {
|
||||
updateLoadingState('archive', false);
|
||||
}
|
||||
}, [onBulkArchive, updateLoadingState]);
|
||||
|
||||
const handleDelete = useCallback(async () => {
|
||||
updateLoadingState('delete', true);
|
||||
try {
|
||||
await onBulkDelete?.();
|
||||
} finally {
|
||||
updateLoadingState('delete', false);
|
||||
}
|
||||
}, [onBulkDelete, updateLoadingState]);
|
||||
|
||||
const handleDuplicate = useCallback(async () => {
|
||||
updateLoadingState('duplicate', true);
|
||||
try {
|
||||
await onBulkDuplicate?.();
|
||||
} finally {
|
||||
updateLoadingState('duplicate', false);
|
||||
}
|
||||
}, [onBulkDuplicate, updateLoadingState]);
|
||||
|
||||
const handleExport = useCallback(async () => {
|
||||
updateLoadingState('export', true);
|
||||
try {
|
||||
await onBulkExport?.();
|
||||
} finally {
|
||||
updateLoadingState('export', false);
|
||||
}
|
||||
}, [onBulkExport, updateLoadingState]);
|
||||
|
||||
// Memoized styles for better performance
|
||||
const containerStyle = useMemo((): React.CSSProperties => ({
|
||||
position: 'fixed',
|
||||
bottom: '24px',
|
||||
left: '50%',
|
||||
transform: `translateX(-50%) translateY(${isVisible ? '0' : '20px'})`,
|
||||
zIndex: 1000,
|
||||
background: isDarkMode
|
||||
? 'rgba(31, 41, 55, 0.95)'
|
||||
: 'rgba(255, 255, 255, 0.95)',
|
||||
backdropFilter: 'blur(12px)',
|
||||
WebkitBackdropFilter: 'blur(12px)',
|
||||
borderRadius: '16px',
|
||||
padding: '12px 20px',
|
||||
boxShadow: isDarkMode
|
||||
? '0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(55, 65, 81, 0.3)'
|
||||
: '0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.05)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '4px',
|
||||
minWidth: 'fit-content',
|
||||
maxWidth: '90vw',
|
||||
opacity: isVisible ? 1 : 0,
|
||||
visibility: isVisible ? 'visible' : 'hidden',
|
||||
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
border: isDarkMode
|
||||
? '1px solid rgba(55, 65, 81, 0.3)'
|
||||
: '1px solid rgba(229, 231, 235, 0.8)',
|
||||
}), [isDarkMode, isVisible]);
|
||||
|
||||
const textStyle = useMemo(() => ({
|
||||
color: isDarkMode ? '#f3f4f6' : '#374151',
|
||||
fontSize: '14px',
|
||||
fontWeight: 500,
|
||||
marginRight: '12px',
|
||||
whiteSpace: 'nowrap' as const,
|
||||
}), [isDarkMode]);
|
||||
|
||||
// Quick actions dropdown menu
|
||||
const quickActionsMenu = useMemo(() => ({
|
||||
items: [
|
||||
{
|
||||
key: 'change-status',
|
||||
label: 'Change Status',
|
||||
icon: <RetweetOutlined />,
|
||||
onClick: handleStatusChange,
|
||||
},
|
||||
{
|
||||
key: 'change-priority',
|
||||
label: 'Change Priority',
|
||||
icon: <FlagOutlined />,
|
||||
onClick: handlePriorityChange,
|
||||
},
|
||||
{
|
||||
key: 'change-phase',
|
||||
label: 'Change Phase',
|
||||
icon: <RetweetOutlined />,
|
||||
onClick: handlePhaseChange,
|
||||
},
|
||||
{
|
||||
key: 'set-due-date',
|
||||
label: 'Set Due Date',
|
||||
icon: <CalendarOutlined />,
|
||||
onClick: () => onBulkSetDueDate?.(new Date().toISOString()),
|
||||
},
|
||||
{
|
||||
type: 'divider' as const,
|
||||
key: 'divider-1',
|
||||
},
|
||||
{
|
||||
key: 'duplicate',
|
||||
label: 'Duplicate Tasks',
|
||||
icon: <CopyOutlined />,
|
||||
onClick: handleDuplicate,
|
||||
},
|
||||
{
|
||||
key: 'export',
|
||||
label: 'Export Tasks',
|
||||
icon: <ExportOutlined />,
|
||||
onClick: handleExport,
|
||||
},
|
||||
],
|
||||
}), [handleStatusChange, handlePriorityChange, handlePhaseChange, handleDuplicate, handleExport, onBulkSetDueDate]);
|
||||
|
||||
// Don't render if no tasks selected
|
||||
if (totalSelected === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={containerStyle}>
|
||||
{/* Selection Count */}
|
||||
<Text style={textStyle}>
|
||||
<Badge
|
||||
count={totalSelected}
|
||||
style={{
|
||||
backgroundColor: isDarkMode ? '#3b82f6' : '#2563eb',
|
||||
color: 'white',
|
||||
fontSize: '11px',
|
||||
height: '18px',
|
||||
lineHeight: '18px',
|
||||
minWidth: '18px',
|
||||
marginRight: '6px'
|
||||
}}
|
||||
/>
|
||||
{totalSelected} {totalSelected === 1 ? 'task' : 'tasks'} selected
|
||||
</Text>
|
||||
|
||||
<Divider
|
||||
type="vertical"
|
||||
style={{
|
||||
height: '20px',
|
||||
margin: '0 8px',
|
||||
borderColor: isDarkMode ? 'rgba(55, 65, 81, 0.5)' : 'rgba(229, 231, 235, 0.8)'
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Actions in same order as original component */}
|
||||
<Space size={2}>
|
||||
{/* Change Status/Priority/Phase */}
|
||||
<Tooltip title="Change Status/Priority/Phase" placement="top">
|
||||
<Dropdown
|
||||
menu={quickActionsMenu}
|
||||
trigger={['click']}
|
||||
placement="top"
|
||||
arrow
|
||||
>
|
||||
<Button
|
||||
icon={<RetweetOutlined />}
|
||||
style={{
|
||||
background: 'transparent',
|
||||
color: isDarkMode ? '#e5e7eb' : '#374151',
|
||||
border: 'none',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: '6px',
|
||||
height: '32px',
|
||||
width: '32px',
|
||||
fontSize: '14px',
|
||||
borderRadius: '6px',
|
||||
transition: 'all 0.15s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
}}
|
||||
size="small"
|
||||
type="text"
|
||||
loading={loadingStates.status || loadingStates.priority || loadingStates.phase}
|
||||
/>
|
||||
</Dropdown>
|
||||
</Tooltip>
|
||||
|
||||
{/* Change Labels */}
|
||||
<ActionButton
|
||||
icon={<TagsOutlined />}
|
||||
tooltip="Add Labels"
|
||||
onClick={() => onBulkAddLabels?.([])}
|
||||
loading={loadingStates.labels}
|
||||
isDarkMode={isDarkMode}
|
||||
/>
|
||||
|
||||
{/* Assign to Me */}
|
||||
<ActionButton
|
||||
icon={<UserAddOutlined />}
|
||||
tooltip="Assign to Me"
|
||||
onClick={handleAssignToMe}
|
||||
loading={loadingStates.assignToMe}
|
||||
isDarkMode={isDarkMode}
|
||||
/>
|
||||
|
||||
{/* Change Assignees */}
|
||||
<ActionButton
|
||||
icon={<UsergroupAddOutlined />}
|
||||
tooltip="Assign Members"
|
||||
onClick={() => onBulkAssignMembers?.([])}
|
||||
loading={loadingStates.assignMembers}
|
||||
isDarkMode={isDarkMode}
|
||||
/>
|
||||
|
||||
{/* Archive */}
|
||||
<ActionButton
|
||||
icon={<InboxOutlined />}
|
||||
tooltip="Archive"
|
||||
onClick={handleArchive}
|
||||
loading={loadingStates.archive}
|
||||
isDarkMode={isDarkMode}
|
||||
/>
|
||||
|
||||
{/* Delete */}
|
||||
<Popconfirm
|
||||
title={`Delete ${totalSelected} ${totalSelected === 1 ? 'task' : 'tasks'}?`}
|
||||
description="This action cannot be undone."
|
||||
onConfirm={handleDelete}
|
||||
okText="Delete"
|
||||
cancelText="Cancel"
|
||||
okType="danger"
|
||||
placement="top"
|
||||
>
|
||||
<ActionButton
|
||||
icon={<DeleteOutlined />}
|
||||
tooltip="Delete"
|
||||
loading={loadingStates.delete}
|
||||
danger
|
||||
isDarkMode={isDarkMode}
|
||||
/>
|
||||
</Popconfirm>
|
||||
|
||||
<Divider
|
||||
type="vertical"
|
||||
style={{
|
||||
height: '20px',
|
||||
margin: '0 4px',
|
||||
borderColor: isDarkMode ? 'rgba(55, 65, 81, 0.5)' : 'rgba(229, 231, 235, 0.8)'
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Clear Selection */}
|
||||
<ActionButton
|
||||
icon={<CloseOutlined />}
|
||||
tooltip="Clear Selection"
|
||||
onClick={onClearSelection}
|
||||
isDarkMode={isDarkMode}
|
||||
/>
|
||||
</Space>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
OptimizedBulkActionBarContent.displayName = 'OptimizedBulkActionBarContent';
|
||||
|
||||
// Portal wrapper for performance isolation
|
||||
const OptimizedBulkActionBar: React.FC<OptimizedBulkActionBarProps> = React.memo((props) => {
|
||||
// Only render portal if tasks are selected for better performance
|
||||
if (props.totalSelected === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return createPortal(
|
||||
<OptimizedBulkActionBarContent {...props} />,
|
||||
document.body,
|
||||
'optimized-bulk-action-bar'
|
||||
);
|
||||
});
|
||||
|
||||
OptimizedBulkActionBar.displayName = 'OptimizedBulkActionBar';
|
||||
|
||||
export default OptimizedBulkActionBar;
|
||||
@@ -41,9 +41,38 @@ import { Task } from '@/types/task-management.types';
|
||||
import { useTaskSocketHandlers } from '@/hooks/useTaskSocketHandlers';
|
||||
import TaskRow from './task-row';
|
||||
// import BulkActionBar from './bulk-action-bar';
|
||||
import OptimizedBulkActionBar from './optimized-bulk-action-bar';
|
||||
import VirtualizedTaskList from './virtualized-task-list';
|
||||
import { AppDispatch } from '@/app/store';
|
||||
import { shallowEqual } from 'react-redux';
|
||||
import { deselectAll } from '@/features/projects/bulkActions/bulkActionSlice';
|
||||
import { taskListBulkActionsApiService } from '@/api/tasks/task-list-bulk-actions.api.service';
|
||||
import { useMixpanelTracking } from '@/hooks/useMixpanelTracking';
|
||||
import {
|
||||
evt_project_task_list_bulk_archive,
|
||||
evt_project_task_list_bulk_assign_me,
|
||||
evt_project_task_list_bulk_assign_members,
|
||||
evt_project_task_list_bulk_change_phase,
|
||||
evt_project_task_list_bulk_change_priority,
|
||||
evt_project_task_list_bulk_change_status,
|
||||
evt_project_task_list_bulk_delete,
|
||||
evt_project_task_list_bulk_update_labels,
|
||||
} from '@/shared/worklenz-analytics-events';
|
||||
import {
|
||||
IBulkTasksLabelsRequest,
|
||||
IBulkTasksPhaseChangeRequest,
|
||||
IBulkTasksPriorityChangeRequest,
|
||||
IBulkTasksStatusChangeRequest,
|
||||
} from '@/types/tasks/bulk-action-bar.types';
|
||||
import { ITaskStatus } from '@/types/tasks/taskStatus.types';
|
||||
import { ITaskPriority } from '@/types/tasks/taskPriority.types';
|
||||
import { ITaskPhase } from '@/types/tasks/taskPhase.types';
|
||||
import { ITaskLabel } from '@/types/tasks/taskLabel.types';
|
||||
import { ITeamMemberViewModel } from '@/types/teamMembers/teamMembersGetResponse.types';
|
||||
import { checkTaskDependencyStatus } from '@/utils/check-task-dependency-status';
|
||||
import alertService from '@/services/alerts/alertService';
|
||||
import logger from '@/utils/errorLogger';
|
||||
import { fetchLabels } from '@/features/taskAttributes/taskLabelSlice';
|
||||
import { performanceMonitor } from '@/utils/performance-monitor';
|
||||
import debugPerformance from '@/utils/debug-performance';
|
||||
|
||||
@@ -53,6 +82,7 @@ import PerformanceAnalysis from './performance-analysis';
|
||||
|
||||
// Import drag and drop performance optimizations
|
||||
import './drag-drop-optimized.css';
|
||||
import './optimized-bulk-action-bar.css';
|
||||
|
||||
interface TaskListBoardProps {
|
||||
projectId: string;
|
||||
@@ -91,6 +121,7 @@ const throttle = <T extends (...args: any[]) => void>(func: T, delay: number): T
|
||||
const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = '' }) => {
|
||||
const dispatch = useDispatch<AppDispatch>();
|
||||
const { t } = useTranslation('task-management');
|
||||
const { trackMixpanelEvent } = useMixpanelTracking();
|
||||
const [dragState, setDragState] = useState<DragState>({
|
||||
activeTask: null,
|
||||
activeGroupId: null,
|
||||
@@ -120,6 +151,14 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
|
||||
const loading = useSelector((state: RootState) => state.taskManagement.loading, shallowEqual);
|
||||
const error = useSelector((state: RootState) => state.taskManagement.error);
|
||||
|
||||
// Bulk action selectors
|
||||
const statusList = useSelector((state: RootState) => state.taskStatusReducer.status);
|
||||
const priorityList = useSelector((state: RootState) => state.priorityReducer.priorities);
|
||||
const phaseList = useSelector((state: RootState) => state.phaseReducer.phaseList);
|
||||
const labelsList = useSelector((state: RootState) => state.taskLabelsReducer.labels);
|
||||
const members = useSelector((state: RootState) => state.teamMembersReducer.teamMembers);
|
||||
const archived = useSelector((state: RootState) => state.taskReducer.archived);
|
||||
|
||||
// Get theme from Redux store
|
||||
const isDarkMode = useSelector((state: RootState) => state.themeReducer?.mode === 'dark');
|
||||
const themeClass = isDarkMode ? 'dark' : 'light';
|
||||
@@ -401,6 +440,221 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
|
||||
);
|
||||
}, [dragState.activeTask, dragState.activeGroupId, projectId, currentGrouping]);
|
||||
|
||||
// Bulk action handlers - implementing real functionality from task-list-bulk-actions-bar
|
||||
const handleClearSelection = useCallback(() => {
|
||||
dispatch(deselectAll());
|
||||
}, [dispatch]);
|
||||
|
||||
const handleBulkStatusChange = useCallback(async (statusId: string) => {
|
||||
if (!statusId || !projectId) return;
|
||||
try {
|
||||
// Find the status object
|
||||
const status = statusList.find(s => s.id === statusId);
|
||||
if (!status || !status.id) return;
|
||||
|
||||
const body: IBulkTasksStatusChangeRequest = {
|
||||
tasks: selectedTaskIds,
|
||||
status_id: status.id,
|
||||
};
|
||||
|
||||
// Check task dependencies first
|
||||
for (const taskId of selectedTaskIds) {
|
||||
const canContinue = await checkTaskDependencyStatus(taskId, status.id);
|
||||
if (!canContinue) {
|
||||
if (selectedTaskIds.length > 1) {
|
||||
alertService.warning(
|
||||
'Incomplete Dependencies!',
|
||||
'Some tasks were not updated. Please ensure all dependent tasks are completed before proceeding.'
|
||||
);
|
||||
} else {
|
||||
alertService.error(
|
||||
'Task is not completed',
|
||||
'Please complete the task dependencies before proceeding'
|
||||
);
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const res = await taskListBulkActionsApiService.changeStatus(body, projectId);
|
||||
if (res.done) {
|
||||
trackMixpanelEvent(evt_project_task_list_bulk_change_status);
|
||||
dispatch(deselectAll());
|
||||
dispatch(fetchTasksV3(projectId));
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('Error changing status:', error);
|
||||
}
|
||||
}, [selectedTaskIds, statusList, projectId, trackMixpanelEvent, dispatch]);
|
||||
|
||||
const handleBulkPriorityChange = useCallback(async (priorityId: string) => {
|
||||
if (!priorityId || !projectId) return;
|
||||
try {
|
||||
const priority = priorityList.find(p => p.id === priorityId);
|
||||
if (!priority || !priority.id) return;
|
||||
|
||||
const body: IBulkTasksPriorityChangeRequest = {
|
||||
tasks: selectedTaskIds,
|
||||
priority_id: priority.id,
|
||||
};
|
||||
const res = await taskListBulkActionsApiService.changePriority(body, projectId);
|
||||
if (res.done) {
|
||||
trackMixpanelEvent(evt_project_task_list_bulk_change_priority);
|
||||
dispatch(deselectAll());
|
||||
dispatch(fetchTasksV3(projectId));
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('Error changing priority:', error);
|
||||
}
|
||||
}, [selectedTaskIds, priorityList, projectId, trackMixpanelEvent, dispatch]);
|
||||
|
||||
const handleBulkPhaseChange = useCallback(async (phaseId: string) => {
|
||||
if (!phaseId || !projectId) return;
|
||||
try {
|
||||
const phase = phaseList.find(p => p.id === phaseId);
|
||||
if (!phase || !phase.id) return;
|
||||
|
||||
const body: IBulkTasksPhaseChangeRequest = {
|
||||
tasks: selectedTaskIds,
|
||||
phase_id: phase.id,
|
||||
};
|
||||
const res = await taskListBulkActionsApiService.changePhase(body, projectId);
|
||||
if (res.done) {
|
||||
trackMixpanelEvent(evt_project_task_list_bulk_change_phase);
|
||||
dispatch(deselectAll());
|
||||
dispatch(fetchTasksV3(projectId));
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('Error changing phase:', error);
|
||||
}
|
||||
}, [selectedTaskIds, phaseList, projectId, trackMixpanelEvent, dispatch]);
|
||||
|
||||
const handleBulkAssignToMe = useCallback(async () => {
|
||||
if (!projectId) return;
|
||||
try {
|
||||
const body = {
|
||||
tasks: selectedTaskIds,
|
||||
project_id: projectId,
|
||||
};
|
||||
const res = await taskListBulkActionsApiService.assignToMe(body);
|
||||
if (res.done) {
|
||||
trackMixpanelEvent(evt_project_task_list_bulk_assign_me);
|
||||
dispatch(deselectAll());
|
||||
dispatch(fetchTasksV3(projectId));
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('Error assigning to me:', error);
|
||||
}
|
||||
}, [selectedTaskIds, projectId, trackMixpanelEvent, dispatch]);
|
||||
|
||||
const handleBulkAssignMembers = useCallback(async (memberIds: string[]) => {
|
||||
if (!projectId || !members?.data) return;
|
||||
try {
|
||||
// Convert memberIds to member objects with proper type checking
|
||||
const selectedMembers = members.data.filter(member =>
|
||||
member.id && memberIds.includes(member.id)
|
||||
);
|
||||
|
||||
const body = {
|
||||
tasks: selectedTaskIds,
|
||||
project_id: projectId,
|
||||
members: selectedMembers.map(member => ({
|
||||
id: member.id!,
|
||||
name: member.name || '',
|
||||
email: member.email || '',
|
||||
avatar_url: member.avatar_url || '',
|
||||
team_member_id: member.id!,
|
||||
project_member_id: member.id!,
|
||||
})),
|
||||
};
|
||||
const res = await taskListBulkActionsApiService.assignTasks(body);
|
||||
if (res.done) {
|
||||
trackMixpanelEvent(evt_project_task_list_bulk_assign_members);
|
||||
dispatch(deselectAll());
|
||||
dispatch(fetchTasksV3(projectId));
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('Error assigning tasks:', error);
|
||||
}
|
||||
}, [selectedTaskIds, projectId, members, trackMixpanelEvent, dispatch]);
|
||||
|
||||
const handleBulkAddLabels = useCallback(async (labelIds: string[]) => {
|
||||
if (!projectId) return;
|
||||
try {
|
||||
// Convert labelIds to label objects with proper type checking
|
||||
const selectedLabels = labelsList.filter(label =>
|
||||
label.id && labelIds.includes(label.id)
|
||||
);
|
||||
|
||||
const body: IBulkTasksLabelsRequest = {
|
||||
tasks: selectedTaskIds,
|
||||
labels: selectedLabels,
|
||||
text: null,
|
||||
};
|
||||
const res = await taskListBulkActionsApiService.assignLabels(body, projectId);
|
||||
if (res.done) {
|
||||
trackMixpanelEvent(evt_project_task_list_bulk_update_labels);
|
||||
dispatch(deselectAll());
|
||||
dispatch(fetchTasksV3(projectId));
|
||||
dispatch(fetchLabels());
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('Error updating labels:', error);
|
||||
}
|
||||
}, [selectedTaskIds, projectId, labelsList, trackMixpanelEvent, dispatch]);
|
||||
|
||||
const handleBulkArchive = useCallback(async () => {
|
||||
if (!projectId) return;
|
||||
try {
|
||||
const body = {
|
||||
tasks: selectedTaskIds,
|
||||
project_id: projectId,
|
||||
};
|
||||
const res = await taskListBulkActionsApiService.archiveTasks(body, archived);
|
||||
if (res.done) {
|
||||
trackMixpanelEvent(evt_project_task_list_bulk_archive);
|
||||
dispatch(deselectAll());
|
||||
dispatch(fetchTasksV3(projectId));
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('Error archiving tasks:', error);
|
||||
}
|
||||
}, [selectedTaskIds, projectId, archived, trackMixpanelEvent, dispatch]);
|
||||
|
||||
const handleBulkDelete = useCallback(async () => {
|
||||
if (!projectId) return;
|
||||
try {
|
||||
const body = {
|
||||
tasks: selectedTaskIds,
|
||||
project_id: projectId,
|
||||
};
|
||||
const res = await taskListBulkActionsApiService.deleteTasks(body, projectId);
|
||||
if (res.done) {
|
||||
trackMixpanelEvent(evt_project_task_list_bulk_delete);
|
||||
dispatch(deselectAll());
|
||||
dispatch(fetchTasksV3(projectId));
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('Error deleting tasks:', error);
|
||||
}
|
||||
}, [selectedTaskIds, projectId, trackMixpanelEvent, dispatch]);
|
||||
|
||||
// Additional handlers for new actions
|
||||
const handleBulkDuplicate = useCallback(async () => {
|
||||
// This would need to be implemented in the API service
|
||||
console.log('Bulk duplicate not yet implemented in API:', selectedTaskIds);
|
||||
}, [selectedTaskIds]);
|
||||
|
||||
const handleBulkExport = useCallback(async () => {
|
||||
// This would need to be implemented in the API service
|
||||
console.log('Bulk export not yet implemented in API:', selectedTaskIds);
|
||||
}, [selectedTaskIds]);
|
||||
|
||||
const handleBulkSetDueDate = useCallback(async (date: string) => {
|
||||
// This would need to be implemented in the API service
|
||||
console.log('Bulk set due date not yet implemented in API:', date, selectedTaskIds);
|
||||
}, [selectedTaskIds]);
|
||||
|
||||
// Cleanup effect
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
@@ -525,6 +779,25 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
|
||||
</DragOverlay>
|
||||
</DndContext>
|
||||
|
||||
{/* Optimized Bulk Action Bar */}
|
||||
<OptimizedBulkActionBar
|
||||
selectedTaskIds={selectedTaskIds}
|
||||
totalSelected={selectedTaskIds.length}
|
||||
projectId={projectId}
|
||||
onClearSelection={handleClearSelection}
|
||||
onBulkStatusChange={handleBulkStatusChange}
|
||||
onBulkPriorityChange={handleBulkPriorityChange}
|
||||
onBulkPhaseChange={handleBulkPhaseChange}
|
||||
onBulkAssignToMe={handleBulkAssignToMe}
|
||||
onBulkAssignMembers={handleBulkAssignMembers}
|
||||
onBulkAddLabels={handleBulkAddLabels}
|
||||
onBulkArchive={handleBulkArchive}
|
||||
onBulkDelete={handleBulkDelete}
|
||||
onBulkDuplicate={handleBulkDuplicate}
|
||||
onBulkExport={handleBulkExport}
|
||||
onBulkSetDueDate={handleBulkSetDueDate}
|
||||
/>
|
||||
|
||||
<style>{`
|
||||
/* Fixed height container - Asana style */
|
||||
.task-groups-container-fixed {
|
||||
|
||||
Reference in New Issue
Block a user