Update the cost listing (near finalization) and fix some issues while loading costs from the backend
This commit is contained in:
parent
747ad60fb1
commit
62118179ff
|
@ -23,7 +23,7 @@ export class AddCostComponent extends BaseComponent implements OnInit {
|
||||||
initialItems: () => this.searchCurrency(''),
|
initialItems: () => this.searchCurrency(''),
|
||||||
displayFn: (item) => typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name,
|
displayFn: (item) => typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name,
|
||||||
titleFn: (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(
|
constructor(
|
||||||
|
|
|
@ -9,20 +9,30 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto">
|
<div class="col-auto">
|
||||||
<mat-form-field>
|
<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>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto">
|
<div class="col-auto">
|
||||||
<mat-form-field>
|
<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>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto">
|
<div class="col-auto">
|
||||||
<mat-form-field>
|
<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>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</ng-template>
|
||||||
|
|
||||||
<mat-card class="col-12 cost-element" *ngFor="let cost of form['controls']; let i = index">
|
<mat-card class="col-12 cost-element" *ngFor="let cost of form['controls']; let i = index">
|
||||||
|
|
|
@ -1,12 +1,13 @@
|
||||||
import { Component, OnInit, Input } from '@angular/core';
|
import { Component, OnInit, Input } from '@angular/core';
|
||||||
import { BaseComponent } from '@common/base/base.component';
|
import { BaseComponent } from '@common/base/base.component';
|
||||||
import { FormArray } from '@angular/forms';
|
import { FormArray, FormControl } from '@angular/forms';
|
||||||
import { takeUntil } from 'rxjs/operators';
|
import { takeUntil } from 'rxjs/operators';
|
||||||
import { CostModel } from '@app/core/model/dmp/cost';
|
import { CostModel } from '@app/core/model/dmp/cost';
|
||||||
import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration';
|
import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration';
|
||||||
import { CurrencyService } from '@app/core/services/currency/currency.service';
|
import { CurrencyService } from '@app/core/services/currency/currency.service';
|
||||||
import { Observable } from 'rxjs';
|
import { Observable } from 'rxjs';
|
||||||
import { LocalFetchModel } from '@app/core/model/local-fetch/local-fetch.model';
|
import { LocalFetchModel } from '@app/core/model/local-fetch/local-fetch.model';
|
||||||
|
import { CostEditorModel } from '../add-cost/add-cost.model';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-cost-listing',
|
selector: 'app-cost-listing',
|
||||||
|
@ -17,14 +18,14 @@ export class CostListingComponent extends BaseComponent implements OnInit {
|
||||||
|
|
||||||
@Input() form: FormArray;
|
@Input() form: FormArray;
|
||||||
|
|
||||||
costs: CostModel[] = [];
|
private cost: CostEditorModel[] = [];
|
||||||
|
|
||||||
currencyAutoCompleteConfiguration: SingleAutoCompleteConfiguration = {
|
currencyAutoCompleteConfiguration: SingleAutoCompleteConfiguration = {
|
||||||
filterFn: this.searchCurrency.bind(this),
|
filterFn: this.searchCurrency.bind(this),
|
||||||
initialItems: () => this.searchCurrency(''),
|
initialItems: () => this.searchCurrency(''),
|
||||||
displayFn: (item) => typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name,
|
displayFn: (item) => typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name,
|
||||||
titleFn: (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(
|
constructor(
|
||||||
|
@ -34,18 +35,29 @@ export class CostListingComponent extends BaseComponent implements OnInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
this.form.valueChanges.pipe(takeUntil(this._destroyed)).subscribe(value => {
|
|
||||||
this.costs = value;
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
searchCurrency(like: string): Observable<LocalFetchModel[]> {
|
searchCurrency(like: string): Observable<LocalFetchModel[]> {
|
||||||
return this.currencyService.get(like);
|
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();
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -20,7 +20,9 @@ export class ExtraPropertiesFormModel {
|
||||||
this.publicDate = item.publicDate;
|
this.publicDate = item.publicDate;
|
||||||
this.contact = item.contact;
|
this.contact = item.contact;
|
||||||
if (!isNullOrUndefined(item.costs)) {
|
if (!isNullOrUndefined(item.costs)) {
|
||||||
this.costs = item.costs;
|
(<any[]>item.costs).forEach(element => {
|
||||||
|
this.costs.push(new CostEditorModel().fromModel(element));
|
||||||
|
});
|
||||||
}
|
}
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
@ -40,7 +42,7 @@ export class ExtraPropertiesFormModel {
|
||||||
const costArray = new Array<FormGroup>();
|
const costArray = new Array<FormGroup>();
|
||||||
//if (this.externalDatasets && this.externalDatasets.length > 0) {
|
//if (this.externalDatasets && this.externalDatasets.length > 0) {
|
||||||
this.costs.forEach(item => {
|
this.costs.forEach(item => {
|
||||||
costArray.push(item.buildForm(context.getValidation('externalDatasets').descendantValidations, disabled));
|
costArray.push(item.buildForm(context.getValidation('costs').descendantValidations, disabled));
|
||||||
});
|
});
|
||||||
// } else {
|
// } else {
|
||||||
// //externalDatasetsFormArray.push(new ExternalDatasetModel().buildForm(context.getValidation('externalDatasets').descendantValidations, disabled));
|
// //externalDatasetsFormArray.push(new ExternalDatasetModel().buildForm(context.getValidation('externalDatasets').descendantValidations, disabled));
|
||||||
|
|
|
@ -143,7 +143,7 @@
|
||||||
<div class="row pt-3">
|
<div class="row pt-3">
|
||||||
<mat-label class="col-12 cost-placeholder">Costs</mat-label>
|
<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>
|
<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>
|
<mat-icon class="icon-btn">add_circle</mat-icon>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -41,3 +41,7 @@
|
||||||
.cost-placeholder {
|
.cost-placeholder {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cost-add {
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue