From c320659f7e55c562f3e494b244cba1e1621a58f7 Mon Sep 17 00:00:00 2001
From: Michiel Stornebrink <michielstornebrink@gmail.com>
Date: Tue, 20 Dec 2022 23:00:36 +0100
Subject: [PATCH 01/26] Add a few typescript interfaces

---
 .../interfacing/patch-replace.interface.ts     |  5 +++++
 .../interfacing/patch-response.interface.ts    | 18 ++++++++++++++++++
 .../shared/interfacing/resource.interface.ts   |  7 +++++++
 3 files changed, 30 insertions(+)
 create mode 100644 src/app/shared/interfacing/patch-replace.interface.ts
 create mode 100644 src/app/shared/interfacing/patch-response.interface.ts
 create mode 100644 src/app/shared/interfacing/resource.interface.ts

diff --git a/src/app/shared/interfacing/patch-replace.interface.ts b/src/app/shared/interfacing/patch-replace.interface.ts
new file mode 100644
index 000000000..c92c6a218
--- /dev/null
+++ b/src/app/shared/interfacing/patch-replace.interface.ts
@@ -0,0 +1,5 @@
+export interface PatchReplace {
+    op: 'replace',
+    path: string,
+    value: string | null,
+}
diff --git a/src/app/shared/interfacing/patch-response.interface.ts b/src/app/shared/interfacing/patch-response.interface.ts
new file mode 100644
index 000000000..29d5ce898
--- /dev/null
+++ b/src/app/shared/interfacing/patch-response.interface.ts
@@ -0,0 +1,18 @@
+import { PatchReplace } from "./patch-replace.interface"
+
+export interface PatchResponse<T> {
+    content: T,
+    patches: Array<PatchReplace>,
+    notifications: {
+        errors: Array<any>,
+        warnings: Array<any>,
+        infos: Array<any>,
+        successes: Array<any>,
+        invariants: Array<any>,
+        signals: Array<any>,
+    },
+    invariantRulesHold: boolean,
+    isCommitted: boolean,
+    sessionRefreshAdvice: boolean,
+    navTo: string | null,
+}
diff --git a/src/app/shared/interfacing/resource.interface.ts b/src/app/shared/interfacing/resource.interface.ts
new file mode 100644
index 000000000..7842d9905
--- /dev/null
+++ b/src/app/shared/interfacing/resource.interface.ts
@@ -0,0 +1,7 @@
+import { Observable } from "rxjs";
+import { PatchReplace } from "./patch-replace.interface";
+import { PatchResponse } from "./patch-response.interface";
+
+export interface Resource<T> {
+    patch(patches: Array<PatchReplace>): Observable<PatchResponse<T>>
+}

From d4599ff06a31180256aadc16441d5353f19ca4a4 Mon Sep 17 00:00:00 2001
From: Michiel Stornebrink <michielstornebrink@gmail.com>
Date: Tue, 20 Dec 2022 23:01:06 +0100
Subject: [PATCH 02/26] Add ReactiveFormsModule

---
 src/app/shared/shared.module.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 7f39c7ee2..b363b2e15 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 
 // Components
 import { AtomicAlphanumericComponent } from './atomic-components/atomic-alphanumeric/atomic-alphanumeric.component';
