485 lines
15 KiB
TypeScript
485 lines
15 KiB
TypeScript
import {
|
|
Button,
|
|
Dropdown,
|
|
Flex,
|
|
Tag,
|
|
Tooltip,
|
|
Typography,
|
|
ArrowLeftOutlined,
|
|
BellFilled,
|
|
BellOutlined,
|
|
CalendarOutlined,
|
|
DownOutlined,
|
|
EditOutlined,
|
|
ImportOutlined,
|
|
SaveOutlined,
|
|
SettingOutlined,
|
|
SyncOutlined,
|
|
UsergroupAddOutlined,
|
|
} from '@/shared/antd-imports';
|
|
import { PageHeader } from '@ant-design/pro-components';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { useState, useCallback, useMemo, memo, useRef, useEffect } from 'react';
|
|
import { createPortal } from 'react-dom';
|
|
|
|
import { colors } from '@/styles/colors';
|
|
import { useAppDispatch } from '@/hooks/useAppDispatch';
|
|
import { useAppSelector } from '@/hooks/useAppSelector';
|
|
import { SocketEvents } from '@/shared/socket-events';
|
|
import { useAuthService } from '@/hooks/useAuth';
|
|
import { useSocket } from '@/socket/socketContext';
|
|
import {
|
|
setProject,
|
|
setImportTaskTemplateDrawerOpen,
|
|
setRefreshTimestamp,
|
|
getProject,
|
|
} from '@features/project/project.slice';
|
|
import {
|
|
addTask,
|
|
fetchTaskGroups,
|
|
fetchTaskListColumns,
|
|
IGroupBy,
|
|
} from '@features/tasks/tasks.slice';
|
|
import ProjectStatusIcon from '@/components/common/project-status-icon/project-status-icon';
|
|
import { formatDate } from '@/utils/timeUtils';
|
|
import { toggleSaveAsTemplateDrawer } from '@/features/projects/projectsSlice';
|
|
import SaveProjectAsTemplate from '@/components/save-project-as-template/save-project-as-template';
|
|
import {
|
|
fetchProjectData,
|
|
toggleProjectDrawer,
|
|
setProjectId,
|
|
} from '@/features/project/project-drawer.slice';
|
|
import { setSelectedTaskId, setShowTaskDrawer } from '@/features/task-drawer/task-drawer.slice';
|
|
import { ITaskCreateRequest } from '@/types/tasks/task-create-request.types';
|
|
import { DEFAULT_TASK_NAME, UNMAPPED } from '@/shared/constants';
|
|
import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
|
|
import { getGroupIdByGroupedColumn } from '@/services/task-list/taskList.service';
|
|
import logger from '@/utils/errorLogger';
|
|
import ImportTaskTemplate from '@/components/task-templates/import-task-template';
|
|
import ProjectDrawer from '@/components/projects/project-drawer/project-drawer';
|
|
import { toggleProjectMemberDrawer } from '@/features/projects/singleProject/members/projectMembersSlice';
|
|
import useIsProjectManager from '@/hooks/useIsProjectManager';
|
|
import useTabSearchParam from '@/hooks/useTabSearchParam';
|
|
import { addTaskCardToTheTop, fetchBoardTaskGroups } from '@/features/board/board-slice';
|
|
import { fetchPhasesByProjectId } from '@/features/projects/singleProject/phase/phases.slice';
|
|
import { fetchEnhancedKanbanGroups } from '@/features/enhanced-kanban/enhanced-kanban.slice';
|
|
import { fetchTasksV3 } from '@/features/task-management/task-management.slice';
|
|
|
|
const ProjectViewHeader = memo(() => {
|
|
const navigate = useNavigate();
|
|
const { t } = useTranslation('project-view/project-view-header');
|
|
const dispatch = useAppDispatch();
|
|
const { tab } = useTabSearchParam();
|
|
|
|
// Memoize auth service calls to prevent unnecessary re-evaluations
|
|
const authService = useAuthService();
|
|
const currentSession = useMemo(() => authService.getCurrentSession(), [authService]);
|
|
const isOwnerOrAdmin = useMemo(() => authService.isOwnerOrAdmin(), [authService]);
|
|
const isProjectManager = useIsProjectManager();
|
|
|
|
const { socket } = useSocket();
|
|
|
|
// Optimized selectors with shallow equality checks
|
|
const selectedProject = useAppSelector(state => state.projectReducer.project);
|
|
const projectId = useAppSelector(state => state.projectReducer.projectId);
|
|
const loadingGroups = useAppSelector(state => state.taskReducer.loadingGroups);
|
|
const groupBy = useAppSelector(state => state.taskReducer.groupBy);
|
|
|
|
const [creatingTask, setCreatingTask] = useState(false);
|
|
const [subscriptionLoading, setSubscriptionLoading] = useState(false);
|
|
|
|
// Use ref to track subscription timeout
|
|
const subscriptionTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
|
|
|
// Memoized refresh handler with optimized dependencies
|
|
const handleRefresh = useCallback(() => {
|
|
if (!projectId) return;
|
|
|
|
dispatch(getProject(projectId));
|
|
|
|
switch (tab) {
|
|
case 'tasks-list':
|
|
dispatch(fetchTaskListColumns(projectId));
|
|
dispatch(fetchPhasesByProjectId(projectId));
|
|
dispatch(fetchTaskGroups(projectId));
|
|
dispatch(fetchTasksV3(projectId));
|
|
break;
|
|
case 'board':
|
|
dispatch(fetchEnhancedKanbanGroups(projectId));
|
|
break;
|
|
case 'project-insights-member-overview':
|
|
case 'all-attachments':
|
|
case 'members':
|
|
case 'updates':
|
|
dispatch(setRefreshTimestamp());
|
|
break;
|
|
}
|
|
}, [dispatch, projectId, tab]);
|
|
|
|
// Optimized subscription handler with proper cleanup
|
|
const handleSubscribe = useCallback(() => {
|
|
if (!selectedProject?.id || !socket || subscriptionLoading) return;
|
|
|
|
try {
|
|
setSubscriptionLoading(true);
|
|
const newSubscriptionState = !selectedProject.subscribed;
|
|
|
|
// Clear any existing timeout
|
|
if (subscriptionTimeoutRef.current) {
|
|
clearTimeout(subscriptionTimeoutRef.current);
|
|
}
|
|
|
|
// Emit socket event
|
|
socket.emit(SocketEvents.PROJECT_SUBSCRIBERS_CHANGE.toString(), {
|
|
project_id: selectedProject.id,
|
|
user_id: currentSession?.id,
|
|
team_member_id: currentSession?.team_member_id,
|
|
mode: newSubscriptionState ? 0 : 1,
|
|
});
|
|
|
|
// Listen for response with cleanup
|
|
const handleResponse = (response: any) => {
|
|
try {
|
|
dispatch(
|
|
setProject({
|
|
...selectedProject,
|
|
subscribed: newSubscriptionState,
|
|
})
|
|
);
|
|
} catch (error) {
|
|
logger.error('Error handling project subscription response:', error);
|
|
dispatch(
|
|
setProject({
|
|
...selectedProject,
|
|
subscribed: selectedProject.subscribed,
|
|
})
|
|
);
|
|
} finally {
|
|
setSubscriptionLoading(false);
|
|
if (subscriptionTimeoutRef.current) {
|
|
clearTimeout(subscriptionTimeoutRef.current);
|
|
subscriptionTimeoutRef.current = null;
|
|
}
|
|
}
|
|
};
|
|
|
|
socket.once(SocketEvents.PROJECT_SUBSCRIBERS_CHANGE.toString(), handleResponse);
|
|
|
|
// Set timeout with ref tracking
|
|
subscriptionTimeoutRef.current = setTimeout(() => {
|
|
setSubscriptionLoading(false);
|
|
logger.error('Project subscription timeout - no response from server');
|
|
subscriptionTimeoutRef.current = null;
|
|
}, 5000);
|
|
} catch (error) {
|
|
logger.error('Error updating project subscription:', error);
|
|
setSubscriptionLoading(false);
|
|
}
|
|
}, [selectedProject, socket, subscriptionLoading, currentSession, dispatch]);
|
|
|
|
// Memoized settings handler
|
|
const handleSettingsClick = useCallback(() => {
|
|
if (selectedProject?.id) {
|
|
dispatch(setProjectId(selectedProject.id));
|
|
dispatch(fetchProjectData(selectedProject.id));
|
|
dispatch(toggleProjectDrawer());
|
|
}
|
|
}, [dispatch, selectedProject?.id]);
|
|
|
|
// Optimized task creation handler
|
|
const handleCreateTask = useCallback(() => {
|
|
if (!selectedProject?.id || !currentSession?.id || !socket) return;
|
|
|
|
try {
|
|
setCreatingTask(true);
|
|
|
|
const body: Partial<ITaskCreateRequest> = {
|
|
name: DEFAULT_TASK_NAME,
|
|
project_id: selectedProject.id,
|
|
reporter_id: currentSession.id,
|
|
team_id: currentSession.team_id,
|
|
};
|
|
|
|
const handleTaskCreated = (task: IProjectTask) => {
|
|
if (task.id) {
|
|
dispatch(setSelectedTaskId(task.id));
|
|
dispatch(setShowTaskDrawer(true));
|
|
|
|
const groupId = groupBy === IGroupBy.PHASE ? UNMAPPED : getGroupIdByGroupedColumn(task);
|
|
if (groupId) {
|
|
if (tab === 'board') {
|
|
dispatch(addTaskCardToTheTop({ sectionId: groupId, task }));
|
|
} else {
|
|
dispatch(addTask({ task, groupId }));
|
|
}
|
|
socket.emit(SocketEvents.GET_TASK_PROGRESS.toString(), task.id);
|
|
}
|
|
}
|
|
setCreatingTask(false);
|
|
};
|
|
|
|
socket.once(SocketEvents.QUICK_TASK.toString(), handleTaskCreated);
|
|
socket.emit(SocketEvents.QUICK_TASK.toString(), JSON.stringify(body));
|
|
} catch (error) {
|
|
logger.error('Error creating task', error);
|
|
setCreatingTask(false);
|
|
}
|
|
}, [selectedProject?.id, currentSession, socket, dispatch, groupBy, tab]);
|
|
|
|
// Memoized import task template handler
|
|
const handleImportTaskTemplate = useCallback(() => {
|
|
dispatch(setImportTaskTemplateDrawerOpen(true));
|
|
}, [dispatch]);
|
|
|
|
// Memoized navigation handler
|
|
const handleNavigateToProjects = useCallback(() => {
|
|
navigate('/worklenz/projects');
|
|
}, [navigate]);
|
|
|
|
// Memoized save as template handler
|
|
const handleSaveAsTemplate = useCallback(() => {
|
|
dispatch(toggleSaveAsTemplateDrawer());
|
|
}, [dispatch]);
|
|
|
|
// Memoized invite handler
|
|
const handleInvite = useCallback(() => {
|
|
dispatch(toggleProjectMemberDrawer());
|
|
}, [dispatch]);
|
|
|
|
// Memoized dropdown items
|
|
const dropdownItems = useMemo(
|
|
() => [
|
|
{
|
|
key: 'import',
|
|
label: (
|
|
<div style={{ width: '100%', margin: 0, padding: 0 }} onClick={handleImportTaskTemplate}>
|
|
<ImportOutlined /> {t('importTask')}
|
|
</div>
|
|
),
|
|
},
|
|
],
|
|
[handleImportTaskTemplate, t]
|
|
);
|
|
|
|
// Memoized project attributes with optimized date formatting
|
|
const projectAttributes = useMemo(() => {
|
|
if (!selectedProject) return null;
|
|
|
|
const elements = [];
|
|
|
|
if (selectedProject.category_id) {
|
|
elements.push(
|
|
<Tag
|
|
key="category"
|
|
color={colors.vibrantOrange}
|
|
style={{ borderRadius: 24, paddingInline: 8, margin: 0 }}
|
|
>
|
|
{selectedProject.category_name}
|
|
</Tag>
|
|
);
|
|
}
|
|
|
|
if (selectedProject.status) {
|
|
elements.push(
|
|
<Tooltip key="status" title={selectedProject.status}>
|
|
<ProjectStatusIcon
|
|
iconName={selectedProject.status_icon || ''}
|
|
color={selectedProject.status_color || ''}
|
|
/>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
if (selectedProject.start_date || selectedProject.end_date) {
|
|
const tooltipContent = (
|
|
<Typography.Text style={{ color: colors.white }}>
|
|
{selectedProject.start_date &&
|
|
`${t('startDate')}: ${formatDate(new Date(selectedProject.start_date))}`}
|
|
{selectedProject.end_date && (
|
|
<>
|
|
<br />
|
|
{`${t('endDate')}: ${formatDate(new Date(selectedProject.end_date))}`}
|
|
</>
|
|
)}
|
|
</Typography.Text>
|
|
);
|
|
|
|
elements.push(
|
|
<Tooltip key="dates" title={tooltipContent}>
|
|
<CalendarOutlined style={{ fontSize: 16 }} />
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
if (selectedProject.notes) {
|
|
elements.push(
|
|
<Typography.Text key="notes" type="secondary">
|
|
{selectedProject.notes}
|
|
</Typography.Text>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Flex gap={8} align="center">
|
|
{elements}
|
|
</Flex>
|
|
);
|
|
}, [selectedProject, t]);
|
|
|
|
// Memoized header actions with conditional rendering optimization
|
|
const headerActions = useMemo(() => {
|
|
const actions = [];
|
|
|
|
// Refresh button
|
|
actions.push(
|
|
<Tooltip key="refresh" title={t('refreshProject')}>
|
|
<Button
|
|
shape="circle"
|
|
icon={<SyncOutlined spin={loadingGroups} />}
|
|
onClick={handleRefresh}
|
|
/>
|
|
</Tooltip>
|
|
);
|
|
|
|
// Save as template (owner/admin only)
|
|
if (isOwnerOrAdmin) {
|
|
actions.push(
|
|
<Tooltip key="template" title={t('saveAsTemplate')}>
|
|
<Button shape="circle" icon={<SaveOutlined />} onClick={handleSaveAsTemplate} />
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
// Settings button
|
|
actions.push(
|
|
<Tooltip key="settings" title={t('projectSettings')}>
|
|
<Button shape="circle" icon={<SettingOutlined />} onClick={handleSettingsClick} />
|
|
</Tooltip>
|
|
);
|
|
|
|
// Subscribe button
|
|
actions.push(
|
|
<Tooltip key="subscribe" title={t('subscribe')}>
|
|
<Button
|
|
shape="round"
|
|
loading={subscriptionLoading}
|
|
icon={selectedProject?.subscribed ? <BellFilled /> : <BellOutlined />}
|
|
onClick={handleSubscribe}
|
|
>
|
|
{selectedProject?.subscribed ? t('unsubscribe') : t('subscribe')}
|
|
</Button>
|
|
</Tooltip>
|
|
);
|
|
|
|
// Invite button (owner/admin/project manager only)
|
|
if (isOwnerOrAdmin || isProjectManager) {
|
|
actions.push(
|
|
<Button key="invite" type="primary" icon={<UsergroupAddOutlined />} onClick={handleInvite}>
|
|
{t('invite')}
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
// Create task button
|
|
if (isOwnerOrAdmin) {
|
|
actions.push(
|
|
<Dropdown.Button
|
|
key="create-task-dropdown"
|
|
loading={creatingTask}
|
|
type="primary"
|
|
icon={<DownOutlined />}
|
|
menu={{ items: dropdownItems }}
|
|
trigger={['click']}
|
|
onClick={handleCreateTask}
|
|
>
|
|
<EditOutlined /> {t('createTask')}
|
|
</Dropdown.Button>
|
|
);
|
|
} else {
|
|
actions.push(
|
|
<Button
|
|
key="create-task"
|
|
loading={creatingTask}
|
|
type="primary"
|
|
icon={<EditOutlined />}
|
|
onClick={handleCreateTask}
|
|
>
|
|
{t('createTask')}
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Flex gap={8} align="center">
|
|
{actions}
|
|
</Flex>
|
|
);
|
|
}, [
|
|
loadingGroups,
|
|
handleRefresh,
|
|
isOwnerOrAdmin,
|
|
handleSaveAsTemplate,
|
|
handleSettingsClick,
|
|
t,
|
|
subscriptionLoading,
|
|
selectedProject?.subscribed,
|
|
handleSubscribe,
|
|
isProjectManager,
|
|
handleInvite,
|
|
creatingTask,
|
|
dropdownItems,
|
|
handleCreateTask,
|
|
]);
|
|
|
|
// Memoized page header title
|
|
const pageHeaderTitle = useMemo(
|
|
() => (
|
|
<Flex gap={8} align="center">
|
|
<ArrowLeftOutlined style={{ fontSize: 16 }} onClick={handleNavigateToProjects} />
|
|
<Typography.Title level={4} style={{ marginBlockEnd: 0, marginInlineStart: 12 }}>
|
|
{selectedProject?.name}
|
|
</Typography.Title>
|
|
{projectAttributes}
|
|
</Flex>
|
|
),
|
|
[handleNavigateToProjects, selectedProject?.name, projectAttributes]
|
|
);
|
|
|
|
// Memoized page header styles
|
|
const pageHeaderStyle = useMemo(
|
|
() => ({
|
|
paddingInline: 0,
|
|
marginBlockEnd: 12,
|
|
}),
|
|
[]
|
|
);
|
|
|
|
// Cleanup timeout on unmount
|
|
useEffect(() => {
|
|
return () => {
|
|
if (subscriptionTimeoutRef.current) {
|
|
clearTimeout(subscriptionTimeoutRef.current);
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<PageHeader
|
|
className="site-page-header"
|
|
title={pageHeaderTitle}
|
|
style={pageHeaderStyle}
|
|
extra={headerActions}
|
|
/>
|
|
{createPortal(<ProjectDrawer onClose={() => {}} />, document.body, 'project-drawer')}
|
|
{createPortal(<ImportTaskTemplate />, document.body, 'import-task-template')}
|
|
{createPortal(<SaveProjectAsTemplate />, document.body, 'save-project-as-template')}
|
|
</>
|
|
);
|
|
});
|
|
|
|
ProjectViewHeader.displayName = 'ProjectViewHeader';
|
|
|
|
export default ProjectViewHeader;
|