refactor(task-management): enhance TaskGroup and TaskRow components with column visibility and improved layout
- Integrated Redux for column visibility management in TaskGroup and TaskRow components. - Simplified the rendering of task details based on column visibility settings. - Updated styling for better consistency and responsiveness across task rows and groups. - Removed unused imports and components to streamline the codebase.
This commit is contained in:
chamiakJ
@@ -1,17 +1,15 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useDroppable } from '@dnd-kit/core';
|
||||
import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
|
||||
import { Button, Typography, Badge, Space, Tooltip } from 'antd';
|
||||
import {
|
||||
CaretRightOutlined,
|
||||
CaretDownOutlined,
|
||||
PlusOutlined,
|
||||
MoreOutlined,
|
||||
} from '@ant-design/icons';
|
||||
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 } from '@/features/tasks/tasks.slice';
|
||||
import { IGroupBy, COLUMN_KEYS } from '@/features/tasks/tasks.slice';
|
||||
import { RootState } from '@/app/store';
|
||||
import TaskRow from './TaskRow';
|
||||
import AddTaskListRow from '@/pages/projects/projectView/taskList/task-list-table/task-list-table-rows/add-task-list-row';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
@@ -46,12 +44,21 @@ const TaskGroup: React.FC<TaskGroupProps> = ({
|
||||
},
|
||||
});
|
||||
|
||||
// Get column visibility from Redux store
|
||||
const columns = useSelector((state: RootState) => state.taskReducer.columns);
|
||||
|
||||
// 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!);
|
||||
|
||||
// Calculate group statistics
|
||||
const completedTasks = group.tasks.filter(task =>
|
||||
task.status_category?.is_done || task.complete_ratio === 100
|
||||
const completedTasks = group.tasks.filter(
|
||||
task => task.status_category?.is_done || task.complete_ratio === 100
|
||||
).length;
|
||||
const totalTasks = group.tasks.length;
|
||||
const completionRate = totalTasks > 0 ? Math.round((completedTasks / totalTasks) * 100) : 0;
|
||||
@@ -59,16 +66,19 @@ const TaskGroup: React.FC<TaskGroupProps> = ({
|
||||
// Get group color based on grouping type
|
||||
const getGroupColor = () => {
|
||||
if (group.color_code) return group.color_code;
|
||||
|
||||
|
||||
// Fallback colors based on group value
|
||||
switch (currentGrouping) {
|
||||
case 'status':
|
||||
return group.id === 'todo' ? '#faad14' :
|
||||
group.id === 'doing' ? '#1890ff' : '#52c41a';
|
||||
return group.id === 'todo' ? '#faad14' : group.id === 'doing' ? '#1890ff' : '#52c41a';
|
||||
case 'priority':
|
||||
return group.id === 'critical' ? '#ff4d4f' :
|
||||
group.id === 'high' ? '#fa8c16' :
|
||||
group.id === 'medium' ? '#faad14' : '#52c41a';
|
||||
return group.id === 'critical'
|
||||
? '#ff4d4f'
|
||||
: group.id === 'high'
|
||||
? '#fa8c16'
|
||||
: group.id === 'medium'
|
||||
? '#faad14'
|
||||
: '#52c41a';
|
||||
case 'phase':
|
||||
return '#722ed1';
|
||||
default:
|
||||
@@ -86,7 +96,7 @@ const TaskGroup: React.FC<TaskGroupProps> = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
className={`task-group ${isOver ? 'drag-over' : ''}`}
|
||||
style={{
|
||||
@@ -96,83 +106,19 @@ const TaskGroup: React.FC<TaskGroupProps> = ({
|
||||
{/* Group Header Row */}
|
||||
<div className="task-group-header">
|
||||
<div className="task-group-header-row">
|
||||
<div className="task-table-fixed-columns">
|
||||
<div className="task-table-cell task-table-cell-drag" style={{ width: '40px' }}>
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={isCollapsed ? <CaretRightOutlined /> : <CaretDownOutlined />}
|
||||
onClick={handleToggleCollapse}
|
||||
className="p-0 w-6 h-6 flex items-center justify-center"
|
||||
/>
|
||||
</div>
|
||||
<div className="task-table-cell task-table-cell-checkbox" style={{ width: '40px' }}>
|
||||
<div
|
||||
className="w-3 h-3 rounded-full"
|
||||
style={{ backgroundColor: getGroupColor() }}
|
||||
/>
|
||||
</div>
|
||||
<div className="task-table-cell task-table-cell-key" style={{ width: '80px' }}></div>
|
||||
<div className="task-table-cell task-table-cell-task" style={{ width: '220px' }}>
|
||||
<div className="flex items-center space-x-2 flex-1">
|
||||
<Text strong className="text-sm">
|
||||
{group.name}
|
||||
</Text>
|
||||
<Badge count={totalTasks} showZero style={{ backgroundColor: '#f0f0f0', color: '#666' }} />
|
||||
{completionRate > 0 && (
|
||||
<Text type="secondary" className="text-xs">
|
||||
{completionRate}% complete
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="task-table-scrollable-columns">
|
||||
<div className="task-table-cell" style={{ width: '120px' }}></div>
|
||||
<div className="task-table-cell" style={{ width: '150px' }}></div>
|
||||
<div className="task-table-cell" style={{ width: '150px' }}></div>
|
||||
<div className="task-table-cell" style={{ width: '100px' }}></div>
|
||||
<div className="task-table-cell" style={{ width: '100px' }}></div>
|
||||
<div className="task-table-cell" style={{ width: '120px' }}>
|
||||
<Space>
|
||||
<Tooltip title="Add task to this group">
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={handleAddTask}
|
||||
className="opacity-60 hover:opacity-100"
|
||||
/>
|
||||
</Tooltip>
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<MoreOutlined />}
|
||||
className="opacity-60 hover:opacity-100"
|
||||
/>
|
||||
</Space>
|
||||
</div>
|
||||
<div className="flex items-center p-3">
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={isCollapsed ? <RightOutlined /> : <DownOutlined />}
|
||||
onClick={handleToggleCollapse}
|
||||
className="p-0 w-6 h-6 flex items-center justify-center mr-2"
|
||||
/>
|
||||
<Text strong className="text-sm">
|
||||
{group.name} ({totalTasks})
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
{totalTasks > 0 && !isCollapsed && (
|
||||
<div className="task-group-progress">
|
||||
<div className="task-table-fixed-columns">
|
||||
<div style={{ width: '380px', padding: '0 12px' }}>
|
||||
<div className="w-full bg-gray-200 rounded-full h-1">
|
||||
<div
|
||||
className="h-1 rounded-full transition-all duration-300"
|
||||
style={{
|
||||
width: `${completionRate}%`,
|
||||
backgroundColor: getGroupColor(),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Column Headers */}
|
||||
@@ -180,8 +126,14 @@ const TaskGroup: React.FC<TaskGroupProps> = ({
|
||||
<div className="task-group-column-headers">
|
||||
<div className="task-group-column-headers-row">
|
||||
<div className="task-table-fixed-columns">
|
||||
<div className="task-table-cell task-table-header-cell" style={{ width: '40px' }}></div>
|
||||
<div className="task-table-cell task-table-header-cell" style={{ width: '40px' }}></div>
|
||||
<div
|
||||
className="task-table-cell task-table-header-cell"
|
||||
style={{ width: '40px' }}
|
||||
></div>
|
||||
<div
|
||||
className="task-table-cell task-table-header-cell"
|
||||
style={{ width: '40px' }}
|
||||
></div>
|
||||
<div className="task-table-cell task-table-header-cell" style={{ width: '80px' }}>
|
||||
<Text className="column-header-text">Key</Text>
|
||||
</div>
|
||||
@@ -190,24 +142,36 @@ const TaskGroup: React.FC<TaskGroupProps> = ({
|
||||
</div>
|
||||
</div>
|
||||
<div className="task-table-scrollable-columns">
|
||||
<div className="task-table-cell task-table-header-cell" style={{ width: '120px' }}>
|
||||
<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: '150px' }}>
|
||||
<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>
|
||||
{isColumnVisible(COLUMN_KEYS.PROGRESS) && (
|
||||
<div className="task-table-cell task-table-header-cell" style={{ width: '90px' }}>
|
||||
<Text className="column-header-text">Progress</Text>
|
||||
</div>
|
||||
)}
|
||||
{isColumnVisible(COLUMN_KEYS.ASSIGNEES) && (
|
||||
<div className="task-table-cell task-table-header-cell" style={{ width: '150px' }}>
|
||||
<Text className="column-header-text">Members</Text>
|
||||
</div>
|
||||
)}
|
||||
{isColumnVisible(COLUMN_KEYS.LABELS) && (
|
||||
<div className="task-table-cell task-table-header-cell" style={{ width: '150px' }}>
|
||||
<Text className="column-header-text">Labels</Text>
|
||||
</div>
|
||||
)}
|
||||
{isColumnVisible(COLUMN_KEYS.STATUS) && (
|
||||
<div className="task-table-cell task-table-header-cell" style={{ width: '100px' }}>
|
||||
<Text className="column-header-text">Status</Text>
|
||||
</div>
|
||||
)}
|
||||
{isColumnVisible(COLUMN_KEYS.PRIORITY) && (
|
||||
<div className="task-table-cell task-table-header-cell" style={{ width: '100px' }}>
|
||||
<Text className="column-header-text">Priority</Text>
|
||||
</div>
|
||||
)}
|
||||
{isColumnVisible(COLUMN_KEYS.TIME_TRACKING) && (
|
||||
<div className="task-table-cell task-table-header-cell" style={{ width: '120px' }}>
|
||||
<Text className="column-header-text">Time Tracking</Text>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -254,6 +218,11 @@ const TaskGroup: React.FC<TaskGroupProps> = ({
|
||||
</div>
|
||||
</SortableContext>
|
||||
)}
|
||||
|
||||
{/* Add Task Row - Always show when not collapsed */}
|
||||
<div className="task-group-add-task">
|
||||
<AddTaskListRow groupId={group.id} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -280,8 +249,8 @@ const TaskGroup: React.FC<TaskGroupProps> = ({
|
||||
|
||||
.task-group-header-row {
|
||||
display: flex;
|
||||
height: 42px;
|
||||
max-height: 42px;
|
||||
height: 40px;
|
||||
max-height: 40px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -302,8 +271,8 @@ const TaskGroup: React.FC<TaskGroupProps> = ({
|
||||
|
||||
.task-group-column-headers-row {
|
||||
display: flex;
|
||||
height: 32px;
|
||||
max-height: 32px;
|
||||
height: 40px;
|
||||
max-height: 40px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -347,6 +316,21 @@ const TaskGroup: React.FC<TaskGroupProps> = ({
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.task-group-add-task {
|
||||
background: var(--task-bg-primary, white);
|
||||
border-top: 1px solid var(--task-border-secondary, #f0f0f0);
|
||||
transition: all 0.3s ease;
|
||||
padding: 0 12px;
|
||||
width: 100%;
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.task-group-add-task:hover {
|
||||
background: var(--task-hover-bg, #fafafa);
|
||||
}
|
||||
|
||||
.task-table-fixed-columns {
|
||||
display: flex;
|
||||
background: inherit;
|
||||
@@ -369,9 +353,9 @@ const TaskGroup: React.FC<TaskGroupProps> = ({
|
||||
border-right: 1px solid var(--task-border-secondary, #f0f0f0);
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
height: 42px;
|
||||
max-height: 42px;
|
||||
min-height: 42px;
|
||||
height: 40px;
|
||||
max-height: 40px;
|
||||
min-height: 40px;
|
||||
overflow: hidden;
|
||||
color: var(--task-text-primary, #262626);
|
||||
transition: all 0.3s ease;
|
||||
@@ -408,4 +392,4 @@ const TaskGroup: React.FC<TaskGroupProps> = ({
|
||||
);
|
||||
};
|
||||
|
||||
export default TaskGroup;
|
||||
export default TaskGroup;
|
||||
|
||||
@@ -13,30 +13,24 @@ import {
|
||||
useSensors,
|
||||
} from '@dnd-kit/core';
|
||||
import {
|
||||
SortableContext,
|
||||
verticalListSortingStrategy,
|
||||
sortableKeyboardCoordinates,
|
||||
} from '@dnd-kit/sortable';
|
||||
import { Card, Button, Select, Space, Typography, Spin, Empty } from 'antd';
|
||||
import { ExpandOutlined, CompressOutlined, PlusOutlined } from '@ant-design/icons';
|
||||
import { Card, Spin, Empty } from 'antd';
|
||||
import { RootState } from '@/app/store';
|
||||
import {
|
||||
IGroupBy,
|
||||
GROUP_BY_OPTIONS,
|
||||
setGroup,
|
||||
fetchTaskGroups,
|
||||
reorderTasks,
|
||||
} from '@/features/tasks/tasks.slice';
|
||||
import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
|
||||
import { ITaskListGroup } from '@/types/tasks/taskList.types';
|
||||
import TaskGroup from './TaskGroup';
|
||||
import TaskRow from './TaskRow';
|
||||
import BulkActionBar from './BulkActionBar';
|
||||
import GroupingSelector from './GroupingSelector';
|
||||
import { AppDispatch } from '@/app/store';
|
||||
|
||||
const { Title } = Typography;
|
||||
const { Option } = Select;
|
||||
// Import the TaskListFilters component
|
||||
const TaskListFilters = React.lazy(() => import('@/pages/projects/projectView/taskList/task-list-filters/task-list-filters'));
|
||||
|
||||
interface TaskListBoardProps {
|
||||
projectId: string;
|
||||
@@ -200,21 +194,7 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
|
||||
}));
|
||||
};
|
||||
|
||||
const handleCollapseAll = () => {
|
||||
// This would need to be implemented in the tasks slice
|
||||
console.log('Collapse all groups');
|
||||
};
|
||||
|
||||
const handleExpandAll = () => {
|
||||
// This would need to be implemented in the tasks slice
|
||||
console.log('Expand all groups');
|
||||
};
|
||||
|
||||
const handleRefresh = () => {
|
||||
if (projectId) {
|
||||
dispatch(fetchTaskGroups(projectId));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectTask = (taskId: string, selected: boolean) => {
|
||||
setSelectedTaskIds(prev => {
|
||||
@@ -244,48 +224,15 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
|
||||
|
||||
return (
|
||||
<div className={`task-list-board ${className}`}>
|
||||
{/* Header Controls */}
|
||||
{/* Task Filters */}
|
||||
<Card
|
||||
size="small"
|
||||
className="mb-4"
|
||||
styles={{ body: { padding: '12px 16px' } }}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Title level={4} className="mb-0">
|
||||
Tasks ({totalTasksCount})
|
||||
</Title>
|
||||
|
||||
<GroupingSelector
|
||||
currentGrouping={groupBy}
|
||||
onChange={handleGroupingChange}
|
||||
options={GROUP_BY_OPTIONS}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Space>
|
||||
<Button
|
||||
size="small"
|
||||
icon={<CompressOutlined />}
|
||||
onClick={handleCollapseAll}
|
||||
title="Collapse All Groups"
|
||||
/>
|
||||
<Button
|
||||
size="small"
|
||||
icon={<ExpandOutlined />}
|
||||
onClick={handleExpandAll}
|
||||
title="Expand All Groups"
|
||||
/>
|
||||
<Button
|
||||
size="small"
|
||||
onClick={handleRefresh}
|
||||
loading={loadingGroups}
|
||||
title="Refresh"
|
||||
>
|
||||
Refresh
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
<React.Suspense fallback={<div>Loading filters...</div>}>
|
||||
<TaskListFilters position="list" />
|
||||
</React.Suspense>
|
||||
</Card>
|
||||
|
||||
{/* Bulk Action Bar */}
|
||||
@@ -356,8 +303,7 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
|
||||
overflow-x: auto;
|
||||
max-height: calc(100vh - 300px);
|
||||
overflow-y: auto;
|
||||
background: var(--task-bg-secondary, #f5f5f5);
|
||||
padding: 16px;
|
||||
padding: 8px 8px 8px 0;
|
||||
border-radius: 8px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React 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,
|
||||
@@ -10,7 +11,8 @@ import {
|
||||
ClockCircleOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
|
||||
import { IGroupBy } from '@/features/tasks/tasks.slice';
|
||||
import { IGroupBy, COLUMN_KEYS } from '@/features/tasks/tasks.slice';
|
||||
import { RootState } from '@/app/store';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
@@ -54,6 +56,15 @@ const TaskRow: React.FC<TaskRowProps> = ({
|
||||
disabled: isDragOverlay,
|
||||
});
|
||||
|
||||
// Get column visibility from Redux store
|
||||
const columns = useSelector((state: RootState) => state.taskReducer.columns);
|
||||
|
||||
// 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
|
||||
};
|
||||
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
@@ -156,117 +167,131 @@ const TaskRow: React.FC<TaskRowProps> = ({
|
||||
{/* Scrollable Columns */}
|
||||
<div className="task-table-scrollable-columns">
|
||||
{/* Progress */}
|
||||
<div className="task-table-cell" style={{ width: '120px' }}>
|
||||
{task.complete_ratio !== undefined && task.complete_ratio >= 0 && (
|
||||
<div className="task-progress">
|
||||
<Progress
|
||||
percent={task.complete_ratio}
|
||||
size="small"
|
||||
showInfo={false}
|
||||
strokeColor={task.complete_ratio === 100 ? '#52c41a' : '#1890ff'}
|
||||
/>
|
||||
<Text className="task-progress-text">{task.complete_ratio}%</Text>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Members */}
|
||||
<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>
|
||||
|
||||
{/* 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>
|
||||
|
||||
{/* 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>
|
||||
|
||||
{/* 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>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 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>
|
||||
{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>
|
||||
)}
|
||||
{/* 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>
|
||||
)}
|
||||
|
||||
{/* 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>
|
||||
)}
|
||||
|
||||
{/* 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>
|
||||
)}
|
||||
|
||||
{/* 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>
|
||||
)}
|
||||
|
||||
{/* 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>
|
||||
)}
|
||||
</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>
|
||||
@@ -313,8 +338,8 @@ const TaskRow: React.FC<TaskRowProps> = ({
|
||||
|
||||
.task-row-content {
|
||||
display: flex;
|
||||
height: 42px;
|
||||
max-height: 42px;
|
||||
height: 40px;
|
||||
max-height: 40px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -340,9 +365,9 @@ const TaskRow: React.FC<TaskRowProps> = ({
|
||||
border-right: 1px solid var(--task-border-secondary, #f0f0f0);
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
height: 42px;
|
||||
max-height: 42px;
|
||||
min-height: 42px;
|
||||
height: 40px;
|
||||
max-height: 40px;
|
||||
min-height: 40px;
|
||||
overflow: hidden;
|
||||
color: var(--task-text-primary, #262626);
|
||||
transition: all 0.3s ease;
|
||||
@@ -441,13 +466,13 @@ const TaskRow: React.FC<TaskRowProps> = ({
|
||||
.task-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.task-progress .ant-progress {
|
||||
flex: 1;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.task-progress-text {
|
||||
|
||||
Reference in New Issue
Block a user