Merge pull request #86 from emanuelmd/master

Issue #52 - Edit defendant on the asset form

package.json

@@ -11,8 +11,8 @@
     "ng": "ng",
     "preinstall": "npm install -g @angular/cli",
     "start": "ng serve --host localhost --port 5000",
-    "start:fake": "ng serve --env fake --host localhost --port 5000",
-    "start:local": "ng serve --env local --host localhost --port 5000",
+    "start:fake": "ng serve --configuration=fake --host localhost --port 5000",
+    "start:local": "ng serve --configuration=local --host localhost --port 5000",
     "test": "ng test --watch=false --code-coverage",
     "test:watch": "ng test --code-coverage"
   },

src/app/assets/components/edit-defendant/edit-defendant.component.html

@@ -3,7 +3,7 @@ <h2>Inculpat</h2>
 
   <form [formGroup]="defendantForm" (ngSubmit)="save()">
     <mat-form-field>
-      <mat-select placeholder="Tip inculpat" 
+      <mat-select placeholder="Tip inculpat"
                   formControlName="defendantType"
       >
         <mat-option *ngFor="let option of defendantTypeOptions" [value]="option">
@@ -97,8 +97,8 @@ <h2>Inculpat</h2>
     </div>
 
     <div class="row actions">
-      <button mat-button (click)="cancel()">ANULEAZA</button>
-      <button mat-raised-button color="primary" type="submit" [disabled]="!isFormValid">SALVEAZA</button>
+      <button mat-button (click)="cancel()">Anuleaza</button>
+      <button mat-raised-button color="primary" type="submit" [disabled]="!isFormValid">Salveaza</button>
     </div>
   </form>
 </section>

src/app/assets/components/edit-defendant/edit-defendant.component.ts

@@ -84,10 +84,12 @@ export class EditDefendantComponent implements OnInit {
   }
 
   get isFormValid(): boolean {
-    return this.isPerson(this.defendantType) &&
-      this.defendantForm.get('pf').valid ||
-      this.isCompany(this.defendantType) &&
-      this.defendantForm.get('pj').valid
+
+    if (this.isPerson(this.defendantType)) {
+      return this.defendantForm.get('pf').valid;
+    }
+
+    return this.defendantForm.get('pj').valid;
   }
 
   get defendantType(): string {

src/app/assets/components/view-defendant/view-defendant.component.html

@@ -45,11 +45,16 @@ <h2>Inculpat</h2>
     </div>
   </div>
   <section class="buttons">
-    <button 
-      mat-raised-button 
-      (click)="onDefendantDeleted()" 
+    <button
+      mat-raised-button
+      (click)="onDefendantDeleted()"
       color="warn"
       [disabled]="isDeleting"
     >Sterge</button>
+    <button
+      mat-raised-button
+      (click)="onDefendantEdit()"
+      color="primary"
+    >Modifica</button>
   </section>
 </section>

src/app/assets/components/view-defendant/view-defendant.component.scss

@@ -23,5 +23,9 @@
   .buttons {
     display: flex;
     justify-content: flex-end;
+
+    button {
+      margin-left: .5em;
+    }
   }
 }

src/app/assets/components/view-defendant/view-defendant.component.ts

