From 7d343543aa6dba45ec2ab1312bc0bad532f3ca7d Mon Sep 17 00:00:00 2001
From: Artem Suttar <artem.suttar@gmail.com>
Date: Sat, 28 May 2022 01:37:39 +0200
Subject: [PATCH 01/12] Init

---
 .../edit-progress-dashboard.component.html             | 10 +++++++++-
 .../edit-progress-dashboard.component.ts               |  2 ++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.html b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.html
index 28006ef5e1..49d3d54585 100644
--- a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.html
+++ b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.html
@@ -1,5 +1,13 @@
 <div mat-dialog-title style="display: flex">
-  <h1 i18n="Edit the progress of one or multiple tasks">Edit Progress</h1>
+  <h1>
+    <input
+      formControlName="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">
diff --git a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts
index 1a83f0e6cb..d4adf217b4 100644
--- a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts
+++ b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts
@@ -23,6 +23,7 @@ export interface EditProgressDashboardComponentData {
   styleUrls: ["./edit-progress-dashboard.component.scss"],
 })
 export class EditProgressDashboardComponent {
+  title: FormControl;
   forms: FormArray;
   currentErrorStateMatcher = new FormCurrentErrorStateMatcher();
 
@@ -30,6 +31,7 @@ export class EditProgressDashboardComponent {
     @Inject(MAT_DIALOG_DATA) public data: EditProgressDashboardComponentData,
     private fb: FormBuilder
   ) {
+    this.title = new FormControl("");
     this.forms = fb.array(data.parts.map((part) => this.formGroup(part)));
   }
 

From 1e8fb033cd858e52a2bea365256003a596a96300 Mon Sep 17 00:00:00 2001
From: Artem Suttar <artem.suttar@gmail.com>
Date: Thu, 9 Jun 2022 20:27:46 +0200
Subject: [PATCH 02/12] status: not done

---
 .../edit-progress-dashboard.component.ts           | 14 ++++++++++----
 .../progress-dashboard.component.ts                |  1 +
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts
index d4adf217b4..dee9021f41 100644
--- a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts
+++ b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts
@@ -14,6 +14,7 @@ import {
 import { ErrorStateMatcher } from "@angular/material/core";
 
 export interface EditProgressDashboardComponentData {
+  title: ProgressDashboardPart;
   parts: ProgressDashboardPart[];
 }
 
@@ -23,16 +24,21 @@ export interface EditProgressDashboardComponentData {
   styleUrls: ["./edit-progress-dashboard.component.scss"],
 })
 export class EditProgressDashboardComponent {
-  title: FormControl;
-  forms: FormArray;
+  data: FormGroup
+  'title: FormControl;
+  'forms: FormArray;
   currentErrorStateMatcher = new FormCurrentErrorStateMatcher();
 
   constructor(
     @Inject(MAT_DIALOG_DATA) public data: EditProgressDashboardComponentData,
     private fb: FormBuilder
   ) {
-    this.title = new FormControl("");
-    this.forms = fb.array(data.parts.map((part) => this.formGroup(part)));
+    this.data = this.fb.group({
+      title: "",
+      forms: fb.array(data.parts.map((part) => this.formGroup(part)))
+    })
+    'this.title = fb.group({})
+    'this.forms = fb.array(data.parts.map((part) => this.formGroup(part)));
   }
 
   formGroup(part: ProgressDashboardPart): FormGroup {
diff --git a/src/app/features/progress-dashboard-widget/progress-dashboard/progress-dashboard.component.ts b/src/app/features/progress-dashboard-widget/progress-dashboard/progress-dashboard.component.ts
index c76d4039dc..cbc9cab1e8 100644
--- a/src/app/features/progress-dashboard-widget/progress-dashboard/progress-dashboard.component.ts
+++ b/src/app/features/progress-dashboard-widget/progress-dashboard/progress-dashboard.component.ts
@@ -66,6 +66,7 @@ export class ProgressDashboardComponent
       .afterClosed()
       .subscribe(async (next) => {
         if (next) {
+          console.warn(this.data)
           this.data.parts = next;
           await this.save();
         }

From bd0074399cfbf9985b00ec297e56a5a9939239b1 Mon Sep 17 00:00:00 2001
From: Artem Suttar <artem.suttar@gmail.com>
Date: Thu, 16 Jun 2022 20:06:26 +0200
Subject: [PATCH 03/12] Fix title of Progress Dashboard widget

Delete EditProgressDashboardComponentData from
edit-progress-dashboard.component.ts
---
 .../edit-progress-dashboard.component.html    |  8 ++---
 .../edit-progress-dashboard.component.ts      | 36 +++++++++----------
 .../progress-dashboard.component.ts           |  3 +-
 3 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.html b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.html
index 49d3d54585..ef4934f439 100644
--- a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.html
+++ b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.html
@@ -1,7 +1,7 @@
 <div mat-dialog-title style="display: flex">
   <h1>
     <input
-      formControlName="title"
+      [formControl]="title"
       matInput
       type="text"
       i18n-placeholder="Title Progress|Edit the progress of one or multiple tasks"
@@ -11,7 +11,7 @@ <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"
@@ -100,8 +100,8 @@ <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>
diff --git a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts
index dee9021f41..6c06fc05f5 100644
--- a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts
+++ b/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,32 +16,27 @@ import {
 } from "@angular/forms";
 import { ErrorStateMatcher } from "@angular/material/core";
 
-export interface EditProgressDashboardComponentData {
-  title: ProgressDashboardPart;
-  parts: ProgressDashboardPart[];
-}
-
 @Component({
   selector: "app-edit-progress-dashboard",
   templateUrl: "./edit-progress-dashboard.component.html",
   styleUrls: ["./edit-progress-dashboard.component.scss"],
 })
 export class EditProgressDashboardComponent {
-  data: FormGroup
-  'title: FormControl;
-  '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.data = this.fb.group({
-      title: "",
-      forms: fb.array(data.parts.map((part) => this.formGroup(part)))
-    })
-    'this.title = fb.group({})
-    '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 {
@@ -78,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);
   }
 }
 
diff --git a/src/app/features/progress-dashboard-widget/progress-dashboard/progress-dashboard.component.ts b/src/app/features/progress-dashboard-widget/progress-dashboard/progress-dashboard.component.ts
index cbc9cab1e8..2aa23a43d4 100644
--- a/src/app/features/progress-dashboard-widget/progress-dashboard/progress-dashboard.component.ts
+++ b/src/app/features/progress-dashboard-widget/progress-dashboard/progress-dashboard.component.ts
@@ -66,8 +66,7 @@ export class ProgressDashboardComponent
       .afterClosed()
       .subscribe(async (next) => {
         if (next) {
-          console.warn(this.data)
-          this.data.parts = next;
+          Object.assign(this.data, next);
           await this.save();
         }
       });

From 1efb90e5ff90b91e8dfa81dfcb4b9c5bb89e3a34 Mon Sep 17 00:00:00 2001
From: Artem Suttar <artem.suttar@gmail.com>
Date: Thu, 23 Jun 2022 20:03:09 +0200
Subject: [PATCH 04/12] Fix Title make visually more editable

Add mat-form-field with class title-field. At .title-field width: 100%
---
 .../edit-progress-dashboard.component.html    | 20 ++++++++++---------
 .../edit-progress-dashboard.component.scss    |  5 +++++
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.html b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.html
index ef4934f439..898e4a22a4 100644
--- a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.html
+++ b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.html
@@ -1,13 +1,15 @@
 <div mat-dialog-title style="display: flex">
-  <h1>
-    <input
-      [formControl]="title"
-      matInput
-      type="text"
-      i18n-placeholder="Title Progress|Edit the progress of one or multiple tasks"
-      placeholder="Title"
-    />
-  </h1>
+  <mat-form-field class = "title-field">
+    <h1>
+      <input
+        [formControl]="title"
+        matInput
+        type="text"
+        i18n-placeholder="Title Progress|Edit the progress of one or multiple tasks"
+        placeholder="Title"
+      />
+    </h1>
+  </mat-form-field>
 </div>
 
 <mat-dialog-content class="dialog-content">
diff --git a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.scss b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.scss
index d348085cf6..14adb4e43c 100644
--- a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.scss
+++ b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.scss
@@ -18,6 +18,11 @@
  margin-bottom: 12px;
 }
 
