From 3f374eac01db7a4239c016a464475eea0750eac7 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Mon, 20 Jan 2025 11:57:07 +0100
Subject: [PATCH] add pinned messages filter

---
 .../course-conversations.component.html       |  9 +-
 .../course-conversations.component.ts         | 10 +++
 .../conversation-header.component.html        | 23 +++++
 .../conversation-header.component.scss        |  8 ++
 .../conversation-header.component.ts          | 16 +++-
 .../conversation-messages.component.ts        | 45 ++++++----
 src/main/webapp/i18n/de/metis.json            |  3 +
 src/main/webapp/i18n/en/metis.json            |  3 +
 .../course-conversations.component.spec.ts    | 17 ++++
 .../conversation-header.component.spec.ts     | 20 +++++
 .../conversation-messages.component.spec.ts   | 88 ++++++++++++++++++-
 11 files changed, 222 insertions(+), 20 deletions(-)

diff --git a/src/main/webapp/app/overview/course-conversations/course-conversations.component.html b/src/main/webapp/app/overview/course-conversations/course-conversations.component.html
index 885e76e9c1fb..203d17626396 100644
--- a/src/main/webapp/app/overview/course-conversations/course-conversations.component.html
+++ b/src/main/webapp/app/overview/course-conversations/course-conversations.component.html
@@ -51,7 +51,12 @@
                 [ngClass]="{ 'content-height-dev': !isProduction || isTestServer, 'is-answer-thread-open': !!postInThread }"
             >
                 @if (activeConversation) {
-                    <jhi-conversation-header (collapseSearch)="toggleChannelSearch()" (onUpdateSidebar)="prepareSidebarData()" />
+                    <jhi-conversation-header
+                        (collapseSearch)="toggleChannelSearch()"
+                        (onUpdateSidebar)="prepareSidebarData()"
+                        (togglePinnedMessage)="togglePinnedView()"
+                        [pinnedMessageCount]="pinnedCount"
+                    />
                     <jhi-conversation-messages
                         [contentHeightDev]="!isProduction || isTestServer"
                         (openThread)="openThread($event)"
@@ -59,6 +64,8 @@
                         [searchbarCollapsed]="channelSearchCollapsed"
                         [focusPostId]="focusPostId"
                         [openThreadOnFocus]="openThreadOnFocus"
+                        [showOnlyPinned]="showOnlyPinned"
+                        (pinnedCount)="onPinnedCountChanged($event)"
                     />
                 } @else {
                     @if (selectedSavedPostStatus === null) {
diff --git a/src/main/webapp/app/overview/course-conversations/course-conversations.component.ts b/src/main/webapp/app/overview/course-conversations/course-conversations.component.ts
index 1e35a2cd7d20..e12585b5b47b 100644
--- a/src/main/webapp/app/overview/course-conversations/course-conversations.component.ts
+++ b/src/main/webapp/app/overview/course-conversations/course-conversations.component.ts
@@ -162,6 +162,8 @@ export class CourseConversationsComponent implements OnInit, OnDestroy {
     focusPostId: number | undefined = undefined;
     openThreadOnFocus = false;
     selectedSavedPostStatus: null | SavedPostStatus = null;
+    showOnlyPinned = false;
+    pinnedCount: number = 0;
 
     readonly CHANNEL_TYPE_ICON = CHANNEL_TYPE_ICON;
     readonly DEFAULT_COLLAPSE_STATE = DEFAULT_COLLAPSE_STATE;
@@ -203,6 +205,14 @@ export class CourseConversationsComponent implements OnInit, OnDestroy {
         });
     }
 
+    togglePinnedView(): void {
+        this.showOnlyPinned = !this.showOnlyPinned;
+    }
+
+    onPinnedCountChanged(newCount: number): void {
+        this.pinnedCount = newCount;
+    }
+
     private setupMetis() {
         this.metisService.setPageType(PageType.OVERVIEW);
         this.metisService.setCourse(this.course!);
diff --git a/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.html b/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.html
index 076257d4caef..450148fc7298 100644
--- a/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.html
+++ b/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.html
@@ -49,6 +49,29 @@ <h4 class="pointer d-inline-block rounded py-2 info mb-0" (click)="openConversat
             <div class="d-flex flex-wrap gap-2 py-2 px-3">
                 <div class="btn-toolbar" role="toolbar">
                     <div class="btn-group me-1" role="group">
+                        @if (pinnedMessageCount() > 0) {
+                            <div class="pinned-messages-button">
+                                <button type="button" (click)="togglePinnedMessages()" class="btn btn-sm btn-outline-secondary">
+                                    @if (showPinnedMessages) {
+                                        <jhi-emoji class="fs-x-small" emoji="x" />
+                                    } @else {
+                                        <jhi-emoji emoji="pushpin" />
+                                    }
+                                    <span>
+                                        {{
+                                            showPinnedMessages
+                                                ? ('artemisApp.metis.showing' | artemisTranslate) +
+                                                  (pinnedMessageCount() === 1
+                                                      ? ('artemisApp.metis.singlePinned' | artemisTranslate)
+                                                      : ('artemisApp.metis.multiplePinned' | artemisTranslate: { number: pinnedMessageCount() }))
+                                                : pinnedMessageCount() === 1
+                                                  ? ('artemisApp.metis.singlePinned' | artemisTranslate)
+                                                  : ('artemisApp.metis.multiplePinned' | artemisTranslate: { number: pinnedMessageCount() })
+                                        }}
+                                    </span>
+                                </button>
+                            </div>
+                        }
                         <button type="button" class="btn btn-outline-secondary btn-sm search" (click)="toggleSearchBar()">
                             <fa-icon [icon]="faSearch" />
                         </button>
diff --git a/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.scss b/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.scss
index e69de29bb2d1..2359d1b3032b 100644
--- a/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.scss
+++ b/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.scss
@@ -0,0 +1,8 @@
+.pinned-messages-button button {
+    border-radius: 1.25rem;
+    padding: 0.3rem 0.6rem;
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+    margin-right: 1rem;
+}
diff --git a/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.ts b/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.ts
index 83f7caf63f97..bd3749fc3496 100644
--- a/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.ts
+++ b/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, OnDestroy, OnInit, Output, inject } from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, OnDestroy, OnInit, Output, inject, input, output } from '@angular/core';
 import { faChevronLeft, faPeopleGroup, faSearch, faUserGroup, faUserPlus } from '@fortawesome/free-solid-svg-icons';
 import { ConversationDTO } from 'app/entities/metis/conversation/conversation.model';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
