From e00c113bee1139310e1fd717a1ed072da2e5f5bf Mon Sep 17 00:00:00 2001
From: Developer 02 <developer02@didaloghe.onmicrosoft.com>
Date: Tue, 6 Aug 2024 15:32:51 +0200
Subject: [PATCH] feat: enhance NavMenuComponent with updateService integration

- Added MatBadgeModule for update count display.
- Integrated `updateService` to show update count in the save button.
- Added change listener to update button count dynamically.
- Improved HTML structure with updated menu and button functionalities.
---
 .../src/app/components/nav-menu/nav-menu.component.html  | 2 +-
 .../src/app/components/nav-menu/nav-menu.component.ts    | 9 ++++++++-
 .../user_manager_ui/src/app/services/update.service.ts   | 6 +++---
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/nav-menu/nav-menu.component.html b/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/nav-menu/nav-menu.component.html
index 0e0a0bd..ae61060 100644
--- a/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/nav-menu/nav-menu.component.html
+++ b/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/nav-menu/nav-menu.component.html
@@ -31,7 +31,7 @@
       <div class="navbar-collapse justify-content-end me-5">
         <a class="navbar-brand" [routerLink]="['/']">User Manager Portal</a>
         <button *ngIf="isLogedIn()" class="btn">
-          <mat-icon class="scale-pulse" (click)="updateService.executeAll()">save</mat-icon>
+          <mat-icon class="scale-pulse" [matBadge]="updateActCount === 0 ? '' : updateActCount" (click)="updateService.executeAll()">save</mat-icon>
         </button>
         <button *ngIf="isLogedIn()" class="btn">
           <mat-icon class="scale-pulse" (click)="creationService.openDialog()">add_to_photos</mat-icon>
diff --git a/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/nav-menu/nav-menu.component.ts b/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/nav-menu/nav-menu.component.ts
index 40ef122..ba9bd64 100644
--- a/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/nav-menu/nav-menu.component.ts
+++ b/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/nav-menu/nav-menu.component.ts
@@ -9,10 +9,11 @@ import { MatIconModule } from '@angular/material/icon';
 import { RefreshService } from '../../services/refresh.service';
 import { CreationService } from '../../services/creation.service';
 import { UpdateService } from '../../services/update.service';
+import {MatBadgeModule} from '@angular/material/badge';
 
 @Component({
   standalone: true,
-  imports: [RouterModule, CommonModule, ColorModeBttnComponent, MatIconModule],
+  imports: [RouterModule, CommonModule, ColorModeBttnComponent, MatIconModule, MatBadgeModule],
   selector: 'app-nav-menu',
   templateUrl: './nav-menu.component.html',
   styleUrls: ['./nav-menu.component.css']
@@ -23,8 +24,14 @@ export class NavMenuComponent {
   }
   isExpanded = false;
 
+  updateActCount: number;
+
   constructor(private dialog: MatDialog, private authService: AuthenticationService, public refreshService: RefreshService, public creationService : CreationService, public updateService: UpdateService) {
     this.authService.isAuthenticated().then().catch()
+    this.updateActCount = this.updateService.totalCount;
+    this.updateService.addChangeListener(() => {
+      this.updateActCount = updateService.totalCount;
+    })
   }
 
   get isDarkTheme(): boolean {
diff --git a/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/services/update.service.ts b/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/services/update.service.ts
index cd9cbc6..b5ed78f 100644
--- a/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/services/update.service.ts
+++ b/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/services/update.service.ts
@@ -51,9 +51,9 @@ export class UpdateService {
   }
 
   //change listeners
-  private changeListeners: Array<(updateService: UpdateService) => void> = new Array();
+  private changeListeners: Array<() => void> = new Array();
 
-  addChangeListener(action: (updateService: UpdateService) => void) {
+  addChangeListener(action: () => void) {
     this.changeListeners.push(action)
   }
 
@@ -62,6 +62,6 @@ export class UpdateService {
   }
 
   private executeAllChangeListeners() {
-    this.changeListeners.forEach(e => e(this));
+    this.changeListeners.forEach(e => e());
   }
 }
\ No newline at end of file