Merge branch 'release-v2.1.4' of https://github.com/Worklenz/worklenz into feature/team-utilization
This commit is contained in:
chamikaJ
@@ -11,8 +11,10 @@ import { useAuthService } from '@/hooks/useAuth';
|
||||
import { Avatar, Button, Checkbox } from '@/components';
|
||||
import { sortTeamMembers } from '@/utils/sort-team-members';
|
||||
import { useAppDispatch } from '@/hooks/useAppDispatch';
|
||||
import { toggleProjectMemberDrawer } from '@/features/projects/singleProject/members/projectMembersSlice';
|
||||
import { setIsFromAssigner, toggleProjectMemberDrawer } from '@/features/projects/singleProject/members/projectMembersSlice';
|
||||
import { updateEnhancedKanbanTaskAssignees } from '@/features/enhanced-kanban/enhanced-kanban.slice';
|
||||
import useIsProjectManager from '@/hooks/useIsProjectManager';
|
||||
import { useAuthStatus } from '@/hooks/useAuthStatus';
|
||||
|
||||
interface AssigneeSelectorProps {
|
||||
task: IProjectTask;
|
||||
@@ -42,6 +44,8 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
|
||||
const currentSession = useAuthService().getCurrentSession();
|
||||
const { socket } = useSocket();
|
||||
const dispatch = useAppDispatch();
|
||||
const { isAdmin } = useAuthStatus();
|
||||
const isProjectManager = useIsProjectManager();
|
||||
|
||||
const filteredMembers = useMemo(() => {
|
||||
return teamMembers?.data?.filter(member =>
|
||||
@@ -63,12 +67,8 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
|
||||
// Close dropdown when clicking outside and handle scroll
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (
|
||||
dropdownRef.current &&
|
||||
!dropdownRef.current.contains(event.target as Node) &&
|
||||
buttonRef.current &&
|
||||
!buttonRef.current.contains(event.target as Node)
|
||||
) {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node) &&
|
||||
buttonRef.current && !buttonRef.current.contains(event.target as Node)) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
@@ -78,9 +78,7 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
|
||||
// Check if the button is still visible in the viewport
|
||||
if (buttonRef.current) {
|
||||
const rect = buttonRef.current.getBoundingClientRect();
|
||||
const isVisible =
|
||||
rect.top >= 0 &&
|
||||
rect.left >= 0 &&
|
||||
const isVisible = rect.top >= 0 && rect.left >= 0 &&
|
||||
rect.bottom <= window.innerHeight &&
|
||||
rect.right <= window.innerWidth;
|
||||
|
||||
@@ -167,8 +165,10 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
|
||||
setTeamMembers(prev => ({
|
||||
...prev,
|
||||
data: (prev.data || []).map(member =>
|
||||
member.id === memberId ? { ...member, selected: checked } : member
|
||||
),
|
||||
member.id === memberId
|
||||
? { ...member, selected: checked }
|
||||
: member
|
||||
)
|
||||
}));
|
||||
|
||||
const body = {
|
||||
@@ -199,15 +199,15 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
|
||||
const checkMemberSelected = (memberId: string) => {
|
||||
if (!memberId) return false;
|
||||
// Use optimistic assignees if available, otherwise fall back to task assignees
|
||||
const assignees =
|
||||
optimisticAssignees.length > 0
|
||||
? optimisticAssignees
|
||||
: task?.assignees?.map(assignee => assignee.team_member_id) || [];
|
||||
const assignees = optimisticAssignees.length > 0
|
||||
? optimisticAssignees
|
||||
: task?.assignees?.map(assignee => assignee.team_member_id) || [];
|
||||
return assignees.includes(memberId);
|
||||
};
|
||||
|
||||
const handleInviteProjectMemberDrawer = () => {
|
||||
setIsOpen(false); // Close the assignee dropdown first
|
||||
dispatch(setIsFromAssigner(true));
|
||||
dispatch(toggleProjectMemberDrawer()); // Then open the invite drawer
|
||||
};
|
||||
|
||||
@@ -219,14 +219,13 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
|
||||
className={`
|
||||
w-5 h-5 rounded-full border border-dashed flex items-center justify-center
|
||||
transition-colors duration-200
|
||||
${
|
||||
isOpen
|
||||
? isDarkMode
|
||||
? 'border-blue-500 bg-blue-900/20 text-blue-400'
|
||||
: 'border-blue-500 bg-blue-50 text-blue-600'
|
||||
: isDarkMode
|
||||
? 'border-gray-600 hover:border-gray-500 hover:bg-gray-800 text-gray-400'
|
||||
: 'border-gray-300 hover:border-gray-400 hover:bg-gray-100 text-gray-600'
|
||||
${isOpen
|
||||
? isDarkMode
|
||||
? 'border-blue-500 bg-blue-900/20 text-blue-400'
|
||||
: 'border-blue-500 bg-blue-50 text-blue-600'
|
||||
: isDarkMode
|
||||
? 'border-gray-600 hover:border-gray-500 hover:bg-gray-800 text-gray-400'
|
||||
: 'border-gray-300 hover:border-gray-400 hover:bg-gray-100 text-gray-600'
|
||||
}
|
||||
`}
|
||||
>
|
||||
@@ -240,7 +239,10 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
|
||||
onClick={e => e.stopPropagation()}
|
||||
className={`
|
||||
fixed z-[99999] w-72 rounded-md shadow-lg border
|
||||
${isDarkMode ? 'bg-gray-800 border-gray-600' : 'bg-white border-gray-200'}
|
||||
${isDarkMode
|
||||
? 'bg-gray-800 border-gray-600'
|
||||
: 'bg-white border-gray-200'
|
||||
}
|
||||
`}
|
||||
style={{
|
||||
top: dropdownPosition.top,
|
||||
@@ -275,101 +277,84 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
|
||||
key={member.id}
|
||||
className={`
|
||||
flex items-center gap-2 p-2 cursor-pointer transition-colors
|
||||
${
|
||||
member.pending_invitation
|
||||
? 'opacity-50 cursor-not-allowed'
|
||||
: isDarkMode
|
||||
? 'hover:bg-gray-700'
|
||||
: 'hover:bg-gray-50'
|
||||
${member.pending_invitation
|
||||
? 'opacity-50 cursor-not-allowed'
|
||||
: isDarkMode
|
||||
? 'hover:bg-gray-700'
|
||||
: 'hover:bg-gray-50'
|
||||
}
|
||||
`}
|
||||
onClick={() => {
|
||||
if (!member.pending_invitation) {
|
||||
const isSelected = checkMemberSelected(member.id || '');
|
||||
handleMemberToggle(member.id || '', !isSelected);
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
// Add visual feedback for immediate response
|
||||
transition: 'all 0.15s ease-in-out',
|
||||
}}
|
||||
>
|
||||
<div className="relative">
|
||||
<span onClick={e => e.stopPropagation()}>
|
||||
<Checkbox
|
||||
checked={checkMemberSelected(member.id || '')}
|
||||
onChange={checked => handleMemberToggle(member.id || '', checked)}
|
||||
disabled={
|
||||
member.pending_invitation || pendingChanges.has(member.id || '')
|
||||
}
|
||||
isDarkMode={isDarkMode}
|
||||
/>
|
||||
</span>
|
||||
{pendingChanges.has(member.id || '') && (
|
||||
<div
|
||||
className={`absolute inset-0 flex items-center justify-center ${
|
||||
isDarkMode ? 'bg-gray-800/50' : 'bg-white/50'
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`w-3 h-3 border border-t-transparent rounded-full animate-spin ${
|
||||
isDarkMode ? 'border-blue-400' : 'border-blue-600'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
onClick={() => {
|
||||
if (!member.pending_invitation) {
|
||||
const isSelected = checkMemberSelected(member.id || '');
|
||||
handleMemberToggle(member.id || '', !isSelected);
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
// Add visual feedback for immediate response
|
||||
transition: 'all 0.15s ease-in-out',
|
||||
}}
|
||||
>
|
||||
<div className="relative">
|
||||
<span onClick={e => e.stopPropagation()}>
|
||||
<Checkbox
|
||||
checked={checkMemberSelected(member.id || '')}
|
||||
onChange={(checked) => handleMemberToggle(member.id || '', checked)}
|
||||
disabled={member.pending_invitation || pendingChanges.has(member.id || '')}
|
||||
isDarkMode={isDarkMode}
|
||||
/>
|
||||
</span>
|
||||
{pendingChanges.has(member.id || '') && (
|
||||
<div className={`absolute inset-0 flex items-center justify-center ${isDarkMode ? 'bg-gray-800/50' : 'bg-white/50'
|
||||
}`}>
|
||||
<div className={`w-3 h-3 border border-t-transparent rounded-full animate-spin ${isDarkMode ? 'border-blue-400' : 'border-blue-600'
|
||||
}`} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Avatar
|
||||
src={member.avatar_url}
|
||||
name={member.name || ''}
|
||||
size={24}
|
||||
isDarkMode={isDarkMode}
|
||||
/>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className={`text-xs font-medium truncate ${isDarkMode ? 'text-gray-100' : 'text-gray-900'}`}>
|
||||
{member.name}
|
||||
</div>
|
||||
<div className={`text-xs truncate ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}`}>
|
||||
{member.email}
|
||||
{member.pending_invitation && (
|
||||
<span className="text-red-400 ml-1">(Pending)</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Avatar
|
||||
src={member.avatar_url}
|
||||
name={member.name || ''}
|
||||
size={24}
|
||||
isDarkMode={isDarkMode}
|
||||
/>
|
||||
{/* Footer */}
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div
|
||||
className={`text-xs font-medium truncate ${isDarkMode ? 'text-gray-100' : 'text-gray-900'}`}
|
||||
>
|
||||
{member.name}
|
||||
</div>
|
||||
<div
|
||||
className={`text-xs truncate ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}`}
|
||||
>
|
||||
{member.email}
|
||||
{member.pending_invitation && (
|
||||
<span className="text-red-400 ml-1">(Pending)</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div
|
||||
className={`p-4 text-center ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}`}
|
||||
>
|
||||
<div className="text-xs">No members found</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
{(isAdmin || isProjectManager) && (
|
||||
<div className={`p-2 border-t ${isDarkMode ? 'border-gray-600' : 'border-gray-200'}`}>
|
||||
<button
|
||||
className={`
|
||||
w-full flex items-center justify-center gap-1 px-2 py-1 text-xs rounded
|
||||
transition-colors
|
||||
${isDarkMode ? 'text-blue-400 hover:bg-gray-700' : 'text-blue-600 hover:bg-blue-50'}
|
||||
`}
|
||||
w-full flex items-center justify-center gap-1 px-2 py-1 text-xs rounded
|
||||
transition-colors
|
||||
${isDarkMode
|
||||
? 'text-blue-400 hover:bg-gray-700'
|
||||
: 'text-blue-600 hover:bg-blue-50'
|
||||
}
|
||||
`}
|
||||
onClick={handleInviteProjectMemberDrawer}
|
||||
>
|
||||
<UserAddOutlined />
|
||||
Invite member
|
||||
</button>
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
)}
|
||||
)}
|
||||
|
||||
</div>,
|
||||
document.body
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
@media (max-width: 1000px) {
|
||||
.step-content,
|
||||
.step-form,
|
||||
.create-first-task-form,
|
||||
.setup-action-buttons,
|
||||
.invite-members-form {
|
||||
width: 400px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.step-content,
|
||||
.step-form,
|
||||
.create-first-task-form,
|
||||
.setup-action-buttons,
|
||||
.invite-members-form {
|
||||
width: 200px !important;
|
||||
}
|
||||
}
|
||||
@@ -1,16 +1,15 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { Form, Input, Button, List, Alert, message, InputRef } from '@/shared/antd-imports';
|
||||
import { CloseCircleOutlined, MailOutlined, PlusOutlined } from '@/shared/antd-imports';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Form, Input, Button, Typography, Card, Avatar, Tag, Alert, Space, Dropdown, MenuProps } from '@/shared/antd-imports';
|
||||
import { CloseCircleOutlined, MailOutlined, PlusOutlined, UserOutlined, CheckCircleOutlined, ExclamationCircleOutlined, GlobalOutlined } from '@/shared/antd-imports';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Typography } from '@/shared/antd-imports';
|
||||
import { setTeamMembers, setTasks } from '@/features/account-setup/account-setup.slice';
|
||||
import { setTeamMembers } from '@/features/account-setup/account-setup.slice';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { RootState } from '@/app/store';
|
||||
import { validateEmail } from '@/utils/validateEmail';
|
||||
import { sanitizeInput } from '@/utils/sanitizeInput';
|
||||
import { Rule } from 'antd/es/form';
|
||||
import { setLanguage } from '@/features/i18n/localesSlice';
|
||||
|
||||
const { Title } = Typography;
|
||||
const { Title, Paragraph, Text } = Typography;
|
||||
|
||||
interface Email {
|
||||
id: number;
|
||||
@@ -20,163 +19,233 @@ interface Email {
|
||||
interface MembersStepProps {
|
||||
isDarkMode: boolean;
|
||||
styles: any;
|
||||
token?: any;
|
||||
}
|
||||
|
||||
const MembersStep: React.FC<MembersStepProps> = ({ isDarkMode, styles }) => {
|
||||
const { t } = useTranslation('account-setup');
|
||||
const getEmailSuggestions = (orgName?: string) => {
|
||||
if (!orgName) return [];
|
||||
const cleanOrgName = orgName.toLowerCase().replace(/[^a-z0-9]/g, '');
|
||||
return [`info@${cleanOrgName}.com`, `team@${cleanOrgName}.com`, `hello@${cleanOrgName}.com`, `contact@${cleanOrgName}.com`];
|
||||
};
|
||||
|
||||
const getRoleSuggestions = (t: any) => [
|
||||
{ role: 'Designer', icon: '🎨', description: t('roleSuggestions.designer') },
|
||||
{ role: 'Developer', icon: '💻', description: t('roleSuggestions.developer') },
|
||||
{ role: 'Project Manager', icon: '📊', description: t('roleSuggestions.projectManager') },
|
||||
{ role: 'Marketing', icon: '📢', description: t('roleSuggestions.marketing') },
|
||||
{ role: 'Sales', icon: '💼', description: t('roleSuggestions.sales') },
|
||||
{ role: 'Operations', icon: '⚙️', description: t('roleSuggestions.operations') }
|
||||
];
|
||||
|
||||
const MembersStep: React.FC<MembersStepProps> = ({ isDarkMode, styles, token }) => {
|
||||
const { t, i18n } = useTranslation('account-setup');
|
||||
const { teamMembers, organizationName } = useSelector(
|
||||
(state: RootState) => state.accountSetupReducer
|
||||
);
|
||||
const inputRefs = useRef<(InputRef | null)[]>([]);
|
||||
const { language } = useSelector((state: RootState) => state.localesReducer);
|
||||
const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
|
||||
const dispatch = useDispatch();
|
||||
const [form] = Form.useForm();
|
||||
const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
|
||||
const [showSuggestions, setShowSuggestions] = useState(false);
|
||||
const [validatedEmails, setValidatedEmails] = useState<Set<number>>(new Set());
|
||||
|
||||
const emailSuggestions = getEmailSuggestions(organizationName);
|
||||
|
||||
const addEmail = () => {
|
||||
if (teamMembers.length == 5) return;
|
||||
|
||||
if (teamMembers.length >= 5) return;
|
||||
const newId = teamMembers.length > 0 ? Math.max(...teamMembers.map(t => t.id)) + 1 : 0;
|
||||
dispatch(setTeamMembers([...teamMembers, { id: newId, value: '' }]));
|
||||
setTimeout(() => {
|
||||
inputRefs.current[newId]?.focus();
|
||||
}, 0);
|
||||
setTimeout(() => inputRefs.current[teamMembers.length]?.focus(), 100);
|
||||
};
|
||||
|
||||
const removeEmail = (id: number) => {
|
||||
if (teamMembers.length > 1) {
|
||||
dispatch(setTeamMembers(teamMembers.filter(teamMember => teamMember.id !== id)));
|
||||
}
|
||||
if (teamMembers.length > 1) dispatch(setTeamMembers(teamMembers.filter(teamMember => teamMember.id !== id)));
|
||||
};
|
||||
|
||||
const updateEmail = (id: number, value: string) => {
|
||||
const sanitizedValue = sanitizeInput(value);
|
||||
dispatch(
|
||||
setTeamMembers(
|
||||
teamMembers.map(teamMember =>
|
||||
teamMember.id === id ? { ...teamMember, value: sanitizedValue } : teamMember
|
||||
)
|
||||
)
|
||||
);
|
||||
dispatch(setTeamMembers(teamMembers.map(teamMember => teamMember.id === id ? { ...teamMember, value: sanitizedValue } : teamMember)));
|
||||
};
|
||||
|
||||
const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
const input = e.currentTarget as HTMLInputElement;
|
||||
if (!input.value.trim()) return;
|
||||
e.preventDefault();
|
||||
addEmail();
|
||||
const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {
|
||||
if (e.key === 'Enter') {
|
||||
const input = e.currentTarget as HTMLInputElement;
|
||||
if (input.value.trim() && validateEmail(input.value.trim())) {
|
||||
e.preventDefault();
|
||||
if (index === teamMembers.length - 1 && teamMembers.length < 5) addEmail();
|
||||
else if (index < teamMembers.length - 1) inputRefs.current[index + 1]?.focus();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Function to set ref that doesn't return anything (void)
|
||||
const setInputRef = (index: number) => (el: InputRef | null) => {
|
||||
inputRefs.current[index] = el;
|
||||
const handleSuggestionClick = (suggestion: string) => {
|
||||
const emptyEmailIndex = teamMembers.findIndex(member => !member.value.trim());
|
||||
if (emptyEmailIndex !== -1) {
|
||||
updateEmail(teamMembers[emptyEmailIndex].id, suggestion);
|
||||
} else if (teamMembers.length < 5) {
|
||||
const newId = teamMembers.length > 0 ? Math.max(...teamMembers.map(t => t.id)) + 1 : 0;
|
||||
dispatch(setTeamMembers([...teamMembers, { id: newId, value: suggestion }]));
|
||||
}
|
||||
setShowSuggestions(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
inputRefs.current[teamMembers.length - 1]?.focus();
|
||||
// Set initial form values
|
||||
const initialValues: Record<string, string> = {};
|
||||
teamMembers.forEach(teamMember => {
|
||||
initialValues[`email-${teamMember.id}`] = teamMember.value;
|
||||
});
|
||||
form.setFieldsValue(initialValues);
|
||||
}, 200);
|
||||
setTimeout(() => inputRefs.current[0]?.focus(), 200);
|
||||
}, []);
|
||||
|
||||
const formRules = {
|
||||
email: [
|
||||
{
|
||||
validator: async (_: any, value: string) => {
|
||||
if (!value) return;
|
||||
if (!validateEmail(value)) {
|
||||
throw new Error(t('invalidEmail'));
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
const getEmailStatus = (email: string, memberId: number) => {
|
||||
if (!email.trim()) return 'empty';
|
||||
if (!validatedEmails.has(memberId)) return 'empty';
|
||||
return validateEmail(email) ? 'valid' : 'invalid';
|
||||
};
|
||||
|
||||
const handleBlur = (memberId: number, email: string) => {
|
||||
setFocusedIndex(null);
|
||||
if (email.trim()) setValidatedEmails(prev => new Set(prev).add(memberId));
|
||||
};
|
||||
|
||||
const languages = [
|
||||
{ key: 'en', label: t('languages.en'), flag: '🇺🇸' },
|
||||
{ key: 'es', label: t('languages.es'), flag: '🇪🇸' },
|
||||
{ key: 'pt', label: t('languages.pt'), flag: '🇵🇹' },
|
||||
{ key: 'de', label: t('languages.de'), flag: '🇩🇪' },
|
||||
{ key: 'alb', label: t('languages.alb'), flag: '🇦🇱' },
|
||||
{ key: 'zh', label: t('languages.zh'), flag: '🇨🇳' }
|
||||
];
|
||||
|
||||
const handleLanguageChange = (languageKey: string) => {
|
||||
dispatch(setLanguage(languageKey));
|
||||
i18n.changeLanguage(languageKey);
|
||||
};
|
||||
|
||||
const currentLanguage = languages.find(lang => lang.key === language) || languages[0];
|
||||
const languageMenuItems: MenuProps['items'] = languages.map(lang => ({ key: lang.key, label: <div className="flex items-center space-x-2"><span>{lang.flag}</span><span>{lang.label}</span></div>, onClick: () => handleLanguageChange(lang.key) }));
|
||||
|
||||
return (
|
||||
<Form
|
||||
form={form}
|
||||
className="invite-members-form"
|
||||
style={{
|
||||
minHeight: '300px',
|
||||
width: '600px',
|
||||
paddingBottom: '1rem',
|
||||
marginBottom: '3rem',
|
||||
marginTop: '3rem',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<Form.Item>
|
||||
<Title level={2} style={{ marginBottom: '1rem' }}>
|
||||
{t('step3Title')} "<mark>{organizationName}</mark>".
|
||||
<div className="w-full members-step">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<Title level={3} className="mb-2" style={{ color: token?.colorText }}>
|
||||
{t('membersStepTitle')}
|
||||
</Title>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
layout="vertical"
|
||||
rules={[{ required: true }]}
|
||||
label={
|
||||
<span className="font-medium">
|
||||
{t('step3InputLabel')} <MailOutlined /> {t('maxMembers')}
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<List
|
||||
dataSource={teamMembers}
|
||||
bordered={false}
|
||||
itemLayout="vertical"
|
||||
renderItem={(teamMember, index) => (
|
||||
<List.Item key={teamMember.id}>
|
||||
<div className="invite-members-form" style={{ display: 'flex', width: '600px' }}>
|
||||
<Form.Item
|
||||
rules={formRules.email as Rule[]}
|
||||
className="w-full"
|
||||
validateTrigger={['onChange', 'onBlur']}
|
||||
name={`email-${teamMember.id}`}
|
||||
>
|
||||
<Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
|
||||
{t('membersStepDescription', { organizationName })}
|
||||
</Paragraph>
|
||||
</div>
|
||||
|
||||
{/* Team Members List */}
|
||||
<div className="mb-6">
|
||||
<div className="space-y-3">
|
||||
{teamMembers.map((teamMember, index) => {
|
||||
const emailStatus = getEmailStatus(teamMember.value, teamMember.id);
|
||||
return (
|
||||
<div
|
||||
key={teamMember.id}
|
||||
className={`flex items-center space-x-3 p-3 rounded-lg border transition-all duration-200 ${
|
||||
focusedIndex === index ? 'border-2' : ''
|
||||
}`}
|
||||
style={{
|
||||
borderColor: focusedIndex === index ? token?.colorPrimary :
|
||||
emailStatus === 'invalid' ? token?.colorError : token?.colorBorder,
|
||||
backgroundColor: token?.colorBgContainer
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
size={32}
|
||||
style={{
|
||||
backgroundColor: emailStatus === 'valid' ? token?.colorSuccess :
|
||||
emailStatus === 'invalid' ? token?.colorError : token?.colorBorderSecondary,
|
||||
color: '#fff'
|
||||
}}
|
||||
icon={
|
||||
emailStatus === 'valid' ? <CheckCircleOutlined /> :
|
||||
emailStatus === 'invalid' ? <ExclamationCircleOutlined /> :
|
||||
<UserOutlined />
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="flex-1">
|
||||
<Input
|
||||
placeholder={t('emailPlaceholder')}
|
||||
placeholder={t('memberPlaceholder', { index: index + 1 })}
|
||||
value={teamMember.value}
|
||||
onChange={e => updateEmail(teamMember.id, e.target.value)}
|
||||
onPressEnter={handleKeyPress}
|
||||
ref={setInputRef(index)}
|
||||
status={teamMember.value && !validateEmail(teamMember.value) ? 'error' : ''}
|
||||
id={`member-${index}`}
|
||||
onKeyPress={e => handleKeyPress(e, index)}
|
||||
onFocus={() => setFocusedIndex(index)}
|
||||
onBlur={() => handleBlur(teamMember.id, teamMember.value)}
|
||||
ref={el => inputRefs.current[index] = el}
|
||||
className="border-0 shadow-none"
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
color: token?.colorText
|
||||
}}
|
||||
prefix={<MailOutlined style={{ color: token?.colorTextTertiary }} />}
|
||||
status={emailStatus === 'invalid' ? 'error' : undefined}
|
||||
suffix={
|
||||
emailStatus === 'valid' ? (
|
||||
<CheckCircleOutlined style={{ color: token?.colorSuccess }} />
|
||||
) : emailStatus === 'invalid' ? (
|
||||
<ExclamationCircleOutlined style={{ color: token?.colorError }} />
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Button
|
||||
className="custom-close-button"
|
||||
style={{ marginLeft: '48px' }}
|
||||
type="text"
|
||||
icon={<CloseCircleOutlined />}
|
||||
disabled={teamMembers.length === 1}
|
||||
onClick={() => removeEmail(teamMember.id)}
|
||||
/>
|
||||
{emailStatus === 'invalid' && (
|
||||
<Text type="danger" className="text-xs mt-1 block">
|
||||
{t('invalidEmail')}
|
||||
</Text>
|
||||
)}
|
||||
{emailStatus === 'valid' && (
|
||||
<Text type="success" className="text-xs mt-1 block">
|
||||
{t('validEmailAddress')}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{teamMembers.length > 1 && (
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<CloseCircleOutlined />}
|
||||
onClick={() => removeEmail(teamMember.id)}
|
||||
style={{ color: token?.colorTextTertiary }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
<Button
|
||||
type="dashed"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={addEmail}
|
||||
style={{ marginTop: '16px' }}
|
||||
disabled={teamMembers.length == 5}
|
||||
>
|
||||
{t('tasksStepAddAnother')}
|
||||
</Button>
|
||||
<div
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Add Member Button */}
|
||||
{teamMembers.length < 5 && (
|
||||
<Button
|
||||
type="dashed"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={addEmail}
|
||||
className="w-full mt-4 h-12 text-base"
|
||||
style={{
|
||||
borderColor: token?.colorBorder,
|
||||
color: token?.colorTextSecondary
|
||||
}}
|
||||
>
|
||||
{t('addAnotherTeamMember', { current: teamMembers.length, max: 5 })}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Skip Option */}
|
||||
<div className="mb-6">
|
||||
<Alert
|
||||
message={t('canInviteLater')}
|
||||
description={t('skipStepDescription')}
|
||||
type="info"
|
||||
showIcon
|
||||
style={{
|
||||
marginTop: '24px',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
backgroundColor: token?.colorInfoBg,
|
||||
borderColor: token?.colorInfoBorder
|
||||
}}
|
||||
></div>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MembersStep;
|
||||
export default MembersStep;
|
||||
@@ -1,31 +1,40 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { Form, Input, InputRef, Typography } from '@/shared/antd-imports';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Form, Input, InputRef, Typography, Card, Tooltip } from '@/shared/antd-imports';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { setOrganizationName } from '@/features/account-setup/account-setup.slice';
|
||||
import { RootState } from '@/app/store';
|
||||
import { sanitizeInput } from '@/utils/sanitizeInput';
|
||||
import './admin-center-common.css';
|
||||
|
||||
const { Title } = Typography;
|
||||
const { Title, Paragraph, Text } = Typography;
|
||||
|
||||
interface Props {
|
||||
onEnter: () => void;
|
||||
styles: any;
|
||||
organizationNamePlaceholder: string;
|
||||
organizationNameInitialValue?: string;
|
||||
isDarkMode: boolean;
|
||||
token?: any;
|
||||
}
|
||||
|
||||
export const OrganizationStep: React.FC<Props> = ({
|
||||
onEnter,
|
||||
styles,
|
||||
organizationNamePlaceholder,
|
||||
organizationNameInitialValue,
|
||||
isDarkMode,
|
||||
token,
|
||||
}) => {
|
||||
const { t } = useTranslation('account-setup');
|
||||
const dispatch = useDispatch();
|
||||
const { organizationName } = useSelector((state: RootState) => state.accountSetupReducer);
|
||||
const inputRef = useRef<InputRef>(null);
|
||||
|
||||
// Autofill organization name if not already set
|
||||
useEffect(() => {
|
||||
if (!organizationName && organizationNameInitialValue) {
|
||||
dispatch(setOrganizationName(organizationNameInitialValue));
|
||||
}
|
||||
setTimeout(() => inputRef.current?.focus(), 300);
|
||||
}, []);
|
||||
|
||||
@@ -40,25 +49,85 @@ export const OrganizationStep: React.FC<Props> = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<Form className="step-form" style={styles.form}>
|
||||
<Form.Item>
|
||||
<Title level={2} style={{ marginBottom: '1rem' }}>
|
||||
{t('organizationStepTitle')}
|
||||
<div className="w-full organization-step">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<Title level={3} className="mb-2" style={{ color: token?.colorText }}>
|
||||
{t('organizationStepWelcome')}
|
||||
</Title>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
layout="vertical"
|
||||
rules={[{ required: true }]}
|
||||
label={<span style={styles.label}>{t('organizationStepLabel')}</span>}
|
||||
<Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
|
||||
{t('organizationStepDescription')}
|
||||
</Paragraph>
|
||||
</div>
|
||||
|
||||
{/* Main Form Card */}
|
||||
<div className="mb-6">
|
||||
<Card
|
||||
className="border-2 hover:shadow-md transition-all duration-200"
|
||||
style={{
|
||||
borderColor: token?.colorPrimary,
|
||||
backgroundColor: token?.colorBgContainer
|
||||
}}
|
||||
>
|
||||
<Form.Item
|
||||
className="mb-4"
|
||||
label={
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="font-medium text-base" style={{ color: token?.colorText }}>
|
||||
{t('organizationStepLabel')}
|
||||
</span>
|
||||
<Tooltip title={t('organizationStepTooltip')}>
|
||||
<span
|
||||
className="text-sm cursor-help"
|
||||
style={{ color: token?.colorTextTertiary }}
|
||||
>
|
||||
ⓘ
|
||||
</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Input
|
||||
placeholder={organizationNamePlaceholder || t('organizationStepPlaceholder')}
|
||||
value={organizationName}
|
||||
onChange={handleOrgNameChange}
|
||||
onPressEnter={onPressEnter}
|
||||
ref={inputRef}
|
||||
className="text-base"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
{/* Character Count and Validation */}
|
||||
<div className="flex justify-between items-center text-sm">
|
||||
<Text type="secondary">
|
||||
{organizationName.length}/50 {t('organizationStepCharacters')}
|
||||
</Text>
|
||||
{organizationName.length > 0 && (
|
||||
<div className="flex items-center space-x-1">
|
||||
{organizationName.length >= 2 ? (
|
||||
<span style={{ color: token?.colorSuccess }}>✓ {t('organizationStepGoodLength')}</span>
|
||||
) : (
|
||||
<span style={{ color: token?.colorWarning }}>⚠ {t('organizationStepTooShort')}</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Footer Note */}
|
||||
<div
|
||||
className="text-center p-4 rounded-lg"
|
||||
style={{
|
||||
backgroundColor: token?.colorInfoBg,
|
||||
borderColor: token?.colorInfoBorder,
|
||||
border: '1px solid'
|
||||
}}
|
||||
>
|
||||
<Input
|
||||
placeholder={organizationNamePlaceholder}
|
||||
value={organizationName}
|
||||
onChange={handleOrgNameChange}
|
||||
onPressEnter={onPressEnter}
|
||||
ref={inputRef}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<Text type="secondary" className="text-sm">
|
||||
🔒 {t('organizationStepPrivacyNote')}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
};
|
||||
@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
import { Button, Drawer, Form, Input, InputRef, Select, Typography } from '@/shared/antd-imports';
|
||||
import { Button, Drawer, Form, Input, InputRef, Typography, Card, Row, Col, Tag, Tooltip, Spin, Alert } from '@/shared/antd-imports';
|
||||
import TemplateDrawer from '../common/template-drawer/template-drawer';
|
||||
|
||||
import { RootState } from '@/app/store';
|
||||
@@ -13,7 +13,7 @@ import { sanitizeInput } from '@/utils/sanitizeInput';
|
||||
import { projectTemplatesApiService } from '@/api/project-templates/project-templates.api.service';
|
||||
import logger from '@/utils/errorLogger';
|
||||
|
||||
import { IAccountSetupRequest } from '@/types/project-templates/project-templates.types';
|
||||
import { IAccountSetupRequest, IWorklenzTemplate, IProjectTemplate } from '@/types/project-templates/project-templates.types';
|
||||
|
||||
import { evt_account_setup_template_complete } from '@/shared/worklenz-analytics-events';
|
||||
import { useMixpanelTracking } from '@/hooks/useMixpanelTracking';
|
||||
@@ -24,15 +24,43 @@ import { setUser } from '@/features/user/userSlice';
|
||||
import { setSession } from '@/utils/session-helper';
|
||||
import { IAuthorizeResponse } from '@/types/auth/login.types';
|
||||
|
||||
const { Title } = Typography;
|
||||
const { Title, Paragraph, Text } = Typography;
|
||||
|
||||
interface Props {
|
||||
onEnter: () => void;
|
||||
styles: any;
|
||||
isDarkMode: boolean;
|
||||
token?: any;
|
||||
}
|
||||
|
||||
export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = false }) => {
|
||||
// Default icon mapping for templates (fallback if no image_url)
|
||||
const getTemplateIcon = (name?: string) => {
|
||||
if (!name) return '📁';
|
||||
const lowercaseName = name.toLowerCase();
|
||||
if (lowercaseName.includes('software') || lowercaseName.includes('development')) return '💻';
|
||||
if (lowercaseName.includes('marketing') || lowercaseName.includes('campaign')) return '📢';
|
||||
if (lowercaseName.includes('construction') || lowercaseName.includes('building')) return '🏗️';
|
||||
if (lowercaseName.includes('startup') || lowercaseName.includes('launch')) return '🚀';
|
||||
if (lowercaseName.includes('design') || lowercaseName.includes('creative')) return '🎨';
|
||||
if (lowercaseName.includes('education') || lowercaseName.includes('learning')) return '📚';
|
||||
if (lowercaseName.includes('event') || lowercaseName.includes('planning')) return '📅';
|
||||
if (lowercaseName.includes('retail') || lowercaseName.includes('sales')) return '🛍️';
|
||||
return '📁';
|
||||
};
|
||||
|
||||
const getProjectSuggestions = (orgType?: string) => {
|
||||
const suggestions: Record<string, string[]> = {
|
||||
'freelancer': ['Client Website', 'Logo Design', 'Content Writing', 'App Development'],
|
||||
'startup': ['MVP Development', 'Product Launch', 'Marketing Campaign', 'Investor Pitch'],
|
||||
'small_medium_business': ['Q1 Sales Initiative', 'Website Redesign', 'Process Improvement', 'Team Training'],
|
||||
'agency': ['Client Campaign', 'Brand Strategy', 'Website Project', 'Creative Brief'],
|
||||
'enterprise': ['Digital Transformation', 'System Migration', 'Annual Planning', 'Department Initiative'],
|
||||
'other': ['New Project', 'Team Initiative', 'Q1 Goals', 'Special Project']
|
||||
};
|
||||
return suggestions[orgType || 'other'] || suggestions['other'];
|
||||
};
|
||||
|
||||
export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = false, token }) => {
|
||||
const { t } = useTranslation('account-setup');
|
||||
const dispatch = useAppDispatch();
|
||||
const navigate = useNavigate();
|
||||
@@ -42,13 +70,58 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => inputRef.current?.focus(), 200);
|
||||
fetchTemplates();
|
||||
}, []);
|
||||
|
||||
const { projectName, templateId, organizationName } = useSelector(
|
||||
const fetchTemplates = async () => {
|
||||
try {
|
||||
setLoadingTemplates(true);
|
||||
setTemplateError(null);
|
||||
|
||||
// Fetch list of available templates
|
||||
const templatesResponse = await projectTemplatesApiService.getWorklenzTemplates();
|
||||
|
||||
if (templatesResponse.done && templatesResponse.body) {
|
||||
// Fetch detailed information for first 4 templates for preview
|
||||
const templateDetails = await Promise.all(
|
||||
templatesResponse.body.slice(0, 4).map(async (template) => {
|
||||
if (template.id) {
|
||||
try {
|
||||
const detailResponse = await projectTemplatesApiService.getByTemplateId(template.id);
|
||||
return detailResponse.done ? detailResponse.body : null;
|
||||
} catch (error) {
|
||||
logger.error(`Failed to fetch template details for ${template.id}`, error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
})
|
||||
);
|
||||
|
||||
// Filter out null results and set templates
|
||||
const validTemplates = templateDetails.filter((template): template is IProjectTemplate => template !== null);
|
||||
setTemplates(validTemplates);
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('Failed to fetch templates', error);
|
||||
setTemplateError('Failed to load templates');
|
||||
} finally {
|
||||
setLoadingTemplates(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const { projectName, templateId, organizationName, surveyData } = useSelector(
|
||||
(state: RootState) => state.accountSetupReducer
|
||||
);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [creatingFromTemplate, setCreatingFromTemplate] = useState(false);
|
||||
const [selectedTemplate, setSelectedTemplate] = useState<string | null>(templateId || null);
|
||||
const [templates, setTemplates] = useState<IProjectTemplate[]>([]);
|
||||
const [loadingTemplates, setLoadingTemplates] = useState(true);
|
||||
const [templateError, setTemplateError] = useState<string | null>(null);
|
||||
|
||||
const projectSuggestions = getProjectSuggestions(surveyData.organization_type);
|
||||
|
||||
const handleTemplateSelected = (templateId: string) => {
|
||||
if (!templateId) return;
|
||||
@@ -74,8 +147,6 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
|
||||
if (res.done && res.body.id) {
|
||||
toggleTemplateSelector(false);
|
||||
trackMixpanelEvent(evt_account_setup_template_complete);
|
||||
|
||||
// Refresh user session to update setup_completed status
|
||||
try {
|
||||
const authResponse = (await dispatch(
|
||||
verifyAuthentication()
|
||||
@@ -87,7 +158,6 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
|
||||
} catch (error) {
|
||||
logger.error('Failed to refresh user session after template setup completion', error);
|
||||
}
|
||||
|
||||
navigate(`/worklenz/projects/${res.body.id}?tab=tasks-list&pinned_tab=tasks-list`);
|
||||
}
|
||||
} catch (error) {
|
||||
@@ -96,8 +166,7 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
|
||||
};
|
||||
|
||||
const onPressEnter = () => {
|
||||
if (!projectName.trim()) return;
|
||||
onEnter();
|
||||
if (projectName.trim()) onEnter();
|
||||
};
|
||||
|
||||
const handleProjectNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
@@ -105,43 +174,205 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
|
||||
dispatch(setProjectName(sanitizedValue));
|
||||
};
|
||||
|
||||
const handleProjectNameFocus = () => {
|
||||
if (templateId) {
|
||||
dispatch(setTemplateId(null));
|
||||
setSelectedTemplate(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSuggestionClick = (suggestion: string) => {
|
||||
dispatch(setProjectName(suggestion));
|
||||
inputRef.current?.focus();
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Form className="step-form" style={styles.form}>
|
||||
<Form.Item>
|
||||
<Title level={2} style={{ marginBottom: '1rem' }}>
|
||||
{t('projectStepTitle')}
|
||||
</Title>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
layout="vertical"
|
||||
rules={[{ required: true }]}
|
||||
label={<span style={styles.label}>{t('projectStepLabel')}</span>}
|
||||
>
|
||||
<Input
|
||||
placeholder={t('projectStepPlaceholder')}
|
||||
value={projectName}
|
||||
onChange={handleProjectNameChange}
|
||||
onPressEnter={onPressEnter}
|
||||
ref={inputRef}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<Title level={4} className={isDarkMode ? 'vert-text-dark' : 'vert-text'}>
|
||||
{t('or')}
|
||||
<div className="w-full project-step">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<Title level={3} className="mb-2" style={{ color: token?.colorText }}>
|
||||
{t('projectStepHeader')}
|
||||
</Title>
|
||||
<div className={isDarkMode ? 'vert-line-dark' : 'vert-line'} />
|
||||
<Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
|
||||
{t('projectStepSubheader')}
|
||||
</Paragraph>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center">
|
||||
<Button onClick={() => toggleTemplateSelector(true)} type="primary">
|
||||
{t('templateButton')}
|
||||
</Button>
|
||||
{/* Project Name Section */}
|
||||
<div className="mb-8">
|
||||
<Card
|
||||
className={`border-2 hover:shadow-md transition-all duration-200 ${
|
||||
templateId ? 'opacity-50' : ''
|
||||
}`}
|
||||
style={{
|
||||
borderColor: templateId ? token?.colorBorder : token?.colorPrimary,
|
||||
backgroundColor: token?.colorBgContainer
|
||||
}}
|
||||
>
|
||||
<div className="mb-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<Text strong className="text-lg" style={{ color: token?.colorText }}>
|
||||
{t('startFromScratch')}
|
||||
</Text>
|
||||
{templateId && (
|
||||
<Text type="secondary" className="text-sm">
|
||||
{t('templateSelected')}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Form.Item
|
||||
className="mb-4"
|
||||
label={<span className="font-medium" style={{ color: token?.colorText }}>{t('projectStepLabel')}</span>}
|
||||
>
|
||||
<Input
|
||||
size="large"
|
||||
placeholder={projectSuggestions[0] || t('projectStepPlaceholder')}
|
||||
value={projectName}
|
||||
onChange={handleProjectNameChange}
|
||||
onPressEnter={onPressEnter}
|
||||
onFocus={handleProjectNameFocus}
|
||||
ref={inputRef}
|
||||
className="text-base"
|
||||
style={{ backgroundColor: token?.colorBgContainer, borderColor: token?.colorBorder, color: token?.colorText }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<div>
|
||||
<Text type="secondary" className="text-sm">{t('quickSuggestions')}</Text>
|
||||
<div className="mt-2 flex flex-wrap gap-2">
|
||||
{projectSuggestions.map((suggestion, index) => (
|
||||
<button key={index} onClick={() => handleSuggestionClick(suggestion)} className="px-3 py-1 rounded-full text-sm border project-suggestion-button" style={{ backgroundColor: token?.colorBgContainer, borderColor: token?.colorBorder, color: token?.colorTextSecondary }}>
|
||||
{suggestion}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="relative my-8">
|
||||
<div className="absolute inset-0 flex items-center" style={{ color: token?.colorTextQuaternary }}>
|
||||
<div className="w-full border-t" style={{ borderColor: token?.colorBorder }}></div>
|
||||
</div>
|
||||
<div className="relative flex justify-center">
|
||||
<span className="px-4 text-sm font-medium" style={{ backgroundColor: token?.colorBgLayout, color: token?.colorTextSecondary }}>{t('orText')}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="text-center mb-6">
|
||||
<Title level={4} className="mb-2" style={{ color: token?.colorText }}>{t('startWithTemplate')}</Title>
|
||||
<Text type="secondary">
|
||||
{t('templateHeadStart')}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
{/* Template Preview Cards */}
|
||||
<div className="mb-6">
|
||||
{loadingTemplates ? (
|
||||
<div className="text-center py-12">
|
||||
<Spin size="large" />
|
||||
<div className="mt-4">
|
||||
<Text type="secondary">Loading templates...</Text>
|
||||
</div>
|
||||
</div>
|
||||
) : templateError ? (
|
||||
<Alert
|
||||
message="Failed to load templates"
|
||||
description={templateError}
|
||||
type="error"
|
||||
showIcon
|
||||
action={
|
||||
<Button size="small" onClick={fetchTemplates}>
|
||||
Retry
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<Row gutter={[16, 16]}>
|
||||
{templates.map((template) => (
|
||||
<Col xs={24} sm={12} key={template.id}>
|
||||
<Card
|
||||
hoverable
|
||||
className={`h-full template-preview-card ${
|
||||
selectedTemplate === template.id ? 'selected border-2' : ''
|
||||
}`}
|
||||
style={{
|
||||
borderColor: selectedTemplate === template.id ? token?.colorPrimary : token?.colorBorder,
|
||||
backgroundColor: token?.colorBgContainer
|
||||
}}
|
||||
onClick={() => {
|
||||
setSelectedTemplate(template.id || null);
|
||||
dispatch(setTemplateId(template.id || ''));
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start space-x-3">
|
||||
{template.image_url ? (
|
||||
<img
|
||||
src={template.image_url}
|
||||
alt={template.name}
|
||||
className="w-12 h-12 object-cover rounded"
|
||||
onError={(e) => {
|
||||
// Fallback to icon if image fails to load
|
||||
e.currentTarget.style.display = 'none';
|
||||
if (e.currentTarget.nextSibling) {
|
||||
(e.currentTarget.nextSibling as HTMLElement).style.display = 'block';
|
||||
}
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
<span
|
||||
className="text-3xl"
|
||||
style={{ display: template.image_url ? 'none' : 'block' }}
|
||||
>
|
||||
{getTemplateIcon(template.name)}
|
||||
</span>
|
||||
<div className="flex-1">
|
||||
<Text strong className="block mb-2" style={{ color: token?.colorText }}>
|
||||
{template.name || 'Untitled Template'}
|
||||
</Text>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{template.phases?.slice(0, 3).map((phase, index) => (
|
||||
<Tag key={index} color={phase.color_code || 'blue'} className="text-xs">
|
||||
{phase.name}
|
||||
</Tag>
|
||||
))}
|
||||
{(template.phases?.length || 0) > 3 && (
|
||||
<Tag className="text-xs">+{(template.phases?.length || 0) - 3} more</Tag>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<Button type="primary" size="large" icon={<span className="mr-2">🎨</span>} onClick={() => toggleTemplateSelector(true)} className="min-w-[200px]">{t('browseAllTemplates')}</Button>
|
||||
<div className="mt-2">
|
||||
<Text type="secondary" className="text-sm">{t('templatesAvailable')}</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Template Drawer */}
|
||||
{createPortal(
|
||||
<Drawer
|
||||
title={t('templateDrawerTitle')}
|
||||
title={
|
||||
<div>
|
||||
<Title level={4} style={{ marginBottom: 0 }}>
|
||||
{t('templateDrawerTitle')}
|
||||
</Title>
|
||||
<Text type="secondary">
|
||||
{t('chooseTemplate')}
|
||||
</Text>
|
||||
</div>
|
||||
}
|
||||
width={1000}
|
||||
onClose={() => toggleTemplateSelector(false)}
|
||||
open={open}
|
||||
@@ -154,11 +385,13 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
|
||||
type="primary"
|
||||
onClick={() => createFromTemplate()}
|
||||
loading={creatingFromTemplate}
|
||||
disabled={!templateId}
|
||||
>
|
||||
{t('create')}
|
||||
{t('createProject')}
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
style={{ backgroundColor: token?.colorBgLayout }}
|
||||
>
|
||||
<TemplateDrawer
|
||||
showBothTabs={false}
|
||||
@@ -171,4 +404,4 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
};
|
||||
374
worklenz-frontend/src/components/account-setup/survey-step.tsx
Normal file
374
worklenz-frontend/src/components/account-setup/survey-step.tsx
Normal file
@@ -0,0 +1,374 @@
|
||||
import React from 'react';
|
||||
import { Form, Input, Typography, Button, Progress, Space } from '@/shared/antd-imports';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { setSurveyData, setSurveySubStep } from '@/features/account-setup/account-setup.slice';
|
||||
import { RootState } from '@/app/store';
|
||||
import {
|
||||
OrganizationType,
|
||||
UserRole,
|
||||
UseCase,
|
||||
HowHeardAbout,
|
||||
IAccountSetupSurveyData
|
||||
} from '@/types/account-setup/survey.types';
|
||||
|
||||
const { Title, Paragraph } = Typography;
|
||||
const { TextArea } = Input;
|
||||
|
||||
interface Props {
|
||||
onEnter: () => void;
|
||||
styles: any;
|
||||
isDarkMode: boolean;
|
||||
token?: any;
|
||||
isModal?: boolean; // New prop to indicate if used in modal context
|
||||
}
|
||||
|
||||
interface SurveyPageProps {
|
||||
styles: any;
|
||||
isDarkMode: boolean;
|
||||
token?: any;
|
||||
surveyData: IAccountSetupSurveyData;
|
||||
handleSurveyDataChange: (field: keyof IAccountSetupSurveyData, value: any) => void;
|
||||
handleUseCaseToggle?: (value: UseCase) => void;
|
||||
isModal?: boolean;
|
||||
}
|
||||
|
||||
// Page 1: About You
|
||||
const AboutYouPage: React.FC<SurveyPageProps> = ({ styles, token, surveyData, handleSurveyDataChange }) => {
|
||||
const { t } = useTranslation('account-setup');
|
||||
|
||||
const organizationTypeOptions: { value: OrganizationType; label: string; icon?: string }[] = [
|
||||
{ value: 'freelancer', label: t('organizationTypeFreelancer'), icon: '👤' },
|
||||
{ value: 'startup', label: t('organizationTypeStartup'), icon: '🚀' },
|
||||
{ value: 'small_medium_business', label: t('organizationTypeSmallMediumBusiness'), icon: '🏢' },
|
||||
{ value: 'agency', label: t('organizationTypeAgency'), icon: '🎯' },
|
||||
{ value: 'enterprise', label: t('organizationTypeEnterprise'), icon: '🏛️' },
|
||||
{ value: 'other', label: t('organizationTypeOther'), icon: '📋' },
|
||||
];
|
||||
|
||||
const userRoleOptions: { value: UserRole; label: string; icon?: string }[] = [
|
||||
{ value: 'founder_ceo', label: t('userRoleFounderCeo'), icon: '👔' },
|
||||
{ value: 'project_manager', label: t('userRoleProjectManager'), icon: '📊' },
|
||||
{ value: 'software_developer', label: t('userRoleSoftwareDeveloper'), icon: '💻' },
|
||||
{ value: 'designer', label: t('userRoleDesigner'), icon: '🎨' },
|
||||
{ value: 'operations', label: t('userRoleOperations'), icon: '⚙️' },
|
||||
{ value: 'other', label: t('userRoleOther'), icon: '✋' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="text-center mb-8">
|
||||
<Title level={3} className="mb-2" style={{ color: token?.colorText }}>
|
||||
{t('aboutYouStepTitle')}
|
||||
</Title>
|
||||
<Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
|
||||
{t('aboutYouStepDescription')}
|
||||
</Paragraph>
|
||||
</div>
|
||||
|
||||
{/* Organization Type */}
|
||||
<Form.Item className="mb-8">
|
||||
<label className="block font-medium text-base mb-4" style={{ color: token?.colorText }}>
|
||||
{t('orgTypeQuestion')}
|
||||
</label>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-1">
|
||||
{organizationTypeOptions.map((option) => {
|
||||
const isSelected = surveyData.organization_type === option.value;
|
||||
return (
|
||||
<button
|
||||
key={option.value}
|
||||
onClick={() => handleSurveyDataChange('organization_type', option.value)}
|
||||
className={`p-2 rounded border transition-all duration-200 text-left hover:shadow-sm ${isSelected ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'}`}
|
||||
style={{
|
||||
backgroundColor: isSelected ? undefined : token?.colorBgContainer,
|
||||
borderColor: isSelected ? undefined : token?.colorBorder,
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className={`w-3 h-3 rounded-full border flex items-center justify-center ${isSelected ? 'border-blue-500 bg-blue-500' : 'border-gray-300 dark:border-gray-600'}`}>
|
||||
{isSelected && <div className="w-1.5 h-1.5 bg-white rounded-full"></div>}
|
||||
</div>
|
||||
<span className="text-base">{option.icon}</span>
|
||||
<span
|
||||
className={`font-medium text-xs ${isSelected ? 'text-blue-600 dark:text-blue-400' : ''}`}
|
||||
style={{ color: isSelected ? undefined : token?.colorText }}
|
||||
>
|
||||
{option.label}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Form.Item>
|
||||
|
||||
{/* User Role */}
|
||||
<Form.Item className="mb-4">
|
||||
<label className="block font-medium text-base mb-4" style={{ color: token?.colorText }}>
|
||||
{t('userRoleQuestion')}
|
||||
</label>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-1">
|
||||
{userRoleOptions.map((option) => {
|
||||
const isSelected = surveyData.user_role === option.value;
|
||||
return (
|
||||
<button
|
||||
key={option.value}
|
||||
onClick={() => handleSurveyDataChange('user_role', option.value)}
|
||||
className={`p-2 rounded border transition-all duration-200 text-left hover:shadow-sm ${isSelected ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'}`}
|
||||
style={{
|
||||
backgroundColor: isSelected ? undefined : token?.colorBgContainer,
|
||||
borderColor: isSelected ? undefined : token?.colorBorder,
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className={`w-3 h-3 rounded-full border flex items-center justify-center ${isSelected ? 'border-blue-500 bg-blue-500' : 'border-gray-300 dark:border-gray-600'}`}>
|
||||
{isSelected && <div className="w-1.5 h-1.5 bg-white rounded-full"></div>}
|
||||
</div>
|
||||
<span className="text-base">{option.icon}</span>
|
||||
<span
|
||||
className={`font-medium text-xs ${isSelected ? 'text-blue-600 dark:text-blue-400' : ''}`}
|
||||
style={{ color: isSelected ? undefined : token?.colorText }}
|
||||
>
|
||||
{option.label}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Form.Item>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Page 2: Your Needs
|
||||
const YourNeedsPage: React.FC<SurveyPageProps> = ({ styles, token, surveyData, handleSurveyDataChange, handleUseCaseToggle }) => {
|
||||
const { t } = useTranslation('account-setup');
|
||||
|
||||
const useCaseOptions: { value: UseCase; label: string; description: string }[] = [
|
||||
{ value: 'task_management', label: t('mainUseCasesTaskManagement'), description: 'Organize and track tasks' },
|
||||
{ value: 'team_collaboration', label: t('mainUseCasesTeamCollaboration'), description: 'Work together seamlessly' },
|
||||
{ value: 'resource_planning', label: t('mainUseCasesResourcePlanning'), description: 'Manage time and resources' },
|
||||
{ value: 'client_communication', label: t('mainUseCasesClientCommunication'), description: 'Stay connected with clients' },
|
||||
{ value: 'time_tracking', label: t('mainUseCasesTimeTracking'), description: 'Monitor project hours' },
|
||||
{ value: 'other', label: t('mainUseCasesOther'), description: 'Something else' },
|
||||
];
|
||||
|
||||
const onUseCaseClick = (value: UseCase) => {
|
||||
if (handleUseCaseToggle) {
|
||||
handleUseCaseToggle(value);
|
||||
} else {
|
||||
const currentUseCases = surveyData.main_use_cases || [];
|
||||
const isSelected = currentUseCases.includes(value);
|
||||
const newUseCases = isSelected ? currentUseCases.filter(useCase => useCase !== value) : [...currentUseCases, value];
|
||||
handleSurveyDataChange('main_use_cases', newUseCases);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="text-center mb-8">
|
||||
<Title level={3} className="mb-2" style={{ color: token?.colorText }}>
|
||||
{t('yourNeedsStepTitle')}
|
||||
</Title>
|
||||
<Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
|
||||
{t('yourNeedsStepDescription')}
|
||||
</Paragraph>
|
||||
</div>
|
||||
|
||||
{/* Main Use Cases */}
|
||||
<Form.Item className="mb-8">
|
||||
<label className="block font-medium text-base mb-4" style={{ color: token?.colorText }}>
|
||||
{t('yourNeedsQuestion')}
|
||||
</label>
|
||||
<div className="grid grid-cols-1 gap-1">
|
||||
{useCaseOptions.map((option) => {
|
||||
const isSelected = (surveyData.main_use_cases || []).includes(option.value);
|
||||
return (
|
||||
<button
|
||||
key={option.value}
|
||||
onClick={() => onUseCaseClick(option.value)}
|
||||
className={`p-2 rounded border transition-all duration-200 text-left hover:shadow-sm ${isSelected ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'}`}
|
||||
style={{
|
||||
backgroundColor: isSelected ? undefined : token?.colorBgContainer,
|
||||
borderColor: isSelected ? undefined : token?.colorBorder,
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className={`w-3 h-3 rounded border flex items-center justify-center ${isSelected ? 'border-blue-500 bg-blue-500' : 'border-gray-300 dark:border-gray-600'}`}>
|
||||
{isSelected && (
|
||||
<svg width="10" height="10" fill="white" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<span className={`font-medium text-xs ${isSelected ? 'text-blue-600 dark:text-blue-400' : ''}`} style={{ color: isSelected ? undefined : token?.colorText }}>{option.label}</span>
|
||||
<span className="text-xs ml-2" style={{ color: token?.colorTextSecondary }}>- {option.description}</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{surveyData.main_use_cases && surveyData.main_use_cases.length > 0 && (
|
||||
<p className="mt-3 text-sm" style={{ color: token?.colorTextSecondary }}>
|
||||
{surveyData.main_use_cases.length} {t('selected')}
|
||||
</p>
|
||||
)}
|
||||
</Form.Item>
|
||||
|
||||
{/* Previous Tools */}
|
||||
<Form.Item className="mb-4">
|
||||
<label className="block font-medium text-base mb-2" style={{ color: token?.colorText }}>
|
||||
{t('previousToolsLabel')}
|
||||
</label>
|
||||
<TextArea
|
||||
placeholder="e.g., Asana, Trello, Jira, Monday.com, etc."
|
||||
value={surveyData.previous_tools || ''}
|
||||
onChange={(e) => handleSurveyDataChange('previous_tools', e.target.value)}
|
||||
autoSize={{ minRows: 3, maxRows: 5 }}
|
||||
className="text-base"
|
||||
style={{ backgroundColor: token?.colorBgContainer, borderColor: token?.colorBorder, color: token?.colorText }}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Page 3: Discovery
|
||||
const DiscoveryPage: React.FC<SurveyPageProps> = ({ styles, token, surveyData, handleSurveyDataChange, isModal }) => {
|
||||
const { t } = useTranslation('account-setup');
|
||||
|
||||
const howHeardAboutOptions: { value: HowHeardAbout; label: string; icon: string }[] = [
|
||||
{ value: 'google_search', label: t('howHeardAboutGoogleSearch'), icon: '🔍' },
|
||||
{ value: 'twitter', label: t('howHeardAboutTwitter'), icon: '🐦' },
|
||||
{ value: 'linkedin', label: t('howHeardAboutLinkedin'), icon: '💼' },
|
||||
{ value: 'friend_colleague', label: t('howHeardAboutFriendColleague'), icon: '👥' },
|
||||
{ value: 'blog_article', label: t('howHeardAboutBlogArticle'), icon: '📰' },
|
||||
{ value: 'other', label: t('howHeardAboutOther'), icon: '💡' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="text-center mb-8">
|
||||
<Title level={3} className="mb-2" style={{ color: token?.colorText }}>
|
||||
{t('discoveryTitle')}
|
||||
</Title>
|
||||
<Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
|
||||
{t('discoveryDescription')}
|
||||
</Paragraph>
|
||||
</div>
|
||||
|
||||
{/* How Heard About */}
|
||||
<Form.Item className="mb-8">
|
||||
<label className="block font-medium text-base mb-4" style={{ color: token?.colorText }}>
|
||||
{t('discoveryQuestion')}
|
||||
</label>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-1">
|
||||
{howHeardAboutOptions.map((option) => {
|
||||
const isSelected = surveyData.how_heard_about === option.value;
|
||||
return (
|
||||
<button
|
||||
key={option.value}
|
||||
onClick={() => handleSurveyDataChange('how_heard_about', option.value)}
|
||||
className={`p-2 rounded border transition-all duration-200 hover:shadow-sm ${isSelected ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'}`}
|
||||
style={{
|
||||
backgroundColor: isSelected ? undefined : token?.colorBgContainer,
|
||||
borderColor: isSelected ? undefined : token?.colorBorder,
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className={`w-3 h-3 rounded-full border flex items-center justify-center ${isSelected ? 'border-blue-500 bg-blue-500' : 'border-gray-300 dark:border-gray-600'}`}>
|
||||
{isSelected && <div className="w-1.5 h-1.5 bg-white rounded-full"></div>}
|
||||
</div>
|
||||
<span className="text-base">{option.icon}</span>
|
||||
<span className={`font-medium text-xs ${isSelected ? 'text-blue-600 dark:text-blue-400' : ''}`} style={{ color: isSelected ? undefined : token?.colorText }}>{option.label}</span>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Form.Item>
|
||||
|
||||
<div className="mt-12 p-1.5 rounded-lg text-center" style={{ backgroundColor: token?.colorSuccessBg, borderColor: token?.colorSuccessBorder, border: '1px solid' }}>
|
||||
<div className="text-4xl mb-3">🎉</div>
|
||||
<Title level={4} style={{ color: token?.colorText, marginBottom: 8 }}>
|
||||
{isModal ? t('surveyCompleteTitle') : t('allSetTitle')}
|
||||
</Title>
|
||||
<Paragraph style={{ color: token?.colorTextSecondary, marginBottom: 0 }}>
|
||||
{isModal ? t('surveyCompleteDescription') : t('allSetDescription')}
|
||||
</Paragraph>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const SurveyStep: React.FC<Props> = ({ onEnter, styles, isDarkMode, token, isModal = false }) => {
|
||||
const { t } = useTranslation('account-setup');
|
||||
const dispatch = useDispatch();
|
||||
const { surveyData, surveySubStep } = useSelector((state: RootState) => state.accountSetupReducer);
|
||||
|
||||
const handleSurveyDataChange = (field: keyof IAccountSetupSurveyData, value: any) => {
|
||||
dispatch(setSurveyData({ [field]: value }));
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
const handleKeyPress = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Enter') {
|
||||
const isValid = (surveySubStep === 0 && surveyData.organization_type && surveyData.user_role) || (surveySubStep === 1 && surveyData.main_use_cases && surveyData.main_use_cases.length > 0) || (surveySubStep === 2 && surveyData.how_heard_about);
|
||||
if (isValid && surveySubStep < 2) {
|
||||
dispatch(setSurveySubStep(surveySubStep + 1));
|
||||
} else if (isValid && surveySubStep === 2) {
|
||||
onEnter();
|
||||
}
|
||||
}
|
||||
};
|
||||
window.addEventListener('keypress', handleKeyPress);
|
||||
return () => window.removeEventListener('keypress', handleKeyPress);
|
||||
}, [surveySubStep, surveyData, dispatch, onEnter]);
|
||||
|
||||
const handleUseCaseToggle = (value: UseCase) => {
|
||||
const currentUseCases = surveyData.main_use_cases || [];
|
||||
const isSelected = currentUseCases.includes(value);
|
||||
const newUseCases = isSelected ? currentUseCases.filter(useCase => useCase !== value) : [...currentUseCases, value];
|
||||
handleSurveyDataChange('main_use_cases', newUseCases);
|
||||
};
|
||||
|
||||
const getSubStepTitle = () => {
|
||||
switch (surveySubStep) {
|
||||
case 0: return t('aboutYouStepName');
|
||||
case 1: return t('yourNeedsStepName');
|
||||
case 2: return t('discoveryStepName');
|
||||
default: return '';
|
||||
}
|
||||
};
|
||||
|
||||
const surveyPages = [
|
||||
<AboutYouPage key="about-you" styles={styles} isDarkMode={isDarkMode} token={token} surveyData={surveyData} handleSurveyDataChange={handleSurveyDataChange} isModal={isModal} />,
|
||||
<YourNeedsPage key="your-needs" styles={styles} isDarkMode={isDarkMode} token={token} surveyData={surveyData} handleSurveyDataChange={handleSurveyDataChange} handleUseCaseToggle={handleUseCaseToggle} isModal={isModal} />,
|
||||
<DiscoveryPage key="discovery" styles={styles} isDarkMode={isDarkMode} token={token} surveyData={surveyData} handleSurveyDataChange={handleSurveyDataChange} isModal={isModal} />
|
||||
];
|
||||
|
||||
React.useEffect(() => {
|
||||
dispatch(setSurveySubStep(0));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
{/* Progress Indicator */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium" style={{ color: token?.colorTextSecondary }}>Step {surveySubStep + 1} of 3: {getSubStepTitle()}</span>
|
||||
<span className="text-sm" style={{ color: token?.colorTextSecondary }}>{Math.round(((surveySubStep + 1) / 3) * 100)}%</span>
|
||||
</div>
|
||||
<Progress percent={Math.round(((surveySubStep + 1) / 3) * 100)} showInfo={false} strokeColor={token?.colorPrimary} className="mb-0" />
|
||||
</div>
|
||||
|
||||
{/* Current Page Content */}
|
||||
<div className="min-h-[400px] flex flex-col survey-page-transition" key={surveySubStep}>
|
||||
{surveyPages[surveySubStep]}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,134 +1,130 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { Form, Input, Button, Typography, List, InputRef } from '@/shared/antd-imports';
|
||||
import { PlusOutlined, DeleteOutlined, CloseCircleOutlined } from '@/shared/antd-imports';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Input, Button, Typography, Card } from '@/shared/antd-imports';
|
||||
import { PlusOutlined, DeleteOutlined, CloseCircleOutlined, CheckCircleOutlined } from '@/shared/antd-imports';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { RootState } from '@/app/store';
|
||||
import { setTasks } from '@/features/account-setup/account-setup.slice';
|
||||
import { sanitizeInput } from '@/utils/sanitizeInput';
|
||||
|
||||
const { Title } = Typography;
|
||||
const { Title, Paragraph, Text } = Typography;
|
||||
|
||||
interface Props {
|
||||
onEnter: () => void;
|
||||
styles: any;
|
||||
isDarkMode: boolean;
|
||||
token?: any;
|
||||
}
|
||||
|
||||
export const TasksStep: React.FC<Props> = ({ onEnter, styles, isDarkMode }) => {
|
||||
|
||||
export const TasksStep: React.FC<Props> = ({ onEnter, styles, isDarkMode, token }) => {
|
||||
const { t } = useTranslation('account-setup');
|
||||
const dispatch = useDispatch();
|
||||
const { tasks, projectName } = useSelector((state: RootState) => state.accountSetupReducer);
|
||||
const inputRefs = useRef<(InputRef | null)[]>([]);
|
||||
const { tasks, projectName, surveyData } = useSelector((state: RootState) => state.accountSetupReducer);
|
||||
const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
|
||||
const [showSuggestions, setShowSuggestions] = useState(false);
|
||||
const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
|
||||
|
||||
const addTask = () => {
|
||||
if (tasks.length == 5) return;
|
||||
|
||||
if (tasks.length >= 5) return;
|
||||
const newId = tasks.length > 0 ? Math.max(...tasks.map(t => t.id)) + 1 : 0;
|
||||
dispatch(setTasks([...tasks, { id: newId, value: '' }]));
|
||||
setTimeout(() => {
|
||||
inputRefs.current[newId]?.focus();
|
||||
}, 0);
|
||||
setTimeout(() => inputRefs.current[tasks.length]?.focus(), 100);
|
||||
};
|
||||
|
||||
const removeTask = (id: number) => {
|
||||
if (tasks.length > 1) {
|
||||
dispatch(setTasks(tasks.filter(task => task.id !== id)));
|
||||
}
|
||||
if (tasks.length > 1) dispatch(setTasks(tasks.filter(task => task.id !== id)));
|
||||
};
|
||||
|
||||
const updateTask = (id: number, value: string) => {
|
||||
const sanitizedValue = sanitizeInput(value);
|
||||
dispatch(
|
||||
setTasks(tasks.map(task => (task.id === id ? { ...task, value: sanitizedValue } : task)))
|
||||
);
|
||||
dispatch(setTasks(tasks.map(task => (task.id === id ? { ...task, value: sanitizedValue } : task))));
|
||||
};
|
||||
|
||||
const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
const input = e.currentTarget as HTMLInputElement;
|
||||
if (!input.value.trim()) return;
|
||||
e.preventDefault();
|
||||
addTask();
|
||||
const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {
|
||||
if (e.key === 'Enter') {
|
||||
const input = e.currentTarget as HTMLInputElement;
|
||||
if (input.value.trim()) {
|
||||
e.preventDefault();
|
||||
if (index === tasks.length - 1 && tasks.length < 5) addTask();
|
||||
else if (index < tasks.length - 1) inputRefs.current[index + 1]?.focus();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleSuggestionClick = (suggestion: string) => {
|
||||
const emptyTaskIndex = tasks.findIndex(task => !task.value.trim());
|
||||
if (emptyTaskIndex !== -1) {
|
||||
updateTask(tasks[emptyTaskIndex].id, suggestion);
|
||||
} else if (tasks.length < 5) {
|
||||
const newId = tasks.length > 0 ? Math.max(...tasks.map(t => t.id)) + 1 : 0;
|
||||
dispatch(setTasks([...tasks, { id: newId, value: suggestion }]));
|
||||
}
|
||||
setShowSuggestions(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => inputRefs.current[0]?.focus(), 200);
|
||||
}, []);
|
||||
|
||||
// Function to set ref that doesn't return anything (void)
|
||||
const setInputRef = (index: number) => (el: InputRef | null) => {
|
||||
inputRefs.current[index] = el;
|
||||
};
|
||||
|
||||
return (
|
||||
<Form
|
||||
className="create-first-task-form"
|
||||
style={{
|
||||
minHeight: '300px',
|
||||
width: '600px',
|
||||
paddingBottom: '1rem',
|
||||
marginBottom: '3rem',
|
||||
marginTop: '3rem',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<Form.Item>
|
||||
<Title level={2} style={{ marginBottom: '1rem' }}>
|
||||
<div className="w-full tasks-step">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<Title level={3} className="mb-2" style={{ color: token?.colorText }}>
|
||||
{t('tasksStepTitle')}
|
||||
</Title>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
layout="vertical"
|
||||
rules={[{ required: true }]}
|
||||
label={
|
||||
<span className="font-medium">
|
||||
{t('tasksStepLabel')} "<mark>{projectName}</mark>". {t('maxTasks')}
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<List
|
||||
dataSource={tasks}
|
||||
bordered={false}
|
||||
renderItem={(task, index) => (
|
||||
<List.Item key={task.id}>
|
||||
<div style={{ display: 'flex', width: '600px' }}>
|
||||
<Input
|
||||
placeholder="Your Task"
|
||||
value={task.value}
|
||||
onChange={e => updateTask(task.id, e.target.value)}
|
||||
onPressEnter={handleKeyPress}
|
||||
ref={setInputRef(index)}
|
||||
/>
|
||||
<Button
|
||||
className="custom-close-button"
|
||||
style={{ marginLeft: '48px' }}
|
||||
type="text"
|
||||
icon={<CloseCircleOutlined />}
|
||||
disabled={tasks.length === 1}
|
||||
onClick={() => removeTask(task.id)}
|
||||
/>
|
||||
<Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
|
||||
{t('tasksStepDescription', { projectName })}
|
||||
</Paragraph>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Tasks List */}
|
||||
<div className="mb-6">
|
||||
<div className="space-y-4">
|
||||
{tasks.map((task, index) => (
|
||||
<Card
|
||||
key={task.id}
|
||||
className={`task-item-card transition-all duration-200 ${
|
||||
focusedIndex === index ? 'border-2' : ''
|
||||
}`}
|
||||
style={{
|
||||
borderColor: focusedIndex === index ? token?.colorPrimary : token?.colorBorder,
|
||||
backgroundColor: token?.colorBgContainer
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-full text-sm font-medium" style={{ backgroundColor: task.value.trim() ? token?.colorSuccess : token?.colorBorderSecondary, color: task.value.trim() ? '#fff' : token?.colorTextSecondary }}>
|
||||
{task.value.trim() ? <CheckCircleOutlined /> : index + 1}
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<Input
|
||||
placeholder={t('taskPlaceholder', { index: index + 1 })}
|
||||
value={task.value}
|
||||
onChange={e => updateTask(task.id, e.target.value)}
|
||||
onKeyPress={e => handleKeyPress(e, index)}
|
||||
onFocus={() => setFocusedIndex(index)}
|
||||
onBlur={() => setFocusedIndex(null)}
|
||||
ref={(el) => { inputRefs.current[index] = el as any; }}
|
||||
className="text-base border-0 shadow-none task-input"
|
||||
style={{ backgroundColor: 'transparent', color: token?.colorText }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{tasks.length > 1 && <Button type="text" icon={<CloseCircleOutlined />} onClick={() => removeTask(task.id)} className="text-gray-400 hover:text-red-500" style={{ color: token?.colorTextTertiary }} />}
|
||||
</div>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
<Button
|
||||
type="dashed"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={addTask}
|
||||
disabled={tasks.length == 5}
|
||||
style={{ marginTop: '16px' }}
|
||||
>
|
||||
{t('tasksStepAddAnother')}
|
||||
</Button>
|
||||
<div
|
||||
style={{
|
||||
marginTop: '24px',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
></div>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{tasks.length < 5 && (
|
||||
<Button type="dashed" icon={<PlusOutlined />} onClick={addTask} className="w-full mt-4 h-12 text-base" style={{ borderColor: token?.colorBorder, color: token?.colorTextSecondary }}>{t('addAnotherTask', { current: tasks.length, max: 5 })}</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,612 @@
|
||||
import React, { useReducer, useMemo, useCallback, useRef, useEffect, useState } from 'react';
|
||||
import {
|
||||
GanttTask,
|
||||
ColumnConfig,
|
||||
TimelineConfig,
|
||||
VirtualScrollConfig,
|
||||
ZoomLevel,
|
||||
GanttState,
|
||||
GanttAction,
|
||||
AdvancedGanttProps,
|
||||
SelectionState,
|
||||
GanttViewState,
|
||||
DragState
|
||||
} from '../../types/advanced-gantt.types';
|
||||
import GanttGrid from './GanttGrid';
|
||||
import DraggableTaskBar from './DraggableTaskBar';
|
||||
import TimelineMarkers, { holidayPresets, workingDayPresets } from './TimelineMarkers';
|
||||
import VirtualScrollContainer, { VirtualTimeline } from './VirtualScrollContainer';
|
||||
import {
|
||||
usePerformanceMonitoring,
|
||||
useTaskCalculations,
|
||||
useDateCalculations,
|
||||
useDebounce,
|
||||
useThrottle
|
||||
} from '../../utils/gantt-performance';
|
||||
import { useAppSelector } from '../../hooks/useAppSelector';
|
||||
import { themeWiseColor } from '../../utils/themeWiseColor';
|
||||
|
||||
// Default configurations
|
||||
const defaultColumns: ColumnConfig[] = [
|
||||
{
|
||||
field: 'name',
|
||||
title: 'Task Name',
|
||||
width: 250,
|
||||
minWidth: 150,
|
||||
resizable: true,
|
||||
sortable: true,
|
||||
fixed: true,
|
||||
editor: 'text'
|
||||
},
|
||||
{
|
||||
field: 'startDate',
|
||||
title: 'Start Date',
|
||||
width: 120,
|
||||
minWidth: 100,
|
||||
resizable: true,
|
||||
sortable: true,
|
||||
fixed: true,
|
||||
editor: 'date'
|
||||
},
|
||||
{
|
||||
field: 'endDate',
|
||||
title: 'End Date',
|
||||
width: 120,
|
||||
minWidth: 100,
|
||||
resizable: true,
|
||||
sortable: true,
|
||||
fixed: true,
|
||||
editor: 'date'
|
||||
},
|
||||
{
|
||||
field: 'duration',
|
||||
title: 'Duration',
|
||||
width: 80,
|
||||
minWidth: 60,
|
||||
resizable: true,
|
||||
sortable: false,
|
||||
fixed: true
|
||||
},
|
||||
{
|
||||
field: 'progress',
|
||||
title: 'Progress',
|
||||
width: 100,
|
||||
minWidth: 80,
|
||||
resizable: true,
|
||||
sortable: true,
|
||||
fixed: true,
|
||||
editor: 'number'
|
||||
},
|
||||
];
|
||||
|
||||
const defaultTimelineConfig: TimelineConfig = {
|
||||
topTier: { unit: 'month', format: 'MMM yyyy', height: 30 },
|
||||
bottomTier: { unit: 'day', format: 'dd', height: 25 },
|
||||
showWeekends: true,
|
||||
showNonWorkingDays: true,
|
||||
holidays: holidayPresets.US,
|
||||
workingDays: workingDayPresets.standard,
|
||||
workingHours: { start: 9, end: 17 },
|
||||
dayWidth: 30,
|
||||
};
|
||||
|
||||
const defaultVirtualScrollConfig: VirtualScrollConfig = {
|
||||
enableRowVirtualization: true,
|
||||
enableTimelineVirtualization: true,
|
||||
bufferSize: 10,
|
||||
itemHeight: 40,
|
||||
overscan: 5,
|
||||
};
|
||||
|
||||
const defaultZoomLevels: ZoomLevel[] = [
|
||||
{
|
||||
name: 'Year',
|
||||
dayWidth: 2,
|
||||
scale: 0.1,
|
||||
topTier: { unit: 'year', format: 'yyyy' },
|
||||
bottomTier: { unit: 'month', format: 'MMM' }
|
||||
},
|
||||
{
|
||||
name: 'Month',
|
||||
dayWidth: 8,
|
||||
scale: 0.5,
|
||||
topTier: { unit: 'month', format: 'MMM yyyy' },
|
||||
bottomTier: { unit: 'week', format: 'w' }
|
||||
},
|
||||
{
|
||||
name: 'Week',
|
||||
dayWidth: 25,
|
||||
scale: 1,
|
||||
topTier: { unit: 'week', format: 'MMM dd' },
|
||||
bottomTier: { unit: 'day', format: 'dd' }
|
||||
},
|
||||
{
|
||||
name: 'Day',
|
||||
dayWidth: 50,
|
||||
scale: 2,
|
||||
topTier: { unit: 'day', format: 'MMM dd' },
|
||||
bottomTier: { unit: 'hour', format: 'HH' }
|
||||
},
|
||||
];
|
||||
|
||||
// Gantt state reducer
|
||||
function ganttReducer(state: GanttState, action: GanttAction): GanttState {
|
||||
switch (action.type) {
|
||||
case 'SET_TASKS':
|
||||
return { ...state, tasks: action.payload };
|
||||
|
||||
case 'UPDATE_TASK':
|
||||
return {
|
||||
...state,
|
||||
tasks: state.tasks.map(task =>
|
||||
task.id === action.payload.id
|
||||
? { ...task, ...action.payload.updates }
|
||||
: task
|
||||
),
|
||||
};
|
||||
|
||||
case 'ADD_TASK':
|
||||
return { ...state, tasks: [...state.tasks, action.payload] };
|
||||
|
||||
case 'DELETE_TASK':
|
||||
return {
|
||||
...state,
|
||||
tasks: state.tasks.filter(task => task.id !== action.payload),
|
||||
};
|
||||
|
||||
case 'SET_SELECTION':
|
||||
return {
|
||||
...state,
|
||||
selectionState: { ...state.selectionState, selectedTasks: action.payload },
|
||||
};
|
||||
|
||||
case 'SET_DRAG_STATE':
|
||||
return { ...state, dragState: action.payload };
|
||||
|
||||
case 'SET_ZOOM_LEVEL':
|
||||
const newZoomLevel = Math.max(0, Math.min(state.zoomLevels.length - 1, action.payload));
|
||||
return {
|
||||
...state,
|
||||
viewState: { ...state.viewState, zoomLevel: newZoomLevel },
|
||||
timelineConfig: {
|
||||
...state.timelineConfig,
|
||||
dayWidth: state.zoomLevels[newZoomLevel].dayWidth,
|
||||
topTier: state.zoomLevels[newZoomLevel].topTier,
|
||||
bottomTier: state.zoomLevels[newZoomLevel].bottomTier,
|
||||
},
|
||||
};
|
||||
|
||||
case 'SET_SCROLL_POSITION':
|
||||
return {
|
||||
...state,
|
||||
viewState: { ...state.viewState, scrollPosition: action.payload },
|
||||
};
|
||||
|
||||
case 'SET_SPLITTER_POSITION':
|
||||
return {
|
||||
...state,
|
||||
viewState: { ...state.viewState, splitterPosition: action.payload },
|
||||
};
|
||||
|
||||
case 'TOGGLE_TASK_EXPANSION':
|
||||
return {
|
||||
...state,
|
||||
tasks: state.tasks.map(task =>
|
||||
task.id === action.payload
|
||||
? { ...task, isExpanded: !task.isExpanded }
|
||||
: task
|
||||
),
|
||||
};
|
||||
|
||||
case 'SET_VIEW_STATE':
|
||||
return {
|
||||
...state,
|
||||
viewState: { ...state.viewState, ...action.payload },
|
||||
};
|
||||
|
||||
case 'UPDATE_COLUMN_WIDTH':
|
||||
return {
|
||||
...state,
|
||||
columns: state.columns.map(col =>
|
||||
col.field === action.payload.field
|
||||
? { ...col, width: action.payload.width }
|
||||
: col
|
||||
),
|
||||
};
|
||||
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
const AdvancedGanttChart: React.FC<AdvancedGanttProps> = ({
|
||||
tasks: initialTasks,
|
||||
columns = defaultColumns,
|
||||
timelineConfig = {},
|
||||
virtualScrollConfig = {},
|
||||
zoomLevels = defaultZoomLevels,
|
||||
initialViewState = {},
|
||||
initialSelection = [],
|
||||
onTaskUpdate,
|
||||
onTaskCreate,
|
||||
onTaskDelete,
|
||||
onTaskMove,
|
||||
onTaskResize,
|
||||
onProgressChange,
|
||||
onSelectionChange,
|
||||
onColumnResize,
|
||||
onDependencyCreate,
|
||||
onDependencyDelete,
|
||||
className = '',
|
||||
style = {},
|
||||
theme = 'auto',
|
||||
enableDragDrop = true,
|
||||
enableResize = true,
|
||||
enableProgressEdit = true,
|
||||
enableInlineEdit = true,
|
||||
enableVirtualScrolling = true,
|
||||
enableDebouncing = true,
|
||||
debounceDelay = 300,
|
||||
maxVisibleTasks = 1000,
|
||||
}) => {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
|
||||
const themeMode = useAppSelector(state => state.themeReducer.mode);
|
||||
const { startMeasure, endMeasure, metrics } = usePerformanceMonitoring();
|
||||
const { getDaysBetween } = useDateCalculations();
|
||||
|
||||
// Initialize state
|
||||
const initialState: GanttState = {
|
||||
tasks: initialTasks,
|
||||
columns,
|
||||
timelineConfig: { ...defaultTimelineConfig, ...timelineConfig },
|
||||
virtualScrollConfig: { ...defaultVirtualScrollConfig, ...virtualScrollConfig },
|
||||
dragState: null,
|
||||
selectionState: {
|
||||
selectedTasks: initialSelection,
|
||||
selectedRows: [],
|
||||
focusedTask: undefined,
|
||||
},
|
||||
viewState: {
|
||||
zoomLevel: 2, // Week view by default
|
||||
scrollPosition: { x: 0, y: 0 },
|
||||
viewportSize: { width: 0, height: 0 },
|
||||
splitterPosition: 40, // 40% for grid, 60% for timeline
|
||||
showCriticalPath: false,
|
||||
showBaseline: false,
|
||||
showProgress: true,
|
||||
showDependencies: true,
|
||||
autoSchedule: false,
|
||||
readOnly: false,
|
||||
...initialViewState,
|
||||
},
|
||||
zoomLevels,
|
||||
performanceMetrics: {
|
||||
renderTime: 0,
|
||||
taskCount: initialTasks.length,
|
||||
visibleTaskCount: 0,
|
||||
},
|
||||
};
|
||||
|
||||
const [state, dispatch] = useReducer(ganttReducer, initialState);
|
||||
const { taskMap, parentChildMap, totalTasks } = useTaskCalculations(state.tasks);
|
||||
|
||||
// Calculate project timeline bounds
|
||||
const projectBounds = useMemo(() => {
|
||||
if (state.tasks.length === 0) {
|
||||
const today = new Date();
|
||||
return {
|
||||
start: new Date(today.getFullYear(), today.getMonth(), 1),
|
||||
end: new Date(today.getFullYear(), today.getMonth() + 3, 0),
|
||||
};
|
||||
}
|
||||
|
||||
const startDates = state.tasks.map(task => task.startDate);
|
||||
const endDates = state.tasks.map(task => task.endDate);
|
||||
const minStart = new Date(Math.min(...startDates.map(d => d.getTime())));
|
||||
const maxEnd = new Date(Math.max(...endDates.map(d => d.getTime())));
|
||||
|
||||
// Add some padding
|
||||
minStart.setDate(minStart.getDate() - 7);
|
||||
maxEnd.setDate(maxEnd.getDate() + 7);
|
||||
|
||||
return { start: minStart, end: maxEnd };
|
||||
}, [state.tasks]);
|
||||
|
||||
// Debounced event handlers
|
||||
const debouncedTaskUpdate = useDebounce(
|
||||
useCallback((taskId: string, updates: Partial<GanttTask>) => {
|
||||
dispatch({ type: 'UPDATE_TASK', payload: { id: taskId, updates } });
|
||||
onTaskUpdate?.(taskId, updates);
|
||||
}, [onTaskUpdate]),
|
||||
enableDebouncing ? debounceDelay : 0
|
||||
);
|
||||
|
||||
const debouncedTaskMove = useDebounce(
|
||||
useCallback((taskId: string, newDates: { start: Date; end: Date }) => {
|
||||
dispatch({ type: 'UPDATE_TASK', payload: {
|
||||
id: taskId,
|
||||
updates: { startDate: newDates.start, endDate: newDates.end }
|
||||
}});
|
||||
onTaskMove?.(taskId, newDates);
|
||||
}, [onTaskMove]),
|
||||
enableDebouncing ? debounceDelay : 0
|
||||
);
|
||||
|
||||
const debouncedProgressChange = useDebounce(
|
||||
useCallback((taskId: string, progress: number) => {
|
||||
dispatch({ type: 'UPDATE_TASK', payload: { id: taskId, updates: { progress } }});
|
||||
onProgressChange?.(taskId, progress);
|
||||
}, [onProgressChange]),
|
||||
enableDebouncing ? debounceDelay : 0
|
||||
);
|
||||
|
||||
// Throttled scroll handler
|
||||
const throttledScrollHandler = useThrottle(
|
||||
useCallback((scrollLeft: number, scrollTop: number) => {
|
||||
dispatch({ type: 'SET_SCROLL_POSITION', payload: { x: scrollLeft, y: scrollTop } });
|
||||
}, []),
|
||||
16 // 60fps
|
||||
);
|
||||
|
||||
// Container size observer
|
||||
useEffect(() => {
|
||||
const observer = new ResizeObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
const { width, height } = entry.contentRect;
|
||||
setContainerSize({ width, height });
|
||||
dispatch({
|
||||
type: 'SET_VIEW_STATE',
|
||||
payload: { viewportSize: { width, height } }
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if (containerRef.current) {
|
||||
observer.observe(containerRef.current);
|
||||
}
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
// Calculate grid and timeline dimensions
|
||||
const gridWidth = useMemo(() => {
|
||||
return Math.floor(containerSize.width * (state.viewState.splitterPosition / 100));
|
||||
}, [containerSize.width, state.viewState.splitterPosition]);
|
||||
|
||||
const timelineWidth = useMemo(() => {
|
||||
return containerSize.width - gridWidth;
|
||||
}, [containerSize.width, gridWidth]);
|
||||
|
||||
// Handle zoom changes
|
||||
const handleZoomChange = useCallback((direction: 'in' | 'out') => {
|
||||
const currentZoom = state.viewState.zoomLevel;
|
||||
const newZoom = direction === 'in'
|
||||
? Math.min(state.zoomLevels.length - 1, currentZoom + 1)
|
||||
: Math.max(0, currentZoom - 1);
|
||||
|
||||
dispatch({ type: 'SET_ZOOM_LEVEL', payload: newZoom });
|
||||
}, [state.viewState.zoomLevel, state.zoomLevels.length]);
|
||||
|
||||
// Theme-aware colors
|
||||
const colors = useMemo(() => ({
|
||||
background: themeWiseColor('#ffffff', '#1f2937', themeMode),
|
||||
border: themeWiseColor('#e5e7eb', '#4b5563', themeMode),
|
||||
timelineBackground: themeWiseColor('#f8f9fa', '#374151', themeMode),
|
||||
}), [themeMode]);
|
||||
|
||||
// Render timeline header
|
||||
const renderTimelineHeader = () => {
|
||||
const currentZoom = state.zoomLevels[state.viewState.zoomLevel];
|
||||
const totalDays = getDaysBetween(projectBounds.start, projectBounds.end);
|
||||
const totalWidth = totalDays * state.timelineConfig.dayWidth;
|
||||
|
||||
return (
|
||||
<div className="timeline-header border-b" style={{
|
||||
height: (currentZoom.topTier.height || 30) + (currentZoom.bottomTier.height || 25),
|
||||
backgroundColor: colors.timelineBackground,
|
||||
borderColor: colors.border,
|
||||
}}>
|
||||
<VirtualTimeline
|
||||
startDate={projectBounds.start}
|
||||
endDate={projectBounds.end}
|
||||
dayWidth={state.timelineConfig.dayWidth}
|
||||
containerWidth={timelineWidth}
|
||||
containerHeight={(currentZoom.topTier.height || 30) + (currentZoom.bottomTier.height || 25)}
|
||||
onScroll={throttledScrollHandler}
|
||||
>
|
||||
{(date, index, style) => (
|
||||
<div className="timeline-cell flex flex-col border-r text-xs text-center" style={{
|
||||
...style,
|
||||
borderColor: colors.border,
|
||||
}}>
|
||||
<div className="top-tier border-b px-1 py-1" style={{
|
||||
height: currentZoom.topTier.height || 30,
|
||||
borderColor: colors.border,
|
||||
}}>
|
||||
{formatDateForUnit(date, currentZoom.topTier.unit)}
|
||||
</div>
|
||||
<div className="bottom-tier px-1 py-1" style={{
|
||||
height: currentZoom.bottomTier.height || 25,
|
||||
}}>
|
||||
{formatDateForUnit(date, currentZoom.bottomTier.unit)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</VirtualTimeline>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Render timeline content
|
||||
const renderTimelineContent = () => {
|
||||
const headerHeight = (state.zoomLevels[state.viewState.zoomLevel].topTier.height || 30) +
|
||||
(state.zoomLevels[state.viewState.zoomLevel].bottomTier.height || 25);
|
||||
const contentHeight = containerSize.height - headerHeight;
|
||||
|
||||
return (
|
||||
<div className="timeline-content relative" style={{ height: contentHeight }}>
|
||||
{/* Timeline markers (weekends, holidays, etc.) */}
|
||||
<TimelineMarkers
|
||||
startDate={projectBounds.start}
|
||||
endDate={projectBounds.end}
|
||||
dayWidth={state.timelineConfig.dayWidth}
|
||||
containerHeight={contentHeight}
|
||||
timelineConfig={state.timelineConfig}
|
||||
holidays={state.timelineConfig.holidays}
|
||||
showWeekends={state.timelineConfig.showWeekends}
|
||||
showHolidays={true}
|
||||
showToday={true}
|
||||
/>
|
||||
|
||||
{/* Task bars */}
|
||||
<VirtualScrollContainer
|
||||
items={state.tasks}
|
||||
itemHeight={state.virtualScrollConfig.itemHeight}
|
||||
containerHeight={contentHeight}
|
||||
containerWidth={timelineWidth}
|
||||
overscan={state.virtualScrollConfig.overscan}
|
||||
onScroll={throttledScrollHandler}
|
||||
>
|
||||
{(task, index, style) => (
|
||||
<DraggableTaskBar
|
||||
key={task.id}
|
||||
task={task}
|
||||
timelineStart={projectBounds.start}
|
||||
dayWidth={state.timelineConfig.dayWidth}
|
||||
rowHeight={state.virtualScrollConfig.itemHeight}
|
||||
index={index}
|
||||
onTaskMove={debouncedTaskMove}
|
||||
onTaskResize={debouncedTaskMove}
|
||||
onProgressChange={debouncedProgressChange}
|
||||
enableDragDrop={enableDragDrop}
|
||||
enableResize={enableResize}
|
||||
enableProgressEdit={enableProgressEdit}
|
||||
readOnly={state.viewState.readOnly}
|
||||
/>
|
||||
)}
|
||||
</VirtualScrollContainer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Render toolbar
|
||||
const renderToolbar = () => (
|
||||
<div className="gantt-toolbar flex items-center justify-between p-2 border-b bg-gray-50 dark:bg-gray-800" style={{
|
||||
borderColor: colors.border,
|
||||
}}>
|
||||
<div className="toolbar-left flex items-center space-x-2">
|
||||
<button
|
||||
onClick={() => handleZoomChange('out')}
|
||||
disabled={state.viewState.zoomLevel === 0}
|
||||
className="px-2 py-1 text-sm border rounded hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50"
|
||||
>
|
||||
Zoom Out
|
||||
</button>
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{state.zoomLevels[state.viewState.zoomLevel].name}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => handleZoomChange('in')}
|
||||
disabled={state.viewState.zoomLevel === state.zoomLevels.length - 1}
|
||||
className="px-2 py-1 text-sm border rounded hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50"
|
||||
>
|
||||
Zoom In
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="toolbar-right flex items-center space-x-2 text-xs text-gray-500">
|
||||
<span>Tasks: {state.tasks.length}</span>
|
||||
<span>•</span>
|
||||
<span>Render: {Math.round(metrics.renderTime)}ms</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
// Performance monitoring
|
||||
useEffect(() => {
|
||||
startMeasure('render');
|
||||
return () => endMeasure('render');
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={`advanced-gantt-chart flex flex-col ${className}`}
|
||||
style={{
|
||||
height: '100%',
|
||||
backgroundColor: colors.background,
|
||||
...style,
|
||||
}}
|
||||
>
|
||||
{/* Toolbar */}
|
||||
{renderToolbar()}
|
||||
|
||||
{/* Main content */}
|
||||
<div className="gantt-content flex flex-1 overflow-hidden">
|
||||
{/* Grid */}
|
||||
<div className="gantt-grid-container" style={{ width: gridWidth }}>
|
||||
<GanttGrid
|
||||
tasks={state.tasks}
|
||||
columns={state.columns}
|
||||
rowHeight={state.virtualScrollConfig.itemHeight}
|
||||
containerHeight={containerSize.height - 50} // Subtract toolbar height
|
||||
selection={state.selectionState}
|
||||
enableInlineEdit={enableInlineEdit}
|
||||
onTaskClick={(task) => {
|
||||
// Handle task selection
|
||||
const newSelection = { ...state.selectionState, selectedTasks: [task.id] };
|
||||
dispatch({ type: 'SET_SELECTION', payload: [task.id] });
|
||||
onSelectionChange?.(newSelection);
|
||||
}}
|
||||
onTaskExpand={(taskId) => {
|
||||
dispatch({ type: 'TOGGLE_TASK_EXPANSION', payload: taskId });
|
||||
}}
|
||||
onColumnResize={(field, width) => {
|
||||
dispatch({ type: 'UPDATE_COLUMN_WIDTH', payload: { field, width } });
|
||||
onColumnResize?.(field, width);
|
||||
}}
|
||||
onTaskUpdate={debouncedTaskUpdate}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Timeline */}
|
||||
<div className="gantt-timeline-container border-l" style={{
|
||||
width: timelineWidth,
|
||||
borderColor: colors.border,
|
||||
}}>
|
||||
{renderTimelineHeader()}
|
||||
{renderTimelineContent()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Helper function to format dates based on unit
|
||||
function formatDateForUnit(date: Date, unit: string): string {
|
||||
switch (unit) {
|
||||
case 'year':
|
||||
return date.getFullYear().toString();
|
||||
case 'month':
|
||||
return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
|
||||
case 'week':
|
||||
return `W${getWeekNumber(date)}`;
|
||||
case 'day':
|
||||
return date.getDate().toString();
|
||||
case 'hour':
|
||||
return date.getHours().toString().padStart(2, '0');
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
function getWeekNumber(date: Date): number {
|
||||
const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
|
||||
const dayNum = d.getUTCDay() || 7;
|
||||
d.setUTCDate(d.getUTCDate() + 4 - dayNum);
|
||||
const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
|
||||
return Math.ceil((((d.getTime() - yearStart.getTime()) / 86400000) + 1) / 7);
|
||||
}
|
||||
|
||||
export default AdvancedGanttChart;
|
||||
@@ -0,0 +1,668 @@
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { Button, Space, message, Card } from 'antd';
|
||||
import AdvancedGanttChart from './AdvancedGanttChart';
|
||||
import { GanttTask, ColumnConfig } from '../../types/advanced-gantt.types';
|
||||
import { useAppSelector } from '../../hooks/useAppSelector';
|
||||
import { holidayPresets, workingDayPresets } from './TimelineMarkers';
|
||||
|
||||
// Enhanced sample data with more realistic project structure
|
||||
const generateSampleTasks = (): GanttTask[] => {
|
||||
const baseDate = new Date(2024, 11, 1); // December 1, 2024
|
||||
|
||||
return [
|
||||
// Project Phase 1: Planning & Design
|
||||
{
|
||||
id: 'project-1',
|
||||
name: '🚀 Web Platform Development',
|
||||
startDate: new Date(2024, 11, 1),
|
||||
endDate: new Date(2025, 2, 31),
|
||||
progress: 45,
|
||||
type: 'project',
|
||||
status: 'in-progress',
|
||||
priority: 'high',
|
||||
color: '#1890ff',
|
||||
hasChildren: true,
|
||||
isExpanded: true,
|
||||
level: 0,
|
||||
},
|
||||
{
|
||||
id: 'planning-phase',
|
||||
name: '📋 Planning & Analysis Phase',
|
||||
startDate: new Date(2024, 11, 1),
|
||||
endDate: new Date(2024, 11, 20),
|
||||
progress: 85,
|
||||
type: 'project',
|
||||
status: 'in-progress',
|
||||
priority: 'high',
|
||||
parent: 'project-1',
|
||||
color: '#52c41a',
|
||||
hasChildren: true,
|
||||
isExpanded: true,
|
||||
level: 1,
|
||||
},
|
||||
{
|
||||
id: 'requirements-analysis',
|
||||
name: 'Requirements Gathering & Analysis',
|
||||
startDate: new Date(2024, 11, 1),
|
||||
endDate: new Date(2024, 11, 8),
|
||||
progress: 100,
|
||||
type: 'task',
|
||||
status: 'completed',
|
||||
priority: 'high',
|
||||
parent: 'planning-phase',
|
||||
assignee: {
|
||||
id: 'user-1',
|
||||
name: 'Alice Johnson',
|
||||
avatar: 'https://ui-avatars.com/api/?name=Alice+Johnson&background=1890ff&color=fff',
|
||||
},
|
||||
tags: ['research', 'documentation'],
|
||||
level: 2,
|
||||
},
|
||||
{
|
||||
id: 'technical-architecture',
|
||||
name: 'Technical Architecture Design',
|
||||
startDate: new Date(2024, 11, 8),
|
||||
endDate: new Date(2024, 11, 18),
|
||||
progress: 75,
|
||||
type: 'task',
|
||||
status: 'in-progress',
|
||||
priority: 'high',
|
||||
parent: 'planning-phase',
|
||||
assignee: {
|
||||
id: 'user-2',
|
||||
name: 'Bob Smith',
|
||||
avatar: 'https://ui-avatars.com/api/?name=Bob+Smith&background=52c41a&color=fff',
|
||||
},
|
||||
dependencies: ['requirements-analysis'],
|
||||
tags: ['architecture', 'design'],
|
||||
level: 2,
|
||||
},
|
||||
{
|
||||
id: 'ui-ux-design',
|
||||
name: 'UI/UX Design & Prototyping',
|
||||
startDate: new Date(2024, 11, 10),
|
||||
endDate: new Date(2024, 11, 20),
|
||||
progress: 60,
|
||||
type: 'task',
|
||||
status: 'in-progress',
|
||||
priority: 'medium',
|
||||
parent: 'planning-phase',
|
||||
assignee: {
|
||||
id: 'user-3',
|
||||
name: 'Carol Davis',
|
||||
avatar: 'https://ui-avatars.com/api/?name=Carol+Davis&background=faad14&color=fff',
|
||||
},
|
||||
dependencies: ['requirements-analysis'],
|
||||
tags: ['design', 'prototype'],
|
||||
level: 2,
|
||||
},
|
||||
{
|
||||
id: 'milestone-planning-complete',
|
||||
name: '🎯 Planning Phase Complete',
|
||||
startDate: new Date(2024, 11, 20),
|
||||
endDate: new Date(2024, 11, 20),
|
||||
progress: 0,
|
||||
type: 'milestone',
|
||||
status: 'not-started',
|
||||
priority: 'critical',
|
||||
parent: 'planning-phase',
|
||||
dependencies: ['technical-architecture', 'ui-ux-design'],
|
||||
level: 2,
|
||||
},
|
||||
|
||||
// Development Phase
|
||||
{
|
||||
id: 'development-phase',
|
||||
name: '⚡ Development Phase',
|
||||
startDate: new Date(2024, 11, 21),
|
||||
endDate: new Date(2025, 1, 28),
|
||||
progress: 35,
|
||||
type: 'project',
|
||||
status: 'in-progress',
|
||||
priority: 'high',
|
||||
parent: 'project-1',
|
||||
color: '#722ed1',
|
||||
hasChildren: true,
|
||||
isExpanded: true,
|
||||
level: 1,
|
||||
},
|
||||
{
|
||||
id: 'backend-development',
|
||||
name: 'Backend API Development',
|
||||
startDate: new Date(2024, 11, 21),
|
||||
endDate: new Date(2025, 1, 15),
|
||||
progress: 45,
|
||||
type: 'task',
|
||||
status: 'in-progress',
|
||||
priority: 'high',
|
||||
parent: 'development-phase',
|
||||
assignee: {
|
||||
id: 'user-4',
|
||||
name: 'David Wilson',
|
||||
avatar: 'https://ui-avatars.com/api/?name=David+Wilson&background=722ed1&color=fff',
|
||||
},
|
||||
dependencies: ['milestone-planning-complete'],
|
||||
tags: ['backend', 'api'],
|
||||
level: 2,
|
||||
},
|
||||
{
|
||||
id: 'frontend-development',
|
||||
name: 'Frontend React Application',
|
||||
startDate: new Date(2025, 0, 5),
|
||||
endDate: new Date(2025, 1, 25),
|
||||
progress: 25,
|
||||
type: 'task',
|
||||
status: 'in-progress',
|
||||
priority: 'high',
|
||||
parent: 'development-phase',
|
||||
assignee: {
|
||||
id: 'user-5',
|
||||
name: 'Eva Brown',
|
||||
avatar: 'https://ui-avatars.com/api/?name=Eva+Brown&background=ff7a45&color=fff',
|
||||
},
|
||||
dependencies: ['backend-development'],
|
||||
tags: ['frontend', 'react'],
|
||||
level: 2,
|
||||
},
|
||||
{
|
||||
id: 'database-setup',
|
||||
name: 'Database Schema & Migration',
|
||||
startDate: new Date(2024, 11, 21),
|
||||
endDate: new Date(2025, 0, 10),
|
||||
progress: 80,
|
||||
type: 'task',
|
||||
status: 'in-progress',
|
||||
priority: 'medium',
|
||||
parent: 'development-phase',
|
||||
assignee: {
|
||||
id: 'user-6',
|
||||
name: 'Frank Miller',
|
||||
avatar: 'https://ui-avatars.com/api/?name=Frank+Miller&background=13c2c2&color=fff',
|
||||
},
|
||||
dependencies: ['milestone-planning-complete'],
|
||||
tags: ['database', 'migration'],
|
||||
level: 2,
|
||||
},
|
||||
|
||||
// Testing Phase
|
||||
{
|
||||
id: 'testing-phase',
|
||||
name: '🧪 Testing & QA Phase',
|
||||
startDate: new Date(2025, 2, 1),
|
||||
endDate: new Date(2025, 2, 20),
|
||||
progress: 0,
|
||||
type: 'project',
|
||||
status: 'not-started',
|
||||
priority: 'high',
|
||||
parent: 'project-1',
|
||||
color: '#fa8c16',
|
||||
hasChildren: true,
|
||||
isExpanded: false,
|
||||
level: 1,
|
||||
},
|
||||
{
|
||||
id: 'unit-testing',
|
||||
name: 'Unit Testing Implementation',
|
||||
startDate: new Date(2025, 2, 1),
|
||||
endDate: new Date(2025, 2, 10),
|
||||
progress: 0,
|
||||
type: 'task',
|
||||
status: 'not-started',
|
||||
priority: 'high',
|
||||
parent: 'testing-phase',
|
||||
assignee: {
|
||||
id: 'user-7',
|
||||
name: 'Grace Lee',
|
||||
avatar: 'https://ui-avatars.com/api/?name=Grace+Lee&background=fa8c16&color=fff',
|
||||
},
|
||||
dependencies: ['frontend-development'],
|
||||
tags: ['testing', 'unit'],
|
||||
level: 2,
|
||||
},
|
||||
{
|
||||
id: 'integration-testing',
|
||||
name: 'Integration & E2E Testing',
|
||||
startDate: new Date(2025, 2, 8),
|
||||
endDate: new Date(2025, 2, 18),
|
||||
progress: 0,
|
||||
type: 'task',
|
||||
status: 'not-started',
|
||||
priority: 'high',
|
||||
parent: 'testing-phase',
|
||||
assignee: {
|
||||
id: 'user-8',
|
||||
name: 'Henry Clark',
|
||||
avatar: 'https://ui-avatars.com/api/?name=Henry+Clark&background=eb2f96&color=fff',
|
||||
},
|
||||
dependencies: ['unit-testing'],
|
||||
tags: ['testing', 'integration'],
|
||||
level: 2,
|
||||
},
|
||||
{
|
||||
id: 'milestone-beta-ready',
|
||||
name: '🎯 Beta Release Ready',
|
||||
startDate: new Date(2025, 2, 20),
|
||||
endDate: new Date(2025, 2, 20),
|
||||
progress: 0,
|
||||
type: 'milestone',
|
||||
status: 'not-started',
|
||||
priority: 'critical',
|
||||
parent: 'testing-phase',
|
||||
dependencies: ['integration-testing'],
|
||||
level: 2,
|
||||
},
|
||||
|
||||
// Deployment Phase
|
||||
{
|
||||
id: 'deployment-phase',
|
||||
name: '🚀 Deployment & Launch',
|
||||
startDate: new Date(2025, 2, 21),
|
||||
endDate: new Date(2025, 2, 31),
|
||||
progress: 0,
|
||||
type: 'project',
|
||||
status: 'not-started',
|
||||
priority: 'critical',
|
||||
parent: 'project-1',
|
||||
color: '#f5222d',
|
||||
hasChildren: true,
|
||||
isExpanded: false,
|
||||
level: 1,
|
||||
},
|
||||
{
|
||||
id: 'production-deployment',
|
||||
name: 'Production Environment Setup',
|
||||
startDate: new Date(2025, 2, 21),
|
||||
endDate: new Date(2025, 2, 25),
|
||||
progress: 0,
|
||||
type: 'task',
|
||||
status: 'not-started',
|
||||
priority: 'critical',
|
||||
parent: 'deployment-phase',
|
||||
assignee: {
|
||||
id: 'user-9',
|
||||
name: 'Ivy Taylor',
|
||||
avatar: 'https://ui-avatars.com/api/?name=Ivy+Taylor&background=f5222d&color=fff',
|
||||
},
|
||||
dependencies: ['milestone-beta-ready'],
|
||||
tags: ['deployment', 'production'],
|
||||
level: 2,
|
||||
},
|
||||
{
|
||||
id: 'go-live',
|
||||
name: 'Go Live & Monitoring',
|
||||
startDate: new Date(2025, 2, 26),
|
||||
endDate: new Date(2025, 2, 31),
|
||||
progress: 0,
|
||||
type: 'task',
|
||||
status: 'not-started',
|
||||
priority: 'critical',
|
||||
parent: 'deployment-phase',
|
||||
assignee: {
|
||||
id: 'user-10',
|
||||
name: 'Jack Anderson',
|
||||
avatar: 'https://ui-avatars.com/api/?name=Jack+Anderson&background=2f54eb&color=fff',
|
||||
},
|
||||
dependencies: ['production-deployment'],
|
||||
tags: ['launch', 'monitoring'],
|
||||
level: 2,
|
||||
},
|
||||
{
|
||||
id: 'milestone-project-complete',
|
||||
name: '🎉 Project Launch Complete',
|
||||
startDate: new Date(2025, 2, 31),
|
||||
endDate: new Date(2025, 2, 31),
|
||||
progress: 0,
|
||||
type: 'milestone',
|
||||
status: 'not-started',
|
||||
priority: 'critical',
|
||||
parent: 'deployment-phase',
|
||||
dependencies: ['go-live'],
|
||||
level: 2,
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
// Enhanced column configuration
|
||||
const sampleColumns: ColumnConfig[] = [
|
||||
{
|
||||
field: 'name',
|
||||
title: 'Task / Phase Name',
|
||||
width: 300,
|
||||
minWidth: 200,
|
||||
resizable: true,
|
||||
sortable: true,
|
||||
fixed: true,
|
||||
editor: 'text'
|
||||
},
|
||||
{
|
||||
field: 'assignee',
|
||||
title: 'Assignee',
|
||||
width: 150,
|
||||
minWidth: 120,
|
||||
resizable: true,
|
||||
sortable: true,
|
||||
fixed: true
|
||||
},
|
||||
{
|
||||
field: 'startDate',
|
||||
title: 'Start Date',
|
||||
width: 120,
|
||||
minWidth: 100,
|
||||
resizable: true,
|
||||
sortable: true,
|
||||
fixed: true,
|
||||
editor: 'date'
|
||||
},
|
||||
{
|
||||
field: 'endDate',
|
||||
title: 'End Date',
|
||||
width: 120,
|
||||
minWidth: 100,
|
||||
resizable: true,
|
||||
sortable: true,
|
||||
fixed: true,
|
||||
editor: 'date'
|
||||
},
|
||||
{
|
||||
field: 'duration',
|
||||
title: 'Duration',
|
||||
width: 80,
|
||||
minWidth: 60,
|
||||
resizable: true,
|
||||
sortable: false,
|
||||
fixed: true,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
field: 'progress',
|
||||
title: 'Progress',
|
||||
width: 120,
|
||||
minWidth: 100,
|
||||
resizable: true,
|
||||
sortable: true,
|
||||
fixed: true,
|
||||
editor: 'number'
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: 'Status',
|
||||
width: 100,
|
||||
minWidth: 80,
|
||||
resizable: true,
|
||||
sortable: true,
|
||||
fixed: true,
|
||||
editor: 'select',
|
||||
editorOptions: [
|
||||
{ value: 'not-started', label: 'Not Started' },
|
||||
{ value: 'in-progress', label: 'In Progress' },
|
||||
{ value: 'completed', label: 'Completed' },
|
||||
{ value: 'on-hold', label: 'On Hold' },
|
||||
{ value: 'overdue', label: 'Overdue' },
|
||||
]
|
||||
},
|
||||
{
|
||||
field: 'priority',
|
||||
title: 'Priority',
|
||||
width: 100,
|
||||
minWidth: 80,
|
||||
resizable: true,
|
||||
sortable: true,
|
||||
fixed: true,
|
||||
editor: 'select',
|
||||
editorOptions: [
|
||||
{ value: 'low', label: 'Low' },
|
||||
{ value: 'medium', label: 'Medium' },
|
||||
{ value: 'high', label: 'High' },
|
||||
{ value: 'critical', label: 'Critical' },
|
||||
]
|
||||
},
|
||||
];
|
||||
|
||||
const AdvancedGanttDemo: React.FC = () => {
|
||||
const [tasks, setTasks] = useState<GanttTask[]>(generateSampleTasks());
|
||||
const [selectedTasks, setSelectedTasks] = useState<string[]>([]);
|
||||
const themeMode = useAppSelector(state => state.themeReducer.mode);
|
||||
|
||||
const handleTaskUpdate = (taskId: string, updates: Partial<GanttTask>) => {
|
||||
setTasks(prevTasks =>
|
||||
prevTasks.map(task =>
|
||||
task.id === taskId ? { ...task, ...updates } : task
|
||||
)
|
||||
);
|
||||
message.success(`Task "${tasks.find(t => t.id === taskId)?.name}" updated`);
|
||||
};
|
||||
|
||||
const handleTaskMove = (taskId: string, newDates: { start: Date; end: Date }) => {
|
||||
setTasks(prevTasks =>
|
||||
prevTasks.map(task =>
|
||||
task.id === taskId
|
||||
? { ...task, startDate: newDates.start, endDate: newDates.end }
|
||||
: task
|
||||
)
|
||||
);
|
||||
message.info(`Task moved: ${newDates.start.toLocaleDateString()} - ${newDates.end.toLocaleDateString()}`);
|
||||
};
|
||||
|
||||
const handleProgressChange = (taskId: string, progress: number) => {
|
||||
setTasks(prevTasks =>
|
||||
prevTasks.map(task =>
|
||||
task.id === taskId ? { ...task, progress } : task
|
||||
)
|
||||
);
|
||||
message.info(`Progress updated: ${Math.round(progress)}%`);
|
||||
};
|
||||
|
||||
const handleSelectionChange = (selection: any) => {
|
||||
setSelectedTasks(selection.selectedTasks);
|
||||
};
|
||||
|
||||
const resetToSampleData = () => {
|
||||
setTasks(generateSampleTasks());
|
||||
setSelectedTasks([]);
|
||||
message.info('Gantt chart reset to sample data');
|
||||
};
|
||||
|
||||
const addSampleTask = () => {
|
||||
const newTask: GanttTask = {
|
||||
id: `task-${Date.now()}`,
|
||||
name: `New Task ${tasks.length + 1}`,
|
||||
startDate: new Date(),
|
||||
endDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), // +7 days
|
||||
progress: 0,
|
||||
type: 'task',
|
||||
status: 'not-started',
|
||||
priority: 'medium',
|
||||
level: 0,
|
||||
};
|
||||
setTasks(prev => [...prev, newTask]);
|
||||
message.success('New task added');
|
||||
};
|
||||
|
||||
const deleteSelectedTasks = () => {
|
||||
if (selectedTasks.length === 0) {
|
||||
message.warning('No tasks selected');
|
||||
return;
|
||||
}
|
||||
|
||||
setTasks(prev => prev.filter(task => !selectedTasks.includes(task.id)));
|
||||
setSelectedTasks([]);
|
||||
message.success(`${selectedTasks.length} task(s) deleted`);
|
||||
};
|
||||
|
||||
const taskStats = useMemo(() => {
|
||||
const total = tasks.length;
|
||||
const completed = tasks.filter(t => t.status === 'completed').length;
|
||||
const inProgress = tasks.filter(t => t.status === 'in-progress').length;
|
||||
const overdue = tasks.filter(t => t.status === 'overdue').length;
|
||||
const avgProgress = tasks.reduce((sum, t) => sum + t.progress, 0) / total;
|
||||
|
||||
return { total, completed, inProgress, overdue, avgProgress };
|
||||
}, [tasks]);
|
||||
|
||||
return (
|
||||
<div className="advanced-gantt-demo p-6 bg-gray-50 dark:bg-gray-900 min-h-screen">
|
||||
{/* Header */}
|
||||
<div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm mb-4">
|
||||
<div className="p-6">
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">
|
||||
🚀 Advanced Gantt Chart Demo
|
||||
</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-4">
|
||||
Professional Gantt chart with draggable tasks, virtual scrolling, holiday markers,
|
||||
and performance optimizations for modern project management.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-end space-y-2">
|
||||
<Space>
|
||||
<Button
|
||||
onClick={addSampleTask}
|
||||
type="primary"
|
||||
className="dark:border-gray-600"
|
||||
>
|
||||
Add Task
|
||||
</Button>
|
||||
<Button
|
||||
onClick={deleteSelectedTasks}
|
||||
danger
|
||||
disabled={selectedTasks.length === 0}
|
||||
className="dark:border-gray-600"
|
||||
>
|
||||
Delete Selected ({selectedTasks.length})
|
||||
</Button>
|
||||
<Button
|
||||
onClick={resetToSampleData}
|
||||
className="dark:border-gray-600 dark:text-gray-300"
|
||||
>
|
||||
Reset Data
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Project Statistics */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div className="bg-blue-50 dark:bg-blue-900 dark:bg-opacity-20 rounded-lg p-3">
|
||||
<div className="text-blue-600 dark:text-blue-400 text-sm font-medium">Total Tasks</div>
|
||||
<div className="text-2xl font-bold text-blue-700 dark:text-blue-300">{taskStats.total}</div>
|
||||
</div>
|
||||
<div className="bg-green-50 dark:bg-green-900 dark:bg-opacity-20 rounded-lg p-3">
|
||||
<div className="text-green-600 dark:text-green-400 text-sm font-medium">Completed</div>
|
||||
<div className="text-2xl font-bold text-green-700 dark:text-green-300">{taskStats.completed}</div>
|
||||
</div>
|
||||
<div className="bg-yellow-50 dark:bg-yellow-900 dark:bg-opacity-20 rounded-lg p-3">
|
||||
<div className="text-yellow-600 dark:text-yellow-400 text-sm font-medium">In Progress</div>
|
||||
<div className="text-2xl font-bold text-yellow-700 dark:text-yellow-300">{taskStats.inProgress}</div>
|
||||
</div>
|
||||
<div className="bg-purple-50 dark:bg-purple-900 dark:bg-opacity-20 rounded-lg p-3">
|
||||
<div className="text-purple-600 dark:text-purple-400 text-sm font-medium">Avg Progress</div>
|
||||
<div className="text-2xl font-bold text-purple-700 dark:text-purple-300">
|
||||
{Math.round(taskStats.avgProgress)}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Gantt Chart */}
|
||||
<div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm" style={{ height: '70vh' }}>
|
||||
<AdvancedGanttChart
|
||||
tasks={tasks}
|
||||
columns={sampleColumns}
|
||||
timelineConfig={{
|
||||
showWeekends: true,
|
||||
showNonWorkingDays: true,
|
||||
holidays: holidayPresets.US,
|
||||
workingDays: workingDayPresets.standard,
|
||||
dayWidth: 30,
|
||||
}}
|
||||
onTaskUpdate={handleTaskUpdate}
|
||||
onTaskMove={handleTaskMove}
|
||||
onProgressChange={handleProgressChange}
|
||||
onSelectionChange={handleSelectionChange}
|
||||
enableDragDrop={true}
|
||||
enableResize={true}
|
||||
enableProgressEdit={true}
|
||||
enableInlineEdit={true}
|
||||
enableVirtualScrolling={true}
|
||||
className="h-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Feature List */}
|
||||
<div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm mt-4">
|
||||
<div className="p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">
|
||||
✨ Advanced Features Demonstrated
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 text-sm">
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-medium text-gray-900 dark:text-gray-100">Performance & UX</h4>
|
||||
<ul className="space-y-1 text-gray-600 dark:text-gray-400">
|
||||
<li>• Virtual scrolling for 1000+ tasks</li>
|
||||
<li>• Smooth 60fps drag & drop</li>
|
||||
<li>• Debounced updates</li>
|
||||
<li>• Memory-optimized rendering</li>
|
||||
<li>• Responsive design</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-medium text-gray-900 dark:text-gray-100">Gantt Features</h4>
|
||||
<ul className="space-y-1 text-gray-600 dark:text-gray-400">
|
||||
<li>• Draggable task bars</li>
|
||||
<li>• Resizable task duration</li>
|
||||
<li>• Progress editing</li>
|
||||
<li>• Multi-level hierarchy</li>
|
||||
<li>• Task dependencies</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-medium text-gray-900 dark:text-gray-100">Timeline & Markers</h4>
|
||||
<ul className="space-y-1 text-gray-600 dark:text-gray-400">
|
||||
<li>• Weekend & holiday markers</li>
|
||||
<li>• Working day indicators</li>
|
||||
<li>• Today line</li>
|
||||
<li>• Multi-tier timeline</li>
|
||||
<li>• Zoom levels (Year/Month/Week/Day)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-medium text-gray-900 dark:text-gray-100">Grid Features</h4>
|
||||
<ul className="space-y-1 text-gray-600 dark:text-gray-400">
|
||||
<li>• Fixed columns layout</li>
|
||||
<li>• Inline editing</li>
|
||||
<li>• Column resizing</li>
|
||||
<li>• Multi-select</li>
|
||||
<li>• Hierarchical tree view</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-medium text-gray-900 dark:text-gray-100">UI/UX</h4>
|
||||
<ul className="space-y-1 text-gray-600 dark:text-gray-400">
|
||||
<li>• Dark/Light theme support</li>
|
||||
<li>• Tailwind CSS styling</li>
|
||||
<li>• Consistent with Worklenz</li>
|
||||
<li>• Accessibility features</li>
|
||||
<li>• Mobile responsive</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-medium text-gray-900 dark:text-gray-100">Architecture</h4>
|
||||
<ul className="space-y-1 text-gray-600 dark:text-gray-400">
|
||||
<li>• Modern React patterns</li>
|
||||
<li>• TypeScript safety</li>
|
||||
<li>• Optimized performance</li>
|
||||
<li>• Enterprise features</li>
|
||||
<li>• Best practices 2025</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdvancedGanttDemo;
|
||||
@@ -0,0 +1,304 @@
|
||||
import React, { useState, useRef, useCallback, useMemo } from 'react';
|
||||
import { GanttTask, DragState } from '../../types/advanced-gantt.types';
|
||||
import { useAppSelector } from '../../hooks/useAppSelector';
|
||||
import { themeWiseColor } from '../../utils/themeWiseColor';
|
||||
import { useDateCalculations } from '../../utils/gantt-performance';
|
||||
|
||||
interface DraggableTaskBarProps {
|
||||
task: GanttTask;
|
||||
timelineStart: Date;
|
||||
dayWidth: number;
|
||||
rowHeight: number;
|
||||
index: number;
|
||||
onTaskMove?: (taskId: string, newDates: { start: Date; end: Date }) => void;
|
||||
onTaskResize?: (taskId: string, newDates: { start: Date; end: Date }) => void;
|
||||
onProgressChange?: (taskId: string, progress: number) => void;
|
||||
onTaskClick?: (task: GanttTask) => void;
|
||||
onTaskDoubleClick?: (task: GanttTask) => void;
|
||||
enableDragDrop?: boolean;
|
||||
enableResize?: boolean;
|
||||
enableProgressEdit?: boolean;
|
||||
readOnly?: boolean;
|
||||
}
|
||||
|
||||
const DraggableTaskBar: React.FC<DraggableTaskBarProps> = ({
|
||||
task,
|
||||
timelineStart,
|
||||
dayWidth,
|
||||
rowHeight,
|
||||
index,
|
||||
onTaskMove,
|
||||
onTaskResize,
|
||||
onProgressChange,
|
||||
onTaskClick,
|
||||
onTaskDoubleClick,
|
||||
enableDragDrop = true,
|
||||
enableResize = true,
|
||||
enableProgressEdit = true,
|
||||
readOnly = false,
|
||||
}) => {
|
||||
const [dragState, setDragState] = useState<DragState | null>(null);
|
||||
const [hoverState, setHoverState] = useState<string | null>(null);
|
||||
const taskBarRef = useRef<HTMLDivElement>(null);
|
||||
const themeMode = useAppSelector(state => state.themeReducer.mode);
|
||||
const { getDaysBetween, addDays } = useDateCalculations();
|
||||
|
||||
// Calculate task position and dimensions
|
||||
const taskPosition = useMemo(() => {
|
||||
const startDays = getDaysBetween(timelineStart, task.startDate);
|
||||
const duration = getDaysBetween(task.startDate, task.endDate);
|
||||
|
||||
return {
|
||||
x: startDays * dayWidth,
|
||||
width: Math.max(dayWidth * 0.5, duration * dayWidth),
|
||||
y: index * rowHeight + 8, // 8px padding
|
||||
height: rowHeight - 16, // 16px total padding
|
||||
};
|
||||
}, [task.startDate, task.endDate, timelineStart, dayWidth, rowHeight, index, getDaysBetween]);
|
||||
|
||||
// Theme-aware colors
|
||||
const colors = useMemo(() => {
|
||||
const baseColor = task.color || getDefaultTaskColor(task.status);
|
||||
return {
|
||||
background: themeWiseColor(baseColor, adjustColorForDarkMode(baseColor), themeMode),
|
||||
border: themeWiseColor(darkenColor(baseColor, 0.2), lightenColor(baseColor, 0.2), themeMode),
|
||||
progress: themeWiseColor('#52c41a', '#34d399', themeMode),
|
||||
text: themeWiseColor('#ffffff', '#f9fafb', themeMode),
|
||||
hover: themeWiseColor(lightenColor(baseColor, 0.1), darkenColor(baseColor, 0.1), themeMode),
|
||||
};
|
||||
}, [task.color, task.status, themeMode]);
|
||||
|
||||
// Mouse event handlers
|
||||
const handleMouseDown = useCallback((e: React.MouseEvent, dragType: DragState['dragType']) => {
|
||||
if (readOnly || !enableDragDrop) return;
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const rect = taskBarRef.current?.getBoundingClientRect();
|
||||
if (!rect) return;
|
||||
|
||||
setDragState({
|
||||
isDragging: true,
|
||||
dragType,
|
||||
taskId: task.id,
|
||||
initialPosition: { x: e.clientX, y: e.clientY },
|
||||
currentPosition: { x: e.clientX, y: e.clientY },
|
||||
initialDates: { start: task.startDate, end: task.endDate },
|
||||
initialProgress: task.progress,
|
||||
snapToGrid: true,
|
||||
});
|
||||
|
||||
// Add global mouse event listeners
|
||||
const handleMouseMove = (moveEvent: MouseEvent) => {
|
||||
handleMouseMove_Internal(moveEvent, dragType);
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
handleMouseUp_Internal();
|
||||
document.removeEventListener('mousemove', handleMouseMove);
|
||||
document.removeEventListener('mouseup', handleMouseUp);
|
||||
};
|
||||
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
document.addEventListener('mouseup', handleMouseUp);
|
||||
}, [readOnly, enableDragDrop, task]);
|
||||
|
||||
const handleMouseMove_Internal = useCallback((e: MouseEvent, dragType: DragState['dragType']) => {
|
||||
if (!dragState) return;
|
||||
|
||||
const deltaX = e.clientX - dragState.initialPosition.x;
|
||||
const deltaDays = Math.round(deltaX / dayWidth);
|
||||
|
||||
let newStartDate = task.startDate;
|
||||
let newEndDate = task.endDate;
|
||||
|
||||
switch (dragType) {
|
||||
case 'move':
|
||||
newStartDate = addDays(dragState.initialDates.start, deltaDays);
|
||||
newEndDate = addDays(dragState.initialDates.end, deltaDays);
|
||||
break;
|
||||
|
||||
case 'resize-start':
|
||||
newStartDate = addDays(dragState.initialDates.start, deltaDays);
|
||||
// Ensure minimum duration
|
||||
if (newStartDate >= newEndDate) {
|
||||
newStartDate = addDays(newEndDate, -1);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'resize-end':
|
||||
newEndDate = addDays(dragState.initialDates.end, deltaDays);
|
||||
// Ensure minimum duration
|
||||
if (newEndDate <= newStartDate) {
|
||||
newEndDate = addDays(newStartDate, 1);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'progress':
|
||||
if (enableProgressEdit) {
|
||||
const progressDelta = deltaX / taskPosition.width;
|
||||
const newProgress = Math.max(0, Math.min(100, (dragState.initialProgress || 0) + progressDelta * 100));
|
||||
onProgressChange?.(task.id, newProgress);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Update drag state
|
||||
setDragState(prev => prev ? {
|
||||
...prev,
|
||||
currentPosition: { x: e.clientX, y: e.clientY },
|
||||
} : null);
|
||||
|
||||
// Call appropriate handler
|
||||
if (dragType === 'move') {
|
||||
onTaskMove?.(task.id, { start: newStartDate, end: newEndDate });
|
||||
} else if (dragType.startsWith('resize')) {
|
||||
onTaskResize?.(task.id, { start: newStartDate, end: newEndDate });
|
||||
}
|
||||
}, [dragState, dayWidth, task, taskPosition.width, enableProgressEdit, onTaskMove, onTaskResize, onProgressChange, addDays]);
|
||||
|
||||
const handleMouseUp_Internal = useCallback(() => {
|
||||
setDragState(null);
|
||||
}, []);
|
||||
|
||||
const handleClick = useCallback((e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
onTaskClick?.(task);
|
||||
}, [task, onTaskClick]);
|
||||
|
||||
const handleDoubleClick = useCallback((e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
onTaskDoubleClick?.(task);
|
||||
}, [task, onTaskDoubleClick]);
|
||||
|
||||
// Render task bar with handles
|
||||
const renderTaskBar = () => {
|
||||
const isSelected = false; // TODO: Get from selection state
|
||||
const isDragging = dragState?.isDragging || false;
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={taskBarRef}
|
||||
className={`task-bar relative cursor-pointer select-none transition-all duration-200 ${
|
||||
isDragging ? 'z-10 shadow-lg' : ''
|
||||
} ${isSelected ? 'ring-2 ring-blue-500 ring-opacity-50' : ''}`}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: taskPosition.x,
|
||||
top: taskPosition.y,
|
||||
width: taskPosition.width,
|
||||
height: taskPosition.height,
|
||||
backgroundColor: dragState?.isDragging ? colors.hover : colors.background,
|
||||
border: `1px solid ${colors.border}`,
|
||||
borderRadius: '4px',
|
||||
transform: isDragging ? 'translateY(-2px)' : 'none',
|
||||
boxShadow: isDragging ? '0 4px 12px rgba(0,0,0,0.15)' : '0 1px 3px rgba(0,0,0,0.1)',
|
||||
}}
|
||||
onClick={handleClick}
|
||||
onDoubleClick={handleDoubleClick}
|
||||
onMouseEnter={() => setHoverState('task')}
|
||||
onMouseLeave={() => setHoverState(null)}
|
||||
onMouseDown={(e) => handleMouseDown(e, 'move')}
|
||||
>
|
||||
{/* Progress bar */}
|
||||
<div
|
||||
className="progress-bar absolute inset-0 rounded-l"
|
||||
style={{
|
||||
width: `${task.progress}%`,
|
||||
backgroundColor: colors.progress,
|
||||
opacity: 0.7,
|
||||
borderRadius: '3px 0 0 3px',
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Task content */}
|
||||
<div className="task-content relative z-10 h-full flex items-center px-2">
|
||||
<span
|
||||
className="task-name text-xs font-medium truncate"
|
||||
style={{ color: colors.text }}
|
||||
>
|
||||
{task.name}
|
||||
</span>
|
||||
|
||||
{/* Duration display for smaller tasks */}
|
||||
{taskPosition.width < 100 && (
|
||||
<span
|
||||
className="task-duration text-xs ml-auto"
|
||||
style={{ color: colors.text, opacity: 0.8 }}
|
||||
>
|
||||
{getDaysBetween(task.startDate, task.endDate)}d
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Resize handles */}
|
||||
{enableResize && !readOnly && hoverState === 'task' && (
|
||||
<>
|
||||
{/* Left resize handle */}
|
||||
<div
|
||||
className="resize-handle-left absolute left-0 top-0 w-1 h-full cursor-ew-resize bg-white bg-opacity-50 hover:bg-opacity-80"
|
||||
onMouseDown={(e) => handleMouseDown(e, 'resize-start')}
|
||||
onMouseEnter={() => setHoverState('resize-start')}
|
||||
/>
|
||||
|
||||
{/* Right resize handle */}
|
||||
<div
|
||||
className="resize-handle-right absolute right-0 top-0 w-1 h-full cursor-ew-resize bg-white bg-opacity-50 hover:bg-opacity-80"
|
||||
onMouseDown={(e) => handleMouseDown(e, 'resize-end')}
|
||||
onMouseEnter={() => setHoverState('resize-end')}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Progress handle */}
|
||||
{enableProgressEdit && !readOnly && hoverState === 'task' && (
|
||||
<div
|
||||
className="progress-handle absolute top-0 h-full w-1 cursor-ew-resize bg-blue-500 opacity-75"
|
||||
style={{ left: `${task.progress}%` }}
|
||||
onMouseDown={(e) => handleMouseDown(e, 'progress')}
|
||||
onMouseEnter={() => setHoverState('progress')}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Task type indicator */}
|
||||
{task.type === 'milestone' && (
|
||||
<div
|
||||
className="milestone-indicator absolute -top-1 -right-1 w-3 h-3 transform rotate-45"
|
||||
style={{ backgroundColor: colors.border }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return renderTaskBar();
|
||||
};
|
||||
|
||||
// Helper functions
|
||||
function getDefaultTaskColor(status: GanttTask['status']): string {
|
||||
switch (status) {
|
||||
case 'completed': return '#52c41a';
|
||||
case 'in-progress': return '#1890ff';
|
||||
case 'overdue': return '#ff4d4f';
|
||||
case 'on-hold': return '#faad14';
|
||||
default: return '#d9d9d9';
|
||||
}
|
||||
}
|
||||
|
||||
function darkenColor(color: string, amount: number): string {
|
||||
// Simple color darkening - in a real app, use a proper color manipulation library
|
||||
return color;
|
||||
}
|
||||
|
||||
function lightenColor(color: string, amount: number): string {
|
||||
// Simple color lightening - in a real app, use a proper color manipulation library
|
||||
return color;
|
||||
}
|
||||
|
||||
function adjustColorForDarkMode(color: string): string {
|
||||
// Adjust color for dark mode - in a real app, use a proper color manipulation library
|
||||
return color;
|
||||
}
|
||||
|
||||
export default DraggableTaskBar;
|
||||
492
worklenz-frontend/src/components/advanced-gantt/GanttGrid.tsx
Normal file
492
worklenz-frontend/src/components/advanced-gantt/GanttGrid.tsx
Normal file
@@ -0,0 +1,492 @@
|
||||
import React, { useMemo, useRef, useState, useCallback } from 'react';
|
||||
import { GanttTask, ColumnConfig, SelectionState } from '../../types/advanced-gantt.types';
|
||||
import { useAppSelector } from '../../hooks/useAppSelector';
|
||||
import { themeWiseColor } from '../../utils/themeWiseColor';
|
||||
import { ChevronRightIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
|
||||
import { CalendarIcon, UserIcon, FlagIcon } from '@heroicons/react/24/solid';
|
||||
|
||||
interface GanttGridProps {
|
||||
tasks: GanttTask[];
|
||||
columns: ColumnConfig[];
|
||||
rowHeight: number;
|
||||
containerHeight: number;
|
||||
selection: SelectionState;
|
||||
enableInlineEdit?: boolean;
|
||||
enableMultiSelect?: boolean;
|
||||
onTaskClick?: (task: GanttTask, event: React.MouseEvent) => void;
|
||||
onTaskDoubleClick?: (task: GanttTask) => void;
|
||||
onTaskExpand?: (taskId: string) => void;
|
||||
onSelectionChange?: (selection: SelectionState) => void;
|
||||
onColumnResize?: (columnField: string, newWidth: number) => void;
|
||||
onTaskUpdate?: (taskId: string, field: string, value: any) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const GanttGrid: React.FC<GanttGridProps> = ({
|
||||
tasks,
|
||||
columns,
|
||||
rowHeight,
|
||||
containerHeight,
|
||||
selection,
|
||||
enableInlineEdit = true,
|
||||
enableMultiSelect = true,
|
||||
onTaskClick,
|
||||
onTaskDoubleClick,
|
||||
onTaskExpand,
|
||||
onSelectionChange,
|
||||
onColumnResize,
|
||||
onTaskUpdate,
|
||||
className = '',
|
||||
}) => {
|
||||
const [editingCell, setEditingCell] = useState<{ taskId: string; field: string } | null>(null);
|
||||
const [columnWidths, setColumnWidths] = useState<Record<string, number>>(
|
||||
columns.reduce((acc, col) => ({ ...acc, [col.field]: col.width }), {})
|
||||
);
|
||||
const gridRef = useRef<HTMLDivElement>(null);
|
||||
const themeMode = useAppSelector(state => state.themeReducer.mode);
|
||||
|
||||
// Theme-aware colors
|
||||
const colors = useMemo(() => ({
|
||||
background: themeWiseColor('#ffffff', '#1f2937', themeMode),
|
||||
alternateRow: themeWiseColor('#f9fafb', '#374151', themeMode),
|
||||
border: themeWiseColor('#e5e7eb', '#4b5563', themeMode),
|
||||
text: themeWiseColor('#111827', '#f9fafb', themeMode),
|
||||
textSecondary: themeWiseColor('#6b7280', '#d1d5db', themeMode),
|
||||
selected: themeWiseColor('#eff6ff', '#1e3a8a', themeMode),
|
||||
hover: themeWiseColor('#f3f4f6', '#4b5563', themeMode),
|
||||
headerBg: themeWiseColor('#f8f9fa', '#374151', themeMode),
|
||||
}), [themeMode]);
|
||||
|
||||
// Calculate total grid width
|
||||
const totalWidth = useMemo(() => {
|
||||
return columns.reduce((sum, col) => sum + columnWidths[col.field], 0);
|
||||
}, [columns, columnWidths]);
|
||||
|
||||
// Handle column resize
|
||||
const handleColumnResize = useCallback((columnField: string, deltaX: number) => {
|
||||
const column = columns.find(col => col.field === columnField);
|
||||
if (!column) return;
|
||||
|
||||
const currentWidth = columnWidths[columnField];
|
||||
const newWidth = Math.max(column.minWidth || 60, Math.min(column.maxWidth || 400, currentWidth + deltaX));
|
||||
|
||||
setColumnWidths(prev => ({ ...prev, [columnField]: newWidth }));
|
||||
onColumnResize?.(columnField, newWidth);
|
||||
}, [columns, columnWidths, onColumnResize]);
|
||||
|
||||
// Handle task selection
|
||||
const handleTaskSelection = useCallback((task: GanttTask, event: React.MouseEvent) => {
|
||||
const { ctrlKey, shiftKey } = event;
|
||||
let newSelectedTasks = [...selection.selectedTasks];
|
||||
|
||||
if (shiftKey && enableMultiSelect && selection.selectedTasks.length > 0) {
|
||||
// Range selection
|
||||
const lastSelectedIndex = tasks.findIndex(t => t.id === selection.selectedTasks[selection.selectedTasks.length - 1]);
|
||||
const currentIndex = tasks.findIndex(t => t.id === task.id);
|
||||
const [start, end] = [Math.min(lastSelectedIndex, currentIndex), Math.max(lastSelectedIndex, currentIndex)];
|
||||
|
||||
newSelectedTasks = tasks.slice(start, end + 1).map(t => t.id);
|
||||
} else if (ctrlKey && enableMultiSelect) {
|
||||
// Multi selection
|
||||
if (newSelectedTasks.includes(task.id)) {
|
||||
newSelectedTasks = newSelectedTasks.filter(id => id !== task.id);
|
||||
} else {
|
||||
newSelectedTasks.push(task.id);
|
||||
}
|
||||
} else {
|
||||
// Single selection
|
||||
newSelectedTasks = [task.id];
|
||||
}
|
||||
|
||||
onSelectionChange?.({
|
||||
...selection,
|
||||
selectedTasks: newSelectedTasks,
|
||||
focusedTask: task.id,
|
||||
});
|
||||
|
||||
onTaskClick?.(task, event);
|
||||
}, [tasks, selection, enableMultiSelect, onSelectionChange, onTaskClick]);
|
||||
|
||||
// Handle cell editing
|
||||
const handleCellDoubleClick = useCallback((task: GanttTask, column: ColumnConfig) => {
|
||||
if (!enableInlineEdit || !column.editor) return;
|
||||
|
||||
setEditingCell({ taskId: task.id, field: column.field });
|
||||
}, [enableInlineEdit]);
|
||||
|
||||
const handleCellEditComplete = useCallback((value: any) => {
|
||||
if (!editingCell) return;
|
||||
|
||||
onTaskUpdate?.(editingCell.taskId, editingCell.field, value);
|
||||
setEditingCell(null);
|
||||
}, [editingCell, onTaskUpdate]);
|
||||
|
||||
// Render cell content
|
||||
const renderCellContent = useCallback((task: GanttTask, column: ColumnConfig) => {
|
||||
const value = task[column.field as keyof GanttTask];
|
||||
const isEditing = editingCell?.taskId === task.id && editingCell?.field === column.field;
|
||||
|
||||
if (isEditing) {
|
||||
return renderCellEditor(value, column, handleCellEditComplete);
|
||||
}
|
||||
|
||||
if (column.renderer) {
|
||||
return column.renderer(value, task);
|
||||
}
|
||||
|
||||
// Default renderers
|
||||
switch (column.field) {
|
||||
case 'name':
|
||||
return (
|
||||
<div className="flex items-center space-x-2">
|
||||
{task.hasChildren && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onTaskExpand?.(task.id);
|
||||
}}
|
||||
className="p-0.5 hover:bg-gray-200 dark:hover:bg-gray-600 rounded"
|
||||
>
|
||||
{task.isExpanded ? (
|
||||
<ChevronDownIcon className="w-3 h-3" />
|
||||
) : (
|
||||
<ChevronRightIcon className="w-3 h-3" />
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
<div
|
||||
className="flex items-center space-x-2"
|
||||
style={{ paddingLeft: `${(task.level || 0) * 16}px` }}
|
||||
>
|
||||
{getTaskTypeIcon(task.type)}
|
||||
<span className="truncate font-medium">{task.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'startDate':
|
||||
case 'endDate':
|
||||
return (
|
||||
<div className="flex items-center space-x-1">
|
||||
<CalendarIcon className="w-3 h-3 text-gray-400" />
|
||||
<span>{(value as Date)?.toLocaleDateString() || '-'}</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'assignee':
|
||||
return task.assignee ? (
|
||||
<div className="flex items-center space-x-2">
|
||||
{task.assignee.avatar ? (
|
||||
<img
|
||||
src={task.assignee.avatar}
|
||||
alt={task.assignee.name}
|
||||
className="w-6 h-6 rounded-full"
|
||||
/>
|
||||
) : (
|
||||
<UserIcon className="w-6 h-6 text-gray-400" />
|
||||
)}
|
||||
<span className="truncate">{task.assignee.name}</span>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-gray-400">Unassigned</span>
|
||||
);
|
||||
|
||||
case 'progress':
|
||||
return (
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="flex-1 bg-gray-200 dark:bg-gray-600 rounded-full h-2">
|
||||
<div
|
||||
className="bg-blue-500 h-2 rounded-full transition-all duration-300"
|
||||
style={{ width: `${task.progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xs w-8 text-right">{task.progress}%</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'status':
|
||||
return (
|
||||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(task.status)}`}>
|
||||
{task.status.replace('-', ' ')}
|
||||
</span>
|
||||
);
|
||||
|
||||
case 'priority':
|
||||
return (
|
||||
<div className="flex items-center space-x-1">
|
||||
<FlagIcon className={`w-3 h-3 ${getPriorityColor(task.priority)}`} />
|
||||
<span className="capitalize">{task.priority}</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'duration':
|
||||
const duration = task.duration || Math.ceil((task.endDate.getTime() - task.startDate.getTime()) / (1000 * 60 * 60 * 24));
|
||||
return <span>{duration}d</span>;
|
||||
|
||||
default:
|
||||
return <span>{String(value || '')}</span>;
|
||||
}
|
||||
}, [editingCell, onTaskExpand, handleCellEditComplete]);
|
||||
|
||||
// Render header
|
||||
const renderHeader = () => (
|
||||
<div
|
||||
className="grid-header flex border-b sticky top-0 z-10"
|
||||
style={{
|
||||
backgroundColor: colors.headerBg,
|
||||
borderColor: colors.border,
|
||||
height: rowHeight,
|
||||
}}
|
||||
>
|
||||
{columns.map((column, index) => (
|
||||
<div
|
||||
key={column.field}
|
||||
className="column-header flex items-center px-3 py-2 font-medium text-sm border-r relative group"
|
||||
style={{
|
||||
width: columnWidths[column.field],
|
||||
borderColor: colors.border,
|
||||
color: colors.text,
|
||||
}}
|
||||
>
|
||||
<span className="truncate" title={column.title}>
|
||||
{column.title}
|
||||
</span>
|
||||
|
||||
{/* Resize handle */}
|
||||
{column.resizable && (
|
||||
<ResizeHandle
|
||||
onResize={(deltaX) => handleColumnResize(column.field, deltaX)}
|
||||
className="absolute right-0 top-0 h-full w-1 cursor-col-resize hover:bg-blue-500 opacity-0 group-hover:opacity-100"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
// Render task rows
|
||||
const renderRows = () => (
|
||||
<div className="grid-body">
|
||||
{tasks.map((task, rowIndex) => {
|
||||
const isSelected = selection.selectedTasks.includes(task.id);
|
||||
const isFocused = selection.focusedTask === task.id;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={task.id}
|
||||
className={`grid-row flex border-b cursor-pointer hover:bg-opacity-75 ${
|
||||
isSelected ? 'bg-blue-50 dark:bg-blue-900 bg-opacity-50' :
|
||||
rowIndex % 2 === 0 ? '' : 'bg-gray-50 dark:bg-gray-800 bg-opacity-30'
|
||||
}`}
|
||||
style={{
|
||||
height: rowHeight,
|
||||
borderColor: colors.border,
|
||||
backgroundColor: isSelected ? colors.selected :
|
||||
rowIndex % 2 === 0 ? 'transparent' : colors.alternateRow,
|
||||
}}
|
||||
onClick={(e) => handleTaskSelection(task, e)}
|
||||
onDoubleClick={() => onTaskDoubleClick?.(task)}
|
||||
>
|
||||
{columns.map((column) => (
|
||||
<div
|
||||
key={`${task.id}-${column.field}`}
|
||||
className="grid-cell flex items-center px-3 py-1 border-r overflow-hidden"
|
||||
style={{
|
||||
width: columnWidths[column.field],
|
||||
borderColor: colors.border,
|
||||
textAlign: column.align || 'left',
|
||||
}}
|
||||
onDoubleClick={() => handleCellDoubleClick(task, column)}
|
||||
>
|
||||
{renderCellContent(task, column)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={gridRef}
|
||||
className={`gantt-grid border-r ${className}`}
|
||||
style={{
|
||||
width: totalWidth,
|
||||
height: containerHeight,
|
||||
backgroundColor: colors.background,
|
||||
borderColor: colors.border,
|
||||
}}
|
||||
>
|
||||
{renderHeader()}
|
||||
<div
|
||||
className="grid-content overflow-auto"
|
||||
style={{ height: containerHeight - rowHeight }}
|
||||
>
|
||||
{renderRows()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Resize handle component
|
||||
interface ResizeHandleProps {
|
||||
onResize: (deltaX: number) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const ResizeHandle: React.FC<ResizeHandleProps> = ({ onResize, className }) => {
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const startXRef = useRef<number>(0);
|
||||
|
||||
const handleMouseDown = useCallback((e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(true);
|
||||
startXRef.current = e.clientX;
|
||||
|
||||
const handleMouseMove = (moveEvent: MouseEvent) => {
|
||||
const deltaX = moveEvent.clientX - startXRef.current;
|
||||
onResize(deltaX);
|
||||
startXRef.current = moveEvent.clientX;
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
setIsDragging(false);
|
||||
document.removeEventListener('mousemove', handleMouseMove);
|
||||
document.removeEventListener('mouseup', handleMouseUp);
|
||||
};
|
||||
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
document.addEventListener('mouseup', handleMouseUp);
|
||||
}, [onResize]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`resize-handle ${className} ${isDragging ? 'bg-blue-500' : ''}`}
|
||||
onMouseDown={handleMouseDown}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
// Cell editor component
|
||||
const renderCellEditor = (value: any, column: ColumnConfig, onComplete: (value: any) => void) => {
|
||||
const [editValue, setEditValue] = useState(value);
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter') {
|
||||
onComplete(editValue);
|
||||
} else if (e.key === 'Escape') {
|
||||
onComplete(value); // Cancel editing
|
||||
}
|
||||
};
|
||||
|
||||
const handleBlur = () => {
|
||||
onComplete(editValue);
|
||||
};
|
||||
|
||||
switch (column.editor) {
|
||||
case 'text':
|
||||
return (
|
||||
<input
|
||||
type="text"
|
||||
value={editValue}
|
||||
onChange={(e) => setEditValue(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
onBlur={handleBlur}
|
||||
className="w-full px-1 py-0.5 border rounded text-sm"
|
||||
autoFocus
|
||||
/>
|
||||
);
|
||||
|
||||
case 'date':
|
||||
return (
|
||||
<input
|
||||
type="date"
|
||||
value={editValue instanceof Date ? editValue.toISOString().split('T')[0] : editValue}
|
||||
onChange={(e) => setEditValue(new Date(e.target.value))}
|
||||
onKeyDown={handleKeyDown}
|
||||
onBlur={handleBlur}
|
||||
className="w-full px-1 py-0.5 border rounded text-sm"
|
||||
autoFocus
|
||||
/>
|
||||
);
|
||||
|
||||
case 'number':
|
||||
return (
|
||||
<input
|
||||
type="number"
|
||||
value={editValue}
|
||||
onChange={(e) => setEditValue(parseFloat(e.target.value))}
|
||||
onKeyDown={handleKeyDown}
|
||||
onBlur={handleBlur}
|
||||
className="w-full px-1 py-0.5 border rounded text-sm"
|
||||
autoFocus
|
||||
/>
|
||||
);
|
||||
|
||||
case 'select':
|
||||
return (
|
||||
<select
|
||||
value={editValue}
|
||||
onChange={(e) => setEditValue(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
onBlur={handleBlur}
|
||||
className="w-full px-1 py-0.5 border rounded text-sm"
|
||||
autoFocus
|
||||
>
|
||||
{column.editorOptions?.map((option: any) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
|
||||
default:
|
||||
return <span>{String(value)}</span>;
|
||||
}
|
||||
};
|
||||
|
||||
// Helper functions
|
||||
const getTaskTypeIcon = (type: GanttTask['type']) => {
|
||||
switch (type) {
|
||||
case 'project':
|
||||
return <div className="w-3 h-3 bg-blue-500 rounded-sm" />;
|
||||
case 'milestone':
|
||||
return <div className="w-3 h-3 bg-yellow-500 rotate-45" />;
|
||||
default:
|
||||
return <div className="w-3 h-3 bg-gray-400 rounded-full" />;
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusColor = (status: GanttTask['status']) => {
|
||||
switch (status) {
|
||||
case 'completed':
|
||||
return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
|
||||
case 'in-progress':
|
||||
return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
|
||||
case 'overdue':
|
||||
return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
|
||||
case 'on-hold':
|
||||
return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
|
||||
default:
|
||||
return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200';
|
||||
}
|
||||
};
|
||||
|
||||
const getPriorityColor = (priority: GanttTask['priority']) => {
|
||||
switch (priority) {
|
||||
case 'critical':
|
||||
return 'text-red-600';
|
||||
case 'high':
|
||||
return 'text-orange-500';
|
||||
case 'medium':
|
||||
return 'text-yellow-500';
|
||||
case 'low':
|
||||
return 'text-green-500';
|
||||
default:
|
||||
return 'text-gray-400';
|
||||
}
|
||||
};
|
||||
|
||||
export default GanttGrid;
|
||||
@@ -0,0 +1,295 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import { Holiday, TimelineConfig } from '../../types/advanced-gantt.types';
|
||||
import { useAppSelector } from '../../hooks/useAppSelector';
|
||||
import { themeWiseColor } from '../../utils/themeWiseColor';
|
||||
import { useDateCalculations } from '../../utils/gantt-performance';
|
||||
|
||||
interface TimelineMarkersProps {
|
||||
startDate: Date;
|
||||
endDate: Date;
|
||||
dayWidth: number;
|
||||
containerHeight: number;
|
||||
timelineConfig: TimelineConfig;
|
||||
holidays?: Holiday[];
|
||||
showWeekends?: boolean;
|
||||
showHolidays?: boolean;
|
||||
showToday?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const TimelineMarkers: React.FC<TimelineMarkersProps> = ({
|
||||
startDate,
|
||||
endDate,
|
||||
dayWidth,
|
||||
containerHeight,
|
||||
timelineConfig,
|
||||
holidays = [],
|
||||
showWeekends = true,
|
||||
showHolidays = true,
|
||||
showToday = true,
|
||||
className = '',
|
||||
}) => {
|
||||
const themeMode = useAppSelector(state => state.themeReducer.mode);
|
||||
const { getDaysBetween, isWeekend, isWorkingDay } = useDateCalculations();
|
||||
|
||||
// Generate all dates in the timeline
|
||||
const timelineDates = useMemo(() => {
|
||||
const dates: Date[] = [];
|
||||
const totalDays = getDaysBetween(startDate, endDate);
|
||||
|
||||
for (let i = 0; i <= totalDays; i++) {
|
||||
const date = new Date(startDate);
|
||||
date.setDate(date.getDate() + i);
|
||||
dates.push(date);
|
||||
}
|
||||
|
||||
return dates;
|
||||
}, [startDate, endDate, getDaysBetween]);
|
||||
|
||||
// Theme-aware colors
|
||||
const colors = useMemo(() => ({
|
||||
weekend: themeWiseColor('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)', themeMode),
|
||||
nonWorkingDay: themeWiseColor('rgba(0, 0, 0, 0.03)', 'rgba(255, 255, 255, 0.03)', themeMode),
|
||||
holiday: themeWiseColor('rgba(255, 107, 107, 0.1)', 'rgba(255, 107, 107, 0.15)', themeMode),
|
||||
today: themeWiseColor('rgba(24, 144, 255, 0.15)', 'rgba(64, 169, 255, 0.2)', themeMode),
|
||||
todayLine: themeWiseColor('#1890ff', '#40a9ff', themeMode),
|
||||
holidayBorder: themeWiseColor('#ff6b6b', '#ff8787', themeMode),
|
||||
}), [themeMode]);
|
||||
|
||||
// Check if a date is a holiday
|
||||
const isHoliday = (date: Date): Holiday | undefined => {
|
||||
return holidays.find(holiday => {
|
||||
if (holiday.recurring) {
|
||||
return holiday.date.getMonth() === date.getMonth() &&
|
||||
holiday.date.getDate() === date.getDate();
|
||||
}
|
||||
return holiday.date.toDateString() === date.toDateString();
|
||||
});
|
||||
};
|
||||
|
||||
// Check if date is today
|
||||
const isToday = (date: Date): boolean => {
|
||||
const today = new Date();
|
||||
return date.toDateString() === today.toDateString();
|
||||
};
|
||||
|
||||
// Render weekend markers
|
||||
const renderWeekendMarkers = () => {
|
||||
if (!showWeekends) return null;
|
||||
|
||||
return timelineDates.map((date, index) => {
|
||||
if (!isWeekend(date)) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`weekend-${index}`}
|
||||
className="weekend-marker absolute top-0 pointer-events-none"
|
||||
style={{
|
||||
left: index * dayWidth,
|
||||
width: dayWidth,
|
||||
height: containerHeight,
|
||||
backgroundColor: colors.weekend,
|
||||
zIndex: 1,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
// Render non-working day markers
|
||||
const renderNonWorkingDayMarkers = () => {
|
||||
return timelineDates.map((date, index) => {
|
||||
if (isWorkingDay(date, timelineConfig.workingDays)) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`non-working-${index}`}
|
||||
className="non-working-day-marker absolute top-0 pointer-events-none"
|
||||
style={{
|
||||
left: index * dayWidth,
|
||||
width: dayWidth,
|
||||
height: containerHeight,
|
||||
backgroundColor: colors.nonWorkingDay,
|
||||
zIndex: 1,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
// Render holiday markers
|
||||
const renderHolidayMarkers = () => {
|
||||
if (!showHolidays) return null;
|
||||
|
||||
return timelineDates.map((date, index) => {
|
||||
const holiday = isHoliday(date);
|
||||
if (!holiday) return null;
|
||||
|
||||
const holidayColor = holiday.color || colors.holiday;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`holiday-${index}`}
|
||||
className="holiday-marker absolute top-0 pointer-events-none group"
|
||||
style={{
|
||||
left: index * dayWidth,
|
||||
width: dayWidth,
|
||||
height: containerHeight,
|
||||
backgroundColor: holidayColor,
|
||||
borderLeft: `2px solid ${colors.holidayBorder}`,
|
||||
zIndex: 2,
|
||||
}}
|
||||
>
|
||||
{/* Holiday tooltip */}
|
||||
<div className="holiday-tooltip absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-full bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap z-50">
|
||||
<div className="font-medium">{holiday.name}</div>
|
||||
<div className="text-xs opacity-75">{date.toLocaleDateString()}</div>
|
||||
<div className="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-2 border-r-2 border-t-4 border-transparent border-t-gray-900 dark:border-t-gray-100"></div>
|
||||
</div>
|
||||
|
||||
{/* Holiday icon */}
|
||||
<div className="holiday-icon absolute top-1 left-1 w-3 h-3 rounded-full bg-red-500 opacity-75">
|
||||
<div className="w-full h-full rounded-full animate-pulse"></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
// Render today marker
|
||||
const renderTodayMarker = () => {
|
||||
if (!showToday) return null;
|
||||
|
||||
const todayIndex = timelineDates.findIndex(date => isToday(date));
|
||||
if (todayIndex === -1) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="today-marker absolute top-0 pointer-events-none"
|
||||
style={{
|
||||
left: todayIndex * dayWidth,
|
||||
width: dayWidth,
|
||||
height: containerHeight,
|
||||
backgroundColor: colors.today,
|
||||
zIndex: 3,
|
||||
}}
|
||||
>
|
||||
{/* Today line */}
|
||||
<div
|
||||
className="today-line absolute top-0 left-1/2 transform -translate-x-1/2"
|
||||
style={{
|
||||
width: '2px',
|
||||
height: containerHeight,
|
||||
backgroundColor: colors.todayLine,
|
||||
zIndex: 4,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Today label */}
|
||||
<div className="today-label absolute top-2 left-1/2 transform -translate-x-1/2 bg-blue-500 text-white text-xs px-2 py-1 rounded shadow-sm">
|
||||
Today
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Render time period markers (quarters, months, etc.)
|
||||
const renderTimePeriodMarkers = () => {
|
||||
const markers: React.ReactNode[] = [];
|
||||
const currentDate = new Date(startDate);
|
||||
currentDate.setDate(1); // Start of month
|
||||
|
||||
while (currentDate <= endDate) {
|
||||
const daysSinceStart = getDaysBetween(startDate, currentDate);
|
||||
const isQuarterStart = currentDate.getMonth() % 3 === 0 && currentDate.getDate() === 1;
|
||||
const isYearStart = currentDate.getMonth() === 0 && currentDate.getDate() === 1;
|
||||
|
||||
if (isYearStart) {
|
||||
markers.push(
|
||||
<div
|
||||
key={`year-${currentDate.getTime()}`}
|
||||
className="year-marker absolute top-0 border-l-2 border-blue-600 dark:border-blue-400"
|
||||
style={{
|
||||
left: daysSinceStart * dayWidth,
|
||||
height: containerHeight,
|
||||
zIndex: 5,
|
||||
}}
|
||||
>
|
||||
<div className="year-label absolute top-2 left-1 bg-blue-600 dark:bg-blue-400 text-white text-xs px-1 py-0.5 rounded">
|
||||
{currentDate.getFullYear()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else if (isQuarterStart) {
|
||||
markers.push(
|
||||
<div
|
||||
key={`quarter-${currentDate.getTime()}`}
|
||||
className="quarter-marker absolute top-0 border-l border-green-500 dark:border-green-400 opacity-60"
|
||||
style={{
|
||||
left: daysSinceStart * dayWidth,
|
||||
height: containerHeight,
|
||||
zIndex: 4,
|
||||
}}
|
||||
>
|
||||
<div className="quarter-label absolute top-2 left-1 bg-green-500 dark:bg-green-400 text-white text-xs px-1 py-0.5 rounded">
|
||||
Q{Math.floor(currentDate.getMonth() / 3) + 1}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Move to next month
|
||||
currentDate.setMonth(currentDate.getMonth() + 1);
|
||||
}
|
||||
|
||||
return markers;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`timeline-markers absolute inset-0 ${className}`}>
|
||||
{renderNonWorkingDayMarkers()}
|
||||
{renderWeekendMarkers()}
|
||||
{renderHolidayMarkers()}
|
||||
{renderTodayMarker()}
|
||||
{renderTimePeriodMarkers()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Holiday presets for common countries
|
||||
export const holidayPresets = {
|
||||
US: [
|
||||
{ date: new Date(2024, 0, 1), name: "New Year's Day", type: 'national' as const, recurring: true },
|
||||
{ date: new Date(2024, 0, 15), name: "Martin Luther King Jr. Day", type: 'national' as const, recurring: true },
|
||||
{ date: new Date(2024, 1, 19), name: "Presidents' Day", type: 'national' as const, recurring: true },
|
||||
{ date: new Date(2024, 4, 27), name: "Memorial Day", type: 'national' as const, recurring: true },
|
||||
{ date: new Date(2024, 5, 19), name: "Juneteenth", type: 'national' as const, recurring: true },
|
||||
{ date: new Date(2024, 6, 4), name: "Independence Day", type: 'national' as const, recurring: true },
|
||||
{ date: new Date(2024, 8, 2), name: "Labor Day", type: 'national' as const, recurring: true },
|
||||
{ date: new Date(2024, 9, 14), name: "Columbus Day", type: 'national' as const, recurring: true },
|
||||
{ date: new Date(2024, 10, 11), name: "Veterans Day", type: 'national' as const, recurring: true },
|
||||
{ date: new Date(2024, 10, 28), name: "Thanksgiving", type: 'national' as const, recurring: true },
|
||||
{ date: new Date(2024, 11, 25), name: "Christmas Day", type: 'national' as const, recurring: true },
|
||||
],
|
||||
|
||||
UK: [
|
||||
{ date: new Date(2024, 0, 1), name: "New Year's Day", type: 'national' as const, recurring: true },
|
||||
{ date: new Date(2024, 2, 29), name: "Good Friday", type: 'religious' as const, recurring: false },
|
||||
{ date: new Date(2024, 3, 1), name: "Easter Monday", type: 'religious' as const, recurring: false },
|
||||
{ date: new Date(2024, 4, 6), name: "Early May Bank Holiday", type: 'national' as const, recurring: true },
|
||||
{ date: new Date(2024, 4, 27), name: "Spring Bank Holiday", type: 'national' as const, recurring: true },
|
||||
{ date: new Date(2024, 7, 26), name: "Summer Bank Holiday", type: 'national' as const, recurring: true },
|
||||
{ date: new Date(2024, 11, 25), name: "Christmas Day", type: 'religious' as const, recurring: true },
|
||||
{ date: new Date(2024, 11, 26), name: "Boxing Day", type: 'national' as const, recurring: true },
|
||||
],
|
||||
};
|
||||
|
||||
// Working day presets
|
||||
export const workingDayPresets = {
|
||||
standard: [1, 2, 3, 4, 5], // Monday to Friday
|
||||
middle_east: [0, 1, 2, 3, 4], // Sunday to Thursday
|
||||
six_day: [1, 2, 3, 4, 5, 6], // Monday to Saturday
|
||||
four_day: [1, 2, 3, 4], // Monday to Thursday
|
||||
};
|
||||
|
||||
export default TimelineMarkers;
|
||||
@@ -0,0 +1,372 @@
|
||||
import React, { useRef, useEffect, useState, useCallback, ReactNode } from 'react';
|
||||
import { useThrottle, usePerformanceMonitoring } from '../../utils/gantt-performance';
|
||||
import { useAppSelector } from '../../hooks/useAppSelector';
|
||||
|
||||
interface VirtualScrollContainerProps {
|
||||
items: any[];
|
||||
itemHeight: number;
|
||||
containerHeight: number;
|
||||
containerWidth?: number;
|
||||
overscan?: number;
|
||||
horizontal?: boolean;
|
||||
children: (item: any, index: number, style: React.CSSProperties) => ReactNode;
|
||||
onScroll?: (scrollLeft: number, scrollTop: number) => void;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
const VirtualScrollContainer: React.FC<VirtualScrollContainerProps> = ({
|
||||
items,
|
||||
itemHeight,
|
||||
containerHeight,
|
||||
containerWidth = 0,
|
||||
overscan = 5,
|
||||
horizontal = false,
|
||||
children,
|
||||
onScroll,
|
||||
className = '',
|
||||
style = {},
|
||||
}) => {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [scrollTop, setScrollTop] = useState(0);
|
||||
const [scrollLeft, setScrollLeft] = useState(0);
|
||||
const { startMeasure, endMeasure, recordMetric } = usePerformanceMonitoring();
|
||||
const themeMode = useAppSelector(state => state.themeReducer.mode);
|
||||
|
||||
// Calculate visible range
|
||||
const totalHeight = items.length * itemHeight;
|
||||
const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
|
||||
const endIndex = Math.min(
|
||||
items.length - 1,
|
||||
Math.ceil((scrollTop + containerHeight) / itemHeight) + overscan
|
||||
);
|
||||
const visibleItems = items.slice(startIndex, endIndex + 1);
|
||||
const offsetY = startIndex * itemHeight;
|
||||
|
||||
// Throttled scroll handler
|
||||
const throttledScrollHandler = useThrottle(
|
||||
useCallback((event: Event) => {
|
||||
const target = event.target as HTMLDivElement;
|
||||
const newScrollTop = target.scrollTop;
|
||||
const newScrollLeft = target.scrollLeft;
|
||||
|
||||
setScrollTop(newScrollTop);
|
||||
setScrollLeft(newScrollLeft);
|
||||
onScroll?.(newScrollLeft, newScrollTop);
|
||||
}, [onScroll]),
|
||||
16 // ~60fps
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
|
||||
container.addEventListener('scroll', throttledScrollHandler, { passive: true });
|
||||
|
||||
return () => {
|
||||
container.removeEventListener('scroll', throttledScrollHandler);
|
||||
};
|
||||
}, [throttledScrollHandler]);
|
||||
|
||||
// Performance monitoring
|
||||
useEffect(() => {
|
||||
startMeasure('virtualScroll');
|
||||
recordMetric('visibleTaskCount', visibleItems.length);
|
||||
recordMetric('taskCount', items.length);
|
||||
endMeasure('virtualScroll');
|
||||
}, [visibleItems.length, items.length, startMeasure, endMeasure, recordMetric]);
|
||||
|
||||
const renderVisibleItems = () => {
|
||||
return visibleItems.map((item, virtualIndex) => {
|
||||
const actualIndex = startIndex + virtualIndex;
|
||||
const itemStyle: React.CSSProperties = {
|
||||
position: 'absolute',
|
||||
top: horizontal ? 0 : actualIndex * itemHeight,
|
||||
left: horizontal ? actualIndex * itemHeight : 0,
|
||||
height: horizontal ? '100%' : itemHeight,
|
||||
width: horizontal ? itemHeight : '100%',
|
||||
transform: horizontal ? 'none' : `translateY(${offsetY}px)`,
|
||||
};
|
||||
|
||||
return (
|
||||
<div key={item.id || actualIndex} style={itemStyle}>
|
||||
{children(item, actualIndex, itemStyle)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={`virtual-scroll-container overflow-auto ${className}`}
|
||||
style={{
|
||||
height: containerHeight,
|
||||
width: containerWidth || '100%',
|
||||
position: 'relative',
|
||||
...style,
|
||||
}}
|
||||
>
|
||||
{/* Spacer to maintain scroll height */}
|
||||
<div
|
||||
className="virtual-scroll-spacer"
|
||||
style={{
|
||||
height: horizontal ? '100%' : totalHeight,
|
||||
width: horizontal ? totalHeight : '100%',
|
||||
position: 'relative',
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
>
|
||||
{/* Visible items container */}
|
||||
<div
|
||||
className="virtual-scroll-content"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
pointerEvents: 'auto',
|
||||
}}
|
||||
>
|
||||
{renderVisibleItems()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Grid virtual scrolling component for both rows and columns
|
||||
interface VirtualGridProps {
|
||||
data: any[][];
|
||||
rowHeight: number;
|
||||
columnWidth: number | number[];
|
||||
containerHeight: number;
|
||||
containerWidth: number;
|
||||
overscan?: number;
|
||||
children: (item: any, rowIndex: number, colIndex: number, style: React.CSSProperties) => ReactNode;
|
||||
onScroll?: (scrollLeft: number, scrollTop: number) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const VirtualGrid: React.FC<VirtualGridProps> = ({
|
||||
data,
|
||||
rowHeight,
|
||||
columnWidth,
|
||||
containerHeight,
|
||||
containerWidth,
|
||||
overscan = 3,
|
||||
children,
|
||||
onScroll,
|
||||
className = '',
|
||||
}) => {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [scrollTop, setScrollTop] = useState(0);
|
||||
const [scrollLeft, setScrollLeft] = useState(0);
|
||||
|
||||
const rowCount = data.length;
|
||||
const colCount = data[0]?.length || 0;
|
||||
|
||||
// Calculate column positions for variable width columns
|
||||
const columnWidths = Array.isArray(columnWidth) ? columnWidth : new Array(colCount).fill(columnWidth);
|
||||
const columnPositions = columnWidths.reduce((acc, width, index) => {
|
||||
acc[index] = index === 0 ? 0 : acc[index - 1] + columnWidths[index - 1];
|
||||
return acc;
|
||||
}, {} as Record<number, number>);
|
||||
|
||||
const totalWidth = columnWidths.reduce((sum, width) => sum + width, 0);
|
||||
const totalHeight = rowCount * rowHeight;
|
||||
|
||||
// Calculate visible ranges
|
||||
const startRowIndex = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);
|
||||
const endRowIndex = Math.min(rowCount - 1, Math.ceil((scrollTop + containerHeight) / rowHeight) + overscan);
|
||||
|
||||
const startColIndex = Math.max(0, findColumnIndex(scrollLeft) - overscan);
|
||||
const endColIndex = Math.min(colCount - 1, findColumnIndex(scrollLeft + containerWidth) + overscan);
|
||||
|
||||
function findColumnIndex(position: number): number {
|
||||
for (let i = 0; i < colCount; i++) {
|
||||
if (columnPositions[i] <= position && position < columnPositions[i] + columnWidths[i]) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return colCount - 1;
|
||||
}
|
||||
|
||||
const throttledScrollHandler = useThrottle(
|
||||
useCallback((event: Event) => {
|
||||
const target = event.target as HTMLDivElement;
|
||||
const newScrollTop = target.scrollTop;
|
||||
const newScrollLeft = target.scrollLeft;
|
||||
|
||||
setScrollTop(newScrollTop);
|
||||
setScrollLeft(newScrollLeft);
|
||||
onScroll?.(newScrollLeft, newScrollTop);
|
||||
}, [onScroll]),
|
||||
16
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
|
||||
container.addEventListener('scroll', throttledScrollHandler, { passive: true });
|
||||
|
||||
return () => {
|
||||
container.removeEventListener('scroll', throttledScrollHandler);
|
||||
};
|
||||
}, [throttledScrollHandler]);
|
||||
|
||||
const renderVisibleCells = () => {
|
||||
const cells: ReactNode[] = [];
|
||||
|
||||
for (let rowIndex = startRowIndex; rowIndex <= endRowIndex; rowIndex++) {
|
||||
for (let colIndex = startColIndex; colIndex <= endColIndex; colIndex++) {
|
||||
const item = data[rowIndex]?.[colIndex];
|
||||
if (!item) continue;
|
||||
|
||||
const cellStyle: React.CSSProperties = {
|
||||
position: 'absolute',
|
||||
top: rowIndex * rowHeight,
|
||||
left: columnPositions[colIndex],
|
||||
height: rowHeight,
|
||||
width: columnWidths[colIndex],
|
||||
};
|
||||
|
||||
cells.push(
|
||||
<div key={`${rowIndex}-${colIndex}`} style={cellStyle}>
|
||||
{children(item, rowIndex, colIndex, cellStyle)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return cells;
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={`virtual-grid overflow-auto ${className}`}
|
||||
style={{
|
||||
height: containerHeight,
|
||||
width: containerWidth,
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: totalHeight,
|
||||
width: totalWidth,
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
{renderVisibleCells()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Timeline virtual scrolling component
|
||||
interface VirtualTimelineProps {
|
||||
startDate: Date;
|
||||
endDate: Date;
|
||||
dayWidth: number;
|
||||
containerWidth: number;
|
||||
containerHeight: number;
|
||||
overscan?: number;
|
||||
children: (date: Date, index: number, style: React.CSSProperties) => ReactNode;
|
||||
onScroll?: (scrollLeft: number) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const VirtualTimeline: React.FC<VirtualTimelineProps> = ({
|
||||
startDate,
|
||||
endDate,
|
||||
dayWidth,
|
||||
containerWidth,
|
||||
containerHeight,
|
||||
overscan = 10,
|
||||
children,
|
||||
onScroll,
|
||||
className = '',
|
||||
}) => {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [scrollLeft, setScrollLeft] = useState(0);
|
||||
|
||||
const totalDays = Math.ceil((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24));
|
||||
const totalWidth = totalDays * dayWidth;
|
||||
|
||||
const startDayIndex = Math.max(0, Math.floor(scrollLeft / dayWidth) - overscan);
|
||||
const endDayIndex = Math.min(totalDays - 1, Math.ceil((scrollLeft + containerWidth) / dayWidth) + overscan);
|
||||
|
||||
const throttledScrollHandler = useThrottle(
|
||||
useCallback((event: Event) => {
|
||||
const target = event.target as HTMLDivElement;
|
||||
const newScrollLeft = target.scrollLeft;
|
||||
setScrollLeft(newScrollLeft);
|
||||
onScroll?.(newScrollLeft);
|
||||
}, [onScroll]),
|
||||
16
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
|
||||
container.addEventListener('scroll', throttledScrollHandler, { passive: true });
|
||||
|
||||
return () => {
|
||||
container.removeEventListener('scroll', throttledScrollHandler);
|
||||
};
|
||||
}, [throttledScrollHandler]);
|
||||
|
||||
const renderVisibleDays = () => {
|
||||
const days: ReactNode[] = [];
|
||||
|
||||
for (let dayIndex = startDayIndex; dayIndex <= endDayIndex; dayIndex++) {
|
||||
const date = new Date(startDate);
|
||||
date.setDate(date.getDate() + dayIndex);
|
||||
|
||||
const dayStyle: React.CSSProperties = {
|
||||
position: 'absolute',
|
||||
left: dayIndex * dayWidth,
|
||||
top: 0,
|
||||
width: dayWidth,
|
||||
height: '100%',
|
||||
};
|
||||
|
||||
days.push(
|
||||
<div key={dayIndex} style={dayStyle}>
|
||||
{children(date, dayIndex, dayStyle)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return days;
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={`virtual-timeline overflow-x-auto ${className}`}
|
||||
style={{
|
||||
height: containerHeight,
|
||||
width: containerWidth,
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
width: totalWidth,
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
{renderVisibleDays()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default VirtualScrollContainer;
|
||||
17
worklenz-frontend/src/components/advanced-gantt/index.ts
Normal file
17
worklenz-frontend/src/components/advanced-gantt/index.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
// Main Components
|
||||
export { default as AdvancedGanttChart } from './AdvancedGanttChart';
|
||||
export { default as AdvancedGanttDemo } from './AdvancedGanttDemo';
|
||||
|
||||
// Core Components
|
||||
export { default as GanttGrid } from './GanttGrid';
|
||||
export { default as DraggableTaskBar } from './DraggableTaskBar';
|
||||
export { default as TimelineMarkers, holidayPresets, workingDayPresets } from './TimelineMarkers';
|
||||
|
||||
// Utility Components
|
||||
export { default as VirtualScrollContainer, VirtualGrid, VirtualTimeline } from './VirtualScrollContainer';
|
||||
|
||||
// Types
|
||||
export * from '../../types/advanced-gantt.types';
|
||||
|
||||
// Performance Utilities
|
||||
export * from '../../utils/gantt-performance';
|
||||
@@ -1,14 +1,4 @@
|
||||
import {
|
||||
AutoComplete,
|
||||
Button,
|
||||
Drawer,
|
||||
Flex,
|
||||
Form,
|
||||
message,
|
||||
Select,
|
||||
Spin,
|
||||
Typography,
|
||||
} from '@/shared/antd-imports';
|
||||
import { AutoComplete, Button, Drawer, Flex, Form, message, Modal, Select, Spin, Typography } from '@/shared/antd-imports';
|
||||
import { useAppSelector } from '@/hooks/useAppSelector';
|
||||
import { useAppDispatch } from '@/hooks/useAppDispatch';
|
||||
import {
|
||||
@@ -21,6 +11,7 @@ import { jobTitlesApiService } from '@/api/settings/job-titles/job-titles.api.se
|
||||
import { IJobTitle } from '@/types/job.types';
|
||||
import { teamMembersApiService } from '@/api/team-members/teamMembers.api.service';
|
||||
import { ITeamMemberCreateRequest } from '@/types/teamMembers/team-member-create-request';
|
||||
import { LinkOutlined } from '@ant-design/icons';
|
||||
|
||||
interface FormValues {
|
||||
email: string[];
|
||||
@@ -97,23 +88,33 @@ const InviteTeamMembers = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
<Modal
|
||||
title={
|
||||
<Typography.Text strong style={{ fontSize: 16 }}>
|
||||
{t('addMemberDrawerTitle')}
|
||||
</Typography.Text>
|
||||
}
|
||||
open={isDrawerOpen}
|
||||
onClose={handleClose}
|
||||
onCancel={handleClose}
|
||||
destroyOnClose
|
||||
afterOpenChange={visible => visible && handleSearch('')}
|
||||
width={400}
|
||||
loading={loading}
|
||||
footer={
|
||||
<Flex justify="end">
|
||||
<Button type="primary" onClick={form.submit}>
|
||||
{t('addToTeamButton')}
|
||||
</Button>
|
||||
<Flex justify="space-between">
|
||||
{/* <Button
|
||||
style={{ width: 140, fontSize: 12 }}
|
||||
block
|
||||
icon={<LinkOutlined />}
|
||||
disabled
|
||||
>
|
||||
{t('copyTeamLink')}
|
||||
</Button> */}
|
||||
<Flex justify="end">
|
||||
<Button onClick={form.submit} style={{ fontSize: 12 }}>
|
||||
{t('addToTeamButton')}
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
}
|
||||
>
|
||||
@@ -186,7 +187,7 @@ const InviteTeamMembers = () => {
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Drawer>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
Image,
|
||||
Input,
|
||||
Flex,
|
||||
theme,
|
||||
} from '@/shared/antd-imports';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
@@ -37,13 +38,12 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
|
||||
showBothTabs = false,
|
||||
templateSelected = (templateId: string) => {
|
||||
if (!templateId) return;
|
||||
templateId;
|
||||
},
|
||||
selectedTemplateType = (type: 'worklenz' | 'custom') => {
|
||||
type;
|
||||
},
|
||||
}) => {
|
||||
const themeMode = useSelector((state: RootState) => state.themeReducer.mode);
|
||||
const { token } = theme.useToken();
|
||||
const { t } = useTranslation('template-drawer');
|
||||
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
@@ -149,7 +149,12 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
|
||||
<Tag
|
||||
key={phase.name}
|
||||
color={phase.color_code}
|
||||
style={{ color: 'black', marginBottom: '8px' }}
|
||||
style={{
|
||||
color: token.colorText,
|
||||
marginBottom: '8px',
|
||||
backgroundColor: phase.color_code ? undefined : token.colorBgContainer,
|
||||
borderColor: phase.color_code ? undefined : token.colorBorder
|
||||
}}
|
||||
>
|
||||
{phase.name}
|
||||
</Tag>
|
||||
@@ -171,7 +176,12 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
|
||||
<Tag
|
||||
key={status.name}
|
||||
color={status.color_code}
|
||||
style={{ color: 'black', marginBottom: '8px' }}
|
||||
style={{
|
||||
color: token.colorText,
|
||||
marginBottom: '8px',
|
||||
backgroundColor: status.color_code ? undefined : token.colorBgContainer,
|
||||
borderColor: status.color_code ? undefined : token.colorBorder
|
||||
}}
|
||||
>
|
||||
{status.name}
|
||||
</Tag>
|
||||
@@ -193,7 +203,12 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
|
||||
<Tag
|
||||
key={priority.name}
|
||||
color={priority.color_code}
|
||||
style={{ color: 'black', marginBottom: '8px' }}
|
||||
style={{
|
||||
color: token.colorText,
|
||||
marginBottom: '8px',
|
||||
backgroundColor: priority.color_code ? undefined : token.colorBgContainer,
|
||||
borderColor: priority.color_code ? undefined : token.colorBorder
|
||||
}}
|
||||
>
|
||||
{priority.name}
|
||||
</Tag>
|
||||
@@ -215,7 +230,12 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
|
||||
<Tag
|
||||
key={label.name}
|
||||
color={label.color_code}
|
||||
style={{ color: 'black', marginBottom: '8px' }}
|
||||
style={{
|
||||
color: token.colorText,
|
||||
marginBottom: '8px',
|
||||
backgroundColor: label.color_code ? undefined : token.colorBgContainer,
|
||||
borderColor: label.color_code ? undefined : token.colorBorder
|
||||
}}
|
||||
>
|
||||
{label.name}
|
||||
</Tag>
|
||||
@@ -251,14 +271,24 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
|
||||
};
|
||||
|
||||
const menuContent = (
|
||||
<div style={{ display: 'flex' }}>
|
||||
<div style={{ display: 'flex', backgroundColor: token.colorBgContainer }}>
|
||||
{/* Menu Area */}
|
||||
<div style={{ minWidth: '250px', overflowY: 'auto', height: '100%' }}>
|
||||
<div style={{
|
||||
minWidth: '250px',
|
||||
overflowY: 'auto',
|
||||
height: '100%',
|
||||
backgroundColor: token.colorBgContainer,
|
||||
borderRight: `1px solid ${token.colorBorder}`
|
||||
}}>
|
||||
<Skeleton loading={loadingTemplates} active>
|
||||
<Menu
|
||||
className="template-menu"
|
||||
onClick={({ key }) => handleMenuClick(key)}
|
||||
style={{ width: 256 }}
|
||||
style={{
|
||||
width: 256,
|
||||
backgroundColor: token.colorBgContainer,
|
||||
borderColor: token.colorBorder
|
||||
}}
|
||||
defaultSelectedKeys={[templates[0]?.id || '']}
|
||||
mode="inline"
|
||||
items={menuItems}
|
||||
@@ -272,9 +302,11 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
|
||||
flex: 1,
|
||||
maxHeight: 'calc(100vh - 200px)',
|
||||
padding: '16px',
|
||||
backgroundColor: token.colorBgContainer,
|
||||
color: token.colorText
|
||||
}}
|
||||
>
|
||||
<Title level={4}>Details</Title>
|
||||
<Title level={4} style={{ color: token.colorText }}>Details</Title>
|
||||
<Skeleton loading={loadingSelectedTemplate} active>
|
||||
{selectedTemplate?.image_url && (
|
||||
<Image preview={false} src={selectedTemplate.image_url} alt={selectedTemplate.name} />
|
||||
@@ -297,12 +329,17 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
|
||||
};
|
||||
|
||||
const customTemplatesContent = (
|
||||
<div>
|
||||
<div style={{ backgroundColor: token.colorBgContainer, padding: '16px' }}>
|
||||
<Flex justify="space-between" align="center">
|
||||
<Input
|
||||
placeholder={t('searchTemplates')}
|
||||
suffix={<SearchOutlined />}
|
||||
style={{ maxWidth: '300px' }}
|
||||
suffix={<SearchOutlined style={{ color: token.colorTextTertiary }} />}
|
||||
style={{
|
||||
maxWidth: '300px',
|
||||
backgroundColor: token.colorBgContainer,
|
||||
borderColor: token.colorBorder,
|
||||
color: token.colorText
|
||||
}}
|
||||
onChange={e => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
</Flex>
|
||||
@@ -312,10 +349,20 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
|
||||
bordered
|
||||
dataSource={filteredCustomTemplates}
|
||||
loading={loadingCustomTemplates}
|
||||
style={{
|
||||
backgroundColor: token.colorBgContainer,
|
||||
borderColor: token.colorBorder
|
||||
}}
|
||||
renderItem={item => (
|
||||
<List.Item
|
||||
key={item.id}
|
||||
onClick={() => handleCustomTemplateClick(item.id || '')}
|
||||
style={{
|
||||
backgroundColor: item.selected ? token.colorPrimaryBg : token.colorBgContainer,
|
||||
borderColor: item.selected ? token.colorPrimary : token.colorBorder,
|
||||
color: token.colorText,
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
className={
|
||||
item.selected && themeMode === 'dark'
|
||||
? 'selected-custom-template-dark'
|
||||
@@ -324,7 +371,7 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
|
||||
: ''
|
||||
}
|
||||
>
|
||||
{item.name}
|
||||
<span style={{ color: token.colorText }}>{item.name}</span>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
@@ -355,18 +402,31 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ height: '100vh', overflow: 'hidden' }}>
|
||||
<div style={{
|
||||
height: '100vh',
|
||||
overflow: 'hidden',
|
||||
backgroundColor: token.colorBgLayout
|
||||
}}>
|
||||
<div
|
||||
style={{
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
zIndex: 100,
|
||||
backgroundColor: themeMode === 'dark' ? '' : '#fff',
|
||||
backgroundColor: token.colorBgContainer,
|
||||
overflow: 'hidden',
|
||||
borderBottom: `1px solid ${token.colorBorder}`
|
||||
}}
|
||||
>
|
||||
{showBothTabs ? (
|
||||
<Tabs type="card" items={tabs} onChange={handleTabChange} destroyInactiveTabPane />
|
||||
<Tabs
|
||||
type="card"
|
||||
items={tabs}
|
||||
onChange={handleTabChange}
|
||||
destroyInactiveTabPane
|
||||
style={{
|
||||
backgroundColor: token.colorBgContainer
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
menuContent
|
||||
)}
|
||||
|
||||
@@ -8,15 +8,7 @@ import ImprovedTaskFilters from '../../task-management/improved-task-filters';
|
||||
import Card from 'antd/es/card';
|
||||
import Spin from 'antd/es/spin';
|
||||
import Empty from 'antd/es/empty';
|
||||
import {
|
||||
reorderGroups,
|
||||
reorderEnhancedKanbanGroups,
|
||||
reorderTasks,
|
||||
reorderEnhancedKanbanTasks,
|
||||
fetchEnhancedKanbanLabels,
|
||||
fetchEnhancedKanbanGroups,
|
||||
fetchEnhancedKanbanTaskAssignees,
|
||||
} from '@/features/enhanced-kanban/enhanced-kanban.slice';
|
||||
import { reorderGroups, reorderEnhancedKanbanGroups, reorderTasks, reorderEnhancedKanbanTasks, fetchEnhancedKanbanLabels, fetchEnhancedKanbanGroups, fetchEnhancedKanbanTaskAssignees, updateEnhancedKanbanTaskPriority } from '@/features/enhanced-kanban/enhanced-kanban.slice';
|
||||
import { fetchStatusesCategories } from '@/features/taskAttributes/taskStatusSlice';
|
||||
import { useAppSelector } from '@/hooks/useAppSelector';
|
||||
import KanbanGroup from './KanbanGroup';
|
||||
@@ -29,17 +21,26 @@ import alertService from '@/services/alerts/alertService';
|
||||
import logger from '@/utils/errorLogger';
|
||||
import { checkTaskDependencyStatus } from '@/utils/check-task-dependency-status';
|
||||
import { useTaskSocketHandlers } from '@/hooks/useTaskSocketHandlers';
|
||||
import { phasesApiService } from '@/api/taskAttributes/phases/phases.api.service';
|
||||
import { ITaskListGroup } from '@/types/tasks/taskList.types';
|
||||
import { fetchPhasesByProjectId, updatePhaseListOrder } from '@/features/projects/singleProject/phase/phases.slice';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { ITaskListPriorityChangeResponse } from '@/types/tasks/task-list-priority.types';
|
||||
|
||||
const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ projectId }) => {
|
||||
const { t } = useTranslation('kanban-board');
|
||||
const dispatch = useDispatch();
|
||||
const authService = useAuthService();
|
||||
const { socket } = useSocket();
|
||||
const project = useAppSelector((state: RootState) => state.projectReducer.project);
|
||||
const groupBy = useSelector((state: RootState) => state.enhancedKanbanReducer.groupBy);
|
||||
const teamId = authService.getCurrentSession()?.team_id;
|
||||
const { taskGroups, loadingGroups, error } = useSelector(
|
||||
(state: RootState) => state.enhancedKanbanReducer
|
||||
);
|
||||
const {
|
||||
taskGroups,
|
||||
loadingGroups,
|
||||
error,
|
||||
} = useSelector((state: RootState) => state.enhancedKanbanReducer);
|
||||
const { phaseList, loadingPhases } = useAppSelector(state => state.phaseReducer);
|
||||
const [draggedGroupId, setDraggedGroupId] = useState<string | null>(null);
|
||||
const [draggedTaskId, setDraggedTaskId] = useState<string | null>(null);
|
||||
const [draggedTaskGroupId, setDraggedTaskGroupId] = useState<string | null>(null);
|
||||
@@ -64,6 +65,9 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
|
||||
if (!statusCategories.length) {
|
||||
dispatch(fetchStatusesCategories() as any);
|
||||
}
|
||||
if (groupBy === 'phase' && !phaseList.length) {
|
||||
dispatch(fetchPhasesByProjectId(projectId) as any);
|
||||
}
|
||||
}, [dispatch, projectId]);
|
||||
// Reset drag state if taskGroups changes (e.g., real-time update)
|
||||
useEffect(() => {
|
||||
@@ -80,6 +84,9 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
|
||||
setDraggedGroupId(groupId);
|
||||
setDragType('group');
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
try {
|
||||
e.dataTransfer.setData('text/plain', groupId);
|
||||
} catch {}
|
||||
};
|
||||
const handleGroupDragOver = (e: React.DragEvent) => {
|
||||
if (dragType !== 'group') return;
|
||||
@@ -97,34 +104,44 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
|
||||
const [moved] = reorderedGroups.splice(fromIdx, 1);
|
||||
reorderedGroups.splice(toIdx, 0, moved);
|
||||
dispatch(reorderGroups({ fromIndex: fromIdx, toIndex: toIdx, reorderedGroups }));
|
||||
dispatch(
|
||||
reorderEnhancedKanbanGroups({ fromIndex: fromIdx, toIndex: toIdx, reorderedGroups }) as any
|
||||
);
|
||||
|
||||
dispatch(reorderEnhancedKanbanGroups({ fromIndex: fromIdx, toIndex: toIdx, reorderedGroups }) as any);
|
||||
// API call for group order
|
||||
try {
|
||||
const columnOrder = reorderedGroups.map(group => group.id);
|
||||
const requestBody = { status_order: columnOrder };
|
||||
const response = await statusApiService.updateStatusOrder(requestBody, projectId);
|
||||
if (!response.done) {
|
||||
// Revert the change if API call fails
|
||||
const revertedGroups = [...reorderedGroups];
|
||||
const [movedBackGroup] = revertedGroups.splice(toIdx, 1);
|
||||
revertedGroups.splice(fromIdx, 0, movedBackGroup);
|
||||
dispatch(
|
||||
reorderGroups({ fromIndex: toIdx, toIndex: fromIdx, reorderedGroups: revertedGroups })
|
||||
);
|
||||
alertService.error('Failed to update column order', 'Please try again');
|
||||
if (groupBy === 'status') {
|
||||
const columnOrder = reorderedGroups.map(group => group.id);
|
||||
const requestBody = { status_order: columnOrder };
|
||||
const response = await statusApiService.updateStatusOrder(requestBody, projectId);
|
||||
if (!response.done) {
|
||||
// Revert the change if API call fails
|
||||
const revertedGroups = [...reorderedGroups];
|
||||
const [movedBackGroup] = revertedGroups.splice(toIdx, 1);
|
||||
revertedGroups.splice(fromIdx, 0, movedBackGroup);
|
||||
dispatch(reorderGroups({ fromIndex: toIdx, toIndex: fromIdx, reorderedGroups: revertedGroups }));
|
||||
alertService.error(t('failedToUpdateColumnOrder'), t('pleaseTryAgain'));
|
||||
}
|
||||
} else if (groupBy === 'phase') {
|
||||
const newPhaseList = [...phaseList];
|
||||
const [movedItem] = newPhaseList.splice(fromIdx, 1);
|
||||
newPhaseList.splice(toIdx, 0, movedItem);
|
||||
dispatch(updatePhaseListOrder(newPhaseList));
|
||||
const requestBody = {
|
||||
from_index: fromIdx,
|
||||
to_index: toIdx,
|
||||
phases: newPhaseList,
|
||||
project_id: projectId,
|
||||
};
|
||||
const response = await phasesApiService.updatePhaseOrder(projectId, requestBody);
|
||||
if (!response.done) {
|
||||
alertService.error(t('failedToUpdatePhaseOrder'), t('pleaseTryAgain'));
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
// Revert the change if API call fails
|
||||
const revertedGroups = [...reorderedGroups];
|
||||
const [movedBackGroup] = revertedGroups.splice(toIdx, 1);
|
||||
revertedGroups.splice(fromIdx, 0, movedBackGroup);
|
||||
dispatch(
|
||||
reorderGroups({ fromIndex: toIdx, toIndex: fromIdx, reorderedGroups: revertedGroups })
|
||||
);
|
||||
alertService.error('Failed to update column order', 'Please try again');
|
||||
dispatch(reorderGroups({ fromIndex: toIdx, toIndex: fromIdx, reorderedGroups: revertedGroups }));
|
||||
alertService.error(t('failedToUpdateColumnOrder'), t('pleaseTryAgain'));
|
||||
logger.error('Failed to update column order', error);
|
||||
}
|
||||
|
||||
@@ -132,12 +149,47 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
|
||||
setDragType(null);
|
||||
};
|
||||
|
||||
// Utility to recalculate all task orders for all groups
|
||||
function getAllTaskUpdates(allGroups: ITaskListGroup[], groupBy: string) {
|
||||
const taskUpdates: Array<{
|
||||
task_id: string | undefined;
|
||||
sort_order: number;
|
||||
status_id?: string;
|
||||
priority_id?: string;
|
||||
phase_id?: string;
|
||||
}> = [];
|
||||
let currentSortOrder = 0;
|
||||
for (const group of allGroups) {
|
||||
for (const task of group.tasks) {
|
||||
const update: {
|
||||
task_id: string | undefined;
|
||||
sort_order: number;
|
||||
status_id?: string;
|
||||
priority_id?: string;
|
||||
phase_id?: string;
|
||||
} = {
|
||||
task_id: task.id,
|
||||
sort_order: currentSortOrder,
|
||||
};
|
||||
if (groupBy === 'status') update.status_id = group.id;
|
||||
else if (groupBy === 'priority') update.priority_id = group.id;
|
||||
else if (groupBy === 'phase' && group.name !== 'Unmapped') update.phase_id = group.id;
|
||||
taskUpdates.push(update);
|
||||
currentSortOrder++;
|
||||
}
|
||||
}
|
||||
return taskUpdates;
|
||||
}
|
||||
|
||||
// Task drag handlers
|
||||
const handleTaskDragStart = (e: React.DragEvent, taskId: string, groupId: string) => {
|
||||
setDraggedTaskId(taskId);
|
||||
setDraggedTaskGroupId(groupId);
|
||||
setDragType('task');
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
try {
|
||||
e.dataTransfer.setData('text/plain', taskId);
|
||||
} catch {}
|
||||
};
|
||||
const handleTaskDragOver = (e: React.DragEvent, groupId: string, taskIdx: number | null) => {
|
||||
if (dragType !== 'task') return;
|
||||
@@ -176,8 +228,8 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
|
||||
const canContinue = await checkTaskDependencyStatus(movedTask.id, targetGroupId);
|
||||
if (!canContinue) {
|
||||
alertService.error(
|
||||
'Task is not completed',
|
||||
'Please complete the task dependencies before proceeding'
|
||||
t('taskNotCompleted'),
|
||||
t('completeTaskDependencies')
|
||||
);
|
||||
return;
|
||||
}
|
||||
@@ -187,6 +239,7 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
|
||||
let insertIdx = hoveredTaskIdx;
|
||||
|
||||
// Handle same group reordering
|
||||
let newTaskGroups = [...taskGroups];
|
||||
if (sourceGroup.id === targetGroup.id) {
|
||||
// Create a single updated array for the same group
|
||||
const updatedTasks = [...sourceGroup.tasks];
|
||||
@@ -201,29 +254,26 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
|
||||
if (insertIdx > updatedTasks.length) insertIdx = updatedTasks.length;
|
||||
|
||||
updatedTasks.splice(insertIdx, 0, movedTask); // Insert at new position
|
||||
|
||||
dispatch(
|
||||
reorderTasks({
|
||||
activeGroupId: sourceGroup.id,
|
||||
overGroupId: targetGroup.id,
|
||||
fromIndex: taskIdx,
|
||||
toIndex: insertIdx,
|
||||
task: movedTask,
|
||||
updatedSourceTasks: updatedTasks,
|
||||
updatedTargetTasks: updatedTasks,
|
||||
})
|
||||
);
|
||||
dispatch(
|
||||
reorderEnhancedKanbanTasks({
|
||||
activeGroupId: sourceGroup.id,
|
||||
overGroupId: targetGroup.id,
|
||||
fromIndex: taskIdx,
|
||||
toIndex: insertIdx,
|
||||
task: movedTask,
|
||||
updatedSourceTasks: updatedTasks,
|
||||
updatedTargetTasks: updatedTasks,
|
||||
}) as any
|
||||
);
|
||||
dispatch(reorderTasks({
|
||||
activeGroupId: sourceGroup.id,
|
||||
overGroupId: targetGroup.id,
|
||||
fromIndex: taskIdx,
|
||||
toIndex: insertIdx,
|
||||
task: movedTask,
|
||||
updatedSourceTasks: updatedTasks,
|
||||
updatedTargetTasks: updatedTasks,
|
||||
}));
|
||||
dispatch(reorderEnhancedKanbanTasks({
|
||||
activeGroupId: sourceGroup.id,
|
||||
overGroupId: targetGroup.id,
|
||||
fromIndex: taskIdx,
|
||||
toIndex: insertIdx,
|
||||
task: movedTask,
|
||||
updatedSourceTasks: updatedTasks,
|
||||
updatedTargetTasks: updatedTasks,
|
||||
}) as any);
|
||||
// Update newTaskGroups for socket emit
|
||||
newTaskGroups = newTaskGroups.map(g => g.id === sourceGroup.id ? { ...g, tasks: updatedTasks } : g);
|
||||
} else {
|
||||
// Handle cross-group reordering
|
||||
const updatedSourceTasks = [...sourceGroup.tasks];
|
||||
@@ -234,56 +284,51 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
|
||||
if (insertIdx > updatedTargetTasks.length) insertIdx = updatedTargetTasks.length;
|
||||
updatedTargetTasks.splice(insertIdx, 0, movedTask);
|
||||
|
||||
dispatch(
|
||||
reorderTasks({
|
||||
activeGroupId: sourceGroup.id,
|
||||
overGroupId: targetGroup.id,
|
||||
fromIndex: taskIdx,
|
||||
toIndex: insertIdx,
|
||||
task: movedTask,
|
||||
updatedSourceTasks,
|
||||
updatedTargetTasks,
|
||||
})
|
||||
);
|
||||
dispatch(
|
||||
reorderEnhancedKanbanTasks({
|
||||
activeGroupId: sourceGroup.id,
|
||||
overGroupId: targetGroup.id,
|
||||
fromIndex: taskIdx,
|
||||
toIndex: insertIdx,
|
||||
task: movedTask,
|
||||
updatedSourceTasks,
|
||||
updatedTargetTasks,
|
||||
}) as any
|
||||
);
|
||||
dispatch(reorderTasks({
|
||||
activeGroupId: sourceGroup.id,
|
||||
overGroupId: targetGroup.id,
|
||||
fromIndex: taskIdx,
|
||||
toIndex: insertIdx,
|
||||
task: movedTask,
|
||||
updatedSourceTasks,
|
||||
updatedTargetTasks,
|
||||
}));
|
||||
dispatch(reorderEnhancedKanbanTasks({
|
||||
activeGroupId: sourceGroup.id,
|
||||
overGroupId: targetGroup.id,
|
||||
fromIndex: taskIdx,
|
||||
toIndex: insertIdx,
|
||||
task: movedTask,
|
||||
updatedSourceTasks,
|
||||
updatedTargetTasks,
|
||||
}) as any);
|
||||
// Update newTaskGroups for socket emit
|
||||
newTaskGroups = newTaskGroups.map(g => {
|
||||
if (g.id === sourceGroup.id) return { ...g, tasks: updatedSourceTasks };
|
||||
if (g.id === targetGroup.id) return { ...g, tasks: updatedTargetTasks };
|
||||
return g;
|
||||
});
|
||||
}
|
||||
|
||||
// Socket emit for task order
|
||||
// Socket emit for full task order
|
||||
if (socket && projectId && teamId && movedTask) {
|
||||
let toSortOrder = -1;
|
||||
let toLastIndex = false;
|
||||
if (insertIdx === targetGroup.tasks.length) {
|
||||
toSortOrder = -1;
|
||||
toLastIndex = true;
|
||||
} else if (targetGroup.tasks[insertIdx]) {
|
||||
const sortOrder = targetGroup.tasks[insertIdx].sort_order;
|
||||
toSortOrder = typeof sortOrder === 'number' ? sortOrder : 0;
|
||||
toLastIndex = false;
|
||||
} else if (targetGroup.tasks.length > 0) {
|
||||
const lastSortOrder = targetGroup.tasks[targetGroup.tasks.length - 1].sort_order;
|
||||
toSortOrder = typeof lastSortOrder === 'number' ? lastSortOrder : 0;
|
||||
toLastIndex = false;
|
||||
}
|
||||
const taskUpdates = getAllTaskUpdates(newTaskGroups, groupBy);
|
||||
socket.emit(SocketEvents.TASK_SORT_ORDER_CHANGE.toString(), {
|
||||
project_id: projectId,
|
||||
from_index: movedTask.sort_order ?? 0,
|
||||
to_index: toSortOrder,
|
||||
to_last_index: toLastIndex,
|
||||
group_by: groupBy || 'status',
|
||||
task_updates: taskUpdates,
|
||||
from_group: sourceGroup.id,
|
||||
to_group: targetGroup.id,
|
||||
group_by: groupBy || 'status',
|
||||
task: movedTask,
|
||||
team_id: teamId,
|
||||
from_index: taskIdx,
|
||||
to_index: insertIdx,
|
||||
to_last_index: insertIdx === (targetGroup.id === sourceGroup.id ? (newTaskGroups.find(g => g.id === targetGroup.id)?.tasks.length || 0) - 1 : targetGroup.tasks.length),
|
||||
task: {
|
||||
id: movedTask.id,
|
||||
project_id: movedTask.project_id || projectId,
|
||||
status: movedTask.status || '',
|
||||
priority: movedTask.priority || '',
|
||||
}
|
||||
});
|
||||
|
||||
// Emit progress update if status changed
|
||||
@@ -298,6 +343,22 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
|
||||
})
|
||||
);
|
||||
}
|
||||
if (groupBy === 'priority' && movedTask.id) {
|
||||
socket?.emit(
|
||||
SocketEvents.TASK_PRIORITY_CHANGE.toString(),
|
||||
JSON.stringify({
|
||||
task_id: movedTask.id,
|
||||
priority_id: targetGroupId,
|
||||
team_id: teamId,
|
||||
})
|
||||
);
|
||||
socket?.once(
|
||||
SocketEvents.TASK_PRIORITY_CHANGE.toString(),
|
||||
(data: ITaskListPriorityChangeResponse) => {
|
||||
dispatch(updateEnhancedKanbanTaskPriority(data));
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
setDraggedTaskId(null);
|
||||
@@ -318,7 +379,7 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
|
||||
if (error) {
|
||||
return (
|
||||
<Card>
|
||||
<Empty description={`Error loading tasks: ${error}`} image={Empty.PRESENTED_IMAGE_SIMPLE} />
|
||||
<Empty description={`${t('errorLoadingTasks')}: ${error}`} image={Empty.PRESENTED_IMAGE_SIMPLE} />
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -326,33 +387,21 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
|
||||
return (
|
||||
<>
|
||||
<div className="mb-4">
|
||||
<React.Suspense fallback={<div>Loading filters...</div>}>
|
||||
<React.Suspense fallback={<div>{t('loadingFilters')}</div>}>
|
||||
<ImprovedTaskFilters position="board" />
|
||||
</React.Suspense>
|
||||
</div>
|
||||
<div className="enhanced-kanban-board">
|
||||
{loadingGroups ? (
|
||||
<div className="flex flex-row gap-2 h-[600px]">
|
||||
<div
|
||||
className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4"
|
||||
style={{ height: '60%' }}
|
||||
/>
|
||||
<div
|
||||
className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4"
|
||||
style={{ height: '100%' }}
|
||||
/>
|
||||
<div
|
||||
className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4"
|
||||
style={{ height: '80%' }}
|
||||
/>
|
||||
<div
|
||||
className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4"
|
||||
style={{ height: '40%' }}
|
||||
/>
|
||||
<div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '60%' }} />
|
||||
<div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '100%' }} />
|
||||
<div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '80%' }} />
|
||||
<div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '40%' }} />
|
||||
</div>
|
||||
) : taskGroups.length === 0 ? (
|
||||
<Card>
|
||||
<Empty description="No tasks found" image={Empty.PRESENTED_IMAGE_SIMPLE} />
|
||||
<Empty description={t('noTasksFound')} image={Empty.PRESENTED_IMAGE_SIMPLE} />
|
||||
</Card>
|
||||
) : (
|
||||
<div className="kanban-groups-container">
|
||||
|
||||
@@ -25,6 +25,7 @@ import {
|
||||
IGroupBy,
|
||||
} from '@/features/enhanced-kanban/enhanced-kanban.slice';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { Modal } from 'antd';
|
||||
|
||||
// Simple Portal component
|
||||
const Portal: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||
@@ -219,8 +220,43 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
setShowDeleteConfirm(true);
|
||||
setShowDropdown(false);
|
||||
if (groupBy === IGroupBy.STATUS) {
|
||||
Modal.confirm({
|
||||
title: t('deleteStatusTitle'),
|
||||
content: t('deleteStatusContent'),
|
||||
okText: t('deleteTaskConfirm'),
|
||||
okType: 'danger',
|
||||
cancelText: t('deleteTaskCancel'),
|
||||
centered: true,
|
||||
onOk: async () => {
|
||||
await handleDeleteSection();
|
||||
},
|
||||
});
|
||||
} else if (groupBy === IGroupBy.PHASE) {
|
||||
Modal.confirm({
|
||||
title: t('deletePhaseTitle'),
|
||||
content: t('deletePhaseContent'),
|
||||
okText: t('deleteTaskConfirm'),
|
||||
okType: 'danger',
|
||||
cancelText: t('deleteTaskCancel'),
|
||||
centered: true,
|
||||
onOk: async () => {
|
||||
await handleDeleteSection();
|
||||
},
|
||||
});
|
||||
} else {
|
||||
Modal.confirm({
|
||||
title: t('deleteConfirmationTitle'),
|
||||
okText: t('deleteTaskConfirm'),
|
||||
okType: 'danger',
|
||||
cancelText: t('deleteTaskCancel'),
|
||||
centered: true,
|
||||
onOk: async () => {
|
||||
await handleDeleteSection();
|
||||
},
|
||||
});
|
||||
}
|
||||
setShowDropdown(false);
|
||||
};
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
@@ -290,51 +326,180 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(
|
||||
if ((isProjectManager || isOwnerOrAdmin) && group.name !== t('unmapped'))
|
||||
setIsEditable(true);
|
||||
}}
|
||||
onMouseDown={e => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
{isLoading && (
|
||||
<div className="w-4 h-4 border-2 border-gray-300 border-t-blue-600 rounded-full animate-spin"></div>
|
||||
)}
|
||||
{isEditable ? (
|
||||
<input
|
||||
ref={inputRef}
|
||||
value={name}
|
||||
className={`bg-transparent border-none outline-none text-sm font-semibold capitalize min-w-[185px] ${
|
||||
themeMode === 'dark' ? 'text-gray-800' : 'text-gray-900'
|
||||
}`}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
onKeyDown={handlePressEnter}
|
||||
onMouseDown={e => {
|
||||
e.stopPropagation();
|
||||
onDragOver={e => { e.preventDefault(); onTaskDragOver(e, group.id, null); }}
|
||||
onDrop={e => { e.preventDefault(); onTaskDrop(e, group.id, null); }}
|
||||
/>
|
||||
|
||||
{/* Content layer - z-index 1 */}
|
||||
<div style={{ position: 'relative', zIndex: 1 }}>
|
||||
<div
|
||||
className="enhanced-kanban-group-header"
|
||||
style={{
|
||||
backgroundColor: headerBackgroundColor,
|
||||
}}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className={`min-w-[185px] text-sm font-semibold capitalize truncate ${
|
||||
themeMode === 'dark' ? 'text-gray-800' : 'text-gray-900'
|
||||
}`}
|
||||
title={isEllipsisActive ? name : undefined}
|
||||
onMouseDown={e => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}}
|
||||
onMouseUp={e => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
{name} ({group.tasks.length})
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
draggable
|
||||
onDragStart={e => onGroupDragStart(e, group.id)}
|
||||
onDragOver={onGroupDragOver}
|
||||
onDrop={e => onGroupDrop(e, group.id)}
|
||||
onDragEnd={onDragEnd}
|
||||
>
|
||||
<div
|
||||
className="flex items-center justify-between w-full font-semibold rounded-md"
|
||||
onMouseEnter={() => setIsHover(true)}
|
||||
onMouseLeave={() => setIsHover(false)}
|
||||
>
|
||||
<div
|
||||
className="flex items-center gap-2 cursor-pointer"
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
if ((isProjectManager || isOwnerOrAdmin) && group.name !== t('unmapped'))
|
||||
setIsEditable(true);
|
||||
}}
|
||||
onMouseDown={e => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
{isLoading && (
|
||||
<div className="w-4 h-4 border-2 border-gray-300 border-t-blue-600 rounded-full animate-spin"></div>
|
||||
)}
|
||||
{isEditable ? (
|
||||
<input
|
||||
ref={inputRef}
|
||||
value={name}
|
||||
className={`bg-transparent border-none outline-none text-sm font-semibold capitalize min-w-[185px] ${themeMode === 'dark' ? 'text-gray-800' : 'text-gray-900'
|
||||
}`}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
onKeyDown={handlePressEnter}
|
||||
onMouseDown={e => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className={`min-w-[185px] text-sm font-semibold capitalize truncate ${themeMode === 'dark' ? 'text-gray-800' : 'text-gray-900'
|
||||
}`}
|
||||
title={isEllipsisActive ? name : undefined}
|
||||
onMouseDown={e => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}}
|
||||
onMouseUp={e => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
{name} ({group.tasks.length})
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
type="button"
|
||||
className="w-7 h-7 flex items-center justify-center rounded-full hover:bg-black/10 transition-colors"
|
||||
onClick={() => {
|
||||
setShowNewCardTop(true);
|
||||
setShowNewCardBottom(false);
|
||||
}}
|
||||
>
|
||||
<svg className="w-4 h-4 text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{(isOwnerOrAdmin || isProjectManager) && name !== t('unmapped') && (
|
||||
<div className="relative" ref={dropdownRef}>
|
||||
<button
|
||||
type="button"
|
||||
className="w-7 h-7 flex items-center justify-center rounded-full hover:bg-black/10 transition-colors"
|
||||
onClick={() => setShowDropdown(!showDropdown)}
|
||||
>
|
||||
<svg className="w-4 h-4 text-gray-800 rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{showDropdown && (
|
||||
<div className="absolute right-0 top-full mt-1 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 z-50">
|
||||
<div className="py-1">
|
||||
<button
|
||||
type="button"
|
||||
className="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
|
||||
onClick={handleRename}
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||||
</svg>
|
||||
{t('rename')}
|
||||
</button>
|
||||
|
||||
{groupBy === IGroupBy.STATUS && statusCategories && (
|
||||
<div className="border-t border-gray-200 dark:border-gray-700">
|
||||
<div className="px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wide">
|
||||
{t('changeCategory')}
|
||||
</div>
|
||||
{statusCategories.map(status => (
|
||||
<button
|
||||
key={status.id}
|
||||
type="button"
|
||||
className="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
|
||||
onClick={() => status.id && handleCategoryChange(status.id)}
|
||||
>
|
||||
<div
|
||||
className="w-3 h-3 rounded-full"
|
||||
style={{ backgroundColor: status.color_code }}
|
||||
></div>
|
||||
<span className={group.category_id === status.id ? 'font-bold' : ''}>
|
||||
{status.name}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{groupBy !== IGroupBy.PRIORITY && (
|
||||
<div className="border-t border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
type="button"
|
||||
className="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2 text-red-600 dark:text-red-400"
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
handleDelete();
|
||||
}}
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
{t('delete')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Simple Delete Confirmation */}
|
||||
{/* Portal-based confirmation removed, now handled by Modal.confirm */}
|
||||
<div className="enhanced-kanban-group-tasks">
|
||||
{/* Create card at top */}
|
||||
{showNewCardTop && (
|
||||
<EnhancedKanbanCreateTaskCard
|
||||
sectionId={group.id}
|
||||
setShowNewCard={setShowNewCardTop}
|
||||
position="top"
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
|
||||
@@ -17,8 +17,12 @@ import { themeWiseColor } from '@/utils/themeWiseColor';
|
||||
import {
|
||||
toggleTaskExpansion,
|
||||
fetchBoardSubTasks,
|
||||
deleteTask as deleteKanbanTask,
|
||||
updateEnhancedKanbanSubtask,
|
||||
} from '@/features/enhanced-kanban/enhanced-kanban.slice';
|
||||
import TaskProgressCircle from './TaskProgressCircle';
|
||||
import { Button, Modal, DeleteOutlined } from '@/shared/antd-imports';
|
||||
import { tasksApiService } from '@/api/tasks/tasks.api.service';
|
||||
|
||||
// Simple Portal component
|
||||
const Portal: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||
@@ -76,6 +80,13 @@ const TaskCard: React.FC<TaskCardProps> = memo(
|
||||
const d = selectedDate || new Date();
|
||||
return new Date(d.getFullYear(), d.getMonth(), 1);
|
||||
});
|
||||
const [contextMenu, setContextMenu] = useState<{ visible: boolean; x: number; y: number }>({
|
||||
visible: false,
|
||||
x: 0,
|
||||
y: 0,
|
||||
});
|
||||
const contextMenuRef = useRef<HTMLDivElement>(null);
|
||||
const [selectedTask, setSelectedTask] = useState<IProjectTask | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedDate(task.end_date ? new Date(task.end_date) : null);
|
||||
@@ -108,6 +119,21 @@ const TaskCard: React.FC<TaskCardProps> = memo(
|
||||
}
|
||||
}, [showDatePicker]);
|
||||
|
||||
// Hide context menu on click elsewhere
|
||||
useEffect(() => {
|
||||
const handleClick = (e: MouseEvent) => {
|
||||
if (contextMenuRef.current && !contextMenuRef.current.contains(e.target as Node)) {
|
||||
setContextMenu({ ...contextMenu, visible: false });
|
||||
}
|
||||
};
|
||||
if (contextMenu.visible) {
|
||||
document.addEventListener('mousedown', handleClick);
|
||||
}
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClick);
|
||||
};
|
||||
}, [contextMenu]);
|
||||
|
||||
const handleCardClick = useCallback(
|
||||
(e: React.MouseEvent, id: string) => {
|
||||
e.stopPropagation();
|
||||
@@ -195,6 +221,51 @@ const TaskCard: React.FC<TaskCardProps> = memo(
|
||||
[handleSubTaskExpand]
|
||||
);
|
||||
|
||||
// Delete logic (similar to task-drawer-header)
|
||||
const handleDeleteTask = async (task: IProjectTask | null) => {
|
||||
if (!task || !task.id) return;
|
||||
Modal.confirm({
|
||||
title: t('deleteTaskTitle'),
|
||||
content: t('deleteTaskContent'),
|
||||
okText: t('deleteTaskConfirm'),
|
||||
okType: 'danger',
|
||||
cancelText: t('deleteTaskCancel'),
|
||||
centered: true,
|
||||
onOk: async () => {
|
||||
if (!task.id) return;
|
||||
const res = await tasksApiService.deleteTask(task.id);
|
||||
if (res.done) {
|
||||
dispatch(setSelectedTaskId(null));
|
||||
if (task.is_sub_task) {
|
||||
dispatch(
|
||||
updateEnhancedKanbanSubtask({
|
||||
sectionId: '',
|
||||
subtask: {
|
||||
id: task.id,
|
||||
parent_task_id: task.parent_task_id || '',
|
||||
manual_progress: false,
|
||||
},
|
||||
mode: 'delete',
|
||||
})
|
||||
);
|
||||
} else {
|
||||
dispatch(deleteKanbanTask(task.id));
|
||||
}
|
||||
dispatch(setShowTaskDrawer(false));
|
||||
if (task.parent_task_id) {
|
||||
socket?.emit(SocketEvents.GET_TASK_PROGRESS.toString(), task.parent_task_id);
|
||||
}
|
||||
}
|
||||
setContextMenu({ visible: false, x: 0, y: 0 });
|
||||
setSelectedTask(null);
|
||||
},
|
||||
onCancel: () => {
|
||||
setContextMenu({ visible: false, x: 0, y: 0 });
|
||||
setSelectedTask(null);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// Calendar rendering helpers
|
||||
const year = calendarMonth.getFullYear();
|
||||
const month = calendarMonth.getMonth();
|
||||
@@ -219,6 +290,39 @@ const TaskCard: React.FC<TaskCardProps> = memo(
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Context menu for delete */}
|
||||
{contextMenu.visible && (
|
||||
<div
|
||||
ref={contextMenuRef}
|
||||
style={{
|
||||
position: 'fixed',
|
||||
top: contextMenu.y,
|
||||
left: contextMenu.x,
|
||||
zIndex: 9999,
|
||||
background: themeMode === 'dark' ? '#23272f' : '#fff',
|
||||
borderRadius: 8,
|
||||
boxShadow: '0 2px 8px rgba(0,0,0,0.12)',
|
||||
padding: 0,
|
||||
minWidth: 120,
|
||||
transition: 'translateY(0)',
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<DeleteOutlined style={{ color: '#ef4444', fontSize: 16 }} />}
|
||||
style={{
|
||||
color: '#ef4444',
|
||||
width: '100%',
|
||||
textAlign: 'left',
|
||||
padding: '8px 16px',
|
||||
fontWeight: 500,
|
||||
}}
|
||||
onClick={() => handleDeleteTask(selectedTask || null)}
|
||||
>
|
||||
{t('delete')}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className="enhanced-kanban-task-card"
|
||||
style={{ background, color, display: 'block', position: 'relative' }}
|
||||
@@ -241,6 +345,11 @@ const TaskCard: React.FC<TaskCardProps> = memo(
|
||||
onDrop={e => onTaskDrop(e, groupId, idx)}
|
||||
onDragEnd={onDragEnd} // <-- add this
|
||||
onClick={e => handleCardClick(e, task.id!)}
|
||||
onContextMenu={e => {
|
||||
e.preventDefault();
|
||||
setContextMenu({ visible: true, x: e.clientX, y: e.clientY });
|
||||
setSelectedTask(task);
|
||||
}}
|
||||
>
|
||||
<div className="task-content">
|
||||
<div className="task_labels" style={{ display: 'flex', gap: 4, marginBottom: 4 }}>
|
||||
@@ -528,6 +637,11 @@ const TaskCard: React.FC<TaskCardProps> = memo(
|
||||
key={sub.id}
|
||||
onClick={e => handleCardClick(e, sub.id!)}
|
||||
className="flex items-center gap-2 px-2 py-1 rounded hover:bg-gray-50 dark:hover:bg-gray-800"
|
||||
onContextMenu={e => {
|
||||
e.preventDefault();
|
||||
setContextMenu({ visible: true, x: e.clientX, y: e.clientY });
|
||||
setSelectedTask(sub);
|
||||
}}
|
||||
>
|
||||
{sub.priority_color || sub.priority_color_dark ? (
|
||||
<span
|
||||
|
||||
@@ -0,0 +1,406 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Modal,
|
||||
Tabs,
|
||||
Progress,
|
||||
Tag,
|
||||
List,
|
||||
Avatar,
|
||||
Badge,
|
||||
Space,
|
||||
Button,
|
||||
Statistic,
|
||||
Row,
|
||||
Col,
|
||||
Timeline,
|
||||
Input,
|
||||
Form,
|
||||
DatePicker,
|
||||
Select
|
||||
} from 'antd';
|
||||
import {
|
||||
CalendarOutlined,
|
||||
TeamOutlined,
|
||||
CheckCircleOutlined,
|
||||
ClockCircleOutlined,
|
||||
FlagOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
EditOutlined,
|
||||
SaveOutlined,
|
||||
CloseOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { PhaseModalData, ProjectPhase, PhaseTask, PhaseMilestone } from '../../types/project-roadmap.types';
|
||||
import { useAppSelector } from '../../hooks/useAppSelector';
|
||||
import { themeWiseColor } from '../../utils/themeWiseColor';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const { TabPane } = Tabs;
|
||||
const { TextArea } = Input;
|
||||
|
||||
interface PhaseModalProps {
|
||||
visible: boolean;
|
||||
phase: PhaseModalData | null;
|
||||
onClose: () => void;
|
||||
onUpdate?: (updates: Partial<ProjectPhase>) => void;
|
||||
}
|
||||
|
||||
const PhaseModal: React.FC<PhaseModalProps> = ({
|
||||
visible,
|
||||
phase,
|
||||
onClose,
|
||||
onUpdate,
|
||||
}) => {
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [form] = Form.useForm();
|
||||
|
||||
// Theme support
|
||||
const themeMode = useAppSelector(state => state.themeReducer.mode);
|
||||
const isDarkMode = themeMode === 'dark';
|
||||
|
||||
if (!phase) return null;
|
||||
|
||||
const handleEdit = () => {
|
||||
setIsEditing(true);
|
||||
form.setFieldsValue({
|
||||
name: phase.name,
|
||||
description: phase.description,
|
||||
startDate: dayjs(phase.startDate),
|
||||
endDate: dayjs(phase.endDate),
|
||||
status: phase.status,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
const updates: Partial<ProjectPhase> = {
|
||||
name: values.name,
|
||||
description: values.description,
|
||||
startDate: values.startDate.toDate(),
|
||||
endDate: values.endDate.toDate(),
|
||||
status: values.status,
|
||||
};
|
||||
|
||||
onUpdate?.(updates);
|
||||
setIsEditing(false);
|
||||
} catch (error) {
|
||||
console.error('Validation failed:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setIsEditing(false);
|
||||
form.resetFields();
|
||||
};
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'completed': return 'success';
|
||||
case 'in-progress': return 'processing';
|
||||
case 'on-hold': return 'warning';
|
||||
default: return 'default';
|
||||
}
|
||||
};
|
||||
|
||||
const getPriorityColor = (priority: string) => {
|
||||
switch (priority) {
|
||||
case 'high': return 'red';
|
||||
case 'medium': return 'orange';
|
||||
case 'low': return 'green';
|
||||
default: return 'default';
|
||||
}
|
||||
};
|
||||
|
||||
const getTaskStatusIcon = (status: string) => {
|
||||
switch (status) {
|
||||
case 'done': return <CheckCircleOutlined style={{ color: '#52c41a' }} />;
|
||||
case 'in-progress': return <ClockCircleOutlined style={{ color: '#1890ff' }} />;
|
||||
default: return <ExclamationCircleOutlined style={{ color: '#d9d9d9' }} />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={
|
||||
<div className="flex justify-between items-center">
|
||||
<Space>
|
||||
<Badge status={getStatusColor(phase.status)} />
|
||||
{isEditing ? (
|
||||
<Form.Item name="name" className="mb-0">
|
||||
<Input className="dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100" />
|
||||
</Form.Item>
|
||||
) : (
|
||||
<h4 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-0">
|
||||
{phase.name}
|
||||
</h4>
|
||||
)}
|
||||
</Space>
|
||||
<Space>
|
||||
{isEditing ? (
|
||||
<>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<SaveOutlined />}
|
||||
onClick={handleSave}
|
||||
size="small"
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
icon={<CloseOutlined />}
|
||||
onClick={handleCancel}
|
||||
size="small"
|
||||
className="dark:border-gray-600 dark:text-gray-300"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Button
|
||||
type="text"
|
||||
icon={<EditOutlined />}
|
||||
onClick={handleEdit}
|
||||
size="small"
|
||||
className="dark:text-gray-300 dark:hover:bg-gray-700"
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
)}
|
||||
</Space>
|
||||
</div>
|
||||
}
|
||||
open={visible}
|
||||
onCancel={onClose}
|
||||
width={800}
|
||||
footer={null}
|
||||
className="dark:bg-gray-800"
|
||||
>
|
||||
<Form form={form} layout="vertical">
|
||||
<div className="mb-4">
|
||||
{isEditing ? (
|
||||
<Form.Item name="description" label={<span className="text-gray-700 dark:text-gray-300">Description</span>}>
|
||||
<TextArea
|
||||
rows={2}
|
||||
className="dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100"
|
||||
/>
|
||||
</Form.Item>
|
||||
) : (
|
||||
<p className="text-gray-600 dark:text-gray-400">{phase.description}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Phase Statistics */}
|
||||
<Row gutter={16} className="mb-6">
|
||||
<Col span={6}>
|
||||
<div className="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4">
|
||||
<Statistic
|
||||
title={<span className="text-gray-600 dark:text-gray-400">Progress</span>}
|
||||
value={phase.progress}
|
||||
suffix="%"
|
||||
valueStyle={{ color: themeWiseColor('#1890ff', '#40a9ff', themeMode) }}
|
||||
/>
|
||||
<Progress
|
||||
percent={phase.progress}
|
||||
showInfo={false}
|
||||
size="small"
|
||||
strokeColor={themeWiseColor('#1890ff', '#40a9ff', themeMode)}
|
||||
trailColor={themeWiseColor('#f0f0f0', '#4b5563', themeMode)}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<div className="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4">
|
||||
<Statistic
|
||||
title={<span className="text-gray-600 dark:text-gray-400">Tasks</span>}
|
||||
value={phase.completedTaskCount}
|
||||
suffix={`/ ${phase.taskCount}`}
|
||||
valueStyle={{ color: themeWiseColor('#52c41a', '#34d399', themeMode) }}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<div className="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4">
|
||||
<Statistic
|
||||
title={<span className="text-gray-600 dark:text-gray-400">Milestones</span>}
|
||||
value={phase.completedMilestoneCount}
|
||||
suffix={`/ ${phase.milestoneCount}`}
|
||||
valueStyle={{ color: themeWiseColor('#722ed1', '#9f7aea', themeMode) }}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<div className="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4">
|
||||
<Statistic
|
||||
title={<span className="text-gray-600 dark:text-gray-400">Team</span>}
|
||||
value={phase.teamMembers.length}
|
||||
suffix="members"
|
||||
valueStyle={{ color: themeWiseColor('#fa8c16', '#fbbf24', themeMode) }}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* Timeline */}
|
||||
<Row gutter={16} className="mb-6">
|
||||
<Col span={12}>
|
||||
{isEditing ? (
|
||||
<Form.Item name="startDate" label={<span className="text-gray-700 dark:text-gray-300">Start Date</span>}>
|
||||
<DatePicker className="w-full dark:bg-gray-700 dark:border-gray-600" />
|
||||
</Form.Item>
|
||||
) : (
|
||||
<div className="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<CalendarOutlined className="text-gray-600 dark:text-gray-400" />
|
||||
<span className="font-medium text-gray-900 dark:text-gray-100">Start:</span>
|
||||
<span className="text-gray-600 dark:text-gray-400">{phase.startDate.toLocaleDateString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
{isEditing ? (
|
||||
<Form.Item name="endDate" label={<span className="text-gray-700 dark:text-gray-300">End Date</span>}>
|
||||
<DatePicker className="w-full dark:bg-gray-700 dark:border-gray-600" />
|
||||
</Form.Item>
|
||||
) : (
|
||||
<div className="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<CalendarOutlined className="text-gray-600 dark:text-gray-400" />
|
||||
<span className="font-medium text-gray-900 dark:text-gray-100">End:</span>
|
||||
<span className="text-gray-600 dark:text-gray-400">{phase.endDate.toLocaleDateString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{isEditing && (
|
||||
<Row gutter={16} className="mb-6">
|
||||
<Col span={12}>
|
||||
<Form.Item name="status" label={<span className="text-gray-700 dark:text-gray-300">Status</span>}>
|
||||
<Select className="dark:bg-gray-700 dark:border-gray-600">
|
||||
<Select.Option value="not-started">Not Started</Select.Option>
|
||||
<Select.Option value="in-progress">In Progress</Select.Option>
|
||||
<Select.Option value="completed">Completed</Select.Option>
|
||||
<Select.Option value="on-hold">On Hold</Select.Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
)}
|
||||
|
||||
<Tabs
|
||||
defaultActiveKey="tasks"
|
||||
className="dark:bg-gray-800"
|
||||
tabBarStyle={{
|
||||
borderBottom: `1px solid ${themeWiseColor('#f0f0f0', '#4b5563', themeMode)}`
|
||||
}}
|
||||
>
|
||||
<TabPane tab={`Tasks (${phase.taskCount})`} key="tasks">
|
||||
<List
|
||||
dataSource={phase.tasks}
|
||||
renderItem={(task: PhaseTask) => (
|
||||
<List.Item>
|
||||
<List.Item.Meta
|
||||
avatar={getTaskStatusIcon(task.status)}
|
||||
title={
|
||||
<div className="flex justify-between items-center">
|
||||
<Text strong>{task.name}</Text>
|
||||
<Space>
|
||||
<Tag color={getPriorityColor(task.priority)}>
|
||||
{task.priority}
|
||||
</Tag>
|
||||
<Progress
|
||||
percent={task.progress}
|
||||
size="small"
|
||||
style={{ width: 100 }}
|
||||
/>
|
||||
</Space>
|
||||
</div>
|
||||
}
|
||||
description={
|
||||
<div>
|
||||
<Text type="secondary">{task.description}</Text>
|
||||
<div className="mt-2 flex justify-between items-center">
|
||||
<Space>
|
||||
<CalendarOutlined />
|
||||
<Text type="secondary">
|
||||
{task.startDate.toLocaleDateString()} - {task.endDate.toLocaleDateString()}
|
||||
</Text>
|
||||
</Space>
|
||||
{task.assigneeName && (
|
||||
<Space>
|
||||
<TeamOutlined />
|
||||
<Text type="secondary">{task.assigneeName}</Text>
|
||||
</Space>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
</TabPane>
|
||||
|
||||
<TabPane tab={`Milestones (${phase.milestoneCount})`} key="milestones">
|
||||
<Timeline>
|
||||
{phase.milestones.map((milestone: PhaseMilestone) => (
|
||||
<Timeline.Item
|
||||
key={milestone.id}
|
||||
color={milestone.isCompleted ? 'green' : milestone.criticalPath ? 'red' : 'blue'}
|
||||
dot={milestone.isCompleted ? <CheckCircleOutlined /> : <FlagOutlined />}
|
||||
>
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<Text strong>{milestone.name}</Text>
|
||||
{milestone.criticalPath && (
|
||||
<Tag color="red" className="ml-2">Critical Path</Tag>
|
||||
)}
|
||||
{milestone.description && (
|
||||
<div className="mt-1">
|
||||
<Text type="secondary">{milestone.description}</Text>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div>
|
||||
<CalendarOutlined />
|
||||
<span className="ml-1">{milestone.dueDate.toLocaleDateString()}</span>
|
||||
</div>
|
||||
<Badge
|
||||
status={milestone.isCompleted ? 'success' : 'processing'}
|
||||
text={milestone.isCompleted ? 'Completed' : 'Pending'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Timeline.Item>
|
||||
))}
|
||||
</Timeline>
|
||||
</TabPane>
|
||||
|
||||
<TabPane tab={`Team (${phase.teamMembers.length})`} key="team">
|
||||
<List
|
||||
dataSource={phase.teamMembers}
|
||||
renderItem={(member: string) => (
|
||||
<List.Item>
|
||||
<List.Item.Meta
|
||||
avatar={<Avatar>{member.charAt(0).toUpperCase()}</Avatar>}
|
||||
title={member}
|
||||
description={
|
||||
<Text type="secondary">
|
||||
{phase.tasks.filter(task => task.assigneeName === member).length} tasks assigned
|
||||
</Text>
|
||||
}
|
||||
/>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default PhaseModal;
|
||||
@@ -0,0 +1,333 @@
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { Gantt, Task, ViewMode } from 'gantt-task-react';
|
||||
import { Button, Space, Badge } from 'antd';
|
||||
import { CalendarOutlined, TeamOutlined, CheckCircleOutlined } from '@ant-design/icons';
|
||||
import { ProjectPhase, ProjectRoadmap, GanttViewOptions, PhaseModalData } from '../../types/project-roadmap.types';
|
||||
import PhaseModal from './PhaseModal';
|
||||
import { useAppSelector } from '../../hooks/useAppSelector';
|
||||
import { themeWiseColor } from '../../utils/themeWiseColor';
|
||||
import 'gantt-task-react/dist/index.css';
|
||||
import './gantt-theme.css';
|
||||
|
||||
interface ProjectRoadmapGanttProps {
|
||||
roadmap: ProjectRoadmap;
|
||||
viewOptions?: Partial<GanttViewOptions>;
|
||||
onPhaseUpdate?: (phaseId: string, updates: Partial<ProjectPhase>) => void;
|
||||
onTaskUpdate?: (phaseId: string, taskId: string, updates: any) => void;
|
||||
}
|
||||
|
||||
const ProjectRoadmapGantt: React.FC<ProjectRoadmapGanttProps> = ({
|
||||
roadmap,
|
||||
viewOptions = {},
|
||||
onPhaseUpdate,
|
||||
onTaskUpdate,
|
||||
}) => {
|
||||
const [selectedPhase, setSelectedPhase] = useState<PhaseModalData | null>(null);
|
||||
const [isModalVisible, setIsModalVisible] = useState(false);
|
||||
const [viewMode, setViewMode] = useState<ViewMode>(ViewMode.Month);
|
||||
|
||||
// Theme support
|
||||
const themeMode = useAppSelector(state => state.themeReducer.mode);
|
||||
const isDarkMode = themeMode === 'dark';
|
||||
|
||||
const defaultViewOptions: GanttViewOptions = {
|
||||
viewMode: 'month',
|
||||
showTasks: true,
|
||||
showMilestones: true,
|
||||
groupByPhase: true,
|
||||
...viewOptions,
|
||||
};
|
||||
|
||||
// Theme-aware colors
|
||||
const ganttColors = useMemo(() => {
|
||||
return {
|
||||
background: themeWiseColor('#ffffff', '#1f2937', themeMode),
|
||||
surface: themeWiseColor('#f8f9fa', '#374151', themeMode),
|
||||
border: themeWiseColor('#e5e7eb', '#4b5563', themeMode),
|
||||
taskBar: themeWiseColor('#3b82f6', '#60a5fa', themeMode),
|
||||
taskBarHover: themeWiseColor('#2563eb', '#93c5fd', themeMode),
|
||||
progressBar: themeWiseColor('#10b981', '#34d399', themeMode),
|
||||
milestone: themeWiseColor('#f59e0b', '#fbbf24', themeMode),
|
||||
criticalPath: themeWiseColor('#ef4444', '#f87171', themeMode),
|
||||
text: {
|
||||
primary: themeWiseColor('#111827', '#f9fafb', themeMode),
|
||||
secondary: themeWiseColor('#6b7280', '#d1d5db', themeMode),
|
||||
},
|
||||
grid: themeWiseColor('#f3f4f6', '#4b5563', themeMode),
|
||||
today: themeWiseColor('rgba(59, 130, 246, 0.1)', 'rgba(96, 165, 250, 0.2)', themeMode),
|
||||
};
|
||||
}, [themeMode]);
|
||||
|
||||
// Convert phases to Gantt tasks
|
||||
const ganttTasks = useMemo(() => {
|
||||
const tasks: Task[] = [];
|
||||
|
||||
roadmap.phases.forEach((phase, phaseIndex) => {
|
||||
// Add phase as main task with theme-aware colors
|
||||
const phaseTask: Task = {
|
||||
id: phase.id,
|
||||
name: phase.name,
|
||||
start: phase.startDate,
|
||||
end: phase.endDate,
|
||||
progress: phase.progress,
|
||||
type: 'project',
|
||||
styles: {
|
||||
progressColor: themeWiseColor(phase.color, phase.color, themeMode),
|
||||
progressSelectedColor: themeWiseColor(phase.color, phase.color, themeMode),
|
||||
backgroundColor: themeWiseColor(`${phase.color}20`, `${phase.color}30`, themeMode),
|
||||
},
|
||||
};
|
||||
tasks.push(phaseTask);
|
||||
|
||||
// Add phase tasks if enabled
|
||||
if (defaultViewOptions.showTasks) {
|
||||
phase.tasks.forEach((task) => {
|
||||
const ganttTask: Task = {
|
||||
id: task.id,
|
||||
name: task.name,
|
||||
start: task.startDate,
|
||||
end: task.endDate,
|
||||
progress: task.progress,
|
||||
type: 'task',
|
||||
project: phase.id,
|
||||
dependencies: task.dependencies,
|
||||
styles: {
|
||||
progressColor: ganttColors.taskBar,
|
||||
progressSelectedColor: ganttColors.taskBarHover,
|
||||
backgroundColor: themeWiseColor('rgba(59, 130, 246, 0.1)', 'rgba(96, 165, 250, 0.2)', themeMode),
|
||||
},
|
||||
};
|
||||
tasks.push(ganttTask);
|
||||
});
|
||||
}
|
||||
|
||||
// Add milestones if enabled
|
||||
if (defaultViewOptions.showMilestones) {
|
||||
phase.milestones.forEach((milestone) => {
|
||||
const milestoneTask: Task = {
|
||||
id: milestone.id,
|
||||
name: milestone.name,
|
||||
start: milestone.dueDate,
|
||||
end: milestone.dueDate,
|
||||
progress: milestone.isCompleted ? 100 : 0,
|
||||
type: 'milestone',
|
||||
project: phase.id,
|
||||
styles: {
|
||||
progressColor: milestone.criticalPath ? ganttColors.criticalPath : ganttColors.progressBar,
|
||||
progressSelectedColor: milestone.criticalPath ? ganttColors.criticalPath : ganttColors.progressBar,
|
||||
backgroundColor: milestone.criticalPath ?
|
||||
themeWiseColor('rgba(239, 68, 68, 0.1)', 'rgba(248, 113, 113, 0.2)', themeMode) :
|
||||
themeWiseColor('rgba(16, 185, 129, 0.1)', 'rgba(52, 211, 153, 0.2)', themeMode),
|
||||
},
|
||||
};
|
||||
tasks.push(milestoneTask);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return tasks;
|
||||
}, [roadmap.phases, defaultViewOptions, ganttColors, themeMode]);
|
||||
|
||||
const handlePhaseClick = (phase: ProjectPhase) => {
|
||||
const taskCount = phase.tasks.length;
|
||||
const completedTaskCount = phase.tasks.filter(task => task.status === 'done').length;
|
||||
const milestoneCount = phase.milestones.length;
|
||||
const completedMilestoneCount = phase.milestones.filter(m => m.isCompleted).length;
|
||||
const teamMembers = [...new Set(phase.tasks.map(task => task.assigneeName).filter(Boolean))];
|
||||
|
||||
const phaseModalData: PhaseModalData = {
|
||||
...phase,
|
||||
taskCount,
|
||||
completedTaskCount,
|
||||
milestoneCount,
|
||||
completedMilestoneCount,
|
||||
teamMembers,
|
||||
};
|
||||
|
||||
setSelectedPhase(phaseModalData);
|
||||
setIsModalVisible(true);
|
||||
};
|
||||
|
||||
const handleTaskClick = (task: Task) => {
|
||||
// Find the phase this task belongs to
|
||||
const phase = roadmap.phases.find(p =>
|
||||
p.tasks.some(t => t.id === task.id) || p.milestones.some(m => m.id === task.id)
|
||||
);
|
||||
|
||||
if (phase) {
|
||||
handlePhaseClick(phase);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDateChange = (task: Task) => {
|
||||
const phase = roadmap.phases.find(p => p.id === task.id);
|
||||
if (phase && onPhaseUpdate) {
|
||||
onPhaseUpdate(phase.id, {
|
||||
startDate: task.start,
|
||||
endDate: task.end,
|
||||
});
|
||||
} else if (onTaskUpdate) {
|
||||
const parentPhase = roadmap.phases.find(p =>
|
||||
p.tasks.some(t => t.id === task.id)
|
||||
);
|
||||
if (parentPhase) {
|
||||
onTaskUpdate(parentPhase.id, task.id, {
|
||||
startDate: task.start,
|
||||
endDate: task.end,
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleProgressChange = (task: Task) => {
|
||||
const phase = roadmap.phases.find(p => p.id === task.id);
|
||||
if (phase && onPhaseUpdate) {
|
||||
onPhaseUpdate(phase.id, { progress: task.progress });
|
||||
} else if (onTaskUpdate) {
|
||||
const parentPhase = roadmap.phases.find(p =>
|
||||
p.tasks.some(t => t.id === task.id)
|
||||
);
|
||||
if (parentPhase) {
|
||||
onTaskUpdate(parentPhase.id, task.id, { progress: task.progress });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'completed': return '#52c41a';
|
||||
case 'in-progress': return '#1890ff';
|
||||
case 'on-hold': return '#faad14';
|
||||
default: return '#d9d9d9';
|
||||
}
|
||||
};
|
||||
|
||||
const columnWidth = viewMode === ViewMode.Year ? 350 :
|
||||
viewMode === ViewMode.Month ? 300 :
|
||||
viewMode === ViewMode.Week ? 250 : 60;
|
||||
|
||||
return (
|
||||
<div className="project-roadmap-gantt w-full">
|
||||
{/* Header */}
|
||||
<div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm mb-4">
|
||||
<div className="p-6">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
|
||||
{roadmap.name}
|
||||
</h3>
|
||||
{roadmap.description && (
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-0">
|
||||
{roadmap.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<Space>
|
||||
<Button
|
||||
type={viewMode === ViewMode.Week ? 'primary' : 'default'}
|
||||
onClick={() => setViewMode(ViewMode.Week)}
|
||||
className="dark:border-gray-600 dark:text-gray-300"
|
||||
>
|
||||
Week
|
||||
</Button>
|
||||
<Button
|
||||
type={viewMode === ViewMode.Month ? 'primary' : 'default'}
|
||||
onClick={() => setViewMode(ViewMode.Month)}
|
||||
className="dark:border-gray-600 dark:text-gray-300"
|
||||
>
|
||||
Month
|
||||
</Button>
|
||||
<Button
|
||||
type={viewMode === ViewMode.Year ? 'primary' : 'default'}
|
||||
onClick={() => setViewMode(ViewMode.Year)}
|
||||
className="dark:border-gray-600 dark:text-gray-300"
|
||||
>
|
||||
Year
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
{/* Phase Overview */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
|
||||
{roadmap.phases.map((phase) => (
|
||||
<div
|
||||
key={phase.id}
|
||||
className="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4 cursor-pointer hover:shadow-md hover:bg-gray-100 dark:hover:bg-gray-600 transition-all duration-200"
|
||||
onClick={() => handlePhaseClick(phase)}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<Badge
|
||||
color={getStatusColor(phase.status)}
|
||||
text={
|
||||
<span className="font-medium text-gray-900 dark:text-gray-100">
|
||||
{phase.name}
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
|
||||
<CalendarOutlined className="w-4 h-4" />
|
||||
<span>{phase.startDate.toLocaleDateString()} - {phase.endDate.toLocaleDateString()}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
|
||||
<TeamOutlined className="w-4 h-4" />
|
||||
<span>{phase.tasks.length} tasks</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
|
||||
<CheckCircleOutlined className="w-4 h-4" />
|
||||
<span>{phase.progress}% complete</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Gantt Chart */}
|
||||
<div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm">
|
||||
<div className="p-4">
|
||||
<div className="w-full overflow-x-auto">
|
||||
<div
|
||||
className="gantt-container"
|
||||
style={{
|
||||
'--gantt-background': ganttColors.background,
|
||||
'--gantt-grid': ganttColors.grid,
|
||||
'--gantt-text': ganttColors.text.primary,
|
||||
'--gantt-border': ganttColors.border,
|
||||
} as React.CSSProperties}
|
||||
>
|
||||
<Gantt
|
||||
tasks={ganttTasks}
|
||||
viewMode={viewMode}
|
||||
onDateChange={handleDateChange}
|
||||
onProgressChange={handleProgressChange}
|
||||
onDoubleClick={handleTaskClick}
|
||||
listCellWidth=""
|
||||
columnWidth={columnWidth}
|
||||
todayColor={ganttColors.today}
|
||||
projectProgressColor={ganttColors.progressBar}
|
||||
projectBackgroundColor={themeWiseColor('rgba(82, 196, 26, 0.1)', 'rgba(52, 211, 153, 0.2)', themeMode)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Phase Modal */}
|
||||
<PhaseModal
|
||||
visible={isModalVisible}
|
||||
phase={selectedPhase}
|
||||
onClose={() => setIsModalVisible(false)}
|
||||
onUpdate={(updates) => {
|
||||
if (selectedPhase && onPhaseUpdate) {
|
||||
onPhaseUpdate(selectedPhase.id, updates);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectRoadmapGantt;
|
||||
@@ -0,0 +1,112 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Button, Space, message } from 'antd';
|
||||
import ProjectRoadmapGantt from './ProjectRoadmapGantt';
|
||||
import { sampleProjectRoadmap } from './sample-data';
|
||||
import { ProjectPhase, ProjectRoadmap } from '../../types/project-roadmap.types';
|
||||
import { useAppSelector } from '../../hooks/useAppSelector';
|
||||
|
||||
const RoadmapDemo: React.FC = () => {
|
||||
const [roadmap, setRoadmap] = useState<ProjectRoadmap>(sampleProjectRoadmap);
|
||||
const themeMode = useAppSelector(state => state.themeReducer.mode);
|
||||
|
||||
const handlePhaseUpdate = (phaseId: string, updates: Partial<ProjectPhase>) => {
|
||||
setRoadmap(prevRoadmap => ({
|
||||
...prevRoadmap,
|
||||
phases: prevRoadmap.phases.map(phase =>
|
||||
phase.id === phaseId
|
||||
? { ...phase, ...updates }
|
||||
: phase
|
||||
)
|
||||
}));
|
||||
|
||||
message.success('Phase updated successfully!');
|
||||
};
|
||||
|
||||
const handleTaskUpdate = (phaseId: string, taskId: string, updates: any) => {
|
||||
setRoadmap(prevRoadmap => ({
|
||||
...prevRoadmap,
|
||||
phases: prevRoadmap.phases.map(phase =>
|
||||
phase.id === phaseId
|
||||
? {
|
||||
...phase,
|
||||
tasks: phase.tasks.map(task =>
|
||||
task.id === taskId
|
||||
? { ...task, ...updates }
|
||||
: task
|
||||
)
|
||||
}
|
||||
: phase
|
||||
)
|
||||
}));
|
||||
|
||||
message.success('Task updated successfully!');
|
||||
};
|
||||
|
||||
const resetToSampleData = () => {
|
||||
setRoadmap(sampleProjectRoadmap);
|
||||
message.info('Roadmap reset to sample data');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="roadmap-demo p-6 bg-gray-50 dark:bg-gray-900 min-h-screen">
|
||||
<div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm mb-4">
|
||||
<div className="p-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">
|
||||
Project Roadmap Gantt Chart Demo
|
||||
</h2>
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-0">
|
||||
Interactive Gantt chart showing project phases as milestones/epics.
|
||||
Click on any phase card or Gantt bar to view detailed information in a modal.
|
||||
</p>
|
||||
</div>
|
||||
<Space>
|
||||
<Button
|
||||
onClick={resetToSampleData}
|
||||
className="dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
|
||||
>
|
||||
Reset to Sample Data
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ProjectRoadmapGantt
|
||||
roadmap={roadmap}
|
||||
viewOptions={{
|
||||
viewMode: 'month',
|
||||
showTasks: true,
|
||||
showMilestones: true,
|
||||
groupByPhase: true,
|
||||
}}
|
||||
onPhaseUpdate={handlePhaseUpdate}
|
||||
onTaskUpdate={handleTaskUpdate}
|
||||
/>
|
||||
|
||||
<div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm mt-4">
|
||||
<div className="p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">
|
||||
Features Demonstrated:
|
||||
</h3>
|
||||
<ul className="space-y-2 text-gray-700 dark:text-gray-300">
|
||||
<li>• <strong className="text-gray-900 dark:text-gray-100">Phase-based Grouping:</strong> Projects organized by phases (Planning, Development, Testing, Deployment)</li>
|
||||
<li>• <strong className="text-gray-900 dark:text-gray-100">Interactive Phase Cards:</strong> Click on phase cards for detailed view</li>
|
||||
<li>• <strong className="text-gray-900 dark:text-gray-100">Gantt Chart Visualization:</strong> Timeline view with tasks, milestones, and dependencies</li>
|
||||
<li>• <strong className="text-gray-900 dark:text-gray-100">Modal Details:</strong> Comprehensive phase information with tasks, milestones, and team members</li>
|
||||
<li>• <strong className="text-gray-900 dark:text-gray-100">Progress Tracking:</strong> Visual progress indicators and completion statistics</li>
|
||||
<li>• <strong className="text-gray-900 dark:text-gray-100">Multiple View Modes:</strong> Week, Month, and Year timeline views</li>
|
||||
<li>• <strong className="text-gray-900 dark:text-gray-100">Task Management:</strong> Task assignments, priorities, and status tracking</li>
|
||||
<li>• <strong className="text-gray-900 dark:text-gray-100">Milestone Tracking:</strong> Critical path milestones and completion status</li>
|
||||
<li>• <strong className="text-gray-900 dark:text-gray-100">Team Overview:</strong> Team member assignments and workload distribution</li>
|
||||
<li>• <strong className="text-gray-900 dark:text-gray-100">Editable Fields:</strong> In-modal editing for phase attributes (name, description, dates, status)</li>
|
||||
<li>• <strong className="text-gray-900 dark:text-gray-100">Theme Support:</strong> Automatic light/dark theme adaptation with consistent styling</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RoadmapDemo;
|
||||
@@ -0,0 +1,221 @@
|
||||
/* Custom Gantt Chart Theme Overrides */
|
||||
|
||||
/* Light theme styles */
|
||||
.gantt-container {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.gantt-container .gantt-header {
|
||||
background-color: var(--gantt-background, #ffffff);
|
||||
border-bottom: 1px solid var(--gantt-border, #e5e7eb);
|
||||
color: var(--gantt-text, #111827);
|
||||
}
|
||||
|
||||
.gantt-container .gantt-task-list-wrapper {
|
||||
background-color: var(--gantt-background, #ffffff);
|
||||
border-right: 1px solid var(--gantt-border, #e5e7eb);
|
||||
}
|
||||
|
||||
.gantt-container .gantt-task-list-table {
|
||||
background-color: var(--gantt-background, #ffffff);
|
||||
}
|
||||
|
||||
.gantt-container .gantt-task-list-table-row {
|
||||
color: var(--gantt-text, #111827);
|
||||
border-bottom: 1px solid var(--gantt-grid, #f3f4f6);
|
||||
}
|
||||
|
||||
.gantt-container .gantt-task-list-table-row:hover {
|
||||
background-color: var(--gantt-grid, #f3f4f6);
|
||||
}
|
||||
|
||||
.gantt-container .gantt-gantt {
|
||||
background-color: var(--gantt-background, #ffffff);
|
||||
}
|
||||
|
||||
.gantt-container .gantt-vertical-container {
|
||||
background-color: var(--gantt-background, #ffffff);
|
||||
}
|
||||
|
||||
.gantt-container .gantt-horizontal-container {
|
||||
background-color: var(--gantt-background, #ffffff);
|
||||
}
|
||||
|
||||
.gantt-container .gantt-calendar {
|
||||
background-color: var(--gantt-background, #ffffff);
|
||||
border-bottom: 1px solid var(--gantt-border, #e5e7eb);
|
||||
}
|
||||
|
||||
.gantt-container .gantt-calendar-row {
|
||||
color: var(--gantt-text, #111827);
|
||||
background-color: var(--gantt-background, #ffffff);
|
||||
border-bottom: 1px solid var(--gantt-grid, #f3f4f6);
|
||||
}
|
||||
|
||||
.gantt-container .gantt-grid-body {
|
||||
background-color: var(--gantt-background, #ffffff);
|
||||
}
|
||||
|
||||
.gantt-container .gantt-grid-row {
|
||||
border-bottom: 1px solid var(--gantt-grid, #f3f4f6);
|
||||
}
|
||||
|
||||
.gantt-container .gantt-grid-row-line {
|
||||
border-left: 1px solid var(--gantt-grid, #f3f4f6);
|
||||
}
|
||||
|
||||
/* Dark theme overrides */
|
||||
html.dark .gantt-container .gantt-header {
|
||||
background-color: #1f2937;
|
||||
border-bottom-color: #4b5563;
|
||||
color: #f9fafb;
|
||||
}
|
||||
|
||||
html.dark .gantt-container .gantt-task-list-wrapper {
|
||||
background-color: #1f2937;
|
||||
border-right-color: #4b5563;
|
||||
}
|
||||
|
||||
html.dark .gantt-container .gantt-task-list-table {
|
||||
background-color: #1f2937;
|
||||
}
|
||||
|
||||
html.dark .gantt-container .gantt-task-list-table-row {
|
||||
color: #f9fafb;
|
||||
border-bottom-color: #4b5563;
|
||||
}
|
||||
|
||||
html.dark .gantt-container .gantt-task-list-table-row:hover {
|
||||
background-color: #374151;
|
||||
}
|
||||
|
||||
html.dark .gantt-container .gantt-gantt {
|
||||
background-color: #1f2937;
|
||||
}
|
||||
|
||||
html.dark .gantt-container .gantt-vertical-container {
|
||||
background-color: #1f2937;
|
||||
}
|
||||
|
||||
html.dark .gantt-container .gantt-horizontal-container {
|
||||
background-color: #1f2937;
|
||||
}
|
||||
|
||||
html.dark .gantt-container .gantt-calendar {
|
||||
background-color: #1f2937;
|
||||
border-bottom-color: #4b5563;
|
||||
}
|
||||
|
||||
html.dark .gantt-container .gantt-calendar-row {
|
||||
color: #f9fafb;
|
||||
background-color: #1f2937;
|
||||
border-bottom-color: #4b5563;
|
||||
}
|
||||
|
||||
html.dark .gantt-container .gantt-grid-body {
|
||||
background-color: #1f2937;
|
||||
}
|
||||
|
||||
html.dark .gantt-container .gantt-grid-row {
|
||||
border-bottom-color: #4b5563;
|
||||
}
|
||||
|
||||
html.dark .gantt-container .gantt-grid-row-line {
|
||||
border-left-color: #4b5563;
|
||||
}
|
||||
|
||||
/* Tooltip theming */
|
||||
.gantt-container .gantt-tooltip {
|
||||
background-color: var(--gantt-background, #ffffff);
|
||||
border: 1px solid var(--gantt-border, #e5e7eb);
|
||||
color: var(--gantt-text, #111827);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
html.dark .gantt-container .gantt-tooltip {
|
||||
background-color: #374151;
|
||||
border-color: #4b5563;
|
||||
color: #f9fafb;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Task bar styling improvements */
|
||||
.gantt-container .gantt-task-progress {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.gantt-container .gantt-task-background {
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--gantt-border, #e5e7eb);
|
||||
}
|
||||
|
||||
html.dark .gantt-container .gantt-task-background {
|
||||
border-color: #4b5563;
|
||||
}
|
||||
|
||||
/* Milestone styling */
|
||||
.gantt-container .gantt-milestone {
|
||||
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
|
||||
}
|
||||
|
||||
html.dark .gantt-container .gantt-milestone {
|
||||
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
|
||||
}
|
||||
|
||||
/* Selection and hover states */
|
||||
.gantt-container .gantt-task:hover .gantt-task-background {
|
||||
opacity: 0.9;
|
||||
transform: translateY(-1px);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.gantt-container .gantt-task-selected .gantt-task-background {
|
||||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
html.dark .gantt-container .gantt-task-selected .gantt-task-background {
|
||||
box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3);
|
||||
}
|
||||
|
||||
/* Responsive improvements */
|
||||
@media (max-width: 768px) {
|
||||
.gantt-container {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.gantt-container .gantt-task-list-wrapper {
|
||||
min-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Scrollbar theming */
|
||||
.gantt-container ::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.gantt-container ::-webkit-scrollbar-track {
|
||||
background: var(--gantt-grid, #f3f4f6);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.gantt-container ::-webkit-scrollbar-thumb {
|
||||
background: var(--gantt-border, #e5e7eb);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.gantt-container ::-webkit-scrollbar-thumb:hover {
|
||||
background: #9ca3af;
|
||||
}
|
||||
|
||||
html.dark .gantt-container ::-webkit-scrollbar-track {
|
||||
background: #4b5563;
|
||||
}
|
||||
|
||||
html.dark .gantt-container ::-webkit-scrollbar-thumb {
|
||||
background: #6b7280;
|
||||
}
|
||||
|
||||
html.dark .gantt-container ::-webkit-scrollbar-thumb:hover {
|
||||
background: #9ca3af;
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
export { default as ProjectRoadmapGantt } from './ProjectRoadmapGantt';
|
||||
export { default as PhaseModal } from './PhaseModal';
|
||||
export { default as RoadmapDemo } from './RoadmapDemo';
|
||||
export { sampleProjectRoadmap } from './sample-data';
|
||||
export * from '../../types/project-roadmap.types';
|
||||
@@ -0,0 +1,317 @@
|
||||
import { ProjectRoadmap, ProjectPhase, PhaseTask, PhaseMilestone } from '../../types/project-roadmap.types';
|
||||
|
||||
// Sample tasks for Planning Phase
|
||||
const planningTasks: PhaseTask[] = [
|
||||
{
|
||||
id: 'task-planning-1',
|
||||
name: 'Project Requirements Analysis',
|
||||
description: 'Gather and analyze project requirements from stakeholders',
|
||||
startDate: new Date(2024, 11, 1), // December 1, 2024
|
||||
endDate: new Date(2024, 11, 5),
|
||||
progress: 100,
|
||||
assigneeId: 'user-1',
|
||||
assigneeName: 'Alice Johnson',
|
||||
priority: 'high',
|
||||
status: 'done',
|
||||
},
|
||||
{
|
||||
id: 'task-planning-2',
|
||||
name: 'Technical Architecture Design',
|
||||
description: 'Design the technical architecture and system components',
|
||||
startDate: new Date(2024, 11, 6),
|
||||
endDate: new Date(2024, 11, 12),
|
||||
progress: 75,
|
||||
assigneeId: 'user-2',
|
||||
assigneeName: 'Bob Smith',
|
||||
priority: 'high',
|
||||
status: 'in-progress',
|
||||
},
|
||||
{
|
||||
id: 'task-planning-3',
|
||||
name: 'Resource Allocation Planning',
|
||||
description: 'Plan and allocate team resources for the project',
|
||||
startDate: new Date(2024, 11, 8),
|
||||
endDate: new Date(2024, 11, 15),
|
||||
progress: 50,
|
||||
assigneeId: 'user-3',
|
||||
assigneeName: 'Carol Davis',
|
||||
priority: 'medium',
|
||||
status: 'in-progress',
|
||||
dependencies: ['task-planning-1'],
|
||||
}
|
||||
];
|
||||
|
||||
// Sample milestones for Planning Phase
|
||||
const planningMilestones: PhaseMilestone[] = [
|
||||
{
|
||||
id: 'milestone-planning-1',
|
||||
name: 'Requirements Approved',
|
||||
description: 'All project requirements have been reviewed and approved by stakeholders',
|
||||
dueDate: new Date(2024, 11, 5),
|
||||
isCompleted: true,
|
||||
criticalPath: true,
|
||||
},
|
||||
{
|
||||
id: 'milestone-planning-2',
|
||||
name: 'Architecture Review Complete',
|
||||
description: 'Technical architecture has been reviewed and approved',
|
||||
dueDate: new Date(2024, 11, 15),
|
||||
isCompleted: false,
|
||||
criticalPath: true,
|
||||
}
|
||||
];
|
||||
|
||||
// Sample tasks for Development Phase
|
||||
const developmentTasks: PhaseTask[] = [
|
||||
{
|
||||
id: 'task-dev-1',
|
||||
name: 'Frontend Component Development',
|
||||
description: 'Develop core frontend components using React',
|
||||
startDate: new Date(2024, 11, 16),
|
||||
endDate: new Date(2025, 0, 31), // January 31, 2025
|
||||
progress: 30,
|
||||
assigneeId: 'user-4',
|
||||
assigneeName: 'David Wilson',
|
||||
priority: 'high',
|
||||
status: 'in-progress',
|
||||
dependencies: ['task-planning-2'],
|
||||
},
|
||||
{
|
||||
id: 'task-dev-2',
|
||||
name: 'Backend API Development',
|
||||
description: 'Develop REST APIs and database models',
|
||||
startDate: new Date(2024, 11, 16),
|
||||
endDate: new Date(2025, 0, 25),
|
||||
progress: 45,
|
||||
assigneeId: 'user-5',
|
||||
assigneeName: 'Eva Brown',
|
||||
priority: 'high',
|
||||
status: 'in-progress',
|
||||
dependencies: ['task-planning-2'],
|
||||
},
|
||||
{
|
||||
id: 'task-dev-3',
|
||||
name: 'Database Setup and Migration',
|
||||
description: 'Set up production database and create migration scripts',
|
||||
startDate: new Date(2024, 11, 20),
|
||||
endDate: new Date(2025, 0, 15),
|
||||
progress: 80,
|
||||
assigneeId: 'user-6',
|
||||
assigneeName: 'Frank Miller',
|
||||
priority: 'medium',
|
||||
status: 'in-progress',
|
||||
}
|
||||
];
|
||||
|
||||
// Sample milestones for Development Phase
|
||||
const developmentMilestones: PhaseMilestone[] = [
|
||||
{
|
||||
id: 'milestone-dev-1',
|
||||
name: 'Core Components Complete',
|
||||
description: 'All core frontend components have been developed and tested',
|
||||
dueDate: new Date(2025, 0, 20),
|
||||
isCompleted: false,
|
||||
criticalPath: false,
|
||||
},
|
||||
{
|
||||
id: 'milestone-dev-2',
|
||||
name: 'API Development Complete',
|
||||
description: 'All backend APIs are developed and documented',
|
||||
dueDate: new Date(2025, 0, 25),
|
||||
isCompleted: false,
|
||||
criticalPath: true,
|
||||
}
|
||||
];
|
||||
|
||||
// Sample tasks for Testing Phase
|
||||
const testingTasks: PhaseTask[] = [
|
||||
{
|
||||
id: 'task-test-1',
|
||||
name: 'Unit Testing Implementation',
|
||||
description: 'Write and execute comprehensive unit tests',
|
||||
startDate: new Date(2025, 1, 1), // February 1, 2025
|
||||
endDate: new Date(2025, 1, 15),
|
||||
progress: 0,
|
||||
assigneeId: 'user-7',
|
||||
assigneeName: 'Grace Lee',
|
||||
priority: 'high',
|
||||
status: 'todo',
|
||||
dependencies: ['task-dev-1', 'task-dev-2'],
|
||||
},
|
||||
{
|
||||
id: 'task-test-2',
|
||||
name: 'Integration Testing',
|
||||
description: 'Perform integration testing between frontend and backend',
|
||||
startDate: new Date(2025, 1, 10),
|
||||
endDate: new Date(2025, 1, 25),
|
||||
progress: 0,
|
||||
assigneeId: 'user-8',
|
||||
assigneeName: 'Henry Clark',
|
||||
priority: 'high',
|
||||
status: 'todo',
|
||||
dependencies: ['task-test-1'],
|
||||
},
|
||||
{
|
||||
id: 'task-test-3',
|
||||
name: 'User Acceptance Testing',
|
||||
description: 'Conduct user acceptance testing with stakeholders',
|
||||
startDate: new Date(2025, 1, 20),
|
||||
endDate: new Date(2025, 2, 5), // March 5, 2025
|
||||
progress: 0,
|
||||
assigneeId: 'user-9',
|
||||
assigneeName: 'Ivy Taylor',
|
||||
priority: 'medium',
|
||||
status: 'todo',
|
||||
dependencies: ['task-test-2'],
|
||||
}
|
||||
];
|
||||
|
||||
// Sample milestones for Testing Phase
|
||||
const testingMilestones: PhaseMilestone[] = [
|
||||
{
|
||||
id: 'milestone-test-1',
|
||||
name: 'All Tests Passing',
|
||||
description: 'All unit and integration tests are passing',
|
||||
dueDate: new Date(2025, 1, 25),
|
||||
isCompleted: false,
|
||||
criticalPath: true,
|
||||
},
|
||||
{
|
||||
id: 'milestone-test-2',
|
||||
name: 'UAT Sign-off',
|
||||
description: 'User acceptance testing completed and signed off',
|
||||
dueDate: new Date(2025, 2, 5),
|
||||
isCompleted: false,
|
||||
criticalPath: true,
|
||||
}
|
||||
];
|
||||
|
||||
// Sample tasks for Deployment Phase
|
||||
const deploymentTasks: PhaseTask[] = [
|
||||
{
|
||||
id: 'task-deploy-1',
|
||||
name: 'Production Environment Setup',
|
||||
description: 'Configure and set up production environment',
|
||||
startDate: new Date(2025, 2, 6), // March 6, 2025
|
||||
endDate: new Date(2025, 2, 12),
|
||||
progress: 0,
|
||||
assigneeId: 'user-10',
|
||||
assigneeName: 'Jack Anderson',
|
||||
priority: 'high',
|
||||
status: 'todo',
|
||||
dependencies: ['task-test-3'],
|
||||
},
|
||||
{
|
||||
id: 'task-deploy-2',
|
||||
name: 'Application Deployment',
|
||||
description: 'Deploy application to production environment',
|
||||
startDate: new Date(2025, 2, 13),
|
||||
endDate: new Date(2025, 2, 15),
|
||||
progress: 0,
|
||||
assigneeId: 'user-11',
|
||||
assigneeName: 'Kelly White',
|
||||
priority: 'high',
|
||||
status: 'todo',
|
||||
dependencies: ['task-deploy-1'],
|
||||
},
|
||||
{
|
||||
id: 'task-deploy-3',
|
||||
name: 'Post-Deployment Monitoring',
|
||||
description: 'Monitor application performance post-deployment',
|
||||
startDate: new Date(2025, 2, 16),
|
||||
endDate: new Date(2025, 2, 20),
|
||||
progress: 0,
|
||||
assigneeId: 'user-12',
|
||||
assigneeName: 'Liam Garcia',
|
||||
priority: 'medium',
|
||||
status: 'todo',
|
||||
dependencies: ['task-deploy-2'],
|
||||
}
|
||||
];
|
||||
|
||||
// Sample milestones for Deployment Phase
|
||||
const deploymentMilestones: PhaseMilestone[] = [
|
||||
{
|
||||
id: 'milestone-deploy-1',
|
||||
name: 'Production Go-Live',
|
||||
description: 'Application is live in production environment',
|
||||
dueDate: new Date(2025, 2, 15),
|
||||
isCompleted: false,
|
||||
criticalPath: true,
|
||||
},
|
||||
{
|
||||
id: 'milestone-deploy-2',
|
||||
name: 'Project Handover',
|
||||
description: 'Project handed over to maintenance team',
|
||||
dueDate: new Date(2025, 2, 20),
|
||||
isCompleted: false,
|
||||
criticalPath: false,
|
||||
}
|
||||
];
|
||||
|
||||
// Sample project phases
|
||||
const samplePhases: ProjectPhase[] = [
|
||||
{
|
||||
id: 'phase-planning',
|
||||
name: 'Planning & Analysis',
|
||||
description: 'Initial project planning, requirements gathering, and technical analysis',
|
||||
startDate: new Date(2024, 11, 1),
|
||||
endDate: new Date(2024, 11, 15),
|
||||
progress: 75,
|
||||
color: '#1890ff',
|
||||
status: 'in-progress',
|
||||
tasks: planningTasks,
|
||||
milestones: planningMilestones,
|
||||
},
|
||||
{
|
||||
id: 'phase-development',
|
||||
name: 'Development',
|
||||
description: 'Core development of frontend, backend, and database components',
|
||||
startDate: new Date(2024, 11, 16),
|
||||
endDate: new Date(2025, 0, 31),
|
||||
progress: 40,
|
||||
color: '#52c41a',
|
||||
status: 'in-progress',
|
||||
tasks: developmentTasks,
|
||||
milestones: developmentMilestones,
|
||||
},
|
||||
{
|
||||
id: 'phase-testing',
|
||||
name: 'Testing & QA',
|
||||
description: 'Comprehensive testing including unit, integration, and user acceptance testing',
|
||||
startDate: new Date(2025, 1, 1),
|
||||
endDate: new Date(2025, 2, 5),
|
||||
progress: 0,
|
||||
color: '#faad14',
|
||||
status: 'not-started',
|
||||
tasks: testingTasks,
|
||||
milestones: testingMilestones,
|
||||
},
|
||||
{
|
||||
id: 'phase-deployment',
|
||||
name: 'Deployment & Launch',
|
||||
description: 'Production deployment and project launch activities',
|
||||
startDate: new Date(2025, 2, 6),
|
||||
endDate: new Date(2025, 2, 20),
|
||||
progress: 0,
|
||||
color: '#722ed1',
|
||||
status: 'not-started',
|
||||
tasks: deploymentTasks,
|
||||
milestones: deploymentMilestones,
|
||||
}
|
||||
];
|
||||
|
||||
// Sample project roadmap
|
||||
export const sampleProjectRoadmap: ProjectRoadmap = {
|
||||
id: 'roadmap-sample-project',
|
||||
projectId: 'project-web-platform',
|
||||
name: 'Web Platform Development Roadmap',
|
||||
description: 'Comprehensive roadmap for developing a new web-based platform with modern technologies and agile methodologies',
|
||||
startDate: new Date(2024, 11, 1),
|
||||
endDate: new Date(2025, 2, 20),
|
||||
phases: samplePhases,
|
||||
createdAt: new Date(2024, 10, 15),
|
||||
updatedAt: new Date(2024, 11, 1),
|
||||
};
|
||||
|
||||
export default sampleProjectRoadmap;
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Drawer, Flex, Form, Select, Typography, List, Button } from 'antd/es';
|
||||
import { Drawer, Flex, Form, Select, Typography, List, Button, Modal, Divider } from 'antd/es';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
@@ -21,7 +21,7 @@ import { teamMembersApiService } from '@/api/team-members/teamMembers.api.servic
|
||||
|
||||
const ProjectMemberDrawer = () => {
|
||||
const { t } = useTranslation('project-view/project-member-drawer');
|
||||
const { isDrawerOpen, currentMembersList, isLoading } = useAppSelector(
|
||||
const { isDrawerOpen, currentMembersList, isLoading, isFromAssigner } = useAppSelector(
|
||||
state => state.projectMemberReducer
|
||||
);
|
||||
const { projectId } = useAppSelector(state => state.projectReducer);
|
||||
@@ -33,6 +33,12 @@ const ProjectMemberDrawer = () => {
|
||||
const [members, setMembers] = useState<ITeamMembersViewModel>({ data: [], total: 0 });
|
||||
const [teamMembersLoading, setTeamMembersLoading] = useState(false);
|
||||
|
||||
// Filter out members already in the project
|
||||
const currentProjectMemberIds = (currentMembersList || []).map(m => m.team_member_id).filter(Boolean);
|
||||
const availableMembers = (members?.data || []).filter(
|
||||
member => member.id && !currentProjectMemberIds.includes(member.id)
|
||||
);
|
||||
|
||||
const fetchProjectMembers = async () => {
|
||||
if (!projectId) return;
|
||||
dispatch(getAllProjectMembers(projectId));
|
||||
@@ -175,8 +181,9 @@ const ProjectMemberDrawer = () => {
|
||||
);
|
||||
|
||||
const renderNotFoundContent = () => (
|
||||
<Flex>
|
||||
<Flex style={{ display: 'block'}}>
|
||||
<Button
|
||||
className='mb-2'
|
||||
block
|
||||
type="primary"
|
||||
onClick={sendInviteToProject}
|
||||
@@ -188,60 +195,74 @@ const ProjectMemberDrawer = () => {
|
||||
{validateEmail(searchTerm) ? t('inviteAsAMember') : t('inviteNewMemberByEmail')}
|
||||
</span>
|
||||
</Button>
|
||||
{/* {isFromAssigner && <Flex>
|
||||
<input className='mr-2' type="checkbox" checked={true} name={t('alsoInviteToProject')} id="AlsoInviteToProject" />
|
||||
<label htmlFor={t('alsoInviteToProject')}>{t('alsoInviteToProject')}</label>
|
||||
</Flex>} */}
|
||||
</Flex>
|
||||
);
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
title={
|
||||
<Typography.Text style={{ fontWeight: 500, fontSize: 16 }}>{t('title')}</Typography.Text>
|
||||
}
|
||||
open={isDrawerOpen}
|
||||
onClose={() => dispatch(toggleProjectMemberDrawer())}
|
||||
afterOpenChange={handleOpenChange}
|
||||
>
|
||||
<Form form={form} layout="vertical" onFinish={handleSelectChange}>
|
||||
<Form.Item name="memberName" label={t('searchLabel')}>
|
||||
<Select
|
||||
loading={teamMembersLoading}
|
||||
placeholder={t('searchPlaceholder')}
|
||||
showSearch
|
||||
onSearch={handleSearch}
|
||||
onChange={handleSelectChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
options={members?.data?.map(member => ({
|
||||
key: member.id,
|
||||
value: member.id,
|
||||
name: member.name,
|
||||
label: renderMemberOption(member),
|
||||
}))}
|
||||
filterOption={false}
|
||||
notFoundContent={renderNotFoundContent()}
|
||||
optionLabelProp="name"
|
||||
<Modal
|
||||
title={
|
||||
<Typography.Text style={{ fontWeight: 500, fontSize: 16 }}>{isFromAssigner ? t('inviteMember') : t('title')}</Typography.Text>
|
||||
}
|
||||
open={isDrawerOpen}
|
||||
onCancel={() => dispatch(toggleProjectMemberDrawer())}
|
||||
afterOpenChange={handleOpenChange}
|
||||
footer={
|
||||
<>
|
||||
{/* {!isFromAssigner && <Button
|
||||
style={{ width: 140, fontSize: 12 }}
|
||||
block
|
||||
icon={<LinkOutlined />}
|
||||
disabled
|
||||
>
|
||||
{t('copyProjectLink')}
|
||||
</Button>} */}
|
||||
</>
|
||||
}
|
||||
>
|
||||
<Form form={form} layout="vertical" onFinish={handleSelectChange}>
|
||||
<Form.Item name="memberName" label={t('searchLabel')}>
|
||||
<Select
|
||||
loading={teamMembersLoading}
|
||||
placeholder={t('searchPlaceholder')}
|
||||
showSearch
|
||||
onSearch={handleSearch}
|
||||
onChange={handleSelectChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
options={availableMembers.map(member => ({
|
||||
key: member.id,
|
||||
value: member.id,
|
||||
name: member.name,
|
||||
label: renderMemberOption(member),
|
||||
}))}
|
||||
filterOption={false}
|
||||
notFoundContent={renderNotFoundContent()}
|
||||
optionLabelProp="name"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
{!isFromAssigner && <><div style={{ fontSize: 14, fontWeight: 500, marginBottom: 8 }}>{t('members')}</div>
|
||||
<div style={{ maxHeight: 360, minHeight: 120, overflowY: 'auto', marginBottom: 16 }}>
|
||||
<List
|
||||
loading={isLoading}
|
||||
bordered
|
||||
size="small"
|
||||
itemLayout="horizontal"
|
||||
dataSource={currentMembersList}
|
||||
renderItem={member => (
|
||||
<List.Item key={member.id} >
|
||||
<Flex gap={4} align="center" justify="space-between" style={{ width: '100%' }}>
|
||||
{renderMemberOption(member)}
|
||||
</Flex>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
<List
|
||||
loading={isLoading}
|
||||
bordered
|
||||
size="small"
|
||||
itemLayout="horizontal"
|
||||
dataSource={currentMembersList}
|
||||
renderItem={member => (
|
||||
<List.Item key={member.id}>
|
||||
<Flex gap={4} align="center" justify="space-between" style={{ width: '100%' }}>
|
||||
{renderMemberOption(member)}
|
||||
<Button
|
||||
onClick={() => handleDeleteMember(member.id)}
|
||||
size="small"
|
||||
icon={<DeleteOutlined />}
|
||||
/>
|
||||
</Flex>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
</Drawer>
|
||||
</div></>
|
||||
}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -94,7 +94,7 @@ const UpdateMemberDrawer = ({ selectedMemberId, onRoleUpdate }: UpdateMemberDraw
|
||||
|
||||
try {
|
||||
const body: ITeamMemberCreateRequest = {
|
||||
job_title: selectedJobTitle,
|
||||
job_title: form.getFieldValue('jobTitle'),
|
||||
emails: [teamMember.email],
|
||||
is_admin: values.access === 'admin',
|
||||
};
|
||||
|
||||
269
worklenz-frontend/src/components/survey/SurveyPromptModal.tsx
Normal file
269
worklenz-frontend/src/components/survey/SurveyPromptModal.tsx
Normal file
@@ -0,0 +1,269 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { Modal, Button, Result, Spin, Flex } from '@/shared/antd-imports';
|
||||
import { SurveyStep } from '@/components/account-setup/survey-step';
|
||||
import { useSurveyStatus } from '@/hooks/useSurveyStatus';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useAppSelector } from '@/hooks/useAppSelector';
|
||||
import { useAppDispatch } from '@/hooks/useAppDispatch';
|
||||
import { surveyApiService } from '@/api/survey/survey.api.service';
|
||||
import { appMessage } from '@/shared/antd-imports';
|
||||
import { ISurveySubmissionRequest } from '@/types/account-setup/survey.types';
|
||||
import logger from '@/utils/errorLogger';
|
||||
import { resetSurveyData, setSurveySubStep } from '@/features/account-setup/account-setup.slice';
|
||||
|
||||
interface SurveyPromptModalProps {
|
||||
forceShow?: boolean;
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
export const SurveyPromptModal: React.FC<SurveyPromptModalProps> = ({ forceShow = false, onClose }) => {
|
||||
const { t } = useTranslation('survey');
|
||||
const dispatch = useAppDispatch();
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [surveyCompleted, setSurveyCompleted] = useState(false);
|
||||
const [surveyInfo, setSurveyInfo] = useState<{ id: string; questions: any[] } | null>(null);
|
||||
const { hasCompletedSurvey, loading, refetch } = useSurveyStatus();
|
||||
const themeMode = useAppSelector(state => state.themeReducer.mode);
|
||||
const surveyData = useAppSelector(state => state.accountSetupReducer.surveyData);
|
||||
const surveySubStep = useAppSelector(state => state.accountSetupReducer.surveySubStep);
|
||||
const isDarkMode = themeMode === 'dark';
|
||||
|
||||
useEffect(() => {
|
||||
// Check if survey modal is disabled via environment variable
|
||||
if (import.meta.env.VITE_ENABLE_SURVEY_MODAL !== 'true' && !forceShow) {
|
||||
return; // Don't show modal if disabled in environment
|
||||
}
|
||||
|
||||
// Check if survey was skipped recently (within 7 days)
|
||||
const skippedAt = localStorage.getItem('survey_skipped_at');
|
||||
if (!forceShow && skippedAt) {
|
||||
const skippedDate = new Date(skippedAt);
|
||||
const now = new Date();
|
||||
const diffDays = (now.getTime() - skippedDate.getTime()) / (1000 * 60 * 60 * 24);
|
||||
if (diffDays < 3) {
|
||||
return; // Don't show modal if skipped within 7 days
|
||||
}
|
||||
}
|
||||
|
||||
if (forceShow) {
|
||||
setVisible(true);
|
||||
dispatch(resetSurveyData());
|
||||
dispatch(setSurveySubStep(0));
|
||||
// Fetch survey info
|
||||
const fetchSurvey = async () => {
|
||||
try {
|
||||
const response = await surveyApiService.getAccountSetupSurvey();
|
||||
if (response.done && response.body) {
|
||||
setSurveyInfo({
|
||||
id: response.body.id,
|
||||
questions: response.body.questions || []
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error(t('survey:fetchErrorLog'), error);
|
||||
}
|
||||
};
|
||||
fetchSurvey();
|
||||
} else if (!loading && hasCompletedSurvey === false) {
|
||||
dispatch(resetSurveyData());
|
||||
dispatch(setSurveySubStep(0));
|
||||
// Fetch survey info
|
||||
const fetchSurvey = async () => {
|
||||
try {
|
||||
const response = await surveyApiService.getAccountSetupSurvey();
|
||||
if (response.done && response.body) {
|
||||
setSurveyInfo({
|
||||
id: response.body.id,
|
||||
questions: response.body.questions || []
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error(t('survey:fetchErrorLog'), error);
|
||||
}
|
||||
};
|
||||
fetchSurvey();
|
||||
// Show modal after a 5 second delay to not interrupt user immediately
|
||||
const timer = setTimeout(() => {
|
||||
setVisible(true);
|
||||
}, 5000);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [loading, hasCompletedSurvey, dispatch, forceShow, t]);
|
||||
|
||||
const handleComplete = async () => {
|
||||
try {
|
||||
setSubmitting(true);
|
||||
|
||||
if (!surveyData || !surveyInfo) {
|
||||
throw new Error('Survey data not found');
|
||||
}
|
||||
|
||||
// Create a map of question keys to IDs
|
||||
const questionMap = surveyInfo.questions.reduce((acc, q) => {
|
||||
acc[q.question_key] = q.id;
|
||||
return acc;
|
||||
}, {} as Record<string, string>);
|
||||
|
||||
// Prepare submission data with actual question IDs - only include answered questions
|
||||
const answers: any[] = [];
|
||||
|
||||
if (surveyData.organization_type && questionMap['organization_type']) {
|
||||
answers.push({
|
||||
question_id: questionMap['organization_type'],
|
||||
answer_text: surveyData.organization_type
|
||||
});
|
||||
}
|
||||
|
||||
if (surveyData.user_role && questionMap['user_role']) {
|
||||
answers.push({
|
||||
question_id: questionMap['user_role'],
|
||||
answer_text: surveyData.user_role
|
||||
});
|
||||
}
|
||||
|
||||
if (surveyData.main_use_cases && surveyData.main_use_cases.length > 0 && questionMap['main_use_cases']) {
|
||||
answers.push({
|
||||
question_id: questionMap['main_use_cases'],
|
||||
answer_json: surveyData.main_use_cases
|
||||
});
|
||||
}
|
||||
|
||||
if (surveyData.previous_tools && questionMap['previous_tools']) {
|
||||
answers.push({
|
||||
question_id: questionMap['previous_tools'],
|
||||
answer_text: surveyData.previous_tools
|
||||
});
|
||||
}
|
||||
|
||||
if (surveyData.how_heard_about && questionMap['how_heard_about']) {
|
||||
answers.push({
|
||||
question_id: questionMap['how_heard_about'],
|
||||
answer_text: surveyData.how_heard_about
|
||||
});
|
||||
}
|
||||
|
||||
const submissionData: ISurveySubmissionRequest = {
|
||||
survey_id: surveyInfo.id,
|
||||
answers
|
||||
};
|
||||
|
||||
const response = await surveyApiService.submitSurveyResponse(submissionData);
|
||||
|
||||
if (response.done) {
|
||||
setSurveyCompleted(true);
|
||||
appMessage.success(t('survey:submitSuccessMessage'));
|
||||
|
||||
// Wait a moment before closing
|
||||
setTimeout(() => {
|
||||
setVisible(false);
|
||||
refetch(); // Update the survey status
|
||||
}, 2000);
|
||||
} else {
|
||||
throw new Error(response.message || t('survey:submitErrorMessage'));
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error(t('survey:submitErrorLog'), error);
|
||||
appMessage.error(t('survey:submitErrorMessage'));
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSkip = () => {
|
||||
setVisible(false);
|
||||
// Optionally, you can set a flag in localStorage to not show again for some time
|
||||
localStorage.setItem('survey_skipped_at', new Date().toISOString());
|
||||
onClose?.();
|
||||
};
|
||||
|
||||
const isCurrentStepValid = () => {
|
||||
switch (surveySubStep) {
|
||||
case 0:
|
||||
return surveyData.organization_type && surveyData.user_role;
|
||||
case 1:
|
||||
return surveyData.main_use_cases && surveyData.main_use_cases.length > 0;
|
||||
case 2:
|
||||
return surveyData.how_heard_about;
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleNext = () => {
|
||||
if (surveySubStep < 2) {
|
||||
dispatch(setSurveySubStep(surveySubStep + 1));
|
||||
} else {
|
||||
handleComplete();
|
||||
}
|
||||
};
|
||||
|
||||
const handlePrevious = () => {
|
||||
if (surveySubStep > 0) {
|
||||
dispatch(setSurveySubStep(surveySubStep - 1));
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={visible}
|
||||
title={surveyCompleted ? null : t('survey:modalTitle')}
|
||||
onCancel={handleSkip}
|
||||
footer={
|
||||
surveyCompleted ? null : (
|
||||
<Flex justify="space-between" align="center">
|
||||
<div>
|
||||
<Button onClick={handleSkip}>
|
||||
{t('survey:skip')}
|
||||
</Button>
|
||||
</div>
|
||||
<Flex gap={8}>
|
||||
{surveySubStep > 0 && (
|
||||
<Button onClick={handlePrevious}>
|
||||
{t('survey:previous')}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={handleNext}
|
||||
disabled={!isCurrentStepValid()}
|
||||
loading={submitting && surveySubStep === 2}
|
||||
>
|
||||
{surveySubStep === 2 ? t('survey:completeSurvey') : t('survey:next')}
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
width={800}
|
||||
maskClosable={false}
|
||||
centered
|
||||
>
|
||||
{submitting ? (
|
||||
<div style={{ textAlign: 'center', padding: '40px' }}>
|
||||
<Spin size="large" />
|
||||
<p style={{ marginTop: 16 }}>{t('survey:submitting')}</p>
|
||||
</div>
|
||||
) : surveyCompleted ? (
|
||||
<Result
|
||||
status="success"
|
||||
title={t('survey:submitSuccessTitle')}
|
||||
subTitle={t('survey:submitSuccessSubtitle')}
|
||||
/>
|
||||
) : (
|
||||
<div style={{ maxHeight: '70vh', overflowY: 'auto' }}>
|
||||
<SurveyStep
|
||||
onEnter={() => {}} // Empty function since we handle navigation via buttons
|
||||
styles={{}}
|
||||
isDarkMode={isDarkMode}
|
||||
isModal={true} // Pass true to indicate modal context
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,73 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Card, Button, Result, Alert } from '@/shared/antd-imports';
|
||||
import { CheckCircleOutlined, FormOutlined } from '@/shared/antd-imports';
|
||||
import { useSurveyStatus } from '@/hooks/useSurveyStatus';
|
||||
import { SurveyPromptModal } from './SurveyPromptModal';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
export const SurveySettingsCard: React.FC = () => {
|
||||
const { t } = useTranslation('settings');
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const { hasCompletedSurvey, loading } = useSurveyStatus();
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Card loading={true} />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
title={
|
||||
<span>
|
||||
<FormOutlined style={{ marginRight: 8 }} />
|
||||
Personalization Survey
|
||||
</span>
|
||||
}
|
||||
extra={
|
||||
hasCompletedSurvey && (
|
||||
<Button type="link" onClick={() => setShowModal(true)}>
|
||||
Update Responses
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
>
|
||||
{hasCompletedSurvey ? (
|
||||
<Result
|
||||
icon={<CheckCircleOutlined style={{ color: '#52c41a' }} />}
|
||||
title="Survey Completed"
|
||||
subTitle="Thank you for completing the personalization survey. Your responses help us improve Worklenz."
|
||||
extra={
|
||||
<Button onClick={() => setShowModal(true)}>
|
||||
Update Your Responses
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<Alert
|
||||
message="Help us personalize your experience"
|
||||
description="Take a quick survey to tell us about your organization and how you use Worklenz."
|
||||
type="info"
|
||||
showIcon
|
||||
style={{ marginBottom: 16 }}
|
||||
/>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<Button type="primary" size="large" onClick={() => setShowModal(true)}>
|
||||
Take Survey Now
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{showModal && (
|
||||
<SurveyPromptModal
|
||||
forceShow={true}
|
||||
onClose={() => setShowModal(false)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
2
worklenz-frontend/src/components/survey/index.ts
Normal file
2
worklenz-frontend/src/components/survey/index.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
export { SurveyPromptModal } from './SurveyPromptModal';
|
||||
export { SurveySettingsCard } from './SurveySettingsCard';
|
||||
@@ -12,7 +12,7 @@ import TimeLogList from './time-log-list';
|
||||
import { taskTimeLogsApiService } from '@/api/tasks/task-time-logs.api.service';
|
||||
import { ITaskLogViewModel } from '@/types/tasks/task-log-view.types';
|
||||
import TaskTimer from '@/components/taskListCommon/task-timer/task-timer';
|
||||
import { useTaskTimer } from '@/hooks/useTaskTimer';
|
||||
import { useTaskTimerWithConflictCheck } from '@/hooks/useTaskTimerWithConflictCheck';
|
||||
import logger from '@/utils/errorLogger';
|
||||
|
||||
interface TaskDrawerTimeLogProps {
|
||||
@@ -31,7 +31,7 @@ const TaskDrawerTimeLog = ({ t, refreshTrigger = 0 }: TaskDrawerTimeLogProps) =>
|
||||
state => state.taskDrawerReducer
|
||||
);
|
||||
|
||||
const { started, timeString, handleStartTimer, handleStopTimer } = useTaskTimer(
|
||||
const { started, timeString, handleStartTimer, handleStopTimer } = useTaskTimerWithConflictCheck(
|
||||
selectedTaskId || '',
|
||||
taskFormViewModel?.task?.timer_start_time || null
|
||||
);
|
||||
|
||||
@@ -3,7 +3,7 @@ import { Button, Divider, Flex, Popconfirm, Typography, Space } from '@/shared/a
|
||||
import { colors } from '@/styles/colors';
|
||||
import { ITaskLogViewModel } from '@/types/tasks/task-log-view.types';
|
||||
import SingleAvatar from '@/components/common/single-avatar/single-avatar';
|
||||
import { formatDateTimeWithLocale } from '@/utils/format-date-time-with-locale';
|
||||
import { formatDateTimeWithUserTimezone } from '@/utils/format-date-time-with-user-timezone';
|
||||
import { calculateTimeGap } from '@/utils/calculate-time-gap';
|
||||
import './time-log-item.css';
|
||||
import { taskTimeLogsApiService } from '@/api/tasks/task-time-logs.api.service';
|
||||
@@ -101,7 +101,7 @@ const TimeLogItem = ({ log, onDelete }: TimeLogItemProps) => {
|
||||
{renderLoggedByTimer()} {calculateTimeGap(created_at || '')}
|
||||
</Typography.Text>
|
||||
<Typography.Text type="secondary" style={{ fontSize: 12 }}>
|
||||
{formatDateTimeWithLocale(created_at || '')}
|
||||
{formatDateTimeWithUserTimezone(created_at || '', currentSession?.timezone_name)}
|
||||
</Typography.Text>
|
||||
</Flex>
|
||||
{renderActionButtons()}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import TaskTimer from '@/components/taskListCommon/task-timer/task-timer';
|
||||
import { useTaskTimer } from '@/hooks/useTaskTimer';
|
||||
import { useTaskTimerWithConflictCheck } from '@/hooks/useTaskTimerWithConflictCheck';
|
||||
|
||||
interface TaskTimeTrackingProps {
|
||||
taskId: string;
|
||||
@@ -8,7 +8,7 @@ interface TaskTimeTrackingProps {
|
||||
}
|
||||
|
||||
const TaskTimeTracking: React.FC<TaskTimeTrackingProps> = React.memo(({ taskId, isDarkMode }) => {
|
||||
const { started, timeString, handleStartTimer, handleStopTimer } = useTaskTimer(
|
||||
const { started, timeString, handleStartTimer, handleStopTimer } = useTaskTimerWithConflictCheck(
|
||||
taskId,
|
||||
null // The hook will get the timer start time from Redux
|
||||
);
|
||||
|
||||
@@ -32,6 +32,8 @@ import {
|
||||
RetweetOutlined,
|
||||
UserAddOutlined,
|
||||
LoadingOutlined,
|
||||
CopyOutlined,
|
||||
message,
|
||||
} from '@/shared/antd-imports';
|
||||
|
||||
interface TaskContextMenuProps {
|
||||
@@ -340,6 +342,21 @@ const TaskContextMenu: React.FC<TaskContextMenuProps> = ({
|
||||
}
|
||||
}, [task?.id, projectId, dispatch, onClose]);
|
||||
|
||||
const handleCopyLink = useCallback(async () => {
|
||||
if (!projectId || !task.id) return;
|
||||
|
||||
try {
|
||||
const taskLink = `${window.location.origin}/worklenz/projects/${projectId}?tab=tasks-list&pinned_tab=tasks-list&task=${task.id}`;
|
||||
await navigator.clipboard.writeText(taskLink);
|
||||
message.success(t('contextMenu.linkCopied'));
|
||||
} catch (error) {
|
||||
logger.error('Error copying link:', error);
|
||||
message.error(t('contextMenu.linkCopyFailed'));
|
||||
} finally {
|
||||
onClose();
|
||||
}
|
||||
}, [projectId, task.id, onClose, t]);
|
||||
|
||||
const menuItems = useMemo(() => {
|
||||
const items = [
|
||||
{
|
||||
@@ -359,6 +376,18 @@ const TaskContextMenu: React.FC<TaskContextMenuProps> = ({
|
||||
</button>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'copyLink',
|
||||
label: (
|
||||
<button
|
||||
onClick={handleCopyLink}
|
||||
className="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 w-full text-left"
|
||||
>
|
||||
<CopyOutlined className="text-gray-500 dark:text-gray-400" />
|
||||
<span>{t('contextMenu.copyLink')}</span>
|
||||
</button>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
// Add Move To submenu if there are options
|
||||
@@ -516,6 +545,7 @@ const TaskContextMenu: React.FC<TaskContextMenuProps> = ({
|
||||
handleArchive,
|
||||
handleDelete,
|
||||
handleConvertToTask,
|
||||
handleCopyLink,
|
||||
getMoveToOptions,
|
||||
dispatch,
|
||||
t,
|
||||
|
||||
@@ -395,7 +395,7 @@ export const ReporterColumn: React.FC<ReporterColumnProps> = memo(({ width, repo
|
||||
style={{ width }}
|
||||
>
|
||||
{reporter ? (
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{reporter}</span>
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400 truncate" title={reporter}>{reporter}</span>
|
||||
) : (
|
||||
<span className="text-sm text-gray-400 dark:text-gray-500 whitespace-nowrap">-</span>
|
||||
)}
|
||||
|
||||
@@ -14,6 +14,8 @@ import {
|
||||
EyeOutlined,
|
||||
InboxOutlined,
|
||||
CheckOutlined,
|
||||
SortAscendingOutlined,
|
||||
SortDescendingOutlined,
|
||||
} from '@/shared/antd-imports';
|
||||
import { RootState } from '@/app/store';
|
||||
import { useAppSelector } from '@/hooks/useAppSelector';
|
||||
@@ -33,6 +35,12 @@ import {
|
||||
setArchived as setTaskManagementArchived,
|
||||
toggleArchived as toggleTaskManagementArchived,
|
||||
selectArchived,
|
||||
setSort,
|
||||
setSortField,
|
||||
setSortOrder,
|
||||
selectSort,
|
||||
selectSortField,
|
||||
selectSortOrder,
|
||||
} from '@/features/task-management/task-management.slice';
|
||||
import {
|
||||
setCurrentGrouping,
|
||||
@@ -47,11 +55,13 @@ import {
|
||||
setLabels,
|
||||
setSearch,
|
||||
setPriorities,
|
||||
setFields,
|
||||
} from '@/features/tasks/tasks.slice';
|
||||
import { getTeamMembers } from '@/features/team-members/team-members.slice';
|
||||
import { ITaskPriority } from '@/types/tasks/taskPriority.types';
|
||||
import { ITaskListColumn } from '@/types/tasks/taskList.types';
|
||||
import { IGroupBy } from '@/features/tasks/tasks.slice';
|
||||
import { ITaskListSortableColumn } from '@/types/tasks/taskListFilters.types';
|
||||
// --- Enhanced Kanban imports ---
|
||||
import {
|
||||
setGroupBy as setKanbanGroupBy,
|
||||
@@ -87,7 +97,11 @@ const FILTER_DEBOUNCE_DELAY = 300; // ms
|
||||
const SEARCH_DEBOUNCE_DELAY = 500; // ms
|
||||
const MAX_FILTER_OPTIONS = 100;
|
||||
|
||||
// Limit options to prevent UI lag
|
||||
// Sort order enum
|
||||
enum SORT_ORDER {
|
||||
ASCEND = 'ascend',
|
||||
DESCEND = 'descend',
|
||||
}
|
||||
|
||||
// Optimized selectors with proper transformation logic
|
||||
const selectFilterData = createSelector(
|
||||
@@ -741,6 +755,192 @@ const SearchFilter: React.FC<{
|
||||
);
|
||||
};
|
||||
|
||||
// Sort Dropdown Component - Simplified version using task-management slice
|
||||
const SortDropdown: React.FC<{ themeClasses: any; isDarkMode: boolean }> = ({
|
||||
themeClasses,
|
||||
isDarkMode,
|
||||
}) => {
|
||||
const { t } = useTranslation('task-list-filters');
|
||||
const dispatch = useAppDispatch();
|
||||
const { projectId } = useAppSelector(state => state.projectReducer);
|
||||
|
||||
// Get current sort state from task-management slice
|
||||
const currentSortField = useAppSelector(selectSortField);
|
||||
const currentSortOrder = useAppSelector(selectSortOrder);
|
||||
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Close dropdown on outside click
|
||||
React.useEffect(() => {
|
||||
if (!open) return;
|
||||
const handleClick = (e: MouseEvent) => {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
|
||||
setOpen(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener('mousedown', handleClick);
|
||||
return () => document.removeEventListener('mousedown', handleClick);
|
||||
}, [open]);
|
||||
|
||||
const sortFieldsList = [
|
||||
{ label: t('taskText'), key: 'name' },
|
||||
{ label: t('statusText'), key: 'status' },
|
||||
{ label: t('priorityText'), key: 'priority' },
|
||||
{ label: t('startDateText'), key: 'start_date' },
|
||||
{ label: t('endDateText'), key: 'end_date' },
|
||||
{ label: t('completedDateText'), key: 'completed_at' },
|
||||
{ label: t('createdDateText'), key: 'created_at' },
|
||||
{ label: t('lastUpdatedText'), key: 'updated_at' },
|
||||
];
|
||||
|
||||
const handleSortFieldChange = (fieldKey: string) => {
|
||||
// If clicking the same field, toggle order, otherwise set new field with ASC
|
||||
if (currentSortField === fieldKey) {
|
||||
const newOrder = currentSortOrder === 'ASC' ? 'DESC' : 'ASC';
|
||||
dispatch(setSort({ field: fieldKey, order: newOrder }));
|
||||
} else {
|
||||
dispatch(setSort({ field: fieldKey, order: 'ASC' }));
|
||||
}
|
||||
|
||||
// Fetch updated tasks
|
||||
if (projectId) {
|
||||
dispatch(fetchTasksV3(projectId));
|
||||
}
|
||||
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const clearSort = () => {
|
||||
dispatch(setSort({ field: '', order: 'ASC' }));
|
||||
if (projectId) {
|
||||
dispatch(fetchTasksV3(projectId));
|
||||
}
|
||||
};
|
||||
|
||||
const isActive = currentSortField !== '';
|
||||
const currentFieldLabel = sortFieldsList.find(f => f.key === currentSortField)?.label;
|
||||
const orderText = currentSortOrder === 'ASC' ? t('ascendingOrder') : t('descendingOrder');
|
||||
|
||||
return (
|
||||
<div className="relative" ref={dropdownRef}>
|
||||
{/* Trigger Button - matching FilterDropdown style */}
|
||||
<button
|
||||
onClick={() => setOpen(!open)}
|
||||
title={
|
||||
isActive
|
||||
? t('currentSort', { field: currentFieldLabel, order: orderText })
|
||||
: t('sortText')
|
||||
}
|
||||
className={`
|
||||
inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-md
|
||||
border transition-all duration-200 ease-in-out
|
||||
${
|
||||
isActive
|
||||
? isDarkMode
|
||||
? 'bg-gray-600 text-white border-gray-500'
|
||||
: 'bg-gray-200 text-gray-800 border-gray-300 font-semibold'
|
||||
: `${themeClasses.buttonBg} ${themeClasses.buttonBorder} ${themeClasses.buttonText}`
|
||||
}
|
||||
hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2
|
||||
${isDarkMode ? 'focus:ring-offset-gray-900' : 'focus:ring-offset-white'}
|
||||
`}
|
||||
aria-expanded={open}
|
||||
aria-haspopup="true"
|
||||
>
|
||||
{currentSortOrder === 'ASC' ? (
|
||||
<SortAscendingOutlined className="w-3.5 h-3.5" />
|
||||
) : (
|
||||
<SortDescendingOutlined className="w-3.5 h-3.5" />
|
||||
)}
|
||||
<span className="hidden sm:inline">{t('sortText')}</span>
|
||||
{isActive && currentFieldLabel && (
|
||||
<span className={`text-xs ${isDarkMode ? 'text-gray-300' : 'text-gray-600'} max-w-16 truncate hidden md:inline`}>
|
||||
{currentFieldLabel}
|
||||
</span>
|
||||
)}
|
||||
<DownOutlined
|
||||
className={`w-3.5 h-3.5 transition-transform duration-200 ${open ? 'rotate-180' : ''}`}
|
||||
/>
|
||||
</button>
|
||||
|
||||
{/* Dropdown Panel - matching FilterDropdown style */}
|
||||
{open && (
|
||||
<div
|
||||
className={`absolute top-full left-0 z-50 mt-1 w-64 ${themeClasses.dropdownBg} rounded-md shadow-sm border ${themeClasses.dropdownBorder}`}
|
||||
>
|
||||
{/* Clear Sort Option */}
|
||||
{isActive && (
|
||||
<div className={`p-2 border-b ${themeClasses.dividerBorder}`}>
|
||||
<button
|
||||
onClick={clearSort}
|
||||
className={`w-full text-left px-2 py-1.5 text-xs rounded transition-colors duration-150 ${themeClasses.optionText} ${themeClasses.optionHover}`}
|
||||
>
|
||||
{t('clearSort')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Options List */}
|
||||
<div className="max-h-48 overflow-y-auto">
|
||||
<div className="p-0.5">
|
||||
{sortFieldsList.map(sortField => {
|
||||
const isSelected = currentSortField === sortField.key;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={sortField.key}
|
||||
onClick={() => handleSortFieldChange(sortField.key)}
|
||||
className={`
|
||||
w-full flex items-center justify-between gap-2 px-2 py-1.5 text-xs rounded
|
||||
transition-colors duration-150 text-left
|
||||
${
|
||||
isSelected
|
||||
? isDarkMode
|
||||
? 'bg-gray-600 text-white'
|
||||
: 'bg-gray-200 text-gray-800 font-semibold'
|
||||
: `${themeClasses.optionText} ${themeClasses.optionHover}`
|
||||
}
|
||||
`}
|
||||
title={
|
||||
isSelected
|
||||
? t('currentSort', {
|
||||
field: sortField.label,
|
||||
order: orderText
|
||||
}) + ` - ${t('sortDescending')}`
|
||||
: t('sortByField', { field: sortField.label }) + ` - ${t('sortAscending')}`
|
||||
}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="truncate">{sortField.label}</span>
|
||||
{isSelected && (
|
||||
<span className={`text-xs ${isDarkMode ? 'text-gray-300' : 'text-gray-600'}`}>
|
||||
({orderText})
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
{isSelected ? (
|
||||
currentSortOrder === 'ASC' ? (
|
||||
<SortAscendingOutlined className="w-3.5 h-3.5" />
|
||||
) : (
|
||||
<SortDescendingOutlined className="w-3.5 h-3.5" />
|
||||
)
|
||||
) : (
|
||||
<SortAscendingOutlined className="w-3.5 h-3.5 opacity-50" />
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const LOCAL_STORAGE_KEY = 'worklenz.taskManagement.fields';
|
||||
|
||||
const FieldsDropdown: React.FC<{ themeClasses: any; isDarkMode: boolean }> = ({
|
||||
@@ -1056,14 +1256,20 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
|
||||
};
|
||||
}, [dispatch, projectView]);
|
||||
|
||||
// Get sort fields for active count calculation
|
||||
const sortFields = useAppSelector(state => state.taskReducer.fields);
|
||||
const taskManagementSortField = useAppSelector(selectSortField);
|
||||
|
||||
// Calculate active filters count - memoized to prevent unnecessary recalculations
|
||||
const calculatedActiveFiltersCount = useMemo(() => {
|
||||
const count = filterSections.reduce(
|
||||
(acc, section) => (section.id === 'groupBy' ? acc : acc + section.selectedValues.length),
|
||||
0
|
||||
);
|
||||
return count + (searchValue ? 1 : 0);
|
||||
}, [filterSections, searchValue]);
|
||||
const sortFieldsCount = position === 'list' ? sortFields.length : 0;
|
||||
const taskManagementSortCount = position === 'list' && taskManagementSortField ? 1 : 0;
|
||||
return count + (searchValue ? 1 : 0) + sortFieldsCount + taskManagementSortCount;
|
||||
}, [filterSections, searchValue, sortFields, taskManagementSortField, position]);
|
||||
|
||||
useEffect(() => {
|
||||
if (activeFiltersCount !== calculatedActiveFiltersCount) {
|
||||
@@ -1237,6 +1443,12 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
|
||||
// Clear priority filters
|
||||
dispatch(setPriorities([]));
|
||||
|
||||
// Clear sort fields
|
||||
dispatch(setFields([]));
|
||||
|
||||
// Clear sort from task-management slice
|
||||
dispatch(setSort({ field: '', order: 'ASC' }));
|
||||
|
||||
// Clear archived state based on position
|
||||
if (position === 'list') {
|
||||
dispatch(setTaskManagementArchived(false));
|
||||
@@ -1282,9 +1494,9 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
|
||||
<div
|
||||
className={`${themeClasses.containerBg} border ${themeClasses.containerBorder} rounded-md p-1.5 shadow-sm ${className}`}
|
||||
>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2 min-h-[36px]">
|
||||
{/* Left Section - Main Filters */}
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<div className="flex flex-wrap items-center gap-2 flex-1 min-w-0">
|
||||
{/* Search */}
|
||||
<SearchFilter
|
||||
value={searchValue}
|
||||
@@ -1293,6 +1505,11 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
|
||||
themeClasses={themeClasses}
|
||||
/>
|
||||
|
||||
{/* Sort Filter Button (for list view) - appears after search */}
|
||||
{position === 'list' && (
|
||||
<SortDropdown themeClasses={themeClasses} isDarkMode={isDarkMode} />
|
||||
)}
|
||||
|
||||
{/* Filter Dropdowns - Only render when data is loaded */}
|
||||
{isDataLoaded ? (
|
||||
filterSectionsData.map(section => (
|
||||
@@ -1322,7 +1539,7 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
|
||||
</div>
|
||||
|
||||
{/* Right Section - Additional Controls */}
|
||||
<div className="flex items-center gap-2 ml-auto">
|
||||
<div className="flex flex-wrap items-center gap-2 ml-auto min-w-0 shrink-0">
|
||||
{/* Active Filters Indicator */}
|
||||
{activeFiltersCount > 0 && (
|
||||
<div className="flex items-center gap-1.5">
|
||||
|
||||
Reference in New Issue
Block a user