Update the cost listing (near finalization) and fix some issues while loading costs from the backend

dmp-frontend/src/app/ui/dmp/editor/cost-editor/add-cost/add-cost.component.ts

@@ -23,7 +23,7 @@ export class AddCostComponent extends BaseComponent implements OnInit {
 		initialItems: () => this.searchCurrency(''),
 		displayFn: (item) => typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name,
 		titleFn: (item) => typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name,
-		valueAssign: (item) => typeof (item) == 'string' ? JSON.parse(item)['value'] : item.value
+		valueAssign: (item) => JSON.stringify(item)
 	};
 
 	constructor(

dmp-frontend/src/app/ui/dmp/editor/cost-editor/cost-listing/cost-listing.component.html

@@ -9,20 +9,30 @@
 			</div>
 			<div class="col-auto">
 				<mat-form-field>
-					<input matInput placeholder="Description" type="text" [formControl]="cost.get('description')">
+					<input matInput placeholder="{{'ADDEDITCOST-EDITOR.DESCRIPTION' | translate}}" type="text" [formControl]="cost.get('description')">
 				</mat-form-field>
 			</div>
 			<div class="col-auto">
 				<mat-form-field>
-					<input matInput placeholder="Title" type="text" [formControl]="cost.get('title')">
+					<input matInput placeholder="{{'ADDEDITCOST-EDITOR.TITLE' | translate}}" type="text" [formControl]="cost.get('title')">
 				</mat-form-field>
 			</div>
 			<div class="col-auto">
 				<mat-form-field>
-					<input matInput placeholder="Value" type="text" [formControl]="cost.get('value')">
+					<input matInput placeholder="{{'ADDEDITCOST-EDITOR.VALUE' | translate}}" type="text" [formControl]="cost.get('value')">
 				</mat-form-field>
 			</div>
 		</div>
+		<div class="col-12">
+			<div class="row"*ngIf="cost.disabled">
+				<div class=" ml-auto col-auto"><button type="button" mat-raised-button color="primary" (click)="switchEditMode(i)">Edit</button></div>
+				<div class="col-auto"><button type="button" mat-raised-button color="red" (click)="removeCost(i)">Delete</button></div>
+			</div>
+			<div class="row"*ngIf="!cost.disabled">
+				<div class=" ml-auto col-auto" *ngIf="!cost.disabled"><button type="button" mat-raised-button color="primary" (click)="switchEditMode(i)">Save</button></div>
+				<div class="col-auto" *ngIf="!cost.disabled"><button type="button" mat-raised-button (click)="revertEdits(i)">Cancel</button></div>
+			</div>
+		</div>
 	</ng-template>
 
 	<mat-card class="col-12 cost-element" *ngFor="let cost of form['controls']; let i = index">

dmp-frontend/src/app/ui/dmp/editor/cost-editor/cost-listing/cost-listing.component.ts

@@ -1,12 +1,13 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { BaseComponent } from '@common/base/base.component';
-import { FormArray } from '@angular/forms';
+import { FormArray, FormControl } from '@angular/forms';
 import { takeUntil } from 'rxjs/operators';
 import { CostModel } from '@app/core/model/dmp/cost';
 import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration';
 import { CurrencyService } from '@app/core/services/currency/currency.service';
 import { Observable } from 'rxjs';
 import { LocalFetchModel } from '@app/core/model/local-fetch/local-fetch.model';
+import { CostEditorModel } from '../add-cost/add-cost.model';
 
 @Component({
   selector: 'app-cost-listing',
@@ -17,14 +18,14 @@ export class CostListingComponent extends BaseComponent implements OnInit {
 
 	@Input() form: FormArray;
 
-	costs: CostModel[] = [];
+	private cost: CostEditorModel[] = [];
 
 	currencyAutoCompleteConfiguration: SingleAutoCompleteConfiguration = {
 		filterFn: this.searchCurrency.bind(this),
 		initialItems: () => this.searchCurrency(''),
 		displayFn: (item) => typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name,
 		titleFn: (item) => typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name,
-		valueAssign: (item) => this.getValue(item)
+		valueAssign: (item) => JSON.stringify(item)
 	};
 
   constructor(
@@ -34,18 +35,29 @@ export class CostListingComponent extends BaseComponent implements OnInit {
   }
 
   ngOnInit() {
-	  this.form.valueChanges.pipe(takeUntil(this._destroyed)).subscribe(value => {
-		 this.costs = value;
-	  });
   }
 
   searchCurrency(like: string): Observable<LocalFetchModel[]> {
 	return this.currencyService.get(like);
 }
 
-	getValue(item: any): any {
+switchEditMode(event: number) {
-		console.log(item);
+	const control = this.form.at(event);
-		return item;
+	if (control.disabled) {
+		this.cost[event] = control.value;
+		control.enable();
+	} else {
+		control.disable();
 	}
+}
+
+removeCost(event: number) {
+	this.form.removeAt(event);
+}
+
+revertEdits(event: number) {
+	this.form.at(event).setValue(this.cost[event]);
+	this.form.at(event).disable();
+}
 
 }

dmp-frontend/src/app/ui/dmp/editor/general-tab/extra-properties-form.model.ts

@@ -20,7 +20,9 @@ export class ExtraPropertiesFormModel {
 		this.publicDate = item.publicDate;
 		this.contact = item.contact;
 		if (!isNullOrUndefined(item.costs)) {
-			this.costs = item.costs;
+			(<any[]>item.costs).forEach(element => {
+				this.costs.push(new CostEditorModel().fromModel(element));
+			});
 		}
 		return this;
 	}
@@ -40,7 +42,7 @@ export class ExtraPropertiesFormModel {
 		const costArray = new Array<FormGroup>();
 		//if (this.externalDatasets && this.externalDatasets.length > 0) {
 		this.costs.forEach(item => {
-			costArray.push(item.buildForm(context.getValidation('externalDatasets').descendantValidations, disabled));
+			costArray.push(item.buildForm(context.getValidation('costs').descendantValidations, disabled));
 		});
 		// } else {
 		// 	//externalDatasetsFormArray.push(new ExternalDatasetModel().buildForm(context.getValidation('externalDatasets').descendantValidations, disabled));

dmp-frontend/src/app/ui/dmp/editor/general-tab/general-tab.component.html

@@ -143,7 +143,7 @@
 			<div class="row pt-3">
 				<mat-label class="col-12 cost-placeholder">Costs</mat-label>
 				<app-cost-listing class="col-12" [form] = "formGroup.get('extraProperties').get('costs')"></app-cost-listing>
-				<button class="col-12" matSuffix class="input-btn" type="button" (click)="addCost($event)">
+				<button class="col-12 cost-add" matSuffix class="input-btn" type="button" (click)="addCost($event)">
 					<mat-icon class="icon-btn">add_circle</mat-icon>
 				</button>
 			</div>

dmp-frontend/src/app/ui/dmp/editor/general-tab/general-tab.component.scss

@@ -41,3 +41,7 @@
 .cost-placeholder {
 	text-decoration: underline;
 }
+
+.cost-add {
+	margin-top: 1em;
+}