fix: progress dashboard shows correct overall percentage again (#2663)

fixes #2659 --------- Co-authored-by: Sebastian <[email protected]>
Aam-Digital · Nov 15, 2024 · 4c62214 · 4c62214
1 parent 31d7ffd
commit 4c62214
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 2 deletions.
diff --git a/...rd-widgets/progress-dashboard-widget/progress-dashboard/progress-dashboard.component.html b/...rd-widgets/progress-dashboard-widget/progress-dashboard/progress-dashboard.component.html
@@ -2,6 +2,7 @@
   <app-dashboard-list-widget
     icon="list"
     theme="child"
+    [title]="overallPercentage | percent: '1.0-0'"
     [subtitle]="subtitle ?? data.title"
     [explanation]="explanation"
     [entries]="data?.parts"

diff --git a/...oard-widgets/progress-dashboard-widget/progress-dashboard/progress-dashboard.component.ts b/...oard-widgets/progress-dashboard-widget/progress-dashboard/progress-dashboard.component.ts
@@ -7,7 +7,7 @@ import { EditProgressDashboardComponent } from "../edit-progress-dashboard/edit-
 import { DynamicComponent } from "../../../../core/config/dynamic-components/dynamic-component.decorator";
 import { waitForChangeTo } from "../../../../core/session/session-states/session-utils";
 import { SyncState } from "../../../../core/session/session-states/sync-state.enum";
-import { firstValueFrom } from "rxjs";
+import { filter, firstValueFrom } from "rxjs";
 import { PercentPipe } from "@angular/common";
 import { MatTableModule } from "@angular/material/table";
 import { MatProgressBarModule } from "@angular/material/progress-bar";
@@ -48,6 +48,8 @@ export class ProgressDashboardComponent
   @Input() explanation: string =
     $localize`:dashboard widget explanation: Shows the progress of different parts of project tasks. You can use this to track any kind of targets.`;
 
+  overallPercentage: number;
+
   constructor(
     private entityMapper: EntityMapperService,
     private dialog: MatDialog,
@@ -63,12 +65,26 @@ export class ProgressDashboardComponent
         .then(() => this.loadConfigFromDatabase())
         .catch(() => this.createDefaultConfig()),
     );
+
+    this.entityMapper
+      .receiveUpdates(ProgressDashboardConfig)
+      .pipe(
+        filter(
+          (entity) => entity.entity.getId(true) === this.dashboardConfigId,
+        ),
+      )
+      .subscribe((update) => this.updateConfig(update.entity));
+  }
+
+  private updateConfig(updatedConfig: ProgressDashboardConfig) {
+    this.data = updatedConfig;
+    this.overallPercentage = this.getOverallProgressPercentage();
   }
 
   private loadConfigFromDatabase() {
     return this.entityMapper
       .load(ProgressDashboardConfig, this.dashboardConfigId)
-      .then((config) => (this.data = config));
+      .then((config) => this.updateConfig(config));
   }
 
   private createDefaultConfig() {
@@ -96,4 +112,21 @@ export class ProgressDashboardComponent
         }
       });
   }
+
+  // Method to calculate the overall progress percentage
+  getOverallProgressPercentage(): number {
+    if (!this.data?.parts || this.data.parts.length === 0) {
+      return 0;
+    }
+
+    let totalCurrent = 0;
+    let totalTarget = 0;
+
+    this.data.parts.forEach((entry) => {
+      totalCurrent += entry.currentValue;
+      totalTarget += entry.targetValue;
+    });
+
+    return totalTarget ? totalCurrent / totalTarget : 0;
+  }
 }