Introduce PersistProperty to update asset properties. Address some re…

…view comments

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

@@ -52,7 +52,7 @@ <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'"
+        *ngIf="isPropertyStateView(theDefendant.id)"
         [identifiers]="identifiers$ | async"
         [isDeleting]="(isDefendantDeleting$(theDefendant.id) | async)"
         (defendantDeleted)="onDefendantDeleted($event)"
@@ -61,10 +61,10 @@ <h2>{{theAsset.name}}</h2>
       <app-edit-defendant
         [defendant]="theDefendant"
         [identifiers]="identifiers$ | async"
-        *ngIf="getPropertyState(theDefendant.id) === 'edit'"
+        *ngIf="isPropertyStateEdit(theDefendant.id)"
         (onCancel)="setPropertyStateView(theDefendant.id)"
         (onUpdate)="onPropertyUpdate($event)"
-        (onSave)="onPropertyEdit($event)"
+        (onSave)="onPropertyPersist($event)"
       > </app-edit-defendant>
     </div>
   </section>

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

@@ -34,13 +34,13 @@ export enum AssetProperties {
   ADRESA = 'adresa',
 }
 
-export enum AssetDetailState {
+export enum FormState {
   View = 'view',
   Edit = 'edit',
 }
 
 interface IPropertyStateMap {
-  [propId: string]: AssetDetailState
+  [propId: string]: FormState
 }
 
 @Component({
@@ -68,7 +68,7 @@ export class AssetDetailComponent implements OnInit {
   measurements: AssetMeasurement[];
   currencies: AssetCurrency[];
 
-  private state: AssetDetailState = AssetDetailState.View;
+  private state: FormState = FormState.View;
   private propertyStates: IPropertyStateMap = {};
 
   properties = [
@@ -97,8 +97,10 @@ export class AssetDetailComponent implements OnInit {
     });
 
     // Initialize each property state in view mode
-    this.defendants$.subscribe(defendants => defendants
-      .forEach(defendant =>  this.propertyStates[defendant.id] = AssetDetailState.View));
+    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));
@@ -180,13 +182,9 @@ export class AssetDetailComponent implements OnInit {
     this.store.dispatch(new fromStore.UpdateProperty(aProperty));
   }
 
-  onPropertyEdit(aProperty: AssetProperty) {
-
-    if (aProperty.isDefendant()) {
-      this.store.dispatch(new fromStore.UpdateDefendant(aProperty))
-    }
-
-    this.propertyStates[aProperty.getId()] = AssetDetailState.View;
+  onPropertyPersist(aProperty: AssetProperty) {
+    this.store.dispatch(new fromStore.PersistProperty(aProperty));
+    this.propertyStates[aProperty.getId()] = FormState.View;
   }
 
   onEditAsset(aAsset: Asset) {
@@ -207,34 +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;
   }
 
-  getPropertyState(id: string): AssetDetailState {
-    return this.propertyStates[id] || AssetDetailState.View;
+  isPropertyStateEdit(id: string): boolean {
+    return this.propertyStates[id] === FormState.Edit;
   }
 
   setPropertyStateView(id: string): void {
-    this.propertyStates[id] = AssetDetailState.View;
+    this.propertyStates[id] = FormState.View;
   }
 
   setPropertyStateEdit(id: string): void {
-    this.propertyStates[id] = AssetDetailState.Edit;
+    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/store/actions/asset-properties.action.ts

@@ -5,6 +5,7 @@ export enum AssetPropertyActionTypes {
   CreateProperty = '[Asset Properties] Create Property',
   DeleteProperty = '[Asset Properties] Delete Property',
   UpdateProperty = '[Asset Properties] Update Property',
+  PersistProperty = '[Asset Properties] Persist Property',
 }
 
 // update properties
@@ -23,8 +24,14 @@ export class DeleteProperty implements Action {
   constructor(public payload: number) {}
 }
 
+export class PersistProperty implements Action {
+  readonly type: string = AssetPropertyActionTypes.PersistProperty;
+  constructor(public payload: AssetProperty) {}
+}
+
 // action types
 export type AssetPropertiesAction =
   CreateProperty
   | UpdateProperty
-  | DeleteProperty;
+  | DeleteProperty
+  | PersistProperty;

src/app/core/store/effects/asset-properties.effect.ts

@@ -42,6 +42,24 @@ export class AssetPropertiesEffects {
       })
     );
 
+  @Effect()
+  persistProperty$ = this.actions$
+      .pipe(
+        ofType(assetPropertyActions.AssetPropertyActionTypes.PersistProperty),
+        map(({ payload }: assetPropertyActions.PersistProperty) => {
+
+          if (!payload) {
+            return;
+          }
+
+          if (payload.isDefendant()) {
+            return new defendantActions.UpdateDefendant(payload);
+          }
+
+          return;
+        })
+      )
+
   constructor(private actions$: Actions) {
   }
 }

src/app/core/store/reducers/defendants.reducer.ts

@@ -87,7 +87,7 @@ export function reducer(
         ...state,
         entities: {
           ...state.entities,
-          [defendant.id]: defendant,
+          [defendant.id]: defendant.toJson(),
         },
         loading: {
           ...state.loading,