refactor after reviews

ls1intum · Oct 19, 2024 · 07c4f61 · 07c4f61
1 parent 8b436cb
commit 07c4f61
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 13 deletions.
diff --git a/src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.html b/src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.html
@@ -52,7 +52,7 @@
                     class="small text-truncate me-2"
                     [title]="sidebarItem.title"
                     [class.muted]="sidebarItem.conversation?.isMuted"
-                    [ngClass]="unreadCount > 0 ? 'fw-bold' : 'fw-semibold'"
+                    [ngClass]="unreadCount() > 0 ? 'fw-bold' : 'fw-semibold'"
                 >
                     @if (sidebarItem.icon) {
                         <fa-icon [fixedWidth]="true" [icon]="sidebarItem.icon" />
@@ -64,7 +64,7 @@
                         <fa-icon [fixedWidth]="true" [icon]="sidebarItem.rightIcon" />
                     }
                 </span>
-                @if (unreadCount > 0) {
+                @if (unreadCount() > 0) {
                     <span class="unread-count">{{ formattedUnreadCount }}</span>
                 }
             </div>

diff --git a/src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.ts b/src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.ts
@@ -1,27 +1,33 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnChanges, OnInit, SimpleChanges, input } from '@angular/core';
 import { SidebarCardElement, SidebarTypes } from 'app/types/sidebar';
 
 @Component({
     selector: 'jhi-sidebar-card-item',
     templateUrl: './sidebar-card-item.component.html',
     styleUrls: ['./sidebar-card-item.component.scss', '../sidebar.component.scss'],
 })
-export class SidebarCardItemComponent implements OnInit {
+export class SidebarCardItemComponent implements OnInit, OnChanges {
     @Input() sidebarItem: SidebarCardElement;
     @Input() sidebarType?: SidebarTypes;
     @Input() groupKey?: string;
-    @Input() unreadCount: number = 0;
+    unreadCount = input<number>(0);
 
     formattedUnreadCount: string = '';
 
     ngOnInit(): void {
         this.formattedUnreadCount = this.getFormattedUnreadCount();
     }
 
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes['unreadCount']) {
+            this.formattedUnreadCount = this.getFormattedUnreadCount();
+        }
+    }
+
     private getFormattedUnreadCount(): string {
-        if (this.unreadCount > 99) {
+        if (this.unreadCount() > 99) {
             return '99+';
         }
-        return this.unreadCount?.toString() || '';
+        return this.unreadCount().toString() || '';
     }
 }
diff --git a/src/test/javascript/spec/component/shared/sidebar/sidebar-card-item.component.spec.ts b/src/test/javascript/spec/component/shared/sidebar/sidebar-card-item.component.spec.ts
@@ -3,6 +3,7 @@ import { SidebarCardItemComponent } from 'app/shared/sidebar/sidebar-card-item/s
 import { SidebarCardSize } from 'app/types/sidebar';
 import { ArtemisTestModule } from '../../../test.module';
 import { DifficultyLevel } from 'app/entities/exercise.model';
+import { input, runInInjectionContext } from '@angular/core';
 
 describe('SidebarCardItemComponent', () => {
     let component: SidebarCardItemComponent;
@@ -39,14 +40,18 @@ describe('SidebarCardItemComponent', () => {
     });
 
     it('should format unreadCount correctly when count is less than 99', () => {
-        component.unreadCount = 45;
-        component.ngOnInit();
-        expect(component.formattedUnreadCount).toBe('45');
+        runInInjectionContext(fixture.debugElement.injector, () => {
+            component.unreadCount = input<number>(45);
+            component.ngOnInit();
+            expect(component.formattedUnreadCount).toBe('45');
+        });
     });
 
     it('should format unreadCount as "99+" when count exceeds 99', () => {
-        component.unreadCount = 120;
-        component.ngOnInit();
-        expect(component.formattedUnreadCount).toBe('99+');
+        runInInjectionContext(fixture.debugElement.injector, () => {
+            component.unreadCount = input<number>(120);
+            component.ngOnInit();
+            expect(component.formattedUnreadCount).toBe('99+');
+        });
     });
 });