Dev/wip 1139 title progress

src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.html

@@ -1,9 +1,17 @@
 <div mat-dialog-title style="display: flex">
-  <h1 i18n="Edit the progress of one or multiple tasks">Edit Progress</h1>
+  <h1>
+    <input
+      [formControl]="title"
+      matInput
+      type="text"
+      i18n-placeholder="Title Progress|Edit the progress of one or multiple tasks"
+      placeholder="Title"
+    />
+  </h1>
 </div>
 
 <mat-dialog-content class="dialog-content">
-  <div *ngFor="let control of forms.controls; let index=index" class="entry-wrapper mat-elevation-z1" [formGroup]="$any(control)">
+  <div *ngFor="let control of parts.controls; let index=index" class="entry-wrapper mat-elevation-z1" [formGroup]="$any(control)">
     <mat-form-field class="header-field">
       <input
         formControlName="label"
@@ -92,8 +100,8 @@ <h1 i18n="Edit the progress of one or multiple tasks">Edit Progress</h1>
 <mat-dialog-actions>
     <button
       mat-stroked-button
-      [mat-dialog-close]="forms.value"
-      [disabled]="!forms.valid"
+      [mat-dialog-close]="outputData.value"
+      [disabled]="!parts.valid"
     >
       <span [matTooltip]="tooltipOnSave" i18n>Save</span>
     </button>

src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts

@@ -1,6 +1,9 @@
 import { Component, Inject } from "@angular/core";
 import { MAT_DIALOG_DATA } from "@angular/material/dialog";
-import { ProgressDashboardPart } from "../progress-dashboard/progress-dashboard-config";
+import {
+  ProgressDashboardPart,
+  ProgressDashboardConfig,
+} from "../progress-dashboard/progress-dashboard-config";
 import {
   FormArray,
   FormBuilder,
@@ -13,24 +16,27 @@ import {
 } from "@angular/forms";
 import { ErrorStateMatcher } from "@angular/material/core";
 
-export interface EditProgressDashboardComponentData {
-  parts: ProgressDashboardPart[];
-}
-
 @Component({
   selector: "app-edit-progress-dashboard",
   templateUrl: "./edit-progress-dashboard.component.html",
   styleUrls: ["./edit-progress-dashboard.component.scss"],
 })
 export class EditProgressDashboardComponent {
-  forms: FormArray;
+  outputData: FormGroup;
+  title: FormControl;
+  parts: FormArray;
   currentErrorStateMatcher = new FormCurrentErrorStateMatcher();
 
   constructor(
-    @Inject(MAT_DIALOG_DATA) public data: EditProgressDashboardComponentData,
+    @Inject(MAT_DIALOG_DATA) public data: ProgressDashboardConfig,
     private fb: FormBuilder
   ) {
-    this.forms = fb.array(data.parts.map((part) => this.formGroup(part)));
+    this.title = new FormControl(data.title);
+    this.parts = fb.array(data.parts.map((part) => this.formGroup(part)));
+    this.outputData = new FormGroup({
+      title: this.title,
+      parts: this.parts,
+    });
   }
 
   formGroup(part: ProgressDashboardPart): FormGroup {
@@ -70,17 +76,17 @@ export class EditProgressDashboardComponent {
       currentValue: 1,
       targetValue: 10,
     };
-    this.forms.push(this.formGroup(newPart));
+    this.parts.push(this.formGroup(newPart));
   }
 
   get tooltipOnSave(): string {
-    return this.forms.valid
+    return this.parts.valid
       ? ""
       : $localize`:Shown when there are errors that prevent saving:Fix the errors to save the form`;
   }
 
   removePart(index: number) {
-    this.forms.removeAt(index);
+    this.parts.removeAt(index);
   }
 }
 

src/app/features/progress-dashboard-widget/progress-dashboard/progress-dashboard.component.ts

@@ -66,7 +66,7 @@ export class ProgressDashboardComponent
       .afterClosed()
       .subscribe(async (next) => {
         if (next) {
-          this.data.parts = next;
+          Object.assign(this.data, next);
           await this.save();
         }
       });