@@ -11,6 +11,7 @@ export class ViewDefendantComponent {
   @Input() identifiers: Identifier[];
   @Input() isDeleting: boolean;
   @Output() defendantDeleted: EventEmitter<Defendant> = new EventEmitter<Defendant>();
+  @Output() defendantEdit: EventEmitter<Defendant> = new EventEmitter<Defendant>();
 
   getDefendantType(aIsPerson: boolean) {
     return aIsPerson ? DefendantType.Person.toString() : DefendantType.Company.toString();
@@ -23,4 +24,8 @@ export class ViewDefendantComponent {
   onDefendantDeleted() {
     this.defendantDeleted.emit(this.defendant);
   }
+
+  onDefendantEdit() {
+    this.defendantEdit.emit(this.defendant);
+  }
 }

src/app/assets/containers/asset-detail/asset-detail.component.html

@@ -52,10 +52,20 @@ <h2>{{theAsset.name}}</h2>
     <div class="asset-details-card mat-elevation-z8" *ngFor="let theDefendant of (defendants$ | async)">
       <app-view-defendant
         [defendant]="theDefendant"
+        *ngIf="isPropertyStateView(theDefendant.id)"
         [identifiers]="identifiers$ | async"
         [isDeleting]="(isDefendantDeleting$(theDefendant.id) | async)"
         (defendantDeleted)="onDefendantDeleted($event)"
+        (defendantEdit)="setPropertyStateEdit(theDefendant.id)"
       ></app-view-defendant>
+      <app-edit-defendant
+        [defendant]="theDefendant"
+        [identifiers]="identifiers$ | async"
+        *ngIf="isPropertyStateEdit(theDefendant.id)"
+        (onCancel)="setPropertyStateView(theDefendant.id)"
+        (onUpdate)="onPropertyUpdate($event)"
+        (onSave)="onPropertyPersist($event)"
+      > </app-edit-defendant>
     </div>
   </section>
 
@@ -92,7 +102,7 @@ <h2>Adauga proprietati</h2>
 
     <ng-template #editProperty>
       <app-edit-solution
-        class="mat-elevation-z8"
+        class="asset-details-card mat-elevation-z8"
         *ngIf="(assetProperty$ | async)?.isSolution()"
         [crimeTypes]="crimeTypes$ | async"
         [decisions]="decisions$ | async"
@@ -107,7 +117,7 @@ <h2>Adauga proprietati</h2>
       ></app-edit-solution>
 
       <app-edit-storage
-        class="mat-elevation-z8"
+        class="asset-details-card mat-elevation-z8"
         *ngIf="(assetProperty$ | async)?.isStorageSpace()"
         [storageSpace]="assetProperty$ | async"
         (onUpdate)="onPropertyUpdate($event)"
@@ -116,7 +126,7 @@ <h2>Adauga proprietati</h2>
       ></app-edit-storage>
 
       <app-edit-address
-        class="mat-elevation-z8"
+        class="asset-details-card mat-elevation-z8"
         *ngIf="(assetProperty$ | async)?.isAddress()"
         [address]="(assetProperty$ | async)"
         [counties]="(counties$ | async)"
@@ -126,7 +136,7 @@ <h2>Adauga proprietati</h2>
       ></app-edit-address>
 
       <app-edit-defendant
-        class="mat-elevation-z8"
+        class="asset-details-card mat-elevation-z8"
         *ngIf="(assetProperty$ | async)?.isDefendant()"
         [defendant]="(assetProperty$ | async)"
         [identifiers]="(identifiers$ | async)"

src/app/assets/containers/asset-detail/asset-detail.component.scss

@@ -49,8 +49,4 @@
       justify-content: flex-end;
     }
   }
-
-  app-edit-solution, app-edit-storage, app-edit-address, app-edit-defendant {
-    @include material-card();
-  }
 }

src/app/assets/containers/asset-detail/asset-detail.component.ts

@@ -34,11 +34,15 @@ export enum AssetProperties {
   ADRESA = 'adresa',
 }
 