@@ -58,6 +58,7 @@ import { ButtonModule } from 'primeng/button';
   ],
   imports: [
     CommonModule,
+    ReactiveFormsModule,
     FormsModule,
     InputTextModule,
     InputSwitchModule,

From 6d1556c3101df0ac166641e12aabea525d89e31a Mon Sep 17 00:00:00 2001
From: Michiel Stornebrink <michielstornebrink@gmail.com>
Date: Tue, 20 Dec 2022 23:06:38 +0100
Subject: [PATCH 03/26] Change Alphanumeric component input field to
 FormControl field

Call patch() on value changes
---
 .../atomic-alphanumeric.component.html        | 11 ++-----
 .../atomic-alphanumeric.component.ts          | 32 +++++++++++++++++--
 2 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.html b/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.html
index 25f7d05e6..0e81efc0a 100644
--- a/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.html
+++ b/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.html
@@ -1,14 +1,7 @@
 <div *ngIf="canRead; else notReadable">
     <div class="p-inputgroup" *ngIf="canUpdate; else notUpdatable">
         <div class="w-full" *ngIf="isUni; else isNotUni">
-            <input
-                type="text"
-                class="min-w-10rem w-full"
-                pInputText
-                (blur)="changeProperty()"
-                [(ngModel)]="property"
-                [required]="isTot"
-            />
+            <input type="text" class="min-w-10rem w-full" pInputText [formControl]="value" [required]="isTot" />
         </div>
     </div>
 </div>
@@ -25,7 +18,7 @@
                     type="text"
                     class="min-w-10rem w-full"
                     pInputText
-                    [(ngModel)]="newItem"
+                    [formControl]="newItem"
                     placeholder="Add text"
                     [required]="isNewItemInputRequired()"
                 />
diff --git a/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts b/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts
index 6543dc515..d71c760bd 100644
--- a/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts
+++ b/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts
@@ -1,5 +1,8 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { BaseAtomicComponent } from '../BaseAtomicComponent.class';
+import { FormControl } from '@angular/forms';
+import { debounceTime, distinctUntilChanged, tap } from 'rxjs';
+import { Resource } from '../../interfacing/resource.interface';
 
 @Component({
   selector: 'app-atomic-alphanumeric',
@@ -7,9 +10,34 @@ import { BaseAtomicComponent } from '../BaseAtomicComponent.class';
   styleUrls: ['./atomic-alphanumeric.component.css'],
 })
 export class AtomicAlphanumericComponent extends BaseAtomicComponent<string> {
-  newItem!: string;
+  value!: FormControl<string | null>;
+  newItem: FormControl<string> = new FormControl<string>('', {nonNullable: true});
+
+  @Input()
+  resource!: Resource<any>;
+
+  @Input()
+  propertyName!: string;
 
   isNewItemInputRequired() {
     return this.isTot && this.property?.length === 0;
   }
+
+  override ngOnInit(): void {
+    super.ngOnInit();
+    this.value = new FormControl(this.requireArray(this.property)[0], {nonNullable: false});
+    this.value.valueChanges
+      .pipe(
+        debounceTime(300),
+        distinctUntilChanged(),
+        tap(x => console.log(x)),
+      )
+      .subscribe(
+        x => this.resource.patch([{
+          op: 'replace',
+          path: this.propertyName,
+          value: x,
+        }]).subscribe()
+      );
+  }
 }

From c45d8751956a10f6fae2864a859211b9a332d3b8 Mon Sep 17 00:00:00 2001
From: Michiel Stornebrink <michielstornebrink@gmail.com>
Date: Tue, 20 Dec 2022 23:07:43 +0100
Subject: [PATCH 04/26] Implement patch() for ProjectEditComponent

---
 .../project-administration/backend.service.ts |  5 ++--
 .../project-edit/project-edit.component.ts    | 28 +++++++++----------
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/app/project-administration/backend.service.ts b/src/app/project-administration/backend.service.ts
index ace8d404e..89abba96f 100644
--- a/src/app/project-administration/backend.service.ts
+++ b/src/app/project-administration/backend.service.ts
@@ -1,6 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
+import { PatchResponse } from '../shared/interfacing/patch-response.interface';
 import { ActiveProjectsInterface } from './active-projects/active-projects.interface';
 import { IBackendService } from './backend.service.interface';
 import { ListAllInterfacesInterface } from './list-all-interfaces/list-all-interfaces.interface';
@@ -32,8 +33,8 @@ export class BackendService implements IBackendService {
     return this.http.get<ListAllInterfacesInterface[]>('resource/SESSION/1/List_32_all_32_interfaces');
   }
 
-  public patchProject(id: string, data: any): Observable<ProjectInterface> {
-    return this.http.patch<ProjectInterface>(`resource/Project/${id}/New_47_edit_32_project`, data);
+  public patchProject(id: string, data: any): Observable<PatchResponse<ProjectInterface>> {
+    return this.http.patch<PatchResponse<ProjectInterface>>(`resource/Project/${id}/New_47_edit_32_project`, data);
   }
 
   public patchPerson(id: string, data: any): Observable<PersonInterface> {
diff --git a/src/app/project-administration/project-edit/project-edit.component.ts b/src/app/project-administration/project-edit/project-edit.component.ts
index 828f0e341..101d485a2 100644
--- a/src/app/project-administration/project-edit/project-edit.component.ts
+++ b/src/app/project-administration/project-edit/project-edit.component.ts
@@ -1,6 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
-import { Observable, switchMap } from 'rxjs';
+import { from, Observable, switchMap, tap } from 'rxjs';
+import { PatchReplace } from 'src/app/shared/interfacing/patch-replace.interface';
+import { PatchResponse } from 'src/app/shared/interfacing/patch-response.interface';
+import { Resource } from 'src/app/shared/interfacing/resource.interface';
 import { BackendService } from '../backend.service';
 import { ProjectInterface } from '../project/project.interface';
 
@@ -9,7 +12,7 @@ import { ProjectInterface } from '../project/project.interface';
   templateUrl: './project-edit.component.html',
   styleUrls: ['./project-edit.component.scss'],
 })
-export class ProjectEditComponent implements OnInit {
+export class ProjectEditComponent implements OnInit, Resource<ProjectInterface> {
   public data$!: Observable<ProjectInterface>;
   public projectId!: string;
 
@@ -27,17 +30,14 @@ export class ProjectEditComponent implements OnInit {
     );
   }
 
-  patchProject(property: any, path: string) {
-    let body = [
-      {
-        op: 'replace',
-        path: path,
-        value: property,
-      },
-    ];
-
-    this.service.patchProject(this.projectId, body).subscribe(() => {
-      this.data$ = this.service.getProject(this.projectId);
-    });
+  patch(patches: PatchReplace[]): Observable<PatchResponse<ProjectInterface>> {
+    return this.service.patchProject(this.projectId, patches)
+      .pipe(
+        tap(x => {
+          if (x.isCommitted) {
+            this.data$ = from([x.content])
+          }
+        }),
+      );
   }
 }

From 97764b107ffef8d3b77d7503f4f8db8ff31f3e6f Mon Sep 17 00:00:00 2001
From: Michiel Stornebrink <michielstornebrink@gmail.com>
Date: Tue, 20 Dec 2022 23:09:55 +0100
Subject: [PATCH 05/26] Test with resource and propertyName input bindings

---
 .../project-edit/project-edit.component.html                    | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/app/project-administration/project-edit/project-edit.component.html b/src/app/project-administration/project-edit/project-edit.component.html
index bb3505161..fa6f286e0 100644
--- a/src/app/project-administration/project-edit/project-edit.component.html
+++ b/src/app/project-administration/project-edit/project-edit.component.html
@@ -8,6 +8,8 @@ <h5>{{ data.Name }}</h5>
                     <label class="box-form-label">Name</label>
                     <div class="box-form-value">
                         <app-atomic-alphanumeric
+                            [resource]="this"
+                            propertyName="Name"
                             [property]="data.Name"
                             isUni
                             isTot

From 49c1d20daa3747f723174cfdf9914002aaf78113 Mon Sep 17 00:00:00 2001
From: Michiel Stornebrink <michielstornebrink@gmail.com>
Date: Tue, 20 Dec 2022 23:10:46 +0100
Subject: [PATCH 06/26] Cleanup unused propertyEvent binding

---
 .../person/person.component.html              |  4 ----
 .../project-edit/project-edit.component.html  | 21 ++-----------------
 .../BaseAtomicComponent.class.ts              | 10 +--------
 .../atomic-bigalphanumeric.component.html     |  1 -
 .../atomic-boolean.component.html             |  2 +-
 .../atomic-date/atomic-date.component.html    |  2 --
 .../atomic-datetime.component.html            |  2 --
 7 files changed, 4 insertions(+), 38 deletions(-)

diff --git a/src/app/project-administration/person/person.component.html b/src/app/project-administration/person/person.component.html
index 8799ee9db..63af801b3 100644
--- a/src/app/project-administration/person/person.component.html
+++ b/src/app/project-administration/person/person.component.html
@@ -13,7 +13,6 @@ <h5>{{ data.First_32_name }} {{ data.Last_32_name }}</h5>
                             isUni
                             isTot
                             crud="cRUd"
-                            (propertyEvent)="patchPerson($event, '/First_32_name')"
                         ></app-atomic-alphanumeric>
                     </div>
                 </div>
@@ -26,7 +25,6 @@ <h5>{{ data.First_32_name }} {{ data.Last_32_name }}</h5>
                             isUni
                             isTot
                             crud="cRUd"
-                            (propertyEvent)="patchPerson($event, '/Last_32_name')"
                         ></app-atomic-bigalphanumeric>
                     </div>
                 </div>
@@ -39,7 +37,6 @@ <h5>{{ data.First_32_name }} {{ data.Last_32_name }}</h5>
                             isUni
                             isTot
                             crud="cRUd"
-                            (propertyEvent)="patchPerson($event, '/Status')"
                         ></app-atomic-bigalphanumeric>
                     </div>
                 </div>
@@ -52,7 +49,6 @@ <h5>{{ data.First_32_name }} {{ data.Last_32_name }}</h5>
                             isUni
                             isTot
                             crud="cRUd"
-                            (propertyEvent)="patchPerson($event, '/Email')"
                         ></app-atomic-bigalphanumeric>
                     </div>
                 </div>
diff --git a/src/app/project-administration/project-edit/project-edit.component.html b/src/app/project-administration/project-edit/project-edit.component.html
index fa6f286e0..5acc17a7e 100644
--- a/src/app/project-administration/project-edit/project-edit.component.html
+++ b/src/app/project-administration/project-edit/project-edit.component.html
@@ -14,7 +14,6 @@ <h5>{{ data.Name }}</h5>
                             isUni
                             isTot
                             crud="CRUD"
-                            (propertyEvent)="patchProject($event, '/Name')"
                         ></app-atomic-alphanumeric>
                     </div>
                 </div>
@@ -26,7 +25,6 @@ <h5>{{ data.Name }}</h5>
                             isUni
                             isTot
                             crud="CRUD"
-                            (propertyEvent)="patchProject($event, '/Description')"
                         ></app-atomic-bigalphanumeric>
                     </div>
                 </div>
@@ -38,7 +36,6 @@ <h5>{{ data.Name }}</h5>
                             isUni
                             isTot
                             crud="CRUD"
-                            (propertyEvent)="patchProject($event, '/Start_32_date')"
                         ></app-atomic-date>
                     </div>
                 </div>
@@ -50,32 +47,19 @@ <h5>{{ data.Name }}</h5>
                             isUni
                             isTot
                             crud="CRUD"
-                            (propertyEvent)="patchProject($event, '/Status')"
                         ></app-atomic-alphanumeric>
                     </div>
                 </div>
                 <div class="field col-12 box-form-field">
                     <label class="box-form-label">Active</label>
                     <div class="box-form-value">
-                        <app-atomic-boolean
-                            [property]="data.Active"
-                            isUni
-                            isTot
-                            crud="CRUD"
-                            (propertyEvent)="patchProject($event, '/Active')"
-                        ></app-atomic-boolean>
+                        <app-atomic-boolean [property]="data.Active" isUni isTot crud="CRUD"></app-atomic-boolean>
                     </div>
                 </div>
                 <div class="field col-12 box-form-field">
                     <label class="box-form-label">Current PL</label>
                     <div class="box-form-value">
-                        <app-atomic-object
-                            [property]="data.Current_32_PL"
-                            isUni
-                            isTot
-                            crud="CRUD"
-                            (propertyEvent)="patchProject($event, '/Project_32_members')"
-                        ></app-atomic-object>
+                        <app-atomic-object [property]="data.Current_32_PL" isUni isTot crud="CRUD"></app-atomic-object>
                     </div>
                 </div>
                 <div class="field col-12 box-form-field">
@@ -86,7 +70,6 @@ <h5>{{ data.Name }}</h5>
                             isUni
                             isTot
                             crud="CRUD"
-                            (propertyEvent)="patchProject($event, '/Project_32_members')"
                         ></app-atomic-object>
                     </div>
                 </div>
diff --git a/src/app/shared/atomic-components/BaseAtomicComponent.class.ts b/src/app/shared/atomic-components/BaseAtomicComponent.class.ts
index ab8b4aac3..c1d7a8765 100644
--- a/src/app/shared/atomic-components/BaseAtomicComponent.class.ts
+++ b/src/app/shared/atomic-components/BaseAtomicComponent.class.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 
 @Component({
   template: '',
@@ -28,7 +28,6 @@ export abstract class BaseAtomicComponent<T> implements OnInit, OnChanges {
     return this._isTot;
   }
   @Input() crud: string = 'crud';
-  @Output() propertyEvent = new EventEmitter<T | Array<T> | null>();
 
   ngOnInit(): void {
     this.setCRUDPermissions(this.crud);
@@ -45,13 +44,6 @@ export abstract class BaseAtomicComponent<T> implements OnInit, OnChanges {
     this.setCRUDPermissions(changes['crud'].currentValue);
   }
 
-  public changeProperty(): void {
-    if (this.oldProperty == this.data) {
-      return;
-    }
-    this.propertyEvent.emit(this.data);
-  }
-
   private setCRUDPermissions(crud: string) {
     let c = crud[0];
     let r = crud[1];
diff --git a/src/app/shared/atomic-components/atomic-bigalphanumeric/atomic-bigalphanumeric.component.html b/src/app/shared/atomic-components/atomic-bigalphanumeric/atomic-bigalphanumeric.component.html
index 1e4938988..a711972c5 100644
--- a/src/app/shared/atomic-components/atomic-bigalphanumeric/atomic-bigalphanumeric.component.html
+++ b/src/app/shared/atomic-components/atomic-bigalphanumeric/atomic-bigalphanumeric.component.html
@@ -5,7 +5,6 @@
                 pInputTextarea
                 [(ngModel)]="property"
                 [required]="isTot"
-                (blur)="changeProperty()"
                 maxlength="64000"
                 class="w-full min-w-10rem"
             ></textarea>
diff --git a/src/app/shared/atomic-components/atomic-boolean/atomic-boolean.component.html b/src/app/shared/atomic-components/atomic-boolean/atomic-boolean.component.html
index ecdb3f165..5a33af5d6 100644
--- a/src/app/shared/atomic-components/atomic-boolean/atomic-boolean.component.html
+++ b/src/app/shared/atomic-components/atomic-boolean/atomic-boolean.component.html
@@ -5,7 +5,7 @@
                 *ngIf="isUni && canRead"
                 [(ngModel)]="property"
                 [disabled]="!canUpdate"
-                (click)="getState(); changeProperty()"
+                (click)="getState()"
             ></p-inputSwitch>
         </div>
     </div>
diff --git a/src/app/shared/atomic-components/atomic-date/atomic-date.component.html b/src/app/shared/atomic-components/atomic-date/atomic-date.component.html
index ba4e46bd8..8d7715edc 100644
--- a/src/app/shared/atomic-components/atomic-date/atomic-date.component.html
+++ b/src/app/shared/atomic-components/atomic-date/atomic-date.component.html
@@ -6,8 +6,6 @@
         [dateFormat]="format"
         [(ngModel)]="property"
         (ngModelChange)="onDateChange($event)"
-        (onSelect)="changeProperty()"
-        (onClear)="changeProperty()"
     ></p-calendar>
 </div>
 
diff --git a/src/app/shared/atomic-components/atomic-datetime/atomic-datetime.component.html b/src/app/shared/atomic-components/atomic-datetime/atomic-datetime.component.html
index 909103f4d..9825252bf 100644
--- a/src/app/shared/atomic-components/atomic-datetime/atomic-datetime.component.html
+++ b/src/app/shared/atomic-components/atomic-datetime/atomic-datetime.component.html
@@ -8,8 +8,6 @@
         [readonlyInput]="true"
         [showTime]="true"
         (ngModelChange)="onDateChange($event)"
-        (onSelect)="changeProperty()"
-        (onClear)="changeProperty()"
     ></p-calendar>
 </div>
 

From a3f98c71005e16293f0908cec069550eef1b8786 Mon Sep 17 00:00:00 2001
From: Michiel Stornebrink <michielstornebrink@gmail.com>
Date: Tue, 20 Dec 2022 23:23:19 +0100
Subject: [PATCH 07/26] Bugfix

---
 src/app/shared/atomic-components/BaseAtomicComponent.class.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/shared/atomic-components/BaseAtomicComponent.class.ts b/src/app/shared/atomic-components/BaseAtomicComponent.class.ts
index c1d7a8765..095a3d6e1 100644
--- a/src/app/shared/atomic-components/BaseAtomicComponent.class.ts
+++ b/src/app/shared/atomic-components/BaseAtomicComponent.class.ts
@@ -41,7 +41,9 @@ export abstract class BaseAtomicComponent<T> implements OnInit, OnChanges {
     if (changes.hasOwnProperty('isUni')) {
       this.isUni = changes['isUni'].firstChange;
     }
-    this.setCRUDPermissions(changes['crud'].currentValue);
+    if (changes.hasOwnProperty('crud')) {
+      this.setCRUDPermissions(changes['crud'].currentValue);
+    }
   }
 
   private setCRUDPermissions(crud: string) {

From 01c76871baa011fbb2cb97544c03fcc064dc2a5a Mon Sep 17 00:00:00 2001
From: Michiel Stornebrink <michielstornebrink@gmail.com>
Date: Tue, 20 Dec 2022 23:28:35 +0100
Subject: [PATCH 08/26] Use value null for empty string

---
 .../atomic-alphanumeric/atomic-alphanumeric.component.ts     | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts b/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts
index d71c760bd..3abf6d096 100644
--- a/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts
+++ b/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input } from '@angular/core';
 import { BaseAtomicComponent } from '../BaseAtomicComponent.class';
 import { FormControl } from '@angular/forms';
-import { debounceTime, distinctUntilChanged, tap } from 'rxjs';
+import { debounceTime, distinctUntilChanged, map, tap } from 'rxjs';
 import { Resource } from '../../interfacing/resource.interface';
 
 @Component({
@@ -30,7 +30,8 @@ export class AtomicAlphanumericComponent extends BaseAtomicComponent<string> {
       .pipe(
         debounceTime(300),
         distinctUntilChanged(),
-        tap(x => console.log(x)),
+        map(x => x === '' ? null : x), // transform empty string to null value
+        tap(x => console.log(x)), // TODO: remove this line
       )
       .subscribe(
         x => this.resource.patch([{

From 31362d7e306cd8c5fbb14b406f12c799cb954d37 Mon Sep 17 00:00:00 2001
From: LiWeiYeh <liwei_yeh@hotmail.com>
Date: Wed, 21 Dec 2022 14:31:13 +0100
Subject: [PATCH 09/26] linting

---
 .../project-edit/project-edit.component.ts    | 15 +++++----
 .../BaseAtomicComponent.class.ts              |  2 --
 .../atomic-alphanumeric.component.ts          | 30 ++++++++++--------
 .../interfacing/patch-replace.interface.ts    |  6 ++--
 .../interfacing/patch-response.interface.ts   | 31 ++++++++++---------
 .../shared/interfacing/resource.interface.ts  |  8 ++---
 6 files changed, 47 insertions(+), 45 deletions(-)

diff --git a/src/app/project-administration/project-edit/project-edit.component.ts b/src/app/project-administration/project-edit/project-edit.component.ts
index 101d485a2..a55e6260f 100644
--- a/src/app/project-administration/project-edit/project-edit.component.ts
+++ b/src/app/project-administration/project-edit/project-edit.component.ts
@@ -31,13 +31,12 @@ export class ProjectEditComponent implements OnInit, Resource<ProjectInterface>
   }
 
   patch(patches: PatchReplace[]): Observable<PatchResponse<ProjectInterface>> {
-    return this.service.patchProject(this.projectId, patches)
-      .pipe(
-        tap(x => {
-          if (x.isCommitted) {
-            this.data$ = from([x.content])
-          }
-        }),
-      );
+    return this.service.patchProject(this.projectId, patches).pipe(
+      tap((x) => {
+        if (x.isCommitted) {
+          this.data$ = from([x.content]);
+        }
+      }),
+    );
   }
 }
diff --git a/src/app/shared/atomic-components/BaseAtomicComponent.class.ts b/src/app/shared/atomic-components/BaseAtomicComponent.class.ts
index 095a3d6e1..2f6326fd5 100644
--- a/src/app/shared/atomic-components/BaseAtomicComponent.class.ts
+++ b/src/app/shared/atomic-components/BaseAtomicComponent.class.ts
@@ -6,7 +6,6 @@ import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/cor
 export abstract class BaseAtomicComponent<T> implements OnInit, OnChanges {
   @Input() property: T | Array<T> | null = null;
   public data: Array<T> = [];
-  private oldProperty: Array<T> = [];
   public canCreate!: boolean;
   public canRead!: boolean;
   public canUpdate!: boolean;
@@ -32,7 +31,6 @@ export abstract class BaseAtomicComponent<T> implements OnInit, OnChanges {
   ngOnInit(): void {
     this.setCRUDPermissions(this.crud);
     // TODO: unneeded when ng formcontrols work
-    this.oldProperty = this.requireArray(this.property);
     this.data = this.requireArray(this.property);
   }
 
diff --git a/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts b/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts
index 3abf6d096..8f4487eb7 100644
--- a/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts
+++ b/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { BaseAtomicComponent } from '../BaseAtomicComponent.class';
 import { FormControl } from '@angular/forms';
 import { debounceTime, distinctUntilChanged, map, tap } from 'rxjs';
@@ -9,12 +9,13 @@ import { Resource } from '../../interfacing/resource.interface';
   templateUrl: './atomic-alphanumeric.component.html',
   styleUrls: ['./atomic-alphanumeric.component.css'],
 })
-export class AtomicAlphanumericComponent extends BaseAtomicComponent<string> {
+export class AtomicAlphanumericComponent extends BaseAtomicComponent<string> implements OnInit {
   value!: FormControl<string | null>;
-  newItem: FormControl<string> = new FormControl<string>('', {nonNullable: true});
+  newItem: FormControl<string> = new FormControl<string>('', { nonNullable: true });
 
   @Input()
-  resource!: Resource<any>;
+  // TODO: change unknown type
+  resource!: Resource<unknown>;
 
   @Input()
   propertyName!: string;
@@ -25,20 +26,23 @@ export class AtomicAlphanumericComponent extends BaseAtomicComponent<string> {
 
   override ngOnInit(): void {
     super.ngOnInit();
-    this.value = new FormControl(this.requireArray(this.property)[0], {nonNullable: false});
+    this.value = new FormControl(this.data[0], { nonNullable: false });
     this.value.valueChanges
       .pipe(
         debounceTime(300),
         distinctUntilChanged(),
-        map(x => x === '' ? null : x), // transform empty string to null value
-        tap(x => console.log(x)), // TODO: remove this line
+        map((x) => (x === '' ? null : x)), // transform empty string to null value
       )
-      .subscribe(
-        x => this.resource.patch([{
-          op: 'replace',
-          path: this.propertyName,
-          value: x,
-        }]).subscribe()
+      .subscribe((x) =>
+        this.resource
+          .patch([
+            {
+              op: 'replace',
+              path: this.propertyName,
+              value: x,
+            },
+          ])
+          .subscribe(),
       );
   }
 }
diff --git a/src/app/shared/interfacing/patch-replace.interface.ts b/src/app/shared/interfacing/patch-replace.interface.ts
index c92c6a218..c0ee3a9eb 100644
--- a/src/app/shared/interfacing/patch-replace.interface.ts
+++ b/src/app/shared/interfacing/patch-replace.interface.ts
@@ -1,5 +1,5 @@
 export interface PatchReplace {
-    op: 'replace',
-    path: string,
-    value: string | null,
+  op: 'replace';
+  path: string;
+  value: string | null;
 }
diff --git a/src/app/shared/interfacing/patch-response.interface.ts b/src/app/shared/interfacing/patch-response.interface.ts
index 29d5ce898..184f4f3da 100644
--- a/src/app/shared/interfacing/patch-response.interface.ts
+++ b/src/app/shared/interfacing/patch-response.interface.ts
@@ -1,18 +1,19 @@
-import { PatchReplace } from "./patch-replace.interface"
+import { PatchReplace } from './patch-replace.interface';
 
 export interface PatchResponse<T> {
-    content: T,
-    patches: Array<PatchReplace>,
-    notifications: {
-        errors: Array<any>,
-        warnings: Array<any>,
-        infos: Array<any>,
-        successes: Array<any>,
-        invariants: Array<any>,
-        signals: Array<any>,
-    },
-    invariantRulesHold: boolean,
-    isCommitted: boolean,
-    sessionRefreshAdvice: boolean,
-    navTo: string | null,
+  content: T;
+  patches: Array<PatchReplace>;
+  //   TODO: change unknown types
+  notifications: {
+    errors: Array<unknown>;
+    warnings: Array<unknown>;
+    infos: Array<unknown>;
+    successes: Array<unknown>;
+    invariants: Array<unknown>;
+    signals: Array<unknown>;
+  };
+  invariantRulesHold: boolean;
+  isCommitted: boolean;
+  sessionRefreshAdvice: boolean;
+  navTo: string | null;
 }
diff --git a/src/app/shared/interfacing/resource.interface.ts b/src/app/shared/interfacing/resource.interface.ts
index 7842d9905..f6a710e63 100644
--- a/src/app/shared/interfacing/resource.interface.ts
+++ b/src/app/shared/interfacing/resource.interface.ts
@@ -1,7 +1,7 @@
-import { Observable } from "rxjs";
-import { PatchReplace } from "./patch-replace.interface";
-import { PatchResponse } from "./patch-response.interface";
+import { Observable } from 'rxjs';
+import { PatchReplace } from './patch-replace.interface';
+import { PatchResponse } from './patch-response.interface';
 
 export interface Resource<T> {
-    patch(patches: Array<PatchReplace>): Observable<PatchResponse<T>>
+  patch(patches: Array<PatchReplace>): Observable<PatchResponse<T>>;
 }

From a205f8282a0ca070549577966107c7ccab128864 Mon Sep 17 00:00:00 2001
From: Michiel Stornebrink <michielstornebrink@gmail.com>
Date: Wed, 21 Dec 2022 19:43:54 +0100
Subject: [PATCH 10/26] Remove comment that was for statement removed in
 previous commit

---
 src/app/shared/atomic-components/BaseAtomicComponent.class.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/shared/atomic-components/BaseAtomicComponent.class.ts b/src/app/shared/atomic-components/BaseAtomicComponent.class.ts
index 2f6326fd5..df39924b7 100644
--- a/src/app/shared/atomic-components/BaseAtomicComponent.class.ts
+++ b/src/app/shared/atomic-components/BaseAtomicComponent.class.ts
@@ -30,7 +30,6 @@ export abstract class BaseAtomicComponent<T> implements OnInit, OnChanges {
 
   ngOnInit(): void {
     this.setCRUDPermissions(this.crud);
-    // TODO: unneeded when ng formcontrols work
     this.data = this.requireArray(this.property);
   }
 

From e2a8c44d730503eea01edb808be3a06f6035dffe Mon Sep 17 00:00:00 2001
From: Michiel Stornebrink <michielstornebrink@gmail.com>
Date: Wed, 21 Dec 2022 10:06:06 +0100
Subject: [PATCH 11/26] Rearrange class attributes

---
 .../BaseAtomicComponent.class.ts              | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/app/shared/atomic-components/BaseAtomicComponent.class.ts b/src/app/shared/atomic-components/BaseAtomicComponent.class.ts
index df39924b7..0eba2042b 100644
--- a/src/app/shared/atomic-components/BaseAtomicComponent.class.ts
+++ b/src/app/shared/atomic-components/BaseAtomicComponent.class.ts
@@ -4,12 +4,11 @@ import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/cor
   template: '',
 })
 export abstract class BaseAtomicComponent<T> implements OnInit, OnChanges {
-  @Input() property: T | Array<T> | null = null;
+  @Input()
+  property: T | Array<T> | null = null;
+  
   public data: Array<T> = [];
-  public canCreate!: boolean;
-  public canRead!: boolean;
-  public canUpdate!: boolean;
-  public canDelete!: boolean;
+  
   private _isUni: boolean = false;
   @Input()
   set isUni(attribute: boolean | '') {
@@ -18,6 +17,7 @@ export abstract class BaseAtomicComponent<T> implements OnInit, OnChanges {
   get isUni(): boolean {
     return this._isUni;
   }
+
   private _isTot: boolean = false;
   @Input()
   set isTot(attribute: boolean | '') {
@@ -26,7 +26,14 @@ export abstract class BaseAtomicComponent<T> implements OnInit, OnChanges {
   get isTot(): boolean {
     return this._isTot;
   }
-  @Input() crud: string = 'crud';
+
+  @Input()
+  crud: string = 'crud';
+
+  public canCreate!: boolean;
+  public canRead!: boolean;
+  public canUpdate!: boolean;
+  public canDelete!: boolean;
 
   ngOnInit(): void {
     this.setCRUDPermissions(this.crud);

From 4d89ba7d96e570c0cc6d7ee800aa525f154f57fc Mon Sep 17 00:00:00 2001
From: Michiel Stornebrink <michielstornebrink@gmail.com>
Date: Wed, 21 Dec 2022 10:23:52 +0100
Subject: [PATCH 12/26] Refactor determining CRUD rights. Make it simpler

---
 .../BaseAtomicComponent.class.ts              | 34 +++++++------------
 .../atomic-alphanumeric.component.html        |  4 +--
 .../atomic-bigalphanumeric.component.html     |  4 +--
 .../atomic-boolean.component.html             |  6 ++--
 .../atomic-date/atomic-date.component.html    |  4 +--
 .../atomic-datetime.component.html            |  4 +--
 .../atomic-password.component.html            |  6 ++--
 7 files changed, 27 insertions(+), 35 deletions(-)

diff --git a/src/app/shared/atomic-components/BaseAtomicComponent.class.ts b/src/app/shared/atomic-components/BaseAtomicComponent.class.ts
index 0eba2042b..9d663237c 100644
--- a/src/app/shared/atomic-components/BaseAtomicComponent.class.ts
+++ b/src/app/shared/atomic-components/BaseAtomicComponent.class.ts
@@ -28,15 +28,22 @@ export abstract class BaseAtomicComponent<T> implements OnInit, OnChanges {
   }
 
   @Input()
-  crud: string = 'crud';
+  crud: string = 'cRud';
 
-  public canCreate!: boolean;
-  public canRead!: boolean;
-  public canUpdate!: boolean;
-  public canDelete!: boolean;
+  public canCreate(): boolean {
+    return this.crud.includes('C');
+  }
+  public canRead(): boolean {
+    return this.crud.includes('R');
+  }
+  public canUpdate(): boolean {
+    return this.crud.includes('U');
+  }
+  public canDelete(): boolean {
+    return this.crud.includes('D');
+  }
 
   ngOnInit(): void {
-    this.setCRUDPermissions(this.crud);
     this.data = this.requireArray(this.property);
   }
 
@@ -45,21 +52,6 @@ export abstract class BaseAtomicComponent<T> implements OnInit, OnChanges {
     if (changes.hasOwnProperty('isUni')) {
       this.isUni = changes['isUni'].firstChange;
     }
-    if (changes.hasOwnProperty('crud')) {
-      this.setCRUDPermissions(changes['crud'].currentValue);
-    }
-  }
-
-  private setCRUDPermissions(crud: string) {
-    let c = crud[0];
-    let r = crud[1];
-    let u = crud[2];
-    let d = crud[3];
-
-    this.canCreate = c == c.toUpperCase();
-    this.canRead = r == r.toUpperCase();
-    this.canUpdate = u == u.toUpperCase();
-    this.canDelete = d == d.toUpperCase();
   }
 
   public requireArray(property: T | Array<T> | null) {
diff --git a/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.html b/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.html
index 0e81efc0a..3d9b4b4ee 100644
--- a/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.html
+++ b/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.html
@@ -1,5 +1,5 @@
-<div *ngIf="canRead; else notReadable">
-    <div class="p-inputgroup" *ngIf="canUpdate; else notUpdatable">
+<div *ngIf="canRead(); else notReadable">
+    <div class="p-inputgroup" *ngIf="canUpdate(); else notUpdatable">
         <div class="w-full" *ngIf="isUni; else isNotUni">
             <input type="text" class="min-w-10rem w-full" pInputText [formControl]="value" [required]="isTot" />
         </div>
diff --git a/src/app/shared/atomic-components/atomic-bigalphanumeric/atomic-bigalphanumeric.component.html b/src/app/shared/atomic-components/atomic-bigalphanumeric/atomic-bigalphanumeric.component.html
index a711972c5..c5486e079 100644
--- a/src/app/shared/atomic-components/atomic-bigalphanumeric/atomic-bigalphanumeric.component.html
+++ b/src/app/shared/atomic-components/atomic-bigalphanumeric/atomic-bigalphanumeric.component.html
@@ -1,5 +1,5 @@
-<div *ngIf="canRead; else notReadable">
-    <div class="p-inputgroup" *ngIf="canUpdate; else notUpdatable">
+<div *ngIf="canRead(); else notReadable">
+    <div class="p-inputgroup" *ngIf="canUpdate(); else notUpdatable">
         <div class="w-full" *ngIf="isUni; else isNotUni">
             <textarea
                 pInputTextarea
diff --git a/src/app/shared/atomic-components/atomic-boolean/atomic-boolean.component.html b/src/app/shared/atomic-components/atomic-boolean/atomic-boolean.component.html
index 5a33af5d6..9184abaa1 100644
--- a/src/app/shared/atomic-components/atomic-boolean/atomic-boolean.component.html
+++ b/src/app/shared/atomic-components/atomic-boolean/atomic-boolean.component.html
@@ -1,10 +1,10 @@
-<div *ngIf="canRead; else notReadable">
+<div *ngIf="canRead(); else notReadable">
     <div class="p-inputgroup" *ngIf="isUni; else isNotUni">
         <div class="w-full">
             <p-inputSwitch
-                *ngIf="isUni && canRead"
+                *ngIf="isUni && canRead()"
                 [(ngModel)]="property"
-                [disabled]="!canUpdate"
+                [disabled]="!canUpdate()"
                 (click)="getState()"
             ></p-inputSwitch>
         </div>
diff --git a/src/app/shared/atomic-components/atomic-date/atomic-date.component.html b/src/app/shared/atomic-components/atomic-date/atomic-date.component.html
index 8d7715edc..14609568e 100644
--- a/src/app/shared/atomic-components/atomic-date/atomic-date.component.html
+++ b/src/app/shared/atomic-components/atomic-date/atomic-date.component.html
@@ -1,6 +1,6 @@
-<div *ngIf="canRead; else notReadable">
+<div *ngIf="canRead(); else notReadable">
     <p-calendar
-        *ngIf="canUpdate; else notUpdatable"
+        *ngIf="canUpdate(); else notUpdatable"
         [showClear]="true"
         [readonlyInput]="true"
         [dateFormat]="format"
diff --git a/src/app/shared/atomic-components/atomic-datetime/atomic-datetime.component.html b/src/app/shared/atomic-components/atomic-datetime/atomic-datetime.component.html
index 9825252bf..77ac512d7 100644
--- a/src/app/shared/atomic-components/atomic-datetime/atomic-datetime.component.html
+++ b/src/app/shared/atomic-components/atomic-datetime/atomic-datetime.component.html
@@ -1,6 +1,6 @@
-<div *ngIf="canRead; else notReadable">
+<div *ngIf="canRead(); else notReadable">
     <p-calendar
-        *ngIf="canUpdate; else notUpdatable"
+        *ngIf="canUpdate(); else notUpdatable"
         [(ngModel)]="property"
         [showIcon]="true"
         [showClear]="true"
diff --git a/src/app/shared/atomic-components/atomic-password/atomic-password.component.html b/src/app/shared/atomic-components/atomic-password/atomic-password.component.html
index 815ffe867..f51589444 100644
--- a/src/app/shared/atomic-components/atomic-password/atomic-password.component.html
+++ b/src/app/shared/atomic-components/atomic-password/atomic-password.component.html
@@ -1,13 +1,13 @@
 <p-password
-    *ngIf="isUni && canUpdate"
+    *ngIf="isUni && canUpdate()"
     [feedback]="false"
     [(ngModel)]="property"
     [required]="isTot"
     pTooltip="Passwords are not stored securly"
 ></p-password>
-<span *ngIf="!isUni && canUpdate">
+<span *ngIf="!isUni && canUpdate()">
     <i>For this template, the password expression must be univalent</i>
 </span>
-<span *ngIf="!canUpdate">
+<span *ngIf="!canUpdate()">
     <i>For this template, the password expression must have update rights</i>
 </span>

From 8859c26fd7493e5bbd3f7341cd760b8c38ec452a Mon Sep 17 00:00:00 2001
From: Michiel Stornebrink <michielstornebrink@gmail.com>
Date: Wed, 21 Dec 2022 20:01:56 +0100
Subject: [PATCH 13/26] Fix linting.

---
 .eslintrc.json                                            | 8 +++++++-
 .../shared/atomic-components/BaseAtomicComponent.class.ts | 4 ++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 3b4249064..e7f593ed7 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -36,7 +36,13 @@
             "style": "kebab-case"
           }
         ],
-        "@typescript-eslint/no-explicit-any": "error"
+        "@typescript-eslint/no-explicit-any": "error",
+        "prettier/prettier": [
+          "error",
+          {
+            "endOfLine": "auto"
+          }
+        ]
       }
     },
     {
diff --git a/src/app/shared/atomic-components/BaseAtomicComponent.class.ts b/src/app/shared/atomic-components/BaseAtomicComponent.class.ts
index 9d663237c..8beeb4968 100644
--- a/src/app/shared/atomic-components/BaseAtomicComponent.class.ts
+++ b/src/app/shared/atomic-components/BaseAtomicComponent.class.ts
@@ -6,9 +6,9 @@ import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/cor
 export abstract class BaseAtomicComponent<T> implements OnInit, OnChanges {
   @Input()
   property: T | Array<T> | null = null;
-  
+
   public data: Array<T> = [];
-  
+
   private _isUni: boolean = false;
   @Input()
   set isUni(attribute: boolean | '') {

From 19cba1966517f190188bd4c89b4527270a12e3cd Mon Sep 17 00:00:00 2001
From: Michiel Stornebrink <michielstornebrink@gmail.com>
Date: Wed, 21 Dec 2022 21:44:23 +0100
Subject: [PATCH 14/26] Update/patch on blur

---
 .../atomic-alphanumeric/atomic-alphanumeric.component.ts      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts b/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts
index 8f4487eb7..cd6c76a42 100644
--- a/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts
+++ b/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts
@@ -11,7 +11,7 @@ import { Resource } from '../../interfacing/resource.interface';
 })
 export class AtomicAlphanumericComponent extends BaseAtomicComponent<string> implements OnInit {
   value!: FormControl<string | null>;
-  newItem: FormControl<string> = new FormControl<string>('', { nonNullable: true });
+  newItem: FormControl<string> = new FormControl<string>('', { nonNullable: true, updateOn: 'blur' });
 
   @Input()
   // TODO: change unknown type
@@ -26,7 +26,7 @@ export class AtomicAlphanumericComponent extends BaseAtomicComponent<string> imp
 
   override ngOnInit(): void {
     super.ngOnInit();
-    this.value = new FormControl(this.data[0], { nonNullable: false });
+    this.value = new FormControl(this.data[0], { nonNullable: false, updateOn: 'blur' });
     this.value.valueChanges
       .pipe(
         debounceTime(300),

From 4a10733eb42d29e21aedb63967b7634367681101 Mon Sep 17 00:00:00 2001
From: Michiel Stornebrink <michielstornebrink@gmail.com>
Date: Wed, 21 Dec 2022 22:17:41 +0100
Subject: [PATCH 15/26] Add fast-json-patch library to test JSON patches
 without backend

---
 package-lock.json | 11 +++++++++++
 package.json      |  1 +
 2 files changed, 12 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index b7f177a0f..7942ba922 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@angular/platform-browser": "^14.2.0",
         "@angular/platform-browser-dynamic": "^14.2.0",
         "@angular/router": "^14.2.0",
+        "fast-json-patch": "^3.1.1",
         "primeflex": "^3.2.1",
         "primeicons": "^6.0.1",
         "primeng": "^14.1.2",
@@ -6910,6 +6911,11 @@
         "node": ">=8.6.0"
       }
     },
+    "node_modules/fast-json-patch": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/fast-json-patch/-/fast-json-patch-3.1.1.tgz",
+      "integrity": "sha512-vf6IHUX2SBcA+5/+4883dsIjpBTqmfBjmYiWK1savxQmFk4JfBMLa7ynTYOs1Rolp/T1betJxHiGD3g1Mn8lUQ=="
+    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "dev": true,
@@ -19045,6 +19051,11 @@
         "micromatch": "^4.0.4"
       }
     },
+    "fast-json-patch": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/fast-json-patch/-/fast-json-patch-3.1.1.tgz",
+      "integrity": "sha512-vf6IHUX2SBcA+5/+4883dsIjpBTqmfBjmYiWK1savxQmFk4JfBMLa7ynTYOs1Rolp/T1betJxHiGD3g1Mn8lUQ=="
+    },
     "fast-json-stable-stringify": {
       "version": "2.1.0",
       "dev": true
diff --git a/package.json b/package.json
index 765638f2d..83d91da0c 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@angular/platform-browser": "^14.2.0",
     "@angular/platform-browser-dynamic": "^14.2.0",
     "@angular/router": "^14.2.0",
+    "fast-json-patch": "^3.1.1",
     "primeflex": "^3.2.1",
     "primeicons": "^6.0.1",
     "primeng": "^14.1.2",

From 488c11da9cddbc0bfabdeec2ac9e141281d1091c Mon Sep 17 00:00:00 2001
From: Michiel Stornebrink <michielstornebrink@gmail.com>
Date: Wed, 21 Dec 2022 22:22:45 +0100
Subject: [PATCH 16/26] Rename component properties for better readability

---
 .../atomic-alphanumeric.component.html                   | 4 ++--
 .../atomic-alphanumeric/atomic-alphanumeric.component.ts | 9 +++++----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.html b/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.html
index 3d9b4b4ee..1b1b032cc 100644
--- a/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.html
+++ b/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.html
@@ -1,7 +1,7 @@
 <div *ngIf="canRead(); else notReadable">
     <div class="p-inputgroup" *ngIf="canUpdate(); else notUpdatable">
         <div class="w-full" *ngIf="isUni; else isNotUni">
-            <input type="text" class="min-w-10rem w-full" pInputText [formControl]="value" [required]="isTot" />
+            <input type="text" class="min-w-10rem w-full" pInputText [formControl]="formControl" [required]="isTot" />
         </div>
     </div>
 </div>
@@ -18,7 +18,7 @@
                     type="text"
                     class="min-w-10rem w-full"
                     pInputText
-                    [formControl]="newItem"
+                    [formControl]="newItemControl"
                     placeholder="Add text"
                     [required]="isNewItemInputRequired()"
                 />
diff --git a/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts b/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts
index cd6c76a42..bd37db262 100644
--- a/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts
+++ b/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts
@@ -10,8 +10,8 @@ import { Resource } from '../../interfacing/resource.interface';
   styleUrls: ['./atomic-alphanumeric.component.css'],
 })
 export class AtomicAlphanumericComponent extends BaseAtomicComponent<string> implements OnInit {
-  value!: FormControl<string | null>;
-  newItem: FormControl<string> = new FormControl<string>('', { nonNullable: true, updateOn: 'blur' });
+  formControl!: FormControl<string | null>;
+  newItemControl: FormControl<string> = new FormControl<string>('', { nonNullable: true, updateOn: 'blur' });
 
   @Input()
   // TODO: change unknown type
@@ -26,8 +26,9 @@ export class AtomicAlphanumericComponent extends BaseAtomicComponent<string> imp
 
   override ngOnInit(): void {
     super.ngOnInit();
-    this.value = new FormControl(this.data[0], { nonNullable: false, updateOn: 'blur' });
-    this.value.valueChanges
+    this.formControl = new FormControl(this.data[0], { nonNullable: false, updateOn: 'blur' });
+
+    this.formControl.valueChanges
       .pipe(
         debounceTime(300),
         distinctUntilChanged(),

From 383d8daca4e13239b919c8ba0c69e9bcc88ffc27 Mon Sep 17 00:00:00 2001
From: Michiel Stornebrink <michielstornebrink@gmail.com>
Date: Wed, 21 Dec 2022 22:24:55 +0100
Subject: [PATCH 17/26] Add test data for ToolGalleryComponent

---
 src/app/tools/test-data.interface.ts |  50 ++++
 src/app/tools/testdata.ts            | 336 +++++++++++++++++++++++++++
 2 files changed, 386 insertions(+)
 create mode 100644 src/app/tools/test-data.interface.ts
 create mode 100644 src/app/tools/testdata.ts

diff --git a/src/app/tools/test-data.interface.ts b/src/app/tools/test-data.interface.ts
new file mode 100644
index 000000000..2953a6769
--- /dev/null
+++ b/src/app/tools/test-data.interface.ts
@@ -0,0 +1,50 @@
+export interface TestDataInterface extends ObjectBase {
+  _view_: ProjectNameView;
+  _sortValues_: {
+    Projects: string;
+    Name: string;
+    Description: string;
+    Projectleider: string;
+    _64_: string;
+    Start: string | null;
+    Status: string;
+    Active: boolean;
+  };
+  Projects: ObjectBase & {
+    _view_: ProjectNameView;
+  };
+  Name: string;
+  Description: string;
+  Projectleider: ObjectBase & {
+    _view_: PersonNameView;
+  };
+  _64_: ObjectBase & {
+    _view_: PersonNameView;
+  };
+  Start: string | null;
+  Status: string;
+  Active: boolean;
+  _id_: string;
+}
+
+interface PersonNameView {
+  firstName: string;
+  txt1: string;
+  lastName: string;
+}
+
+interface ProjectNameView {
+  name: string;
+}
+
+interface ObjectBase {
+  _id_: string;
+  _label_: string;
+  _path_: string;
+  _ifcs_: Array<InterfaceRefObject>;
+}
+
+interface InterfaceRefObject {
+  id: string;
+  label: string;
+}
diff --git a/src/app/tools/testdata.ts b/src/app/tools/testdata.ts
new file mode 100644
index 000000000..7be8c1a3b
--- /dev/null
+++ b/src/app/tools/testdata.ts
@@ -0,0 +1,336 @@
+import { TestDataInterface } from './test-data.interface';
+
+export const testdata: TestDataInterface[] = [
+  {
+    _id_: '1970_13',
+    _label_: 'Apollo 13',
+    _path_: 'resource/SESSION/1/Active_32_projects/1970_13',
+    _view_: {
+      name: 'Apollo 13',
+    },
+    Projects: {
+      _id_: '1970_13',
+      _label_: 'Apollo 13',
+      _path_: 'resource/SESSION/1/Active_32_projects/1970_13/Projects',
+      _view_: {
+        name: 'Apollo 13',
+      },
+      _ifcs_: [
+        {
+          id: 'Project',
+          label: 'Project',
+        },
+        {
+          id: 'New_47_edit_32_project',
+          label: 'New/edit project',
+        },
+      ],
+    },
+    _sortValues_: {
+      Projects: 'Apollo 13',
+      Name: 'Apollo 13',
+      Description: 'Joosten, get us back to earth please!',
+      Projectleider: 'J. Lovell',
+      _64_: 'J. Lovell',
+      Start: '1970-04-17',
+      Status: 'Succes',
+      Active: true,
+    },
+    Name: 'Apollo 13',
+    Description: 'Joosten, get us back to earth please!',
+    Projectleider: {
+      _id_: 'p10008',
+      _label_: 'J. Lovell',
+      _path_: 'resource/SESSION/1/Active_32_projects/1970_13/Projectleider/p10008',
+      _view_: {
+        firstName: 'J.',
+        txt1: ' ',
+        lastName: 'Lovell',
+      },
+      _ifcs_: [
+        {
+          id: 'Person',
+          label: 'Person',
+        },
+      ],
+    },
+    _64_: {
+      _id_: 'p10008',
+      _label_: 'J. Lovell',
+      _path_: 'resource/SESSION/1/Active_32_projects/1970_13/_64_/p10008',
+      _view_: {
+        firstName: 'J.',
+        txt1: ' ',
+        lastName: 'Lovell',
+      },
+      _ifcs_: [
+        {
+          id: 'Person',
+          label: 'Person',
+        },
+      ],
+    },
+    Start: '1970-04-17',
+    Status: 'Succes',
+    Active: true,
+    _ifcs_: [
+      {
+        id: 'Project',
+        label: 'Project',
+      },
+      {
+        id: 'New_47_edit_32_project',
+        label: 'New/edit project',
+      },
+    ],
+  },
+  {
+    _id_: '2013_01',
+    _label_: 'Alfa board',
+    _path_: 'resource/SESSION/1/Active_32_projects/2013_01',
+    _view_: {
+      name: 'Alfa board',
+    },
+    Projects: {
+      _id_: '2013_01',
+      _label_: 'Alfa board',
+      _path_: 'resource/SESSION/1/Active_32_projects/2013_01/Projects',
+      _view_: {
+        name: 'Alfa board',
+      },
+      _ifcs_: [
+        {
+          id: 'Project',
+          label: 'Project',
+        },
+        {
+          id: 'New_47_edit_32_project',
+          label: 'New/edit project',
+        },
+      ],
+    },
+    _sortValues_: {
+      Projects: 'Alfa board',
+      Name: 'Alfa board',
+      Description: 'Create an Alpha board for the customer',
+      Projectleider: 'P. Leider',
+      _64_: 'P. Leider',
+      Start: '2013-12-31',
+      Status: 'Completed',
+      Active: true,
+    },
+    Name: 'Alfa board',
+    Description: 'Create an Alpha board for the customer',
+    Projectleider: {
+      _id_: 'p10012',
+      _label_: 'P. Leider',
+      _path_: 'resource/SESSION/1/Active_32_projects/2013_01/Projectleider/p10012',
+      _view_: {
+        firstName: 'P.',
+        txt1: ' ',
+        lastName: 'Leider',
+      },
+      _ifcs_: [
+        {
+          id: 'Person',
+          label: 'Person',
+        },
+      ],
+    },
+    _64_: {
+      _id_: 'p10012',
+      _label_: 'P. Leider',
+      _path_: 'resource/SESSION/1/Active_32_projects/2013_01/_64_/p10012',
+      _view_: {
+        firstName: 'P.',
+        txt1: ' ',
+        lastName: 'Leider',
+      },
+      _ifcs_: [
+        {
+          id: 'Person',
+          label: 'Person',
+        },
+      ],
+    },
+    Start: '2013-12-31',
+    Status: 'Completed',
+    Active: true,
+    _ifcs_: [
+      {
+        id: 'Project',
+        label: 'Project',
+      },
+      {
+        id: 'New_47_edit_32_project',
+        label: 'New/edit project',
+      },
+    ],
+  },
+  {
+    _id_: '2014_01',
+    _label_: 'Beta board',
+    _path_: 'resource/SESSION/1/Active_32_projects/2014_01',
+    _view_: {
+      name: 'Beta board',
+    },
+    Projects: {
+      _id_: '2014_01',
+      _label_: 'Beta board',
+      _path_: 'resource/SESSION/1/Active_32_projects/2014_01/Projects',
+      _view_: {
+        name: 'Beta board',
+      },
+      _ifcs_: [
+        {
+          id: 'Project',
+          label: 'Project',
+        },
+        {
+          id: 'New_47_edit_32_project',
+          label: 'New/edit project',
+        },
+      ],
+    },
+    _sortValues_: {
+      Projects: 'Beta board',
+      Name: 'Beta board',
+      Description: 'further development of the board to Beta',
+      Projectleider: 'P. Leider',
+      _64_: 'P. Leider',
+      Start: '2014-02-15',
+      Status: 'Under way',
+      Active: true,
+    },
+    Name: 'Beta board',
+    Description: 'further development of the board to Beta',
+    Projectleider: {
+      _id_: 'p10012',
+      _label_: 'P. Leider',
+      _path_: 'resource/SESSION/1/Active_32_projects/2014_01/Projectleider/p10012',
+      _view_: {
+        firstName: 'P.',
+        txt1: ' ',
+        lastName: 'Leider',
+      },
+      _ifcs_: [
+        {
+          id: 'Person',
+          label: 'Person',
+        },
+      ],
+    },
+    _64_: {
+      _id_: 'p10012',
+      _label_: 'P. Leider',
+      _path_: 'resource/SESSION/1/Active_32_projects/2014_01/_64_/p10012',
+      _view_: {
+        firstName: 'P.',
+        txt1: ' ',
+        lastName: 'Leider',
+      },
+      _ifcs_: [
+        {
+          id: 'Person',
+          label: 'Person',
+        },
+      ],
+    },
+    Start: '2014-02-15',
+    Status: 'Under way',
+    Active: true,
+    _ifcs_: [
+      {
+        id: 'Project',
+        label: 'Project',
+      },
+      {
+        id: 'New_47_edit_32_project',
+        label: 'New/edit project',
+      },
+    ],
+  },
+  {
+    _id_: '2014_05',
+    _label_: 'Argos',
+    _path_: 'resource/SESSION/1/Active_32_projects/2014_05',
+    _view_: {
+      name: 'Argos',
+    },
+    Projects: {
+      _id_: '2014_05',
+      _label_: 'Argos',
+      _path_: 'resource/SESSION/1/Active_32_projects/2014_05/Projects',
+      _view_: {
+        name: 'Argos',
+      },
+      _ifcs_: [
+        {
+          id: 'Project',
+          label: 'Project',
+        },
+        {
+          id: 'New_47_edit_32_project',
+          label: 'New/edit project',
+        },
+      ],
+    },
+    _sortValues_: {
+      Projects: 'Argos',
+      Name: 'Argos',
+      Description: 'get the Golden Fleece',
+      Projectleider: 'J. Ason',
+      _64_: 'J. Ason',
+      Start: null,
+      Status: 'Completed',
+      Active: true,
+    },
+    Name: 'Argos',
+    Description: 'get the Golden Fleece',
+    Projectleider: {
+      _id_: 'p10007',
+      _label_: 'J. Ason',
+      _path_: 'resource/SESSION/1/Active_32_projects/2014_05/Projectleider/p10007',
+      _view_: {
+        firstName: 'J.',
+        txt1: ' ',
+        lastName: 'Ason',
+      },
+      _ifcs_: [
+        {
+          id: 'Person',
+          label: 'Person',
+        },
+      ],
+    },
+    _64_: {
+      _id_: 'p10007',
+      _label_: 'J. Ason',
+      _path_: 'resource/SESSION/1/Active_32_projects/2014_05/_64_/p10007',
+      _view_: {
+        firstName: 'J.',
+        txt1: ' ',
+        lastName: 'Ason',
+      },
+      _ifcs_: [
+        {
+          id: 'Person',
+          label: 'Person',
+        },
+      ],
+    },
+    Start: null,
+    Status: 'Completed',
+    Active: true,
+    _ifcs_: [
+      {
+        id: 'Project',
+        label: 'Project',
+      },
+      {
+        id: 'New_47_edit_32_project',
+        label: 'New/edit project',
+      },
+    ],
+  },
+];

From 922674198c8dd74afd28c5ebf85725db14f7153b Mon Sep 17 00:00:00 2001
From: Michiel Stornebrink <michielstornebrink@gmail.com>
Date: Wed, 21 Dec 2022 22:27:30 +0100
Subject: [PATCH 18/26] Implement patch functionality for ToolGalleryComponent

---
 .../tool-gallery/tool-gallery.component.html  | 14 ++++++--
 .../tool-gallery/tool-gallery.component.ts    | 33 +++++++++++++++++--
 2 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/src/app/tools/tool-gallery/tool-gallery.component.html b/src/app/tools/tool-gallery/tool-gallery.component.html
index 128a07afd..b18a560af 100644
--- a/src/app/tools/tool-gallery/tool-gallery.component.html
+++ b/src/app/tools/tool-gallery/tool-gallery.component.html
@@ -1,8 +1,16 @@
 <div class="flex flex-wrap">
     <div class="gallery-item">
-        <app-tool-gallery-component titleHeader="Alphanumeric" subHeader="Atomic">
+        <app-tool-gallery-component titleHeader="{{ data.Name }}" subHeader="Atomic">
             <ng-template #header>
-                <app-atomic-alphanumeric [property]="'Pre-set value'" label="Projects" isUni isTot crud="CRUD">
+                <app-atomic-alphanumeric
+                    [resource]="this"
+                    propertyName="Name"
+                    [property]="data.Name"
+                    label="Projects"
+                    isUni
+                    isTot
+                    crud="CRUD"
+                >
                 </app-atomic-alphanumeric>
             </ng-template>
             <ng-template #body>
@@ -133,7 +141,7 @@
     <div class="gallery-item">
         <app-tool-gallery-component titleHeader="Object" subHeader="Atomic">
             <ng-template #header>
-                <app-atomic-object [property]="activeProjects" isUni isTot crud="CRUD"></app-atomic-object>
+                <app-atomic-object [property]="data" isUni isTot crud="CRUD"></app-atomic-object>
             </ng-template>
             <ng-template #body>
                 <p>
diff --git a/src/app/tools/tool-gallery/tool-gallery.component.ts b/src/app/tools/tool-gallery/tool-gallery.component.ts
index db2958a08..260089ac1 100644
--- a/src/app/tools/tool-gallery/tool-gallery.component.ts
+++ b/src/app/tools/tool-gallery/tool-gallery.component.ts
@@ -1,13 +1,40 @@
 import { Component } from '@angular/core';
-import { testdata } from '../../project-administration/active-projects/testdata';
+import { from, map, Observable, tap } from 'rxjs';
+import { PatchReplace } from 'src/app/shared/interfacing/patch-replace.interface';
+import { PatchResponse } from 'src/app/shared/interfacing/patch-response.interface';
+import { Resource } from 'src/app/shared/interfacing/resource.interface';
+import { TestDataInterface } from '../test-data.interface';
+import { testdata } from '../testdata';
+import { applyPatch } from 'fast-json-patch';
 
 @Component({
   selector: 'app-tool-gallery',
   templateUrl: './tool-gallery.component.html',
   styleUrls: ['./tool-gallery.component.scss'],
 })
-export class ToolGalleryComponent {
-  activeProjects = testdata[0];
+export class ToolGalleryComponent implements Resource<TestDataInterface> {
+  data = JSON.parse(JSON.stringify(testdata[0]));
 
   constructor() {}
+
+  patch(patches: PatchReplace[]): Observable<PatchResponse<TestDataInterface>> {
+    // Prepend path of patches with '/', because our backend has a different (probably wrong) implementation
+    // of the JSON-Patch (RFC6902) standard. The applyPatch function below requires the '/'.
+    patches.forEach((x) => (x.path = `/${x.path}`));
+
+    return from([
+      {
+        content: applyPatch(this.data, patches).newDocument,
+        patches: patches,
+        isCommitted: true,
+      } as PatchResponse<TestDataInterface>,
+    ]).pipe(
+      tap((x) => {
+        console.log(x);
+        if (x.isCommitted) {
+          this.data = x.content;
+        }
+      }),
+    );
+  }
 }

From 98489b6f1934ab2b5442a6881b230911e17dcb71 Mon Sep 17 00:00:00 2001
From: Michiel Stornebrink <michielstornebrink@gmail.com>
Date: Wed, 21 Dec 2022 22:46:05 +0100
Subject: [PATCH 19/26] Rearrange + add todos for ToolGallery

---
 .../tool-gallery/tool-gallery.component.html  | 54 +++++++++----------
 .../tool-gallery/tool-gallery.component.ts    |  2 +-
 2 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/app/tools/tool-gallery/tool-gallery.component.html b/src/app/tools/tool-gallery/tool-gallery.component.html
index b18a560af..d307dd9d8 100644
--- a/src/app/tools/tool-gallery/tool-gallery.component.html
+++ b/src/app/tools/tool-gallery/tool-gallery.component.html
@@ -1,6 +1,22 @@
 <div class="flex flex-wrap">
     <div class="gallery-item">
-        <app-tool-gallery-component titleHeader="{{ data.Name }}" subHeader="Atomic">
+        <app-tool-gallery-component titleHeader="{{ data._label_ }}" subHeader="Object reference">
+            <ng-template #header>
+                <app-atomic-object [property]="data" isUni isTot crud="CRUD"></app-atomic-object>
+            </ng-template>
+            <ng-template #body>
+                <p>
+                    The object component allows the user to inspect and read more of an entity and adds a dropdown of
+                    different actions that the user can take on the entity.
+                </p>
+            </ng-template>
+            <ng-template #footer>
+                <p-button label="How to use" icon="pi pi-question-circle" routerLink="/tools/atomic/object"></p-button>
+            </ng-template>
+        </app-tool-gallery-component>
+    </div>
+    <div class="gallery-item">
+        <app-tool-gallery-component [titleHeader]="data.Name" subHeader="Alphanumeric">
             <ng-template #header>
                 <app-atomic-alphanumeric
                     [resource]="this"
@@ -27,9 +43,9 @@
         </app-tool-gallery-component>
     </div>
     <div class="gallery-item">
-        <app-tool-gallery-component titleHeader="Bigalphanumeric" subHeader="Atomic">
+        <app-tool-gallery-component [titleHeader]="data.Name" subHeader="Bigalphanumeric">
             <ng-template #header>
-                <app-atomic-bigalphanumeric [property]="'Pre-set value'" label="Projects" isUni isTot crud="CRUD">
+                <app-atomic-bigalphanumeric [property]="data.Name" label="Projects" isUni isTot crud="CRUD">
                 </app-atomic-bigalphanumeric>
             </ng-template>
             <ng-template #body>
@@ -45,9 +61,9 @@
         </app-tool-gallery-component>
     </div>
     <div class="gallery-item">
-        <app-tool-gallery-component titleHeader="Hugealphanumeric" subHeader="Atomic">
+        <app-tool-gallery-component [titleHeader]="data.Name" subHeader="Hugealphanumeric">
             <ng-template #header>
-                <app-atomic-hugealphanumeric [property]="'Pre-set value'" label="Projects" isUni isTot crud="CRUD">
+                <app-atomic-hugealphanumeric [property]="data.Name" label="Projects" isUni isTot crud="CRUD">
                 </app-atomic-hugealphanumeric>
             </ng-template>
             <ng-template #body>
@@ -60,7 +76,7 @@
         </app-tool-gallery-component>
     </div>
     <div class="gallery-item">
-        <app-tool-gallery-component titleHeader="Boolean" subHeader="Atomic">
+        <app-tool-gallery-component titleHeader="TODO" subHeader="Boolean">
             <ng-template #header>
                 <app-atomic-boolean [property]="true" isUni isTot crud="CRUD"></app-atomic-boolean>
             </ng-template>
@@ -76,7 +92,7 @@
         </app-tool-gallery-component>
     </div>
     <div class="gallery-item">
-        <app-tool-gallery-component titleHeader="Date" subHeader="Atomic">
+        <app-tool-gallery-component titleHeader="TODO" subHeader="Date">
             <ng-template #header>
                 <app-atomic-date [property]="'26-11-1999'" [format]="'dd-mm-yy'" isUni isTot crud="CRUD">
                 </app-atomic-date>
@@ -93,7 +109,7 @@
         </app-tool-gallery-component>
     </div>
     <div class="gallery-item">
-        <app-tool-gallery-component titleHeader="DateTime" subHeader="Atomic">
+        <app-tool-gallery-component titleHeader="TODO" subHeader="DateTime">
             <ng-template #header>
                 <app-atomic-datetime [property]="'26-11-1999 23:46'" isUni isTot crud="CRUD"></app-atomic-datetime>
             </ng-template>
@@ -107,7 +123,7 @@
         </app-tool-gallery-component>
     </div>
     <div class="gallery-item">
-        <app-tool-gallery-component titleHeader="Float" subHeader="Atomic">
+        <app-tool-gallery-component titleHeader="TODO" subHeader="Float">
             <ng-template #header>
                 <app-atomic-float [property]="'9999999'" isUni isTot crud="CRUD"></app-atomic-float>
             </ng-template>
@@ -123,7 +139,7 @@
         </app-tool-gallery-component>
     </div>
     <div class="gallery-item">
-        <app-tool-gallery-component titleHeader="Integer" subHeader="Atomic">
+        <app-tool-gallery-component titleHeader="TODO" subHeader="Integer">
             <ng-template #header>
                 <app-atomic-integer [property]="9999999" isUni isTot crud="CRUD"></app-atomic-integer>
             </ng-template>
@@ -139,23 +155,7 @@
         </app-tool-gallery-component>
     </div>
     <div class="gallery-item">
-        <app-tool-gallery-component titleHeader="Object" subHeader="Atomic">
-            <ng-template #header>
-                <app-atomic-object [property]="data" isUni isTot crud="CRUD"></app-atomic-object>
-            </ng-template>
-            <ng-template #body>
-                <p>
-                    The object component allows the user to inspect and read more of an entity and adds a dropdown of
-                    different actions that the user can take on the entity.
-                </p>
-            </ng-template>
-            <ng-template #footer>
-                <p-button label="How to use" icon="pi pi-question-circle" routerLink="/tools/atomic/object"></p-button>
-            </ng-template>
-        </app-tool-gallery-component>
-    </div>
-    <div class="gallery-item">
-        <app-tool-gallery-component titleHeader="Password" subHeader="Atomic">
+        <app-tool-gallery-component titleHeader="TODO" subHeader="Password">
             <ng-template #header>
                 <app-atomic-password [property]="'Pre-set value'" isUni isTot crud="CRUD"></app-atomic-password>
             </ng-template>
diff --git a/src/app/tools/tool-gallery/tool-gallery.component.ts b/src/app/tools/tool-gallery/tool-gallery.component.ts
index 260089ac1..c1b262916 100644
--- a/src/app/tools/tool-gallery/tool-gallery.component.ts
+++ b/src/app/tools/tool-gallery/tool-gallery.component.ts
@@ -13,7 +13,7 @@ import { applyPatch } from 'fast-json-patch';
   styleUrls: ['./tool-gallery.component.scss'],
 })
 export class ToolGalleryComponent implements Resource<TestDataInterface> {
-  data = JSON.parse(JSON.stringify(testdata[0]));
+  data: TestDataInterface = JSON.parse(JSON.stringify(testdata[0]));
 
   constructor() {}
 

From 3dc2cbbe32994ac14a7079c471dad28ba0cb7611 Mon Sep 17 00:00:00 2001
From: Michiel Stornebrink <michielstornebrink@gmail.com>
Date: Wed, 21 Dec 2022 22:51:09 +0100
Subject: [PATCH 20/26] Add mock rule to keep object label same as Name

---
 src/app/tools/tool-gallery/tool-gallery.component.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/tools/tool-gallery/tool-gallery.component.ts b/src/app/tools/tool-gallery/tool-gallery.component.ts
index c1b262916..af5d0c6fa 100644
--- a/src/app/tools/tool-gallery/tool-gallery.component.ts
+++ b/src/app/tools/tool-gallery/tool-gallery.component.ts
@@ -21,10 +21,12 @@ export class ToolGalleryComponent implements Resource<TestDataInterface> {
     // Prepend path of patches with '/', because our backend has a different (probably wrong) implementation
     // of the JSON-Patch (RFC6902) standard. The applyPatch function below requires the '/'.
     patches.forEach((x) => (x.path = `/${x.path}`));
+    let content = applyPatch(this.data, patches).newDocument;
+    content._label_ = content.Name; // Mock rule in backend
 
     return from([
       {
-        content: applyPatch(this.data, patches).newDocument,
+        content: content,
         patches: patches,
         isCommitted: true,
       } as PatchResponse<TestDataInterface>,

From cb68b8a7b2f2e6fdc735790a270d452b79ce163d Mon Sep 17 00:00:00 2001
From: Michiel Stornebrink <michielstornebrink@gmail.com>
Date: Wed, 21 Dec 2022 23:00:31 +0100
Subject: [PATCH 21/26] Add FIXME comment

---
 .../atomic-alphanumeric/atomic-alphanumeric.component.ts        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts b/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts
index bd37db262..be8b7491a 100644
--- a/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts
+++ b/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts
@@ -39,7 +39,7 @@ export class AtomicAlphanumericComponent extends BaseAtomicComponent<string> imp
           .patch([
             {
               op: 'replace',
-              path: this.propertyName,
+              path: this.propertyName, // FIXME: this must be relative to path of this.resource
               value: x,
             },
           ])

From 995b231112a38596519cb360d7b660b6cf7e66f7 Mon Sep 17 00:00:00 2001
From: Michiel Stornebrink <michielstornebrink@gmail.com>
Date: Wed, 21 Dec 2022 23:01:02 +0100
Subject: [PATCH 22/26] Move isNewItemInputRequired() to base class

---
 src/app/shared/atomic-components/BaseAtomicComponent.class.ts | 4 ++++
 .../atomic-alphanumeric/atomic-alphanumeric.component.ts      | 4 ----
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/shared/atomic-components/BaseAtomicComponent.class.ts b/src/app/shared/atomic-components/BaseAtomicComponent.class.ts
index 8beeb4968..3900f974a 100644
--- a/src/app/shared/atomic-components/BaseAtomicComponent.class.ts
+++ b/src/app/shared/atomic-components/BaseAtomicComponent.class.ts
@@ -63,4 +63,8 @@ export abstract class BaseAtomicComponent<T> implements OnInit, OnChanges {
       return [property];
     }
   }
+
+  public isNewItemInputRequired() {
+    return this.isTot && this.data.length === 0;
+  }
 }
diff --git a/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts b/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts
index be8b7491a..159db02aa 100644
--- a/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts
+++ b/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts
@@ -20,10 +20,6 @@ export class AtomicAlphanumericComponent extends BaseAtomicComponent<string> imp
   @Input()
   propertyName!: string;
 
-  isNewItemInputRequired() {
-    return this.isTot && this.property?.length === 0;
-  }
-
   override ngOnInit(): void {
     super.ngOnInit();
     this.formControl = new FormControl(this.data[0], { nonNullable: false, updateOn: 'blur' });

From 1afb6429b5b812c3388c3e2b89e0c9dbff1502bf Mon Sep 17 00:00:00 2001
From: Michiel Stornebrink <michielstornebrink@gmail.com>
Date: Wed, 21 Dec 2022 23:19:51 +0100
Subject: [PATCH 23/26] Cleanup duplicate method. Already in base class

---
 .../atomic-bigalphanumeric.component.ts                       | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/app/shared/atomic-components/atomic-bigalphanumeric/atomic-bigalphanumeric.component.ts b/src/app/shared/atomic-components/atomic-bigalphanumeric/atomic-bigalphanumeric.component.ts
index 0b4363792..f9a00815b 100644
--- a/src/app/shared/atomic-components/atomic-bigalphanumeric/atomic-bigalphanumeric.component.ts
+++ b/src/app/shared/atomic-components/atomic-bigalphanumeric/atomic-bigalphanumeric.component.ts
@@ -8,8 +8,4 @@ import { BaseAtomicComponent } from '../BaseAtomicComponent.class';
 })
 export class AtomicBigalphanumericComponent extends BaseAtomicComponent<string> {
   newItem!: string;
-
-  isNewItemInputRequired() {
-    return this.isTot && this.property?.length === 0;
-  }
 }

From 71b5ceb13830065080c7928be88dad9737c78d28 Mon Sep 17 00:00:00 2001
From: Michiel Stornebrink <michielstornebrink@gmail.com>
Date: Wed, 21 Dec 2022 23:44:49 +0100
Subject: [PATCH 24/26] Add TODOs

---
 .../shared/atomic-components/BaseAtomicComponent.class.ts | 1 +
 .../atomic-alphanumeric/atomic-alphanumeric.component.ts  | 8 +++++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/app/shared/atomic-components/BaseAtomicComponent.class.ts b/src/app/shared/atomic-components/BaseAtomicComponent.class.ts
index 3900f974a..b3c694cc7 100644
--- a/src/app/shared/atomic-components/BaseAtomicComponent.class.ts
+++ b/src/app/shared/atomic-components/BaseAtomicComponent.class.ts
@@ -5,6 +5,7 @@ import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/cor
 })
 export abstract class BaseAtomicComponent<T> implements OnInit, OnChanges {
   @Input()
+  // TODO Refactor to combination of parent-propertyName. We need a link to the parent anyway
   property: T | Array<T> | null = null;
 
   public data: Array<T> = [];
diff --git a/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts b/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts
index 159db02aa..74f0fc5e4 100644
--- a/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts
+++ b/src/app/shared/atomic-components/atomic-alphanumeric/atomic-alphanumeric.component.ts
@@ -14,11 +14,13 @@ export class AtomicAlphanumericComponent extends BaseAtomicComponent<string> imp
   newItemControl: FormControl<string> = new FormControl<string>('', { nonNullable: true, updateOn: 'blur' });
 
   @Input()
-  // TODO: change unknown type
-  resource!: Resource<unknown>;
+  // The type of the T for Resource<T> is not relevant nor to determine here; therefore unknow
+  // We require a Resource, that implements the required methods (like patch)
+  // Most likely this is a top-level component for a specific application interface (e.g. ProjectComponent)
+  resource!: Resource<unknown>; // TODO move to the base class. It is needed for all atomic components
 
   @Input()
-  propertyName!: string;
+  propertyName!: string; // TODO move to the base class. It is needed for all atomic components
 
   override ngOnInit(): void {
     super.ngOnInit();

From 3905de65eccb8a1556a5ee03e4c072cd705650cf Mon Sep 17 00:00:00 2001
From: Michiel Stornebrink <michielstornebrink@gmail.com>
Date: Wed, 21 Dec 2022 23:45:37 +0100
Subject: [PATCH 25/26] Fix type assertion

---
 .../atomic-object/atomic-object.component.ts                  | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/app/shared/atomic-components/atomic-object/atomic-object.component.ts b/src/app/shared/atomic-components/atomic-object/atomic-object.component.ts
index e98ceb9c3..fdd180618 100644
--- a/src/app/shared/atomic-components/atomic-object/atomic-object.component.ts
+++ b/src/app/shared/atomic-components/atomic-object/atomic-object.component.ts
@@ -3,8 +3,6 @@ import { MenuItem } from 'primeng/api';
 import { BaseAtomicComponent } from '../BaseAtomicComponent.class';
 import { Router } from '@angular/router';
 import { InterfaceRefObject, ObjectBase } from '../../objectBase.interface';
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type AtomicObjectMenuItem = any;
 
 @Component({
   selector: 'app-atomic-object',
@@ -12,7 +10,7 @@ type AtomicObjectMenuItem = any;
   styleUrls: ['./atomic-object.component.scss'],
 })
 export class AtomicObjectComponent extends BaseAtomicComponent<ObjectBase> implements OnInit {
-  public menuItems: AtomicObjectMenuItem = [];
+  public menuItems: { [index: string]: Array<MenuItem> } = {};
 
   constructor(private router: Router) {
     super();

From 47e94910998573cb471cbfbff21bc8a9e025acd0 Mon Sep 17 00:00:00 2001
From: Michiel Stornebrink <michielstornebrink@gmail.com>
Date: Wed, 21 Dec 2022 23:45:45 +0100
Subject: [PATCH 26/26] Typo

---
 .../atomic-password/atomic-password.component.html              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/shared/atomic-components/atomic-password/atomic-password.component.html b/src/app/shared/atomic-components/atomic-password/atomic-password.component.html
index f51589444..a04cefb86 100644
--- a/src/app/shared/atomic-components/atomic-password/atomic-password.component.html
+++ b/src/app/shared/atomic-components/atomic-password/atomic-password.component.html
@@ -3,7 +3,7 @@
     [feedback]="false"
     [(ngModel)]="property"
     [required]="isTot"
-    pTooltip="Passwords are not stored securly"
+    pTooltip="Passwords are not stored securely"
 ></p-password>
 <span *ngIf="!isUni && canUpdate()">
     <i>For this template, the password expression must be univalent</i>