refactor(task-management): enhance empty state visuals and improve layout
- Updated the empty state message styling in VirtualizedTaskList and TaskGroup components for better visibility and user experience. - Adjusted padding and height in various components to create a more consistent and visually appealing layout. - Removed console log statements from TaskPhaseDropdown to clean up the codebase.
This commit is contained in:
@@ -73,8 +73,17 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = ({
|
|||||||
|
|
||||||
if (tasks.length === 0) {
|
if (tasks.length === 0) {
|
||||||
return (
|
return (
|
||||||
<div className="virtualized-empty-state" style={{ height }}>
|
<div className="virtualized-empty-state" style={{ height, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||||
<div className="empty-message">No tasks in this group</div>
|
<div className="empty-message" style={{
|
||||||
|
padding: '32px 24px',
|
||||||
|
color: '#8c8c8c',
|
||||||
|
fontSize: '14px',
|
||||||
|
backgroundColor: '#fafafa',
|
||||||
|
borderRadius: '8px',
|
||||||
|
border: '1px solid #f0f0f0'
|
||||||
|
}}>
|
||||||
|
No tasks in this group
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -173,7 +173,7 @@ const KanbanGroup: React.FC<TaskGroupProps> = ({
|
|||||||
.kanban-group-empty {
|
.kanban-group-empty {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #bfbfbf;
|
color: #bfbfbf;
|
||||||
padding: 32px 0;
|
padding: 48px 16px;
|
||||||
}
|
}
|
||||||
.kanban-group-add-task {
|
.kanban-group-add-task {
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
|
|||||||
@@ -54,6 +54,7 @@ import {
|
|||||||
setCustomColumnModalAttributes,
|
setCustomColumnModalAttributes,
|
||||||
toggleCustomColumnModalOpen,
|
toggleCustomColumnModalOpen,
|
||||||
} from '@/features/projects/singleProject/task-list-custom-columns/task-list-custom-columns-slice';
|
} from '@/features/projects/singleProject/task-list-custom-columns/task-list-custom-columns-slice';
|
||||||
|
import { fetchPhasesByProjectId } from '@/features/projects/singleProject/phase/phases.slice';
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
import TaskRowWithSubtasks from './TaskRowWithSubtasks';
|
import TaskRowWithSubtasks from './TaskRowWithSubtasks';
|
||||||
@@ -212,6 +213,7 @@ const TaskListV2Section: React.FC = () => {
|
|||||||
if (urlProjectId) {
|
if (urlProjectId) {
|
||||||
dispatch(fetchTasksV3(urlProjectId));
|
dispatch(fetchTasksV3(urlProjectId));
|
||||||
dispatch(fetchTaskListColumns(urlProjectId));
|
dispatch(fetchTaskListColumns(urlProjectId));
|
||||||
|
dispatch(fetchPhasesByProjectId(urlProjectId));
|
||||||
}
|
}
|
||||||
}, [dispatch, urlProjectId]);
|
}, [dispatch, urlProjectId]);
|
||||||
|
|
||||||
@@ -463,7 +465,7 @@ const TaskListV2Section: React.FC = () => {
|
|||||||
/>
|
/>
|
||||||
{isGroupEmpty && !isGroupCollapsed && (
|
{isGroupEmpty && !isGroupCollapsed && (
|
||||||
<div className="relative w-full">
|
<div className="relative w-full">
|
||||||
<div className="flex items-center min-w-max px-1 py-3">
|
<div className="flex items-center min-w-max px-1 py-6">
|
||||||
{visibleColumns.map((column, index) => {
|
{visibleColumns.map((column, index) => {
|
||||||
const emptyColumnStyle = {
|
const emptyColumnStyle = {
|
||||||
width: column.width,
|
width: column.width,
|
||||||
@@ -482,7 +484,7 @@ const TaskListV2Section: React.FC = () => {
|
|||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
<div className="absolute left-4 top-1/2 transform -translate-y-1/2 flex items-center">
|
<div className="absolute left-4 top-1/2 transform -translate-y-1/2 flex items-center">
|
||||||
<div className="text-sm text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-900 px-3 py-1.5 rounded-md border border-gray-200 dark:border-gray-700 shadow-sm">
|
<div className="text-sm text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-900 px-4 py-3 rounded-md border border-gray-200 dark:border-gray-700 shadow-sm">
|
||||||
{t('noTasksInGroup')}
|
{t('noTasksInGroup')}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -312,7 +312,7 @@ const TaskGroup: React.FC<TaskGroupProps> = React.memo(
|
|||||||
{groupTasks.length === 0 ? (
|
{groupTasks.length === 0 ? (
|
||||||
<div className="task-group-empty">
|
<div className="task-group-empty">
|
||||||
<div className="task-table-fixed-columns">
|
<div className="task-table-fixed-columns">
|
||||||
<div style={{ width: '380px', padding: '20px 12px' }}>
|
<div style={{ width: '380px', padding: '32px 12px' }}>
|
||||||
<div className="text-center text-gray-500">
|
<div className="text-center text-gray-500">
|
||||||
<Text type="secondary">No tasks in this group</Text>
|
<Text type="secondary">No tasks in this group</Text>
|
||||||
<br />
|
<br />
|
||||||
@@ -487,7 +487,7 @@ const TaskGroup: React.FC<TaskGroupProps> = React.memo(
|
|||||||
|
|
||||||
.task-group-empty {
|
.task-group-empty {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 80px;
|
height: 120px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: var(--task-bg-primary, white);
|
background: var(--task-bg-primary, white);
|
||||||
transition: background-color 0.3s ease;
|
transition: background-color 0.3s ease;
|
||||||
|
|||||||
@@ -35,8 +35,6 @@ const TaskPhaseDropdown: React.FC<TaskPhaseDropdownProps> = ({
|
|||||||
(phaseId: string, phaseName: string) => {
|
(phaseId: string, phaseName: string) => {
|
||||||
if (!task.id || !phaseId || !connected) return;
|
if (!task.id || !phaseId || !connected) return;
|
||||||
|
|
||||||
console.log('🎯 Phase change initiated:', { taskId: task.id, phaseId, phaseName });
|
|
||||||
|
|
||||||
socket?.emit(SocketEvents.TASK_PHASE_CHANGE.toString(), {
|
socket?.emit(SocketEvents.TASK_PHASE_CHANGE.toString(), {
|
||||||
task_id: task.id,
|
task_id: task.id,
|
||||||
phase_id: phaseId,
|
phase_id: phaseId,
|
||||||
@@ -51,8 +49,6 @@ const TaskPhaseDropdown: React.FC<TaskPhaseDropdownProps> = ({
|
|||||||
const handlePhaseClear = useCallback(() => {
|
const handlePhaseClear = useCallback(() => {
|
||||||
if (!task.id || !connected) return;
|
if (!task.id || !connected) return;
|
||||||
|
|
||||||
console.log('🎯 Phase clear initiated:', { taskId: task.id });
|
|
||||||
|
|
||||||
socket?.emit(SocketEvents.TASK_PHASE_CHANGE.toString(), {
|
socket?.emit(SocketEvents.TASK_PHASE_CHANGE.toString(), {
|
||||||
task_id: task.id,
|
task_id: task.id,
|
||||||
phase_id: null,
|
phase_id: null,
|
||||||
|
|||||||
Reference in New Issue
Block a user