@@ -25,18 +25,22 @@ import { ChannelIconComponent } from '../../other/channel-icon/channel-icon.comp
 import { ProfilePictureComponent } from 'app/shared/profile-picture/profile-picture.component';
 import { TranslateDirective } from 'app/shared/language/translate.directive';
 import { RouterLink } from '@angular/router';
+import { EmojiComponent } from 'app/shared/metis/emoji/emoji.component';
+import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 
 @Component({
     selector: 'jhi-conversation-header',
     templateUrl: './conversation-header.component.html',
     styleUrls: ['./conversation-header.component.scss'],
-    imports: [FaIconComponent, ChannelIconComponent, ProfilePictureComponent, TranslateDirective, RouterLink],
+    imports: [FaIconComponent, ChannelIconComponent, ProfilePictureComponent, TranslateDirective, RouterLink, EmojiComponent, ArtemisTranslatePipe],
 })
 export class ConversationHeaderComponent implements OnInit, OnDestroy {
     private modalService = inject(NgbModal);
     metisConversationService = inject(MetisConversationService);
     conversationService = inject(ConversationService);
     private metisService = inject(MetisService);
+    pinnedMessageCount = input<number>(0);
+    togglePinnedMessage = output<void>();
 
     private ngUnsubscribe = new Subject<void>();
 
@@ -59,8 +63,10 @@ export class ConversationHeaderComponent implements OnInit, OnDestroy {
     faSearch = faSearch;
     faChevronLeft = faChevronLeft;
     readonly faPeopleGroup = faPeopleGroup;
+    showPinnedMessages: boolean = false;
 
     private courseSidebarService: CourseSidebarService = inject(CourseSidebarService);
+    private cdr = inject(ChangeDetectorRef);
 
     getAsGroupChat = getAsGroupChatDTO;
     getAsOneToOneChat = getAsOneToOneChatDTO;
@@ -72,6 +78,12 @@ export class ConversationHeaderComponent implements OnInit, OnDestroy {
         this.subscribeToActiveConversation();
     }
 
+    togglePinnedMessages(): void {
+        this.togglePinnedMessage.emit();
+        this.showPinnedMessages = !this.showPinnedMessages;
+        this.cdr.detectChanges();
+    }
+
     getOtherUser() {
         const conversation = getAsOneToOneChatDTO(this.activeConversation);
         if (conversation) {
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 ac94e22cf0fa..9bb031003645 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
@@ -5,16 +5,19 @@ import {
     ElementRef,
     EventEmitter,
     Input,
+    OnChanges,
     OnDestroy,
     OnInit,
     Output,
     QueryList,
+    SimpleChanges,
     ViewChild,
     ViewChildren,
     ViewEncapsulation,
     effect,
     inject,
     input,
+    output,
 } from '@angular/core';
 import { faCircleNotch, faEnvelope, faSearch, faTimes } from '@fortawesome/free-solid-svg-icons';
 import { Conversation, ConversationDTO } from 'app/entities/metis/conversation/conversation.model';
@@ -64,7 +67,7 @@ interface PostGroup {
         ArtemisTranslatePipe,
     ],
 })
-export class ConversationMessagesComponent implements OnInit, AfterViewInit, OnDestroy {
+export class ConversationMessagesComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges {
     metisService = inject(MetisService);
     metisConversationService = inject(MetisConversationService);
     cdr = inject(ChangeDetectorRef);
@@ -89,6 +92,8 @@ export class ConversationMessagesComponent implements OnInit, AfterViewInit, OnD
     @Input() course?: Course;
     @Input() searchbarCollapsed = false;
     @Input() contentHeightDev = false;
+    showOnlyPinned = input<boolean>(false);
+    pinnedCount = output<number>();
 
     readonly focusPostId = input<number | undefined>(undefined);
     readonly openThreadOnFocus = input<boolean>(false);
@@ -108,6 +113,7 @@ export class ConversationMessagesComponent implements OnInit, AfterViewInit, OnD
     elementsAtScrollPosition: PostingThreadComponent[];
     newPost?: Post;
     posts: Post[] = [];
+    allPosts: Post[] = [];
     groupedPosts: PostGroup[] = [];
     totalNumberOfPosts = 0;
     page = 1;
@@ -132,13 +138,28 @@ export class ConversationMessagesComponent implements OnInit, AfterViewInit, OnD
         });
     }
 
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes['showOnlyPinned'] && !changes['showOnlyPinned'].firstChange) {
+            this.setPosts();
+        }
+    }
+
+    applyFilter(): void {
+        if (this.showOnlyPinned()) {
+            this.posts = this.allPosts.filter((post) => post.displayPriority === DisplayPriority.PINNED);
+        } else {
+            this.posts = [...this.allPosts];
+        }
+        const pinnedCount = this.allPosts.filter((post) => post.displayPriority === DisplayPriority.PINNED).length;
+        this.pinnedCount.emit(pinnedCount);
+    }
+
     ngOnInit(): void {
         this.subscribeToSearch();
         this.subscribeToMetis();
         this.subscribeToActiveConversation();
         this.setupScrollDebounce();
         this.isMobile = this.layoutService.isBreakpointActive(CustomBreakpointNames.extraSmall);
-
         this.layoutService
             .subscribeToLayoutChanges()
             .pipe(takeUntil(this.ngUnsubscribe))
@@ -231,7 +252,8 @@ export class ConversationMessagesComponent implements OnInit, AfterViewInit, OnD
 
     private subscribeToMetis() {
         this.metisService.posts.pipe(takeUntil(this.ngUnsubscribe)).subscribe((posts: Post[]) => {
-            this.setPosts(posts);
+            this.allPosts = posts;
+            this.setPosts();
             this.isFetchingPosts = false;
         });
         this.metisService.totalNumberOfPosts.pipe(takeUntil(this.ngUnsubscribe)).subscribe((totalNumberOfPosts: number) => {
@@ -258,11 +280,7 @@ export class ConversationMessagesComponent implements OnInit, AfterViewInit, OnD
             return;
         }
 
-        // Separate pinned posts into their own group
-        const pinnedPosts = this.posts.filter((post) => post.displayPriority === DisplayPriority.PINNED);
-        const unpinnedPosts = this.posts.filter((post) => post.displayPriority !== DisplayPriority.PINNED);
-
-        const sortedPosts = unpinnedPosts.sort((a, b) => {
+        const sortedPosts = this.posts.sort((a, b) => {
             const aDate = (a as any).creationDateDayjs;
             const bDate = (b as any).creationDateDayjs;
             return aDate?.valueOf() - bDate?.valueOf();
@@ -299,21 +317,18 @@ export class ConversationMessagesComponent implements OnInit, AfterViewInit, OnD
 
         groups.push(currentGroup);
 
-        // Only add pinned group if pinned posts exist
-        if (pinnedPosts.length > 0) {
-            groups.unshift({ author: undefined, posts: pinnedPosts });
-        }
-
         this.groupedPosts = groups;
         this.cdr.detectChanges();
     }
 
-    setPosts(posts: Post[]): void {
+    setPosts(): void {
         if (this.content) {
             this.previousScrollDistanceFromTop = this.content.nativeElement.scrollHeight - this.content.nativeElement.scrollTop;
         }
 
-        this.posts = posts
+        this.applyFilter();
+
+        this.posts = this.posts
             .slice()
             .reverse()
             .map((post) => {
diff --git a/src/main/webapp/i18n/de/metis.json b/src/main/webapp/i18n/de/metis.json
index f0994d9284b1..25f6d4152872 100644
--- a/src/main/webapp/i18n/de/metis.json
+++ b/src/main/webapp/i18n/de/metis.json
@@ -11,6 +11,9 @@
             "showMultipleAnswers": "Zeige {{ number }} Antworten",
             "multipleAnswers": "{{ number }} Antworten",
             "showSingleAnswer": "Zeige 1 Antwort",
+            "showing": "Anzeigen ",
+            "singlePinned": "1 angeheftete Nachricht",
+            "multiplePinned": "{{ number }} angeheftete Nachrichten",
             "singleAnswer": "1 Antwort",
             "collapseAnswers": "Antworten einklappen",
             "savePosting": "Speichern",
diff --git a/src/main/webapp/i18n/en/metis.json b/src/main/webapp/i18n/en/metis.json
index 1c604a215ce0..9d9ba434511a 100644
--- a/src/main/webapp/i18n/en/metis.json
+++ b/src/main/webapp/i18n/en/metis.json
@@ -11,6 +11,9 @@
             "showMultipleAnswers": "Show {{ number }} replies",
             "multipleAnswers": "{{ number }} Replies",
             "showSingleAnswer": "Show 1 reply",
+            "showing": "Showing ",
+            "singlePinned": "1 pinned message",
+            "multiplePinned": "{{ number }} pinned messages",
             "singleAnswer": "1 Reply",
             "collapseAnswers": "Hide replies",
             "savePosting": "Save",
diff --git a/src/test/javascript/spec/component/overview/course-conversations/course-conversations.component.spec.ts b/src/test/javascript/spec/component/overview/course-conversations/course-conversations.component.spec.ts
index b38627b7368d..5bb3d16ddca8 100644
--- a/src/test/javascript/spec/component/overview/course-conversations/course-conversations.component.spec.ts
+++ b/src/test/javascript/spec/component/overview/course-conversations/course-conversations.component.spec.ts
@@ -657,6 +657,23 @@ examples.forEach((activeConversation) => {
                 expect(component.selectedSavedPostStatus).toBeNull();
                 expect(metisConversationService.setActiveConversation).not.toHaveBeenCalled();
             });
+
+            it('should toggle the value of showOnlyPinned', () => {
+                expect(component.showOnlyPinned).toBe(false);
+
+                component.togglePinnedView();
+                expect(component.showOnlyPinned).toBe(true);
+
+                component.togglePinnedView();
+                expect(component.showOnlyPinned).toBe(false);
+            });
+
+            it('should update pinnedCount when onPinnedCountChanged is called', () => {
+                const newPinnedCount = 5;
+
+                component.onPinnedCountChanged(newPinnedCount);
+                expect(component.pinnedCount).toBe(newPinnedCount);
+            });
         });
     });
 });
diff --git a/src/test/javascript/spec/component/overview/course-conversations/layout/conversation-header/conversation-header.component.spec.ts b/src/test/javascript/spec/component/overview/course-conversations/layout/conversation-header/conversation-header.component.spec.ts
index ae68ef156219..fd11e72fb8bf 100644
--- a/src/test/javascript/spec/component/overview/course-conversations/layout/conversation-header/conversation-header.component.spec.ts
+++ b/src/test/javascript/spec/component/overview/course-conversations/layout/conversation-header/conversation-header.component.spec.ts
@@ -151,6 +151,26 @@ examples.forEach((activeConversation) => {
             expect(component.otherUser).toEqual(oneToOneChat.members[1]);
         });
 
+        it('should toggle pinned messages visibility', fakeAsync(() => {
+            const togglePinnedMessagesSpy = jest.spyOn(component, 'togglePinnedMessages');
+
+            expect(component.showPinnedMessages).toBe(false);
+
+            component.togglePinnedMessages();
+            expect(togglePinnedMessagesSpy).toHaveBeenCalled();
+            expect(component.showPinnedMessages).toBe(true);
+
+            component.togglePinnedMessages();
+            expect(component.showPinnedMessages).toBe(false);
+        }));
+
+        it('should emit togglePinnedMessage event', fakeAsync(() => {
+            const togglePinnedMessageSpy = jest.spyOn(component.togglePinnedMessage, 'emit');
+
+            component.togglePinnedMessages();
+            expect(togglePinnedMessageSpy).toHaveBeenCalled();
+        }));
+
         if (activeConversation instanceof ChannelDTO && activeConversation.subType !== ChannelSubType.GENERAL) {
             it(
                 'should navigate to ' + activeConversation.subType,
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 ef01311da94a..e2b47eb35c68 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
@@ -234,7 +234,8 @@ examples.forEach((activeConversation) => {
                 { id: 3, creationDate: dayjs(), author: { id: 2 } } as Post,
             ];
 
-            component.setPosts(posts);
+            component.allPosts = posts;
+            component.setPosts();
 
             expect(component.posts).toHaveLength(4);
             expect(component.groupedPosts).toHaveLength(3);
@@ -261,7 +262,8 @@ examples.forEach((activeConversation) => {
                 { id: 3, creationDate: dayjs(), author: { id: 1 } } as Post,
             ];
 
-            component.setPosts(posts);
+            component.allPosts = posts;
+            component.setPosts();
 
             expect(component.groupedPosts).toHaveLength(3);
             expect(component.groupedPosts[0].posts).toHaveLength(1);
@@ -294,5 +296,87 @@ examples.forEach((activeConversation) => {
             expect(scrollToBottomSpy).toHaveBeenCalledOnce();
             expect(component.canStartSaving).toBeTrue();
         });
+
+        it('should filter posts to show only pinned posts when showOnlyPinned is true', () => {
+            const pinnedPost = { id: 1, displayPriority: 'PINNED' } as Post;
+            const regularPost = { id: 2, displayPriority: 'NONE' } as Post;
+
+            component.allPosts = [pinnedPost, regularPost];
+            jest.spyOn(component, 'showOnlyPinned').mockReturnValue(true);
+            component.applyFilter();
+
+            expect(component.posts).toEqual([pinnedPost]);
+        });
+
+        it('should show all posts when showOnlyPinned is false', () => {
+            const pinnedPost = { id: 1, displayPriority: 'PINNED' } as Post;
+            const regularPost = { id: 2, displayPriority: 'NONE' } as Post;
+
+            component.allPosts = [pinnedPost, regularPost];
+            jest.spyOn(component, 'showOnlyPinned').mockReturnValue(false);
+            component.applyFilter();
+
+            expect(component.posts).toEqual([pinnedPost, regularPost]);
+        });
+
+        it('should emit the correct pinnedCount', () => {
+            const pinnedPost1 = { id: 1, displayPriority: 'PINNED' } as Post;
+            const pinnedPost2 = { id: 2, displayPriority: 'PINNED' } as Post;
+            const regularPost = { id: 3, displayPriority: 'NONE' } as Post;
+
+            const emitSpy = jest.spyOn(component.pinnedCount, 'emit');
+            component.allPosts = [pinnedPost1, pinnedPost2, regularPost];
+            component.applyFilter();
+
+            expect(emitSpy).toHaveBeenCalledWith(2);
+        });
+
+        it('should call setPosts when showOnlyPinned input changes and it is not the first change', () => {
+            const changes = {
+                showOnlyPinned: {
+                    currentValue: true,
+                    previousValue: false,
+                    firstChange: false,
+                    isFirstChange: () => false,
+                },
+            };
+
+            const setPostsSpy = jest.spyOn(component, 'setPosts');
+            component.ngOnChanges(changes);
+
+            expect(setPostsSpy).toHaveBeenCalled();
+        });
+
+        it('should not call setPosts when showOnlyPinned input changes for the first time', () => {
+            const changes = {
+                showOnlyPinned: {
+                    currentValue: true,
+                    previousValue: undefined,
+                    firstChange: true,
+                    isFirstChange: () => true,
+                },
+            };
+
+            const setPostsSpy = jest.spyOn(component, 'setPosts');
+            component.ngOnChanges(changes);
+
+            expect(setPostsSpy).not.toHaveBeenCalled();
+        });
+
+        it('should not call setPosts when showOnlyPinned input does not change', () => {
+            const changes = {
+                unrelatedInput: {
+                    currentValue: true,
+                    previousValue: false,
+                    firstChange: false,
+                    isFirstChange: () => false,
+                },
+            };
+
+            const setPostsSpy = jest.spyOn(component, 'setPosts');
+            component.ngOnChanges(changes);
+
+            expect(setPostsSpy).not.toHaveBeenCalled();
+        });
     });
 });