Communication: Add unread message notification icon to sidebar accord…

…ion (#9737)
ls1intum · Nov 15, 2024 · e3f1c92 · e3f1c92
1 parent c0e7879
commit e3f1c92
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 5 deletions.
diff --git a/src/main/webapp/app/overview/course-overview.component.html b/src/main/webapp/app/overview/course-overview.component.html
@@ -259,7 +259,7 @@
         [id]="sidebarItem.testId ?? ''"
         [ngClass]="{
             'guided-tour': sidebarItem.guidedTour,
-            newMessage: !communicationRouteLoaded && hasUnreadMessages && sidebarItem.title === 'Communication',
+            newMessage: hasUnreadMessages && sidebarItem.title === 'Communication',
             collapsed: isNavbarCollapsed,
         }"
         jhiOrionFilter

diff --git a/src/main/webapp/app/shared/sidebar/sidebar-accordion/sidebar-accordion.component.html b/src/main/webapp/app/shared/sidebar/sidebar-accordion/sidebar-accordion.component.html
@@ -14,6 +14,9 @@
                     ({{ (groupedData[groupKey].entityData | searchFilter: ['title', 'type'] : searchValue)?.length }})
                 </div>
                 <div class="icon-container pe-3">
+                    @if (totalUnreadMessagesPerGroup[groupKey] > 0 && collapseState[groupKey]) {
+                        <span class="unread-count me-2">{{ totalUnreadMessagesPerGroup[groupKey] }}</span>
+                    }
                     <fa-icon [icon]="faChevronRight" class="rotate-icon chevron-position" [class.rotated]="!collapseState[groupKey]" />
                 </div>
             </div>

diff --git a/src/main/webapp/app/shared/sidebar/sidebar-accordion/sidebar-accordion.component.scss b/src/main/webapp/app/shared/sidebar/sidebar-accordion/sidebar-accordion.component.scss
@@ -5,3 +5,22 @@
 hr {
     border-top-color: var(--overview-light-border-color);
 }
+
+.unread-count {
+    background-color: var(--bs-primary);
+    color: var(--bs-white);
+    border-radius: 50%;
+    font-size: 0.6rem;
+    width: 1.1rem;
+    height: 1.1rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.icon-container {
+    display: flex;
+    align-items: center;
+}
diff --git a/src/main/webapp/app/shared/sidebar/sidebar-accordion/sidebar-accordion.component.ts b/src/main/webapp/app/shared/sidebar/sidebar-accordion/sidebar-accordion.component.ts
@@ -27,6 +27,7 @@ export class SidebarAccordionComponent implements OnChanges, OnInit {
 
     readonly faChevronRight = faChevronRight;
     readonly faFile = faFile;
+    totalUnreadMessagesPerGroup: { [key: string]: number } = {};
 
     ngOnInit() {
         this.expandGroupWithSelectedItem();
@@ -39,6 +40,7 @@ export class SidebarAccordionComponent implements OnChanges, OnInit {
         } else {
             this.setStoredCollapseState();
         }
+        this.calculateUnreadMessagesOfGroup();
     }
 
     setStoredCollapseState() {
@@ -67,6 +69,19 @@ export class SidebarAccordionComponent implements OnChanges, OnInit {
         }
     }
 
+    calculateUnreadMessagesOfGroup(): void {
+        if (!this.groupedData) {
+            this.totalUnreadMessagesPerGroup = {};
+            return;
+        }
+
+        Object.keys(this.groupedData).forEach((groupKey) => {
+            this.totalUnreadMessagesPerGroup[groupKey] = this.groupedData[groupKey].entityData
+                .filter((item: SidebarCardElement) => item.conversation?.unreadMessagesCount)
+                .reduce((sum, item) => sum + (item.conversation?.unreadMessagesCount || 0), 0);
+        });
+    }
+
     toggleGroupCategoryCollapse(groupCategoryKey: string) {
         this.collapseState[groupCategoryKey] = !this.collapseState[groupCategoryKey];
         localStorage.setItem('sidebar.accordion.collapseState.' + this.storageId + '.byCourse.' + this.courseId, JSON.stringify(this.collapseState));

diff --git a/src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.scss b/src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.scss
@@ -12,6 +12,7 @@
     border-radius: 50%;
     font-size: 0.6rem;
     width: 1.1rem;
+    min-width: 1.1rem;
     height: 1.1rem;
     display: flex;
     justify-content: center;

diff --git a/src/test/javascript/spec/component/shared/sidebar/sidebar-accordion.component.spec.ts b/src/test/javascript/spec/component/shared/sidebar/sidebar-accordion.component.spec.ts
@@ -39,22 +39,23 @@ describe('SidebarAccordionComponent', () => {
 
         component.groupedData = {
             current: {
-                entityData: [{ title: 'Title 1', type: 'Type A', id: 1, size: 'M' }],
+                entityData: [{ title: 'Title 1', type: 'Type A', id: 1, size: 'M', conversation: { unreadMessagesCount: 1 } }],
             },
             past: {
-                entityData: [{ title: 'Title 2', type: 'Type B', id: 2, size: 'M' }],
+                entityData: [{ title: 'Title 2', type: 'Type B', id: 2, size: 'M', conversation: { unreadMessagesCount: 0 } }],
             },
             future: {
-                entityData: [{ title: 'Title 3', type: 'Type C', id: 3, size: 'M' }],
+                entityData: [{ title: 'Title 3', type: 'Type C', id: 3, size: 'M', conversation: { unreadMessagesCount: 1 } }],
             },
             noDate: {
-                entityData: [{ title: 'Title 4', type: 'Type D', id: 4, size: 'M' }],
+                entityData: [{ title: 'Title 4', type: 'Type D', id: 4, size: 'M', conversation: { unreadMessagesCount: 0 } }],
             },
         };
         component.routeParams = { exerciseId: 3 };
         component.collapseState = { current: false, dueSoon: false, past: false, future: true, noDate: true };
         fixture.componentRef.setInput('sidebarItemAlwaysShow', { current: false, dueSoon: false, past: false, future: false, noDate: false });
         fixture.detectChanges();
+        component.calculateUnreadMessagesOfGroup();
     });
 
     afterEach(() => {
@@ -144,4 +145,11 @@ describe('SidebarAccordionComponent', () => {
         component.expandGroupWithSelectedItem();
         expect(component.collapseState['future']).toBeFalse();
     });
+
+    it('should calculate unread messages of each group correctly', () => {
+        expect(component.totalUnreadMessagesPerGroup['current']).toBe(1);
+        expect(component.totalUnreadMessagesPerGroup['past']).toBe(0);
+        expect(component.totalUnreadMessagesPerGroup['future']).toBe(1);
+        expect(component.totalUnreadMessagesPerGroup['noDate']).toBe(0);
+    });
 });