+.title-field {
+  width: 100%;
+  min-width: 0;
+}
+
 .header-field {
   grid-area: header;
   min-width: 0;

From 31087a686779f313e542ad284ad91b483310a572 Mon Sep 17 00:00:00 2001
From: Artem Suttar <artem.suttar@gmail.com>
Date: Thu, 23 Jun 2022 21:37:17 +0200
Subject: [PATCH 05/12] Fix unit test

Delete <h1> from title, add font-size: 32px
Fix unit test. Do not added new cases
---
 .../edit-progress-dashboard.component.html          |  2 --
 .../edit-progress-dashboard.component.scss          |  3 +++
 .../edit-progress-dashboard.component.spec.ts       | 13 +++++++------
 .../edit-progress-dashboard.component.ts            |  5 +++++
 .../progress-dashboard.component.ts                 |  1 +
 5 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.html b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.html
index 898e4a22a4..82ec1d1403 100644
--- a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.html
+++ b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.html
@@ -1,6 +1,5 @@
 <div mat-dialog-title style="display: flex">
   <mat-form-field class = "title-field">
-    <h1>
       <input
         [formControl]="title"
         matInput
@@ -8,7 +7,6 @@ <h1>
         i18n-placeholder="Title Progress|Edit the progress of one or multiple tasks"
         placeholder="Title"
       />
-    </h1>
   </mat-form-field>
 </div>
 
diff --git a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.scss b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.scss
index 14adb4e43c..b80d92adcf 100644
--- a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.scss
+++ b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.scss
@@ -19,6 +19,9 @@
 }
 
 .title-field {
+  input{
+    font-size: 32px;
+  }
   width: 100%;
   min-width: 0;
 }
