From 58a30aabfd285f1165af2ca0ee1ffe89d4809ef6 Mon Sep 17 00:00:00 2001 From: Asli Aykan Date: Sat, 14 Dec 2024 12:03:56 +0300 Subject: [PATCH 1/3] added unread marker --- .../conversation-messages.component.html | 7 ++- .../conversation-messages.component.scss | 23 ++++++++ .../conversation-messages.component.ts | 37 ++++++++++++ .../webapp/app/shared/metis/metis.service.ts | 1 + .../post-header/post-header.component.html | 2 +- .../conversation-messages.component.spec.ts | 56 +++++++++++++++++++ 6 files changed, 124 insertions(+), 2 deletions(-) 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(); @@ -145,10 +146,46 @@ export class ConversationMessagesComponent implements OnInit, AfterViewInit, OnD return; } this._activeConversation = conversation; + this.unreadCount = conversation?.unreadMessagesCount || 0; this.onActiveConversationChange(); }); } + /** + * 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) { + 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 9884da1a010a..f9e36755b6dc 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')); From 9271ced598b5de407fb6356463ac1705dc40f88a Mon Sep 17 00:00:00 2001 From: Asli Aykan Date: Sat, 14 Dec 2024 13:05:22 +0300 Subject: [PATCH 2/3] replace the assignment --- .../conversation-messages/conversation-messages.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.ts b/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.ts index 5bb879bf6b37..4efa09c58b76 100644 --- a/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.ts +++ b/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.ts @@ -141,12 +141,12 @@ 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; } this._activeConversation = conversation; - this.unreadCount = conversation?.unreadMessagesCount || 0; this.onActiveConversationChange(); }); } From e09873c163a428a799bc7052c570497f31aa5844 Mon Sep 17 00:00:00 2001 From: Asli Aykan Date: Sat, 14 Dec 2024 17:24:32 +0300 Subject: [PATCH 3/3] remove marker for the first message of the conversation --- .../conversation-messages/conversation-messages.component.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.ts b/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.ts index 4efa09c58b76..de290b4809d2 100644 --- a/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.ts +++ b/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.ts @@ -173,6 +173,10 @@ export class ConversationMessagesComponent implements OnInit, AfterViewInit, OnD const postIndexInGroup = currentGroup.posts.indexOf(post); if (!firstUnreadFound && postIndexInGroup === groupMessageCount - remainingUnread) { + if (groupIndex === 0 && postIndexInGroup === 0) { + remainingUnread--; + return false; + } firstUnreadFound = true; return true; }