bo/worklenz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(task-management): add configuration buttons and permission checks to task filters

Browse Source 
- Introduced ConfigPhaseButton and CreateStatusButton components for enhanced task filtering options.
- Implemented permission checks to conditionally render configuration buttons based on user roles (owner/admin or project manager).
- Removed the TaskManagementDemo component as it was no longer needed, streamlining the codebase.
This commit is contained in:
chamikaJ
2025-07-02 16:11:48 +05:30
parent a1e8a4c464
commit 3bef18901a
2 changed files with 18 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
worklenz-frontend/src/components/task-management/improved-task-filters.tsx
View File

@@ -56,6 +56,12 @@ import {
setBoardLabels, setBoardLabels,
} from '@/features/board/board-slice'; } from '@/features/board/board-slice';
// Import ConfigPhaseButton and CreateStatusButton components
import ConfigPhaseButton from '@/features/projects/singleProject/phase/ConfigPhaseButton';
import CreateStatusButton from '@/components/project-task-filters/create-status-button/create-status-button';
import { useAuthService } from '@/hooks/useAuth';
import useIsProjectManager from '@/hooks/useIsProjectManager';
// Performance constants // Performance constants
const FILTER_DEBOUNCE_DELAY = 300; // ms const FILTER_DEBOUNCE_DELAY = 300; // ms
const SEARCH_DEBOUNCE_DELAY = 500; // ms const SEARCH_DEBOUNCE_DELAY = 500; // ms
@@ -324,6 +330,10 @@ const FilterDropdown: React.FC<{
isDarkMode: boolean; isDarkMode: boolean;
className?: string; className?: string;
}> = ({ section, onSelectionChange, isOpen, onToggle, themeClasses, isDarkMode, className = '' }) => { }> = ({ section, onSelectionChange, isOpen, onToggle, themeClasses, isDarkMode, className = '' }) => {
// Add permission checks for groupBy section
const isOwnerOrAdmin = useAuthService().isOwnerOrAdmin();
const isProjectManager = useIsProjectManager();
const canConfigure = isOwnerOrAdmin || isProjectManager;
const [searchTerm, setSearchTerm] = useState(''); const [searchTerm, setSearchTerm] = useState('');
const [filteredOptions, setFilteredOptions] = useState(section.options); const [filteredOptions, setFilteredOptions] = useState(section.options);
const dropdownRef = useRef<HTMLDivElement>(null); const dropdownRef = useRef<HTMLDivElement>(null);
@@ -412,6 +422,14 @@ const FilterDropdown: React.FC<{
/> />
</button> </button>
{/* Configuration Buttons for GroupBy section */}
{section.id === 'groupBy' && canConfigure && (
<div className="inline-flex items-center gap-1 ml-2">
{section.selectedValues[0] === 'phase' && <ConfigPhaseButton />}
{section.selectedValues[0] === 'status' && <CreateStatusButton />}
</div>
)}
{/* Dropdown Panel */} {/* Dropdown Panel */}
{isOpen && ( {isOpen && (
<div className={`absolute top-full left-0 z-50 mt-1 w-64 ${themeClasses.dropdownBg} rounded-md shadow-sm border ${themeClasses.dropdownBorder}`}> <div className={`absolute top-full left-0 z-50 mt-1 w-64 ${themeClasses.dropdownBg} rounded-md shadow-sm border ${themeClasses.dropdownBorder}`}>

78
worklenz-frontend/src/pages/TaskManagementDemo.tsx
View File

@@ -1,78 +0,0 @@
import React, { useEffect } from 'react';
import { Layout, Typography, Card, Space, Alert } from 'antd';
import { useDispatch } from 'react-redux';
import TaskListBoard from '@/components/task-management/task-list-board';
import { AppDispatch } from '@/app/store';
const { Header, Content } = Layout;
const { Title, Paragraph } = Typography;
const TaskManagementDemo: React.FC = () => {
const dispatch = useDispatch<AppDispatch>();
// Mock project ID for demo
const demoProjectId = 'demo-project-123';
useEffect(() => {
// Initialize demo data if needed
// You might want to populate some sample tasks here for demonstration
}, [dispatch]);
return (
<Layout className="min-h-screen bg-gray-50">
<Header className="bg-white shadow-sm">
<div className="max-w-7xl mx-auto px-4">
<Title level={2} className="mb-0 text-gray-800">
Enhanced Task Management System
</Title>
</div>
</Header>
<Content className="max-w-7xl mx-auto px-4 py-6 w-full">
<Space direction="vertical" size="large" className="w-full">
{/* Introduction */}
<Card>
<Title level={3}>Task Management Features</Title>
<Paragraph>
This enhanced task management system provides a comprehensive interface for managing tasks
with the following key features:
</Paragraph>
<ul className="list-disc list-inside space-y-1 text-gray-700">
<li><strong>Dynamic Grouping:</strong> Group tasks by Status, Priority, or Phase</li>
<li><strong>Drag & Drop:</strong> Reorder tasks within groups or move between groups</li>
<li><strong>Multi-select:</strong> Select multiple tasks for bulk operations</li>
<li><strong>Bulk Actions:</strong> Change status, priority, assignees, or delete multiple tasks</li>
<li><strong>Subtasks:</strong> Expandable subtask support with progress tracking</li>
<li><strong>Real-time Updates:</strong> Live updates via WebSocket connections</li>
<li><strong>Rich Task Display:</strong> Progress bars, assignees, labels, due dates, and more</li>
</ul>
</Card>
{/* Usage Instructions */}
<Alert
message="Demo Instructions"
description={
<div>
<p><strong>Grouping:</strong> Use the dropdown to switch between Status, Priority, and Phase grouping.</p>
<p><strong>Drag & Drop:</strong> Click and drag tasks to reorder within groups or move between groups.</p>
<p><strong>Selection:</strong> Click checkboxes to select tasks, then use bulk actions in the blue bar.</p>
<p><strong>Subtasks:</strong> Click the +/- buttons next to task names to expand/collapse subtasks.</p>
</div>
}
type="info"
showIcon
className="mb-4"
/>
{/* Task List Board */}
<TaskListBoard
projectId={demoProjectId}
className="task-management-demo"
/>
</Space>
</Content>
</Layout>
);
};
export default TaskManagementDemo;