diff --git a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.spec.ts b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.spec.ts
index 2a6874a732..1677288bfe 100644
--- a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.spec.ts
+++ b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.spec.ts
@@ -12,6 +12,7 @@ describe("EditProgressDashboardComponent", () => {
   let fixture: ComponentFixture<EditProgressDashboardComponent>;
 
   const mockDialogData: EditProgressDashboardComponentData = {
+    title: "qwe",
     parts: [
       {
         label: "foo",
@@ -46,7 +47,7 @@ describe("EditProgressDashboardComponent", () => {
   });
 
   function getGroup(index: number): FormGroup {
-    return component.forms.at(index) as FormGroup;
+    return component.parts.at(index) as FormGroup;
   }
 
   beforeEach(() => {
@@ -60,19 +61,19 @@ describe("EditProgressDashboardComponent", () => {
   });
 
   it("should contain the initial state from the data", () => {
-    expect(component.forms).toHaveValue(mockDialogData.parts);
-    expect(component.forms).toBeValidForm();
+    expect(component.parts).toHaveValue(mockDialogData.parts);
+    expect(component.parts).toBeValidForm();
   });
 
   it("should append a new part", () => {
     component.addPart();
-    expect(component.forms).toHaveSize(4);
+    expect(component.parts).toHaveSize(4);
   });
 
   it("should delete a part", () => {
     component.removePart(1);
-    expect(component.forms).toHaveSize(2);
-    expect(component.forms).toHaveValue([
+    expect(component.parts).toHaveSize(2);
+    expect(component.parts).toHaveValue([
       mockDialogData.parts[0],
       mockDialogData.parts[2],
     ]);
diff --git a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts
index 6c06fc05f5..8de2ffe4fa 100644
--- a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts
+++ b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts
@@ -16,6 +16,11 @@ import {
 } from "@angular/forms";
 import { ErrorStateMatcher } from "@angular/material/core";
 
+export interface EditProgressDashboardComponentData {
+  title: string;
+  parts: ProgressDashboardPart[];
+}
+
 @Component({
   selector: "app-edit-progress-dashboard",
   templateUrl: "./edit-progress-dashboard.component.html",
diff --git a/src/app/features/progress-dashboard-widget/progress-dashboard/progress-dashboard.component.ts b/src/app/features/progress-dashboard-widget/progress-dashboard/progress-dashboard.component.ts
index dda0d54fb9..7e2fdd69a9 100644
--- a/src/app/features/progress-dashboard-widget/progress-dashboard/progress-dashboard.component.ts
+++ b/src/app/features/progress-dashboard-widget/progress-dashboard/progress-dashboard.component.ts
@@ -69,6 +69,7 @@ export class ProgressDashboardComponent
       .afterClosed()
       .subscribe(async (next) => {
         if (next) {
+          console.log(next)
           Object.assign(this.data, next);
           await this.save();
         }

From 043fde3d59ee026020f38a676a7ae10d038831c5 Mon Sep 17 00:00:00 2001
From: Artem Suttar <artem.suttar@gmail.com>
Date: Thu, 30 Jun 2022 20:00:23 +0200
Subject: [PATCH 06/12] Fix unit tests

Add new test step for "title"
---
 .../edit-progress-dashboard.component.spec.ts            | 9 +++++++++
 .../progress-dashboard/progress-dashboard.component.ts   | 1 -
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.spec.ts b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.spec.ts
index 1677288bfe..4c5d55368b 100644
--- a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.spec.ts
+++ b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.spec.ts
@@ -63,6 +63,15 @@ describe("EditProgressDashboardComponent", () => {
   it("should contain the initial state from the data", () => {
     expect(component.parts).toHaveValue(mockDialogData.parts);
     expect(component.parts).toBeValidForm();
+
+    expect(component.title).toHaveValue(mockDialogData.title);
+    expect(component.title).toBeValidForm();
+  });
+
+  it("should mark form as valid when title is empty", () => {
+    component.title.setValue("");
+    expect(component.title).toHaveValue("");
+    expect(component.title).toBeValidForm();
   });
 
   it("should append a new part", () => {
diff --git a/src/app/features/progress-dashboard-widget/progress-dashboard/progress-dashboard.component.ts b/src/app/features/progress-dashboard-widget/progress-dashboard/progress-dashboard.component.ts
index 7e2fdd69a9..dda0d54fb9 100644
--- a/src/app/features/progress-dashboard-widget/progress-dashboard/progress-dashboard.component.ts
+++ b/src/app/features/progress-dashboard-widget/progress-dashboard/progress-dashboard.component.ts
@@ -69,7 +69,6 @@ export class ProgressDashboardComponent
       .afterClosed()
       .subscribe(async (next) => {
         if (next) {
-          console.log(next)
           Object.assign(this.data, next);
           await this.save();
         }

From ffdf5da6ab1ef9a70baa3895092b74b84cb3013e Mon Sep 17 00:00:00 2001
From: Artem Suttar <artem.suttar@gmail.com>
Date: Thu, 15 Sep 2022 21:01:58 +0200
Subject: [PATCH 07/12] Fix Title is required

Add <mat-error>; Delete get tooltipOnSave()
---
 .../edit-progress-dashboard.component.html             | 10 ++++++++--
 .../edit-progress-dashboard.component.spec.ts          |  6 ++++--
 .../edit-progress-dashboard.component.ts               | 10 ++--------
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.html b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.html
index 82ec1d1403..62c47c3a4d 100644
--- a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.html
+++ b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.html
@@ -7,6 +7,9 @@
         i18n-placeholder="Title Progress|Edit the progress of one or multiple tasks"
         placeholder="Title"
       />
+      <mat-error *ngIf="title.hasError('required')" i18n>
+        This field is required
+      </mat-error>
   </mat-form-field>
 </div>
 
@@ -20,6 +23,9 @@
         i18n-placeholder="Process Label|The label of a process or task"
         placeholder="Task"
       />
+      <mat-error *ngIf="control.hasError('required','label')" i18n>
+        This field is required
+      </mat-error>
     </mat-form-field>
 
     <button
@@ -101,9 +107,9 @@
     <button
       mat-stroked-button
       [mat-dialog-close]="outputData.value"
-      [disabled]="!parts.valid"
+      [disabled]="!parts.valid || !title.valid"
     >
-      <span [matTooltip]="tooltipOnSave" i18n>Save</span>
+      <span matTooltip="Fix the errors to save the form" [matTooltipDisabled]="outputData.valid" i18n-matTooltip="Shown when there are errors that prevent saving" i18n>Save</span>
     </button>
   <button mat-stroked-button mat-dialog-close i18n>Cancel</button>
 </mat-dialog-actions>
diff --git a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.spec.ts b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.spec.ts
index 4c5d55368b..97ab2d2f71 100644
--- a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.spec.ts
+++ b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.spec.ts
@@ -68,10 +68,12 @@ describe("EditProgressDashboardComponent", () => {
     expect(component.title).toBeValidForm();
   });
 
-  it("should mark form as valid when title is empty", () => {
+  it("should mark form as invalid when title is empty", () => {
     component.title.setValue("");
     expect(component.title).toHaveValue("");
-    expect(component.title).toBeValidForm();
+    expect(component.title).toContainFormError("required");
+
+    expect(component.title).not.toBeValidForm();
   });
 
   it("should append a new part", () => {
diff --git a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts
index 8de2ffe4fa..3f584f70b3 100644
--- a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts
+++ b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts
@@ -36,7 +36,7 @@ export class EditProgressDashboardComponent {
     @Inject(MAT_DIALOG_DATA) public data: ProgressDashboardConfig,
     private fb: FormBuilder
   ) {
-    this.title = new FormControl(data.title);
+    this.title = new FormControl(data.title, [Validators.required]);
     this.parts = fb.array(data.parts.map((part) => this.formGroup(part)));
     this.outputData = new FormGroup({
       title: this.title,
@@ -47,7 +47,7 @@ export class EditProgressDashboardComponent {
   formGroup(part: ProgressDashboardPart): FormGroup {
     return this.fb.group(
       {
-        label: this.fb.control(part.label),
+        label: this.fb.control(part.label, [Validators.required]),
         currentValue: this.fb.control(part.currentValue, [
           Validators.required,
           Validators.min(0),
@@ -84,12 +84,6 @@ export class EditProgressDashboardComponent {
     this.parts.push(this.formGroup(newPart));
   }
 
-  get tooltipOnSave(): string {
-    return this.parts.valid
-      ? ""
-      : $localize`:Shown when there are errors that prevent saving:Fix the errors to save the form`;
-  }
-
   removePart(index: number) {
     this.parts.removeAt(index);
   }

From 6b5fd6f2ef51426bf61ec5c4037467d7c0dd5a17 Mon Sep 17 00:00:00 2001
From: Artem Suttar <artem.suttar@gmail.com>
Date: Thu, 22 Sep 2022 19:49:40 +0200
Subject: [PATCH 08/12] merged with master

---
 package-lock.json | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3a17371a3d..5fc2bafc7a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36641,7 +36641,7 @@
         "ts-loader": "^8.0.14",
         "tsconfig-paths-webpack-plugin": "^3.3.0",
         "util-deprecate": "^1.0.2",
-        "webpack": ">=4.0.0 <6.0.0"
+        "webpack": "5.74.0"
       },
       "dependencies": {
         "@types/react": {
@@ -36852,7 +36852,7 @@
         "ts-dedent": "^2.0.0",
         "url-loader": "^4.1.1",
         "util-deprecate": "^1.0.2",
-        "webpack": "4",
+        "webpack": "5.74.0",
         "webpack-dev-middleware": "^3.7.3",
         "webpack-filter-warnings-plugin": "^1.2.1",
         "webpack-hot-middleware": "^2.25.1",
@@ -37587,7 +37587,7 @@
         "terser-webpack-plugin": "^5.0.3",
         "ts-dedent": "^2.0.0",
         "util-deprecate": "^1.0.2",
-        "webpack": "^5.9.0",
+        "webpack": "5.74.0",
         "webpack-dev-middleware": "^4.1.0",
         "webpack-hot-middleware": "^2.25.1",
         "webpack-virtual-modules": "^0.4.1"
@@ -38007,7 +38007,7 @@
         "telejson": "^6.0.8",
         "ts-dedent": "^2.0.0",
         "util-deprecate": "^1.0.2",
-        "webpack": "4"
+        "webpack": "5.74.0"
       },
       "dependencies": {
         "@babel/helper-define-polyfill-provider": {
@@ -38267,7 +38267,7 @@
         "ts-dedent": "^2.0.0",
         "util-deprecate": "^1.0.2",
         "watchpack": "^2.2.0",
-        "webpack": "4",
+        "webpack": "5.74.0",
         "ws": "^8.2.3",
         "x-default-browser": "^0.4.0"
       },
@@ -38452,7 +38452,7 @@
         "ts-dedent": "^2.0.0",
         "url-loader": "^4.1.1",
         "util-deprecate": "^1.0.2",
-        "webpack": "4",
+        "webpack": "5.74.0",
         "webpack-dev-middleware": "^3.7.3",
         "webpack-virtual-modules": "^0.2.2"
       },
@@ -39199,7 +39199,7 @@
         "terser-webpack-plugin": "^5.0.3",
         "ts-dedent": "^2.0.0",
         "util-deprecate": "^1.0.2",
-        "webpack": "^5.9.0",
+        "webpack": "5.74.0",
         "webpack-dev-middleware": "^4.1.0",
         "webpack-virtual-modules": "^0.4.1"
       },

From dbbfde901e90abc62b1fceb94a47505fb27fe31e Mon Sep 17 00:00:00 2001
From: Simon <simon@aam-digital.com>
Date: Fri, 23 Sep 2022 10:52:21 +0200
Subject: [PATCH 09/12] cleaning up component

---
 .../edit-progress-dashboard.component.ts      | 24 +++++++++----------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts
index 3f584f70b3..1415ceb9a2 100644
--- a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts
+++ b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts
@@ -27,24 +27,22 @@ export interface EditProgressDashboardComponentData {
   styleUrls: ["./edit-progress-dashboard.component.scss"],
 })
 export class EditProgressDashboardComponent {
-  outputData: FormGroup;
-  title: FormControl;
-  parts: FormArray;
+  title = new FormControl(this.data.title, [Validators.required]);
+  parts = this.fb.array(
+    this.data.parts.map((part) => this.createPartForm(part))
+  );
+  outputData = new FormGroup({
+    title: this.title,
+    parts: this.parts,
+  });
   currentErrorStateMatcher = new FormCurrentErrorStateMatcher();
 
   constructor(
     @Inject(MAT_DIALOG_DATA) public data: ProgressDashboardConfig,
     private fb: FormBuilder
-  ) {
-    this.title = new FormControl(data.title, [Validators.required]);
-    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 {
+  createPartForm(part: ProgressDashboardPart) {
     return this.fb.group(
       {
         label: this.fb.control(part.label, [Validators.required]),
@@ -81,7 +79,7 @@ export class EditProgressDashboardComponent {
       currentValue: 1,
       targetValue: 10,
     };
-    this.parts.push(this.formGroup(newPart));
+    this.parts.push(this.createPartForm(newPart));
   }
 
   removePart(index: number) {

From 6b2fd6589a40a2f736cd4d0e5b9caa56fbe67df0 Mon Sep 17 00:00:00 2001
From: Simon <simon@aam-digital.com>
Date: Fri, 23 Sep 2022 13:29:28 +0200
Subject: [PATCH 10/12] added form type

---
 .../edit-progress-dashboard.component.ts                  | 8 +++++---
 .../progress-dashboard/progress-dashboard-config.ts       | 5 +++++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts
index 1415ceb9a2..8312f09e95 100644
--- a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts
+++ b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts
@@ -3,9 +3,9 @@ import { MAT_DIALOG_DATA } from "@angular/material/dialog";
 import {
   ProgressDashboardPart,
   ProgressDashboardConfig,
+  ObjectForm,
 } from "../progress-dashboard/progress-dashboard-config";
 import {
-  FormArray,
   FormBuilder,
   FormControl,
   FormGroup,
@@ -38,7 +38,7 @@ export class EditProgressDashboardComponent {
   currentErrorStateMatcher = new FormCurrentErrorStateMatcher();
 
   constructor(
-    @Inject(MAT_DIALOG_DATA) public data: ProgressDashboardConfig,
+    @Inject(MAT_DIALOG_DATA) private data: ProgressDashboardConfig,
     private fb: FormBuilder
   ) {}
 
@@ -61,7 +61,9 @@ export class EditProgressDashboardComponent {
     );
   }
 
-  currentLessThanTarget(control: FormGroup): ValidationErrors | null {
+  currentLessThanTarget(
+    control: ObjectForm<ProgressDashboardPart>
+  ): ValidationErrors | null {
     const current = control.get("currentValue");
     const target = control.get("targetValue");
     if (current.value > target.value) {
diff --git a/src/app/features/progress-dashboard-widget/progress-dashboard/progress-dashboard-config.ts b/src/app/features/progress-dashboard-widget/progress-dashboard/progress-dashboard-config.ts
index f292499c18..5f29a321fb 100644
--- a/src/app/features/progress-dashboard-widget/progress-dashboard/progress-dashboard-config.ts
+++ b/src/app/features/progress-dashboard-widget/progress-dashboard/progress-dashboard-config.ts
@@ -18,6 +18,7 @@
 import { Entity } from "../../../core/entity/model/entity";
 import { DatabaseEntity } from "../../../core/entity/database-entity.decorator";
 import { DatabaseField } from "../../../core/entity/database-field.decorator";
+import { FormControl, FormGroup } from "@angular/forms";
 
 @DatabaseEntity("ProgressDashboardConfig")
 export class ProgressDashboardConfig extends Entity {
@@ -37,6 +38,10 @@ export class ProgressDashboardConfig extends Entity {
   }
 }
 
+export type ObjectForm<T> = FormGroup<{
+  [Key in keyof T]: FormControl<T[Key]>;
+}>;
+
 export interface ProgressDashboardPart {
   label: string;
   currentValue: number;

From b504c1d89bbee9bfcf71771144202d741f44da46 Mon Sep 17 00:00:00 2001
From: Simon <simon@aam-digital.com>
Date: Mon, 26 Sep 2022 16:35:02 +0200
Subject: [PATCH 11/12] added helper type library for typed angular forms

---
 package-lock.json                             | 19 +++++++++++++++++++
 package.json                                  |  1 +
 .../edit-progress-dashboard.component.ts      |  4 ++--
 .../progress-dashboard-config.ts              |  5 -----
 4 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5fc2bafc7a..aa449ea938 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -69,6 +69,7 @@
         "@babel/core": "^7.18.13",
         "@compodoc/compodoc": "^1.1.19",
         "@cypress/schematic": "~2.0.3",
+        "@oasisdigital/angular-typed-forms-helpers": "^1.3.2",
         "@schematics/angular": "^14.2.0",
         "@storybook/addon-actions": "^6.5.10",
         "@storybook/addon-essentials": "^6.5.10",
@@ -4732,6 +4733,15 @@
         "tao": "index.js"
       }
     },
+    "node_modules/@oasisdigital/angular-typed-forms-helpers": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@oasisdigital/angular-typed-forms-helpers/-/angular-typed-forms-helpers-1.3.2.tgz",
+      "integrity": "sha512-dLATZYh+mspxdYz9UQRXfsctSMlHNjmxUxOoHXYrdxXm7kgSXEbv/gpogtSuwQg26WQM0lNRtixoLvqO7LNwWg==",
+      "dev": true,
+      "dependencies": {
+        "@angular/forms": "^14.0.1"
+      }
+    },
     "node_modules/@parcel/watcher": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.0.4.tgz",
@@ -36217,6 +36227,15 @@
         "nx": "14.5.10"
       }
     },
+    "@oasisdigital/angular-typed-forms-helpers": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@oasisdigital/angular-typed-forms-helpers/-/angular-typed-forms-helpers-1.3.2.tgz",
+      "integrity": "sha512-dLATZYh+mspxdYz9UQRXfsctSMlHNjmxUxOoHXYrdxXm7kgSXEbv/gpogtSuwQg26WQM0lNRtixoLvqO7LNwWg==",
+      "dev": true,
+      "requires": {
+        "@angular/forms": "^14.0.1"
+      }
+    },
     "@parcel/watcher": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.0.4.tgz",
diff --git a/package.json b/package.json
index 894279f093..66149ac85a 100644
--- a/package.json
+++ b/package.json
@@ -79,6 +79,7 @@
     "@babel/core": "^7.18.13",
     "@compodoc/compodoc": "^1.1.19",
     "@cypress/schematic": "~2.0.3",
+    "@oasisdigital/angular-typed-forms-helpers": "^1.3.2",
     "@schematics/angular": "^14.2.0",
     "@storybook/addon-actions": "^6.5.10",
     "@storybook/addon-essentials": "^6.5.10",
diff --git a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts
index 8312f09e95..c58e7cceec 100644
--- a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts
+++ b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts
@@ -3,7 +3,6 @@ import { MAT_DIALOG_DATA } from "@angular/material/dialog";
 import {
   ProgressDashboardPart,
   ProgressDashboardConfig,
-  ObjectForm,
 } from "../progress-dashboard/progress-dashboard-config";
 import {
   FormBuilder,
@@ -15,6 +14,7 @@ import {
   Validators,
 } from "@angular/forms";
 import { ErrorStateMatcher } from "@angular/material/core";
+import { AngularForm } from "@oasisdigital/angular-typed-forms-helpers";
 
 export interface EditProgressDashboardComponentData {
   title: string;
@@ -62,7 +62,7 @@ export class EditProgressDashboardComponent {
   }
 
   currentLessThanTarget(
-    control: ObjectForm<ProgressDashboardPart>
+    control: AngularForm<ProgressDashboardPart>
   ): ValidationErrors | null {
     const current = control.get("currentValue");
     const target = control.get("targetValue");
diff --git a/src/app/features/progress-dashboard-widget/progress-dashboard/progress-dashboard-config.ts b/src/app/features/progress-dashboard-widget/progress-dashboard/progress-dashboard-config.ts
index 5f29a321fb..f292499c18 100644
--- a/src/app/features/progress-dashboard-widget/progress-dashboard/progress-dashboard-config.ts
+++ b/src/app/features/progress-dashboard-widget/progress-dashboard/progress-dashboard-config.ts
@@ -18,7 +18,6 @@
 import { Entity } from "../../../core/entity/model/entity";
 import { DatabaseEntity } from "../../../core/entity/database-entity.decorator";
 import { DatabaseField } from "../../../core/entity/database-field.decorator";
-import { FormControl, FormGroup } from "@angular/forms";
 
 @DatabaseEntity("ProgressDashboardConfig")
 export class ProgressDashboardConfig extends Entity {
@@ -38,10 +37,6 @@ export class ProgressDashboardConfig extends Entity {
   }
 }
 
-export type ObjectForm<T> = FormGroup<{
-  [Key in keyof T]: FormControl<T[Key]>;
-}>;
-
 export interface ProgressDashboardPart {
   label: string;
   currentValue: number;

From 2a05a19ddb21a5225650c8b4ca06276368880861 Mon Sep 17 00:00:00 2001
From: Simon <simon@aam-digital.com>
Date: Mon, 26 Sep 2022 16:49:00 +0200
Subject: [PATCH 12/12] cleaned up some code

---
 .../edit-progress-dashboard.component.html    | 40 ++++++++++---------
 .../edit-progress-dashboard.component.ts      | 19 ++++-----
 2 files changed, 28 insertions(+), 31 deletions(-)

diff --git a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.html b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.html
index 62c47c3a4d..77947a66cb 100644
--- a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.html
+++ b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.html
@@ -1,20 +1,21 @@
 <div mat-dialog-title style="display: flex">
-  <mat-form-field class = "title-field">
-      <input
-        [formControl]="title"
-        matInput
-        type="text"
-        i18n-placeholder="Title Progress|Edit the progress of one or multiple tasks"
-        placeholder="Title"
-      />
-      <mat-error *ngIf="title.hasError('required')" i18n>
-        This field is required
-      </mat-error>
+  <mat-form-field class="title-field">
+    <input
+      [formControl]="title"
+      matInput
+      type="text"
+      i18n-placeholder="Title Progress|Edit the progress of one or multiple tasks"
+      placeholder="Title"
+    />
+    <mat-error *ngIf="title.hasError('required')" i18n>
+      This field is required
+    </mat-error>
   </mat-form-field>
 </div>
 
 <mat-dialog-content class="dialog-content">
-  <div *ngFor="let control of parts.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"
@@ -104,12 +105,13 @@
   </div>
 </mat-dialog-content>
 <mat-dialog-actions>
-    <button
-      mat-stroked-button
-      [mat-dialog-close]="outputData.value"
-      [disabled]="!parts.valid || !title.valid"
-    >
-      <span matTooltip="Fix the errors to save the form" [matTooltipDisabled]="outputData.valid" i18n-matTooltip="Shown when there are errors that prevent saving" i18n>Save</span>
-    </button>
+  <button
+    mat-stroked-button
+    [mat-dialog-close]="outputData.value"
+    [disabled]="outputData.invalid"
+  >
+    <span matTooltip="Fix the errors to save the form" [matTooltipDisabled]="outputData.valid"
+          i18n-matTooltip="Shown when there are errors that prevent saving" i18n>Save</span>
+  </button>
   <button mat-stroked-button mat-dialog-close i18n>Cancel</button>
 </mat-dialog-actions>
diff --git a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts
index c58e7cceec..eb56f9ed63 100644
--- a/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts
+++ b/src/app/features/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.ts
@@ -8,8 +8,6 @@ import {
   FormBuilder,
   FormControl,
   FormGroup,
-  FormGroupDirective,
-  NgForm,
   ValidationErrors,
   Validators,
 } from "@angular/forms";
@@ -27,6 +25,13 @@ export interface EditProgressDashboardComponentData {
   styleUrls: ["./edit-progress-dashboard.component.scss"],
 })
 export class EditProgressDashboardComponent {
+  /**
+   * This marks the control as invalid when the whole form has an error
+   */
+  readonly currentErrorStateMatcher: ErrorStateMatcher = {
+    isErrorState: (control: FormControl | null) => !control?.parent?.valid,
+  };
+
   title = new FormControl(this.data.title, [Validators.required]);
   parts = this.fb.array(
     this.data.parts.map((part) => this.createPartForm(part))
@@ -35,7 +40,6 @@ export class EditProgressDashboardComponent {
     title: this.title,
     parts: this.parts,
   });
-  currentErrorStateMatcher = new FormCurrentErrorStateMatcher();
 
   constructor(
     @Inject(MAT_DIALOG_DATA) private data: ProgressDashboardConfig,
@@ -88,12 +92,3 @@ export class EditProgressDashboardComponent {
     this.parts.removeAt(index);
   }
 }
-
-class FormCurrentErrorStateMatcher implements ErrorStateMatcher {
-  isErrorState(
-    control: FormControl | null,
-    form: FormGroupDirective | NgForm | null
-  ): boolean {
-    return !control?.parent?.valid;
-  }
-}