Merge pull request #113 from AmpersandTarski/feature/forms-michiel

Feature/forms michiel

.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"
+          }
+        ]
       }
     },
     {

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",

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 { ProjectInterface } from './project/project.interface';
 import { IBackendService } from './backend.service.interface';
@@ -37,8 +38,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> {

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>

src/app/project-administration/project-edit/project-edit.component.html

@@ -8,11 +8,12 @@ <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
                             crud="CRUD"
-                            (propertyEvent)="patchProject($event, '/Name')"
                         ></app-atomic-alphanumeric>
                     </div>
                 </div>
@@ -24,7 +25,6 @@ <h5>{{ data.Name }}</h5>
                             isUni
                             isTot
                             crud="CRUD"
-                            (propertyEvent)="patchProject($event, '/Description')"
                         ></app-atomic-bigalphanumeric>
                     </div>
                 </div>
@@ -36,7 +36,6 @@ <h5>{{ data.Name }}</h5>
                             isUni
                             isTot
                             crud="CRUD"
-                            (propertyEvent)="patchProject($event, '/Start_32_date')"
                         ></app-atomic-date>
                     </div>
                 </div>
@@ -48,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">
@@ -84,7 +70,6 @@ <h5>{{ data.Name }}</h5>
                             isUni
                             isTot
                             crud="CRUD"
-                            (propertyEvent)="patchProject($event, '/Project_32_members')"
                         ></app-atomic-object>
                     </div>
                 </div>

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,13 @@ 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]);
+        }
+      }),
+    );
   }
 }

src/app/shared/atomic-components/BaseAtomicComponent.class.ts

@@ -1,16 +1,15 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 
 @Component({
   template: '',
 })
 export abstract class BaseAtomicComponent<T> implements OnInit, OnChanges {
-  @Input() property: T | Array<T> | null = null;
+  @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> = [];
-  private oldProperty: Array<T> = [];
-  public canCreate!: boolean;
-  public canRead!: boolean;
-  public canUpdate!: boolean;
-  public canDelete!: boolean;
+
   private _isUni: boolean = false;
   @Input()
   set isUni(attribute: boolean | '') {
@@ -19,6 +18,7 @@ export abstract class BaseAtomicComponent<T> implements OnInit, OnChanges {
   get isUni(): boolean {
     return this._isUni;
   }
+
   private _isTot: boolean = false;
   @Input()
   set isTot(attribute: boolean | '') {
@@ -27,13 +27,24 @@ export abstract class BaseAtomicComponent<T> implements OnInit, OnChanges {
   get isTot(): boolean {
     return this._isTot;
   }
-  @Input() crud: string = 'crud';
-  @Output() propertyEvent = new EventEmitter<T | Array<T> | null>();
+
+  @Input()
+  crud: string = 'cRud';
+
+  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);
-    // TODO: unneeded when ng formcontrols work
-    this.oldProperty = this.requireArray(this.property);
     this.data = this.requireArray(this.property);
   }
 
@@ -42,26 +53,6 @@ export abstract class BaseAtomicComponent<T> implements OnInit, OnChanges {
     if (changes.hasOwnProperty('isUni')) {
       this.isUni = changes['isUni'].firstChange;
     }
-    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];
-    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) {
@@ -73,4 +64,8 @@ export abstract class BaseAtomicComponent<T> implements OnInit, OnChanges {
       return [property];
     }
   }
+
+  public isNewItemInputRequired() {
+    return this.isTot && this.data.length === 0;
+  }
 }

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 *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]="formControl" [required]="isTot" />
         </div>
     </div>
 </div>
@@ -25,7 +18,7 @@
                     type="text"
                     class="min-w-10rem w-full"
                     pInputText
-                    [(ngModel)]="newItem"
+                    [formControl]="newItemControl"
                     placeholder="Add text"
                     [required]="isNewItemInputRequired()"
                 />