Communication: Improve visibility of pinned messages (#10117)

ls1intum · Jan 12, 2025 · 9c85d57 · 9c85d57
1 parent 031c0bf
commit 9c85d57
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 5 deletions.
diff --git a/...view/course-conversations/layout/conversation-messages/conversation-messages.component.ts b/...view/course-conversations/layout/conversation-messages/conversation-messages.component.ts
@@ -22,7 +22,7 @@ import { Conversation, ConversationDTO } from 'app/entities/metis/conversation/c
 import { Subject, map, takeUntil } from 'rxjs';
 import { Post } from 'app/entities/metis/post.model';
 import { Course } from 'app/entities/course.model';
-import { PageType, PostContextFilter, PostSortCriterion, SortDirection } from 'app/shared/metis/metis.util';
+import { DisplayPriority, PageType, PostContextFilter, PostSortCriterion, SortDirection } from 'app/shared/metis/metis.util';
 import { MetisService } from 'app/shared/metis/metis.service';
 import { Channel, getAsChannelDTO, isChannelDTO } from 'app/entities/metis/conversation/channel.model';
 import { GroupChat, isGroupChatDTO } from 'app/entities/metis/conversation/group-chat.model';
@@ -248,7 +248,11 @@ export class ConversationMessagesComponent implements OnInit, AfterViewInit, OnD
             return;
         }
 
-        const sortedPosts = this.posts.sort((a, b) => {
+        // 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 aDate = (a as any).creationDateDayjs;
             const bDate = (b as any).creationDateDayjs;
             return aDate?.valueOf() - bDate?.valueOf();
@@ -284,6 +288,12 @@ 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();
     }

diff --git a/src/main/webapp/app/overview/discussion-section/discussion-section.component.ts b/src/main/webapp/app/overview/discussion-section/discussion-section.component.ts
@@ -2,7 +2,7 @@ import { AfterViewInit, Component, ElementRef, OnDestroy, QueryList, ViewChild,
 import interact from 'interactjs';
 import { Exercise } from 'app/entities/exercise.model';
 import { Lecture } from 'app/entities/lecture.model';
-import { PageType, PostSortCriterion, SortDirection } from 'app/shared/metis/metis.util';
+import { DisplayPriority, PageType, PostSortCriterion, SortDirection } from 'app/shared/metis/metis.util';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { Subject, combineLatest, map, takeUntil } from 'rxjs';
 import { MetisService } from 'app/shared/metis/metis.service';
@@ -91,7 +91,18 @@ export class DiscussionSectionComponent extends CourseDiscussionDirective implem
             if (this.content) {
                 this.previousScrollDistanceFromTop = this.content.nativeElement.scrollHeight - this.content.nativeElement.scrollTop;
             }
-            this.posts = posts.slice().reverse();
+            this.posts = posts
+                .slice()
+                .sort((a, b) => {
+                    if (a.displayPriority === DisplayPriority.PINNED && b.displayPriority !== DisplayPriority.PINNED) {
+                        return 1;
+                    }
+                    if (a.displayPriority !== DisplayPriority.PINNED && b.displayPriority === DisplayPriority.PINNED) {
+                        return -1;
+                    }
+                    return 0;
+                })
+                .reverse();
             this.isLoading = false;
             if (this.currentPostId && this.posts.length > 0) {
                 this.currentPost = this.posts.find((post) => post.id === this.currentPostId);

diff --git a/src/main/webapp/app/shared/metis/posting-header/posting-header.component.html b/src/main/webapp/app/shared/metis/posting-header/posting-header.component.html
@@ -42,6 +42,9 @@
                 [ngbTooltip]="'artemisApp.metis.post.postMarkedAsResolvedTooltip' | artemisTranslate"
             />
         }
+        @if (isPostPinned()) {
+            <jhi-emoji class="fs-x-small" emoji="pushpin" />
+        }
         @if ((!!isCommunicationPage() && !lastReadDate()) || (lastReadDate() && creationDate && isAfter && !isAuthorOfPosting)) {
             <span jhiTranslate="global.generic.new" class="badge bg-secondary hideAfter5Seconds"></span>
         }

diff --git a/src/main/webapp/app/shared/metis/posting-header/posting-header.component.ts b/src/main/webapp/app/shared/metis/posting-header/posting-header.component.ts
@@ -10,7 +10,7 @@ import { MetisService } from 'app/shared/metis/metis.service';
 import { AccountService } from 'app/core/auth/account.service';
 import { tap } from 'rxjs';
 import { faUser, faUserCheck, faUserGraduate } from '@fortawesome/free-solid-svg-icons';
-import { UserRole } from 'app/shared/metis/metis.util';
+import { DisplayPriority, UserRole } from 'app/shared/metis/metis.util';
 import { AnswerPost } from 'app/entities/metis/answer-post.model';
 import { Post } from 'app/entities/metis/post.model';
 
@@ -56,6 +56,11 @@ export class PostingHeaderComponent implements OnInit, OnDestroy, OnChanges {
         return this.isPost(p) && p.resolved === true;
     });
 
+    isPostPinned = computed<boolean>(() => {
+        const p = this.posting();
+        return this.isPost(p) && p.displayPriority == DisplayPriority.PINNED;
+    });
+
     /**
      * on initialization: determines if user is author of posting by invoking the metis service,
      * determines if posting is of today and sets the today flag to be shown in the header of the posting