From 8fac24d6cb3bb6dd97db30aa4c31d484b5b79fa8 Mon Sep 17 00:00:00 2001
From: Jan-Gerrit Goebel <Jan-Gerrit.Goebel@sva.de>
Date: Tue, 9 Apr 2024 14:55:54 +0200
Subject: [PATCH] Display checkmark if all tasks are successful

---
 .../task-progress.component.html              | 36 +++++++++++--------
 .../task-progress.component.scss              |  8 +++++
 .../task-progress/task-progress.component.ts  |  4 +++
 3 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/src/app/scenario/task-progress/task-progress.component.html b/src/app/scenario/task-progress/task-progress.component.html
index 33c01c4f..2514a4d2 100644
--- a/src/app/scenario/task-progress/task-progress.component.html
+++ b/src/app/scenario/task-progress/task-progress.component.html
@@ -1,18 +1,26 @@
 <div class="flex-container task-container">
-  <div class="flex-element" (click)="onClickVerify()">
-    <svg class="progress-ring" height="30" width="30">
-      <circle
-        #circle
-        class="circle"
-        stroke="var(--clr-nav-active-box-shadow-color, #54cbf2)"
-        stroke-width="3"
-        fill="var(--clr-global-hover-bg-color, #f6f6f6)"
-        r="10"
-        cx="15"
-        cy="15"
-      />
-    </svg>
-  </div>
+  <ng-container *ngIf="!allTasksSuccessful()">
+    <div class="flex-element" (click)="onClickVerify()">
+      <svg class="progress-ring" height="30" width="30">
+        <circle
+          #circle
+          class="circle"
+          stroke="var(--clr-nav-active-box-shadow-color, #54cbf2)"
+          stroke-width="3"
+          fill="var(--clr-global-hover-bg-color, #f6f6f6)"
+          r="10"
+          cx="15"
+          cy="15"
+        />
+      </svg>
+    </div>
+  </ng-container>
+  <ng-container *ngIf="allTasksSuccessful()">
+    <span class="label label-success label-task">
+      <cds-icon shape="check" height="30" width="30" inverse></cds-icon>
+    </span>
+  </ng-container>
+
   <div class="flex-element text-box">
     <div class="info-text">{{ index }} of {{ tasks }} Tasks</div>
     <div class="info-text-hover">Show more</div>
diff --git a/src/app/scenario/task-progress/task-progress.component.scss b/src/app/scenario/task-progress/task-progress.component.scss
index 8b125430..95dd8f1b 100644
--- a/src/app/scenario/task-progress/task-progress.component.scss
+++ b/src/app/scenario/task-progress/task-progress.component.scss
@@ -75,3 +75,11 @@
     color: var(--clr-btn-default-outline-hover-color, #3bb1d8);
   }
 }
+
+.label-task {
+  width: 25px;
+  height: 25px;
+  left: 2px;
+  margin-left: 5px;
+  margin-top: 2px;
+}
diff --git a/src/app/scenario/task-progress/task-progress.component.ts b/src/app/scenario/task-progress/task-progress.component.ts
index b428fada..fbb1b242 100644
--- a/src/app/scenario/task-progress/task-progress.component.ts
+++ b/src/app/scenario/task-progress/task-progress.component.ts
@@ -70,6 +70,10 @@ export class TaskProgressComponent implements AfterViewInit, OnDestroy {
       .subscribe();
   }
 
+  allTasksSuccessful(): boolean {
+    return this.tasks != 0 && this.index == this.tasks;
+  }
+
   onClickVerify() {
     this.verifyAll().subscribe();
   }