#52 Implement updating defendants

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/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,19 @@ <h2>{{theAsset.name}}</h2>
     <div class="asset-details-card mat-elevation-z8" *ngFor="let theDefendant of (defendants$ | async)">
       <app-view-defendant
         [defendant]="theDefendant"
+        *ngIf="getPropertyState(theDefendant.id) === 'view'"
         [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="getPropertyState(theDefendant.id) === 'edit'"
+        (onCancel)="setPropertyStateView(theDefendant.id)"
+        (onSave)="onPropertyEdit(theDefendant)"
+      > </app-edit-defendant>
     </div>
   </section>
 
@@ -91,49 +100,49 @@ <h2>Adauga proprietati</h2>
     </div>
 
     <ng-template #editProperty>
-      <app-edit-solution
-        class="mat-elevation-z8"
-        *ngIf="(assetProperty$ | async)?.isSolution()"
-        [crimeTypes]="crimeTypes$ | async"
-        [decisions]="decisions$ | async"
-        [institutions]="institutions$ | async"
-        [stages]="stages$ | async"
-        [precautionaryMeasures]="(precautionaryMeasures$ | async)"
-        [recoveryBeneficiaries]="(recoveryBeneficiaries$ | async)"
-        [solution]="assetProperty$ | async"
-        (onUpdate)="onPropertyUpdate($event)"
-        (onCancel)="onPropertyCancel($event)"
-        (onSave)="onPropertySave($event)"
-      ></app-edit-solution>
-
-      <app-edit-storage
-        class="mat-elevation-z8"
-        *ngIf="(assetProperty$ | async)?.isStorageSpace()"
-        [storageSpace]="assetProperty$ | async"
-        (onUpdate)="onPropertyUpdate($event)"
-        (onCancel)="onPropertyCancel($event)"
-        (onSave)="onPropertySave($event)"
-      ></app-edit-storage>
-
-      <app-edit-address
-        class="mat-elevation-z8"
-        *ngIf="(assetProperty$ | async)?.isAddress()"
-        [address]="(assetProperty$ | async)"
-        [counties]="(counties$ | async)"
-        (onUpdate)="onPropertyUpdate($event)"
-        (onCancel)="onPropertyCancel($event)"
-        (onSave)="onPropertySave($event)"
-      ></app-edit-address>
-
-      <app-edit-defendant
-        class="mat-elevation-z8"
-        *ngIf="(assetProperty$ | async)?.isDefendant()"
-        [defendant]="(assetProperty$ | async)"
-        [identifiers]="(identifiers$ | async)"
-        (onUpdate)="onPropertyUpdate($event)"
-        (onCancel)="onPropertyCancel($event)"
-        (onSave)="onPropertySave($event)"
-      ></app-edit-defendant>
+        <app-edit-solution
+          class="asset-details-card mat-elevation-z8"
+          *ngIf="(assetProperty$ | async)?.isSolution()"
+          [crimeTypes]="crimeTypes$ | async"
+          [decisions]="decisions$ | async"
+          [institutions]="institutions$ | async"
+          [stages]="stages$ | async"
+          [precautionaryMeasures]="(precautionaryMeasures$ | async)"
+          [recoveryBeneficiaries]="(recoveryBeneficiaries$ | async)"
+          [solution]="assetProperty$ | async"
+          (onUpdate)="onPropertyUpdate($event)"
+          (onCancel)="onPropertyCancel($event)"
+          (onSave)="onPropertySave($event)"
+        ></app-edit-solution>
+
+        <app-edit-storage
+          class="asset-details-card mat-elevation-z8"
+          *ngIf="(assetProperty$ | async)?.isStorageSpace()"
+          [storageSpace]="assetProperty$ | async"
+          (onUpdate)="onPropertyUpdate($event)"
+          (onCancel)="onPropertyCancel($event)"
+          (onSave)="onPropertySave($event)"
+        ></app-edit-storage>
+
+        <app-edit-address
+          class="asset-details-card mat-elevation-z8"
+          *ngIf="(assetProperty$ | async)?.isAddress()"
+          [address]="(assetProperty$ | async)"
+          [counties]="(counties$ | async)"
+          (onUpdate)="onPropertyUpdate($event)"
+          (onCancel)="onPropertyCancel($event)"
+          (onSave)="onPropertySave($event)"
+        ></app-edit-address>
+
+        <app-edit-defendant
+          class="asset-details-card mat-elevation-z8"
+          *ngIf="(assetProperty$ | async)?.isDefendant()"
+          [defendant]="(assetProperty$ | async)"
+          [identifiers]="(identifiers$ | async)"
+          (onUpdate)="onPropertyUpdate($event)"
+          (onCancel)="onPropertyCancel($event)"
+          (onSave)="onPropertySave($event)"
+        ></app-edit-defendant>
     </ng-template>
   </section>
 </div>

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

@@ -39,6 +39,10 @@ export enum AssetDetailState {
   Edit = 'edit',
 }
 
+interface IPropertyStateMap {
+  [propId: string]: AssetDetailState
+}
+
 @Component({
   templateUrl: 'asset-detail.component.html',
   styleUrls: ['asset-detail.component.scss'],
@@ -65,6 +69,7 @@ export class AssetDetailComponent implements OnInit {
   currencies: AssetCurrency[];
 
   private state: AssetDetailState = AssetDetailState.View;
+  private propertyStates: IPropertyStateMap = {};
 
   properties = [
     { name: 'Solutie', value: AssetProperties.SOLUTIE },
@@ -91,6 +96,10 @@ export class AssetDetailComponent implements OnInit {
       this.addresses$ = this.store.pipe(select(fromStore.getAllAddressesForAssetId(theId)));
     });
 
+    // Initialize each asset property form as view
+    this.defendants$.subscribe(defendants => defendants
+      .forEach(defendant =>  this.propertyStates[defendant.id] = AssetDetailState.View));
+
     this.asset$.pipe(take(1))
       .subscribe((aAsset: Asset) => this.getSubcategories(aAsset.category.id));
 
@@ -112,12 +121,13 @@ 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 )
     );
   }
 
   addProperty() {
     this.asset$.pipe(take(1)).subscribe((aAsset: Asset) => {
+
       switch (this.selectedProperty) {
         case AssetProperties.SOLUTIE: {
           const theSolution = new Solution();
@@ -156,10 +166,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 +174,15 @@ export class AssetDetailComponent implements OnInit {
     this.store.dispatch(new fromStore.CreateProperty(aProperty));
   }
 
+  onPropertyEdit(aProperty: AssetProperty) {
+
+    if (aProperty.isDefendant()) {
+      this.store.dispatch(new fromStore.UpdateDefendant(aProperty))
+    }
+
+    this.propertyStates[aProperty.getId()] = AssetDetailState.View;
+  }
+
   onEditAsset(aAsset: Asset) {
     this.store.dispatch(new fromStore.UpdateAsset(aAsset));
     this.setStateView();
@@ -193,6 +208,18 @@ export class AssetDetailComponent implements OnInit {
     return this.state === AssetDetailState.Edit;
   }
 
+  getPropertyState(id: string): AssetDetailState {
+    return this.propertyStates[id] || AssetDetailState.View;
+  }
+
+  setPropertyStateView(id: string): void {
+    this.propertyStates[id] = AssetDetailState.View;
+  }
+
+  setPropertyStateEdit(id: string): void {
+    this.propertyStates[id] = AssetDetailState.Edit;
+  }
+
   private resetSelectedProperty() {
     this.selectedProperty = undefined;
   }

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

@@ -31,4 +31,12 @@ 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}/defendants/${aDefendantRequest.id}`, aDefendantRequest)
+      .pipe(
+        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;
   }
 

src/app/core/services/defendants.service.ts

@@ -11,26 +11,28 @@ export class DefendantsService {
   constructor(private defendantsApiService: DefendantsApiService) {
   }
 
+  private handleResponse(response: DefendantResponse, asset: Asset) {
+    const theDefendant = new Defendant(response);
+    theDefendant.setAsset(asset);
+    return theDefendant
+  }
+
   public createDefendant$(aDefendant: Defendant): Observable<Defendant> {
     return this.defendantsApiService.createDefendant$(aDefendant.getAsset().id, this.toRequest(aDefendant))
       .pipe(
-        map((aNewDefendant: DefendantResponse) => {
-          const theDefendant = new Defendant(aNewDefendant);
-          theDefendant.setAsset(aDefendant.getAsset());
-          return theDefendant;
-        })
+        map((aNewDefendant: DefendantResponse) =>
+          this.handleResponse(aNewDefendant, aDefendant.getAsset())
+        )
       );
   }
 
   public getDefendants$(aAsset: Asset): Observable<Defendant[]> {
     return this.defendantsApiService.getDefendants$(aAsset.id)
       .pipe(
         mergeMap(aDefendants => aDefendants),
-        map((aNewDefendant: DefendantResponse) => {
-          const theDefendant = new Defendant(aNewDefendant);
-          theDefendant.setAsset(aAsset);
-          return theDefendant;
-        }),
+        map((aNewDefendant: DefendantResponse) =>
+          this.handleResponse(aNewDefendant, aAsset)
+        ),
         toArray()
       )
   }
@@ -39,6 +41,15 @@ export class DefendantsService {
     return this.defendantsApiService.deleteDefendant(assetId, defendantId);
   }
 
+  public updateDefendant$(assetId: number, aDefendant: Defendant) {
+    return this.defendantsApiService.updateDefendant(assetId, this.toRequest(aDefendant))
+      .pipe(
+        map((response: DefendantResponse) =>
+          this.handleResponse(response, aDefendant.getAsset())
+        )
+      )
+  }
+
   private toRequest(aDefendant: Defendant): DefendantRequest {
     return {
       id: aDefendant.id,