diff --git a/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.html b/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.html index 00ca6e61f587..4ac1318232fd 100644 --- a/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.html +++ b/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.html @@ -84,7 +84,12 @@ @for (group of groupedPosts; track postsGroupTrackByFn($index, group)) {
@for (post of group.posts; track postsTrackByFn($index, post)) { -
+
+ @if (isFirstUnreadMarker(post, group)) { + + + + } (); canStartSaving = false; createdNewMessage = false; + unreadCount = 0; @Output() openThread = new EventEmitter(); @@ -140,6 +141,7 @@ export class ConversationMessagesComponent implements OnInit, AfterViewInit, OnD private subscribeToActiveConversation() { this.metisConversationService.activeConversation$.pipe(takeUntil(this.ngUnsubscribe)).subscribe((conversation: ConversationDTO) => { + this.unreadCount = conversation?.unreadMessagesCount || 0; // This statement avoids a bug that reloads the messages when the conversation is already displayed if (conversation && this._activeConversation?.id === conversation.id) { return; @@ -149,6 +151,45 @@ export class ConversationMessagesComponent implements OnInit, AfterViewInit, OnD }); } + /** + * Determines whether a post is the "first unread message" in the conversation. + */ + isFirstUnreadMarker(post: Post, group: PostGroup): boolean { + let remainingUnread = this.unreadCount; + let firstUnreadFound = false; + + const groupIndex = this.groupedPosts.findIndex((g) => g === group); + if (groupIndex === -1) { + return false; + } + + for (let i = this.groupedPosts.length - 1; i >= 0; i--) { + const currentGroup = this.groupedPosts[i]; + const groupMessageCount = currentGroup.posts.length; + + if (i > groupIndex) { + remainingUnread -= groupMessageCount; + } else if (i === groupIndex) { + const postIndexInGroup = currentGroup.posts.indexOf(post); + + if (!firstUnreadFound && postIndexInGroup === groupMessageCount - remainingUnread) { + if (groupIndex === 0 && postIndexInGroup === 0) { + remainingUnread--; + return false; + } + firstUnreadFound = true; + return true; + } + + remainingUnread--; + } else { + return false; + } + } + + return false; + } + private subscribeToSearch() { this.search$ .pipe( diff --git a/src/main/webapp/app/shared/metis/metis.service.ts b/src/main/webapp/app/shared/metis/metis.service.ts index a4415a2d1cee..ae9e16acdb07 100644 --- a/src/main/webapp/app/shared/metis/metis.service.ts +++ b/src/main/webapp/app/shared/metis/metis.service.ts @@ -255,6 +255,7 @@ export class MetisService implements OnDestroy { const indexToUpdate = this.cachedPosts.findIndex((cachedPost) => cachedPost.id === updatedPost.id); if (indexToUpdate > -1) { updatedPost.answers = [...(this.cachedPosts[indexToUpdate].answers ?? [])]; + updatedPost.authorRole = this.cachedPosts[indexToUpdate].authorRole; this.cachedPosts[indexToUpdate] = updatedPost; this.posts$.next(this.cachedPosts); this.totalNumberOfPosts$.next(this.cachedTotalNumberOfPosts); diff --git a/src/main/webapp/app/shared/metis/posting-header/post-header/post-header.component.html b/src/main/webapp/app/shared/metis/posting-header/post-header/post-header.component.html index deadcb377cdd..3294f887382b 100644 --- a/src/main/webapp/app/shared/metis/posting-header/post-header/post-header.component.html +++ b/src/main/webapp/app/shared/metis/posting-header/post-header/post-header.component.html @@ -1,4 +1,4 @@ -
+
@if (posting.author) { diff --git a/src/test/javascript/spec/component/overview/course-conversations/layout/conversation-messages/conversation-messages.component.spec.ts b/src/test/javascript/spec/component/overview/course-conversations/layout/conversation-messages/conversation-messages.component.spec.ts index 815c5d9a4501..ba0b56d0d62d 100644 --- a/src/test/javascript/spec/component/overview/course-conversations/layout/conversation-messages/conversation-messages.component.spec.ts +++ b/src/test/javascript/spec/component/overview/course-conversations/layout/conversation-messages/conversation-messages.component.spec.ts @@ -20,6 +20,7 @@ import { Course } from 'app/entities/course.model'; import { getAsChannelDTO } from 'app/entities/metis/conversation/channel.model'; import { PostCreateEditModalComponent } from 'app/shared/metis/posting-create-edit-modal/post-create-edit-modal/post-create-edit-modal.component'; import dayjs from 'dayjs'; +import { User } from '../../../../../../../../main/webapp/app/core/user/user.model'; const examples: ConversationDTO[] = [ generateOneToOneChatDTO({}), @@ -28,6 +29,11 @@ const examples: ConversationDTO[] = [ generateExampleChannelDTO({ isAnnouncementChannel: true }), ]; +interface PostGroup { + author: User | undefined; + posts: Post[]; +} + @Directive({ // eslint-disable-next-line @angular-eslint/directive-selector selector: '[infiniteScroll], [infinite-scroll], [data-infinite-scroll]', @@ -268,6 +274,56 @@ examples.forEach((activeConversation) => { expect(component.groupedPosts[2].posts).toHaveLength(1); }); + it('should correctly identify the first unread marker', () => { + const mockPosts: Post[] = [{ id: 1, content: 'Post 1' } as Post, { id: 2, content: 'Post 2' } as Post, { id: 3, content: 'Post 3' } as Post]; + + const mockGroups: PostGroup[] = [ + { author: undefined, posts: [mockPosts[0], mockPosts[1]] }, + { author: undefined, posts: [mockPosts[2]] }, + ]; + + component.groupedPosts = mockGroups; + component.unreadCount = 2; + + const isFirstUnreadForPost1 = component.isFirstUnreadMarker(mockPosts[0], mockGroups[0]); + const isFirstUnreadForPost2 = component.isFirstUnreadMarker(mockPosts[1], mockGroups[0]); + const isFirstUnreadForPost3 = component.isFirstUnreadMarker(mockPosts[2], mockGroups[1]); + + expect(isFirstUnreadForPost1).toBeFalse(); + expect(isFirstUnreadForPost2).toBeTrue(); + expect(isFirstUnreadForPost3).toBeFalse(); + }); + + it('should render the unread marker if isFirstUnreadMarker returns true', () => { + const mockPost: Post = { id: 1, content: 'Post 1' } as Post; + const mockGroup: PostGroup = { author: undefined, posts: [mockPost] }; + + jest.spyOn(component, 'isFirstUnreadMarker').mockReturnValue(true); + + component.groupedPosts = [mockGroup]; + component.unreadCount = 1; + + fixture.detectChanges(); + + const unreadMarker = fixture.debugElement.query(By.css('.unread-marker')); + expect(unreadMarker).toBeTruthy(); + }); + + it('should not render the unread marker if isFirstUnreadMarker returns false', () => { + const mockPost: Post = { id: 1, content: 'Post 1' } as Post; + const mockGroup: PostGroup = { author: undefined, posts: [mockPost] }; + + jest.spyOn(component, 'isFirstUnreadMarker').mockReturnValue(false); + + component.groupedPosts = [mockGroup]; + component.unreadCount = 1; + + fixture.detectChanges(); + + const unreadMarker = fixture.debugElement.query(By.css('.unread-marker')); + expect(unreadMarker).toBeFalsy(); + }); + if (getAsChannelDTO(activeConversation)?.isAnnouncementChannel) { it('should display the "new announcement" button when the conversation is an announcement channel', fakeAsync(() => { const announcementButton = fixture.debugElement.query(By.css('.btn.btn-md.btn-primary'));