From 4a74a554a133d8d87bb60daf8c7b16826f7a4841 Mon Sep 17 00:00:00 2001 From: Asli Aykan Date: Mon, 11 Nov 2024 14:35:54 +0100 Subject: [PATCH 1/5] add notification icon to sidebar accordion & fix the bug for communication tab notification icon --- .../app/overview/course-overview.component.html | 2 +- .../sidebar-accordion.component.html | 1 + .../sidebar-accordion.component.scss | 12 ++++++++++++ .../sidebar-accordion.component.ts | 16 ++++++++++++++++ .../sidebar-card-item.component.scss | 1 + .../sidebar/sidebar-accordion.component.spec.ts | 17 +++++++++++++---- 6 files changed, 44 insertions(+), 5 deletions(-) diff --git a/src/main/webapp/app/overview/course-overview.component.html b/src/main/webapp/app/overview/course-overview.component.html index 5fac3f273643..c19fe24185bd 100644 --- 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 index a3ec25c5b6d6..addd0865f477 100644 --- 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,7 @@ ({{ (groupedData[groupKey].entityData | searchFilter: ['title', 'type'] : searchValue)?.length }})
+
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 index 78788a1fb334..a457700422bb 100644 --- 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,15 @@ hr { border-top-color: var(--overview-light-border-color); } + +.newMessage { + width: 10px; + height: 10px; + position: relative; + padding-left: 0.7rem; + right: 1rem; + background-color: var(--bs-danger); + border-radius: 50%; + transform: translate(50%, -50%); + font-size: xx-small; +} 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 index 030cdbb879ec..ec56632e5d2f 100644 --- 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,10 +27,12 @@ export class SidebarAccordionComponent implements OnChanges, OnInit { readonly faChevronRight = faChevronRight; readonly faFile = faFile; + totalUnreadMessagesPerGroup: { [key: string]: number } = {}; ngOnInit() { this.expandGroupWithSelectedItem(); this.setStoredCollapseState(); + this.calculateTotalUnreadMessages(); } ngOnChanges() { @@ -39,6 +41,7 @@ export class SidebarAccordionComponent implements OnChanges, OnInit { } else { this.setStoredCollapseState(); } + this.calculateTotalUnreadMessages(); } setStoredCollapseState() { @@ -67,6 +70,19 @@ export class SidebarAccordionComponent implements OnChanges, OnInit { } } + calculateTotalUnreadMessages() { + 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 && item.conversation?.unreadMessagesCount > 0, + ).length; + }); + } + 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 index 64f4e5a920c0..8f36ede446dc 100644 --- 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 index 9e7fe5427253..6e2b8b4e6541 100644 --- 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,16 +39,16 @@ 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 }; @@ -144,4 +144,13 @@ describe('SidebarAccordionComponent', () => { component.expandGroupWithSelectedItem(); expect(component.collapseState['future']).toBeFalse(); }); + + it('should calculate total unread messages correctly', () => { + component.calculateTotalUnreadMessages(); + + expect(component.totalUnreadMessagesPerGroup['current']).toBe(1); + expect(component.totalUnreadMessagesPerGroup['past']).toBe(0); + expect(component.totalUnreadMessagesPerGroup['future']).toBe(1); + expect(component.totalUnreadMessagesPerGroup['noDate']).toBe(0); + }); }); From 4d280cf3af91591d69b8a03af56f16e4116ab7ec Mon Sep 17 00:00:00 2001 From: Asli Aykan Date: Mon, 11 Nov 2024 15:19:51 +0100 Subject: [PATCH 2/5] refactor --- .../sidebar-accordion/sidebar-accordion.component.html | 4 +++- .../sidebar/sidebar-accordion/sidebar-accordion.component.ts | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) 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 index addd0865f477..d33e34972090 100644 --- 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,7 +14,9 @@ ({{ (groupedData[groupKey].entityData | searchFilter: ['title', 'type'] : searchValue)?.length }})
- + @if (totalUnreadMessagesPerGroup[groupKey] > 0) { + + }
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 index ec56632e5d2f..5cec53510508 100644 --- 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 @@ -70,7 +70,7 @@ export class SidebarAccordionComponent implements OnChanges, OnInit { } } - calculateTotalUnreadMessages() { + calculateTotalUnreadMessages(): void { if (!this.groupedData) { this.totalUnreadMessagesPerGroup = {}; return; From f39844a28feecdbf31ba3728ff5d5652a5a1fcc4 Mon Sep 17 00:00:00 2001 From: Asli Aykan Date: Tue, 12 Nov 2024 21:57:27 +0100 Subject: [PATCH 3/5] added unread count --- .../sidebar-accordion.component.html | 2 +- .../sidebar-accordion/sidebar-accordion.component.ts | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) 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 index d33e34972090..6d88b19f6c98 100644 --- 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 @@ -15,7 +15,7 @@
@if (totalUnreadMessagesPerGroup[groupKey] > 0) { - + {{ totalUnreadMessagesPerGroup[groupKey] }} }
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 index 5cec53510508..7c2699d8436b 100644 --- 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 @@ -32,7 +32,6 @@ export class SidebarAccordionComponent implements OnChanges, OnInit { ngOnInit() { this.expandGroupWithSelectedItem(); this.setStoredCollapseState(); - this.calculateTotalUnreadMessages(); } ngOnChanges() { @@ -41,7 +40,7 @@ export class SidebarAccordionComponent implements OnChanges, OnInit { } else { this.setStoredCollapseState(); } - this.calculateTotalUnreadMessages(); + this.calculateUnreadMessages(); } setStoredCollapseState() { @@ -70,16 +69,17 @@ export class SidebarAccordionComponent implements OnChanges, OnInit { } } - calculateTotalUnreadMessages(): void { + calculateUnreadMessages(): 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 && item.conversation?.unreadMessagesCount > 0, - ).length; + // Sum the unread messages for each item in the group + this.totalUnreadMessagesPerGroup[groupKey] = this.groupedData[groupKey].entityData + .filter((item: SidebarCardElement) => item.conversation?.unreadMessagesCount) + .reduce((sum, item) => sum + (item.conversation?.unreadMessagesCount || 0), 0); }); } From 539313262208c670107226147bc08e2f9641b4c0 Mon Sep 17 00:00:00 2001 From: Asli Aykan Date: Tue, 12 Nov 2024 23:07:46 +0100 Subject: [PATCH 4/5] updated styling to match iOS --- .../sidebar-accordion.component.html | 4 +-- .../sidebar-accordion.component.scss | 25 ++++++++++++------- .../sidebar-accordion.component.ts | 5 ++-- 3 files changed, 20 insertions(+), 14 deletions(-) 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 index 6d88b19f6c98..92d7b034e785 100644 --- 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,8 +14,8 @@ ({{ (groupedData[groupKey].entityData | searchFilter: ['title', 'type'] : searchValue)?.length }})
- @if (totalUnreadMessagesPerGroup[groupKey] > 0) { - {{ totalUnreadMessagesPerGroup[groupKey] }} + @if (totalUnreadMessagesPerGroup[groupKey] > 0 && collapseState[groupKey]) { + {{ totalUnreadMessagesPerGroup[groupKey] }} }
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 index a457700422bb..61f8e82f8193 100644 --- 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 @@ -6,14 +6,21 @@ hr { border-top-color: var(--overview-light-border-color); } -.newMessage { - width: 10px; - height: 10px; - position: relative; - padding-left: 0.7rem; - right: 1rem; - background-color: var(--bs-danger); +.unread-count { + background-color: var(--bs-primary); + color: var(--bs-white); border-radius: 50%; - transform: translate(50%, -50%); - font-size: xx-small; + 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 index 7c2699d8436b..26f65e5258fa 100644 --- 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 @@ -40,7 +40,7 @@ export class SidebarAccordionComponent implements OnChanges, OnInit { } else { this.setStoredCollapseState(); } - this.calculateUnreadMessages(); + this.calculateUnreadMessagesOfGroup(); } setStoredCollapseState() { @@ -69,14 +69,13 @@ export class SidebarAccordionComponent implements OnChanges, OnInit { } } - calculateUnreadMessages(): void { + calculateUnreadMessagesOfGroup(): void { if (!this.groupedData) { this.totalUnreadMessagesPerGroup = {}; return; } Object.keys(this.groupedData).forEach((groupKey) => { - // Sum the unread messages for each item in the group this.totalUnreadMessagesPerGroup[groupKey] = this.groupedData[groupKey].entityData .filter((item: SidebarCardElement) => item.conversation?.unreadMessagesCount) .reduce((sum, item) => sum + (item.conversation?.unreadMessagesCount || 0), 0); From 22bd99d1813a570a3c11f270d7e1ed57a20c260b Mon Sep 17 00:00:00 2001 From: Asli Aykan Date: Tue, 12 Nov 2024 23:09:41 +0100 Subject: [PATCH 5/5] fix test --- .../shared/sidebar/sidebar-accordion.component.spec.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) 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 index 6e2b8b4e6541..54015cb0ff41 100644 --- 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 @@ -55,6 +55,7 @@ describe('SidebarAccordionComponent', () => { 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(() => { @@ -145,9 +146,7 @@ describe('SidebarAccordionComponent', () => { expect(component.collapseState['future']).toBeFalse(); }); - it('should calculate total unread messages correctly', () => { - component.calculateTotalUnreadMessages(); - + 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);