-export enum AssetDetailState {
+export enum FormState {
   View = 'view',
   Edit = 'edit',
 }
 
+interface IPropertyStateMap {
+  [propId: string]: FormState
+}
+
 @Component({
   templateUrl: 'asset-detail.component.html',
   styleUrls: ['asset-detail.component.scss'],
@@ -64,7 +68,8 @@ export class AssetDetailComponent implements OnInit {
   measurements: AssetMeasurement[];
   currencies: AssetCurrency[];
 
-  private state: AssetDetailState = AssetDetailState.View;
+  private state: FormState = FormState.View;
+  private propertyStates: IPropertyStateMap = {};
 
   properties = [
     { name: 'Solutie', value: AssetProperties.SOLUTIE },
@@ -91,6 +96,12 @@ export class AssetDetailComponent implements OnInit {
       this.addresses$ = this.store.pipe(select(fromStore.getAllAddressesForAssetId(theId)));
     });
 
+    // Initialize each property state in view mode
+    this.defendants$
+      .pipe(take(1))
+      .subscribe(defendants => defendants
+        .forEach(defendant =>  this.propertyStates[defendant.id] = FormState.View));
+
     this.asset$.pipe(take(1))
       .subscribe((aAsset: Asset) => this.getSubcategories(aAsset.category.id));
 
@@ -112,12 +123,15 @@ export class AssetDetailComponent implements OnInit {
 
   isEditingAssetProperty$(): Observable<boolean> {
     return combineLatest([this.asset$, this.assetProperty$]).pipe(
-      map(([aAsset, aAssetProperty]) => aAsset !== undefined && aAssetProperty !== undefined)
+      map(([aAsset, aAssetProperty]) =>
+        aAsset !== undefined && aAssetProperty !== undefined && aAssetProperty.getId() === undefined
+      )
     );
   }
 
   addProperty() {
     this.asset$.pipe(take(1)).subscribe((aAsset: Asset) => {
+
       switch (this.selectedProperty) {
         case AssetProperties.SOLUTIE: {
           const theSolution = new Solution();
@@ -156,10 +170,6 @@ export class AssetDetailComponent implements OnInit {
     this.setStateEdit();
   }
 
-  onPropertyUpdate(aProperty: AssetProperty) {
-    this.store.dispatch(new fromStore.UpdateProperty(aProperty));
-  }
-
   onPropertyCancel(aProperty: AssetProperty) {
     this.store.dispatch(new fromStore.DeleteProperty(aProperty.getAsset().id));
   }
@@ -168,6 +178,15 @@ export class AssetDetailComponent implements OnInit {
     this.store.dispatch(new fromStore.CreateProperty(aProperty));
   }
 
+  onPropertyUpdate(aProperty: AssetProperty) {
+    this.store.dispatch(new fromStore.UpdateProperty(aProperty));
+  }
+
+  onPropertyPersist(aProperty: AssetProperty) {
+    this.store.dispatch(new fromStore.PersistProperty(aProperty));
+    this.propertyStates[aProperty.getId()] = FormState.View;
+  }
+
   onEditAsset(aAsset: Asset) {
     this.store.dispatch(new fromStore.UpdateAsset(aAsset));
     this.setStateView();
@@ -186,22 +205,42 @@ export class AssetDetailComponent implements OnInit {
   }
 
   isStateView(): boolean {
-    return this.state === AssetDetailState.View;
+    return this.state === FormState.View;
   }
 
   isStateEdit(): boolean {
-    return this.state === AssetDetailState.Edit;
+    return this.state === FormState.Edit;
+  }
+
+  getPropertyState(id: string): FormState {
+    return this.propertyStates[id] || FormState.View;
+  }
+
+  isPropertyStateView(id: string): boolean {
+    return this.propertyStates[id] === FormState.View;
+  }
+
+  isPropertyStateEdit(id: string): boolean {
+    return this.propertyStates[id] === FormState.Edit;
+  }
+
+  setPropertyStateView(id: string): void {
+    this.propertyStates[id] = FormState.View;
+  }
+
+  setPropertyStateEdit(id: string): void {
+    this.propertyStates[id] = FormState.Edit;
   }
 
   private resetSelectedProperty() {
     this.selectedProperty = undefined;
   }
 
   private setStateEdit() {
-    this.state = AssetDetailState.Edit;
+    this.state = FormState.Edit;
   }
 
   private setStateView() {
-    this.state = AssetDetailState.View;
+    this.state = FormState.View;
   }
 }

src/app/core/http/defendants-api.service.ts

@@ -1,7 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { throwError as observableThrowError,  Observable } from 'rxjs';
-import { catchError } from 'rxjs/operators';
+import { catchError, map } from 'rxjs/operators';
 
 import { environment } from '@env/environment';
 import { DefendantRequest, DefendantResponse } from '../models';
@@ -31,4 +31,19 @@ export class DefendantsApiService {
         catchError(aError => observableThrowError(aError))
       );
   }
+
+  public updateDefendant(assetId: number, aDefendantRequest: DefendantRequest): Observable<DefendantResponse> {
+
+    return this.http.put<DefendantResponse>(
+      `${environment.api_url}/assets/${assetId}/defendant/${aDefendantRequest.id}`, aDefendantRequest)
+      .pipe(
+        map(response => {
+          // FIXME: When doing a `PUT` the API doesn't return the
+          // correct ID of the resource
+          response.id = aDefendantRequest.id;
+          return response
+        }),
+        catchError(aError => observableThrowError(aError))
+      )
+  }
 }

src/app/core/models/asset/asset-property.model.ts

@@ -1,5 +1,7 @@
 import { Asset } from './asset.model';
 
+import { Address, Defendant, Solution, StorageSpace } from './asset-properties';
+
 export enum AssetPropertyType {
   Address = 'Address',
   Defendant = 'Defendant',
@@ -10,6 +12,7 @@ export enum AssetPropertyType {
 export abstract class AssetProperty {
   protected asset: Asset;
   protected assetId: number;
+  protected abstract id: number;
   private _type: AssetPropertyType;
 
   protected constructor(aType: AssetPropertyType) {
@@ -21,6 +24,10 @@ export abstract class AssetProperty {
     this.assetId = aAsset.id;
   }
 
+  getId(): number {
+    return this.id;
+  }
+
   getAsset(): Asset {
     return this.asset;
   }
@@ -29,19 +36,19 @@ export abstract class AssetProperty {
     return this.assetId;
   }
 
-  isAddress(): boolean {
+  isAddress(): this is Address {
     return this.getType() === AssetPropertyType.Address;
   }
 
-  isDefendant(): boolean {
+  isDefendant(): this is Defendant {
     return this.getType() === AssetPropertyType.Defendant;
   }
 
-  isSolution(): boolean {
+  isSolution(): this is Solution {
     return this.getType() === AssetPropertyType.Solution;
   }
 
-  isStorageSpace(): boolean {
+  isStorageSpace(): this is StorageSpace {
     return this.getType() === AssetPropertyType.StorageSpace;
   }