MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

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

This commit is contained in:
George Kalampokis 2020-07-02 17:06:47 +03:00
parent 747ad60fb1
commit 62118179ff
6 changed files with 44 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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(

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

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

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

@ -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 {
console.log(item);
return item;
switchEditMode(event: number) {
const control = this.form.at(event);
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();
}
}

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

@ -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));

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

@ -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>

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

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