diff --git a/worklenz-frontend/src/components/board/taskCard/priority-section/priority-section.tsx b/worklenz-frontend/src/components/board/taskCard/priority-section/priority-section.tsx index 3deceb7a..bf12b447 100644 --- a/worklenz-frontend/src/components/board/taskCard/priority-section/priority-section.tsx +++ b/worklenz-frontend/src/components/board/taskCard/priority-section/priority-section.tsx @@ -53,12 +53,6 @@ const PrioritySection = ({ task }: PrioritySectionProps) => { return ( {priorityIcon} - - {task.name} - ); }; diff --git a/worklenz-frontend/src/components/project-task-filters/filter-dropdowns/labels-filter-dropdown.tsx b/worklenz-frontend/src/components/project-task-filters/filter-dropdowns/labels-filter-dropdown.tsx index 4c2744cc..dc63e9be 100644 --- a/worklenz-frontend/src/components/project-task-filters/filter-dropdowns/labels-filter-dropdown.tsx +++ b/worklenz-frontend/src/components/project-task-filters/filter-dropdowns/labels-filter-dropdown.tsx @@ -11,7 +11,7 @@ import List from 'antd/es/list'; import Space from 'antd/es/space'; import { useSearchParams } from 'react-router-dom'; -import { useMemo, useRef, useState } from 'react'; +import { useMemo, useRef, useState, useEffect } from 'react'; import { useAppSelector } from '@/hooks/useAppSelector'; import { colors } from '@/styles/colors'; import { useTranslation } from 'react-i18next'; @@ -36,6 +36,13 @@ const LabelsFilterDropdown = () => { const tab = searchParams.get('tab'); const projectView = tab === 'tasks-list' ? 'list' : 'kanban'; + // Fetch labels when component mounts or projectId changes + useEffect(() => { + if (projectId) { + dispatch(fetchLabelsByProject(projectId)); + } + }, [dispatch, projectId]); + const filteredLabelData = useMemo(() => { if (projectView === 'list') { return labels.filter(label => label.name?.toLowerCase().includes(searchQuery.toLowerCase())); @@ -81,9 +88,6 @@ const LabelsFilterDropdown = () => { setTimeout(() => { labelInputRef.current?.focus(); }, 0); - if (projectView === 'kanban') { - dispatch(setBoardLabels(labels)); - } } }; diff --git a/worklenz-frontend/src/components/project-task-filters/filter-dropdowns/members-filter-dropdown.tsx b/worklenz-frontend/src/components/project-task-filters/filter-dropdowns/members-filter-dropdown.tsx index c9b2d307..85f3a2df 100644 --- a/worklenz-frontend/src/components/project-task-filters/filter-dropdowns/members-filter-dropdown.tsx +++ b/worklenz-frontend/src/components/project-task-filters/filter-dropdowns/members-filter-dropdown.tsx @@ -76,7 +76,6 @@ const MembersFilterDropdown = () => { const handleSelectedFiltersCount = useCallback(async (memberId: string | undefined, checked: boolean) => { if (!memberId || !projectId) return; - if (!memberId || !projectId) return; const updateMembers = async (members: Member[], setAction: any, fetchAction: any) => { const updatedMembers = members.map(member => @@ -142,11 +141,12 @@ const MembersFilterDropdown = () => { const handleMembersDropdownOpen = useCallback((open: boolean) => { if (open) { setTimeout(() => membersInputRef.current?.focus(), 0); - if (taskAssignees.length) { + // Only sync the members if board members are empty + if (projectView === 'kanban' && boardTaskAssignees.length === 0 && taskAssignees.length > 0) { dispatch(setBoardMembers(taskAssignees)); } } - }, [dispatch, taskAssignees]); + }, [dispatch, taskAssignees, boardTaskAssignees, projectView]); const buttonStyle = { backgroundColor: selectedCount > 0 diff --git a/worklenz-frontend/src/components/task-drawer/shared/info-tab/comments/task-comments.tsx b/worklenz-frontend/src/components/task-drawer/shared/info-tab/comments/task-comments.tsx index fd6fcc41..01ea9f93 100644 --- a/worklenz-frontend/src/components/task-drawer/shared/info-tab/comments/task-comments.tsx +++ b/worklenz-frontend/src/components/task-drawer/shared/info-tab/comments/task-comments.tsx @@ -18,6 +18,7 @@ import { colors } from '@/styles/colors'; import AttachmentsGrid from '../attachments/attachments-grid'; import { TFunction } from 'i18next'; import SingleAvatar from '@/components/common/single-avatar/single-avatar'; +import { sanitizeHtml } from '@/utils/sanitizeInput'; // Helper function to format date for time separators const formatDateForSeparator = (date: string) => { @@ -56,6 +57,32 @@ const processMentions = (content: string) => { return content.replace(/@(\w+)/g, '@$1'); }; +// Utility to linkify URLs in text +const linkify = (text: string) => { + if (!text) return ''; + // Regex to match URLs (http, https, www) + return text.replace(/(https?:\/\/[^\s]+|www\.[^\s]+)/g, (url) => { + let href = url; + if (!href.startsWith('http')) { + href = 'http://' + href; + } + return `${url}`; + }); +}; + +// Helper function to process mentions and links in content +const processContent = (content: string) => { + if (!content) return ''; + // First, linkify URLs + let processed = linkify(content); + // Then, process mentions (if not already processed) + if (!hasProcessedMentions(processed)) { + processed = processMentions(processed); + } + // Sanitize the final HTML (allowing and ) + return sanitizeHtml(processed); +}; + const TaskComments = ({ taskId, t }: { taskId?: string, t: TFunction }) => { const [loading, setLoading] = useState(true); const [comments, setComments] = useState([]); @@ -80,10 +107,10 @@ const TaskComments = ({ taskId, t }: { taskId?: string, t: TFunction }) => { return dayjs(a.created_at).isBefore(dayjs(b.created_at)) ? -1 : 1; }); - // Process mentions in content + // Process content (mentions and links) sortedComments.forEach(comment => { - if (comment.content && !hasProcessedMentions(comment.content)) { - comment.content = processMentions(comment.content); + if (comment.content) { + comment.content = processContent(comment.content); } }); @@ -184,9 +211,9 @@ const TaskComments = ({ taskId, t }: { taskId?: string, t: TFunction }) => { const commentUpdated = (comment: ITaskCommentViewModel) => { comment.edit = false; - // Process mentions in updated content - if (comment.content && !hasProcessedMentions(comment.content)) { - comment.content = processMentions(comment.content); + // Process content (mentions and links) in updated comment + if (comment.content) { + comment.content = processContent(comment.content); } setComments([...comments]); // Force re-render }; diff --git a/worklenz-frontend/src/components/task-drawer/shared/info-tab/info-tab-footer.tsx b/worklenz-frontend/src/components/task-drawer/shared/info-tab/info-tab-footer.tsx index fbd3ba43..daa33603 100644 --- a/worklenz-frontend/src/components/task-drawer/shared/info-tab/info-tab-footer.tsx +++ b/worklenz-frontend/src/components/task-drawer/shared/info-tab/info-tab-footer.tsx @@ -103,7 +103,6 @@ const InfoTabFooter = () => { })) ?? []; const memberSelectHandler = useCallback((member: IMentionMemberSelectOption) => { - console.log('member', member); if (!member?.value || !member?.label) return; // Find the member ID from the members list using the name diff --git a/worklenz-frontend/src/features/board/board-slice.ts b/worklenz-frontend/src/features/board/board-slice.ts index a25262dc..f62ecdab 100644 --- a/worklenz-frontend/src/features/board/board-slice.ts +++ b/worklenz-frontend/src/features/board/board-slice.ts @@ -459,10 +459,24 @@ const boardSlice = createSlice({ const { body, sectionId, taskId } = action.payload; const section = state.taskGroups.find(sec => sec.id === sectionId); if (section) { - const task = section.tasks.find(task => task.id === taskId); - if (task) { - task.assignees = body.assignees; - task.names = body.names; + // First try to find the task in main tasks + const mainTask = section.tasks.find(task => task.id === taskId); + if (mainTask) { + mainTask.assignees = body.assignees; + mainTask.names = body.names; + return; + } + + // If not found in main tasks, look in subtasks + for (const parentTask of section.tasks) { + if (!parentTask.sub_tasks) continue; + + const subtask = parentTask.sub_tasks.find(st => st.id === taskId); + if (subtask) { + subtask.assignees = body.assignees; + subtask.names = body.names; + return; + } } } }, diff --git a/worklenz-frontend/src/pages/projects/project-view-1/updates/project-view-updates.tsx b/worklenz-frontend/src/pages/projects/project-view-1/updates/project-view-updates.tsx index 684cb5f9..171440d2 100644 --- a/worklenz-frontend/src/pages/projects/project-view-1/updates/project-view-updates.tsx +++ b/worklenz-frontend/src/pages/projects/project-view-1/updates/project-view-updates.tsx @@ -1,5 +1,5 @@ -import { Button, ConfigProvider, Flex, Form, Mentions, Skeleton, Space, Tooltip, Typography } from 'antd'; -import { useEffect, useState, useCallback } from 'react'; +import { Button, ConfigProvider, Flex, Form, Mentions, Skeleton, Space, Tooltip, Typography, Dropdown, Menu, Popconfirm } from 'antd'; +import { useEffect, useState, useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import DOMPurify from 'dompurify'; import { useParams } from 'react-router-dom'; @@ -10,7 +10,6 @@ import { IMentionMemberSelectOption, IMentionMemberViewModel, } from '@/types/project/projectComments.types'; -import { projectsApiService } from '@/api/projects/projects.api.service'; import { projectCommentsApiService } from '@/api/projects/comments/project-comments.api.service'; import { IProjectUpdateCommentViewModel } from '@/types/project/project.types'; import { calculateTimeDifference } from '@/utils/calculate-time-difference'; @@ -21,6 +20,19 @@ import { DeleteOutlined } from '@ant-design/icons'; const MAX_COMMENT_LENGTH = 2000; +// Compile RegExp once for linkify +const urlRegex = /((https?:\/\/|www\.)[\w\-._~:/?#[\]@!$&'()*+,;=%]+)/gi; + +function linkify(text: string): string { + return text.replace( + urlRegex, + url => { + const href = url.startsWith('http') ? url : `https://${url}`; + return `${url}`; + } + ); +} + const ProjectViewUpdates = () => { const { projectId } = useParams(); const [characterLength, setCharacterLength] = useState(0); @@ -68,7 +80,7 @@ const ProjectViewUpdates = () => { } }, [projectId]); - const handleAddComment = async () => { + const handleAddComment = useCallback(async () => { if (!projectId || characterLength === 0) return; try { @@ -88,7 +100,16 @@ const ProjectViewUpdates = () => { const res = await projectCommentsApiService.createProjectComment(body); if (res.done) { - await getComments(); + setComments(prev => [ + ...prev, + { + ...(res.body as IProjectUpdateCommentViewModel), + created_by: getUserSession()?.name || '', + created_at: new Date().toISOString(), + content: commentValue.trim(), + mentions: (res.body as IProjectUpdateCommentViewModel).mentions ?? [undefined, undefined], + } + ]); handleCancel(); } } catch (error) { @@ -96,15 +117,13 @@ const ProjectViewUpdates = () => { } finally { setIsSubmitting(false); setCommentValue(''); - - } - }; + }, [projectId, characterLength, commentValue, selectedMembers, getComments]); useEffect(() => { void getMembers(); void getComments(); - }, [getMembers, getComments,refreshTimestamp]); + }, [getMembers, getComments, refreshTimestamp]); const handleCancel = useCallback(() => { form.resetFields(['comment']); @@ -113,14 +132,16 @@ const ProjectViewUpdates = () => { setSelectedMembers([]); }, [form]); - const mentionsOptions = + const mentionsOptions = useMemo(() => members?.map(member => ({ value: member.id, label: member.name, - })) ?? []; + })) ?? [], [members] + ); const memberSelectHandler = useCallback((member: IMentionMemberSelectOption) => { if (!member?.value || !member?.label) return; + setSelectedMembers(prev => prev.some(mention => mention.id === member.value) ? prev @@ -131,13 +152,11 @@ const ProjectViewUpdates = () => { const parts = prev.split('@'); const lastPart = parts[parts.length - 1]; const mentionText = member.label; - // Keep only the part before the @ and add the new mention return prev.slice(0, prev.length - lastPart.length) + mentionText; }); }, []); const handleCommentChange = useCallback((value: string) => { - // Only update the value without trying to replace mentions setCommentValue(value); setCharacterLength(value.trim().length); }, []); @@ -157,56 +176,98 @@ const ProjectViewUpdates = () => { [getComments] ); + // Memoize link click handler for comment links + const handleCommentLinkClick = useCallback((e: React.MouseEvent) => { + const target = e.target as HTMLElement; + if (target.tagName === 'A') { + e.preventDefault(); + const href = (target as HTMLAnchorElement).getAttribute('href'); + if (href) { + window.open(href, '_blank', 'noopener,noreferrer'); + } + } + }, []); + + const configProviderTheme = useMemo(() => ({ + components: { + Button: { + defaultColor: colors.lightGray, + defaultHoverColor: colors.darkGray, + }, + }, + }), []); + + // Context menu for each comment (memoized) + const getCommentMenu = useCallback((commentId: string) => ( + + + handleDeleteComment(commentId)} + okText="Yes" + cancelText="No" + > + Delete + + + + ), [handleDeleteComment]); + + const renderComment = useCallback( + (comment: IProjectUpdateCommentViewModel) => { + const linkifiedContent = linkify(comment.content || ''); + const sanitizedContent = DOMPurify.sanitize(linkifiedContent); + const timeDifference = calculateTimeDifference(comment.created_at || ''); + const themeClass = theme === 'dark' ? 'dark' : 'light'; + + return ( + +
+ + + + + + {comment.created_by || ''} + + + + {timeDifference} + + + + +
+ + + +
+ + ); + }, + [theme, configProviderTheme, handleDeleteComment, handleCommentLinkClick] + ); + + const commentsList = useMemo(() => + comments.map(renderComment), [comments, renderComment] + ); + return ( - { - isLoadingComments ? ( - - ): - comments.map(comment => ( - - - - - - {comment.created_by || ''} - - - - {calculateTimeDifference(comment.created_at || '')} - - - - -
- - - - - {isSubTaskShow && ( - - - - {task.sub_tasks_loading && ( - - - - )} - - {!task.sub_tasks_loading && task?.sub_tasks && - task?.sub_tasks.map((subtask: any) => ( - - ))} - - {showNewSubtaskCard && ( - - )} - - - - )} + + {/* Subtask Section */} + + {isSubTaskShow && ( + + + + {task.sub_tasks_loading && ( + + + + )} + + {!task.sub_tasks_loading && task?.sub_tasks && + task?.sub_tasks.map((subtask: any) => ( + + ))} + + {showNewSubtaskCard && ( + + )} + + + + )} - + + ); }; diff --git a/worklenz-frontend/src/pages/projects/projectView/board/project-view-board.tsx b/worklenz-frontend/src/pages/projects/projectView/board/project-view-board.tsx index 3400cb86..70c1844e 100644 --- a/worklenz-frontend/src/pages/projects/projectView/board/project-view-board.tsx +++ b/worklenz-frontend/src/pages/projects/projectView/board/project-view-board.tsx @@ -23,14 +23,10 @@ import { TouchSensor, useSensor, useSensors, - MeasuringStrategy, getFirstCollision, pointerWithin, rectIntersection, UniqueIdentifier, - DragOverlayProps, - DragOverlay as DragOverlayType, - closestCorners, } from '@dnd-kit/core'; import BoardViewTaskCard from './board-section/board-task-card/board-view-task-card'; import { fetchStatusesCategories } from '@/features/taskAttributes/taskStatusSlice'; @@ -46,7 +42,8 @@ import { statusApiService } from '@/api/taskAttributes/status/status.api.service import logger from '@/utils/errorLogger'; import { checkTaskDependencyStatus } from '@/utils/check-task-dependency-status'; import { debounce } from 'lodash'; - +import { ITaskListPriorityChangeResponse } from '@/types/tasks/task-list-priority.types'; +import { updateTaskPriority as updateBoardTaskPriority } from '@/features/board/board-slice'; interface DroppableContainer { id: UniqueIdentifier; data: { @@ -273,6 +270,21 @@ const ProjectViewBoard = () => { } }; + const handlePriorityChange = (taskId: string, priorityId: string) => { + if (!taskId || !priorityId || !socket) return; + + const payload = { + task_id: taskId, + priority_id: priorityId, + team_id: currentSession?.team_id, + }; + + socket.emit(SocketEvents.TASK_PRIORITY_CHANGE.toString(), JSON.stringify(payload)); + socket.once(SocketEvents.TASK_PRIORITY_CHANGE.toString(), (data: ITaskListPriorityChangeResponse) => { + dispatch(updateBoardTaskPriority(data)); + }); + }; + const handleDragEnd = async (event: DragEndEvent) => { isDraggingRef.current = false; const { active, over } = event; @@ -317,6 +329,7 @@ const ProjectViewBoard = () => { originalSourceGroupIdRef.current = null; // Reset the ref return; } + if (targetGroupId !== sourceGroupId) { const canContinue = await checkTaskDependencyStatus(task.id, targetGroupId); if (!canContinue) { @@ -376,8 +389,6 @@ const ProjectViewBoard = () => { team_id: currentSession?.team_id }; - // logger.error('Emitting socket event with payload (task not found in source):', body); - // Emit socket event if (socket) { socket.emit(SocketEvents.TASK_SORT_ORDER_CHANGE.toString(), body); @@ -390,6 +401,11 @@ const ProjectViewBoard = () => { socket.emit(SocketEvents.GET_TASK_PROGRESS.toString(), task.id); } }); + + // Handle priority change if groupBy is priority + if (groupBy === IGroupBy.PRIORITY) { + handlePriorityChange(task.id, targetGroupId); + } } // Track analytics event @@ -544,7 +560,7 @@ const ProjectViewBoard = () => { { if (!input) return ''; return DOMPurify.sanitize(input, { - ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'br'], - ALLOWED_ATTR: ['href', 'target', 'rel'], + ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'br', 'span'], + ALLOWED_ATTR: ['href', 'target', 'rel', 'class'], }); }; \ No newline at end of file