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

Add costs listing (wip)

This commit is contained in:
George Kalampokis 2020-07-01 18:33:16 +03:00
parent a7a8e3db35
commit bfb9eaf87c
5 changed files with 103 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
dmp-frontend/src/app/ui/dmp/editor/cost-editor/cost-listing/cost-listing.component.html Normal file
View File

@ -0,0 +1,32 @@
<mat-card class="row listing-container">
<ng-template #costTemplate let-cost let-i="index">
<div class="row">
<div class="col-auto">
<mat-form-field>
<app-single-auto-complete [formControl]="cost.get('code')" placeholder="{{'ADDEDITCOST-EDITOR.CODE' | translate}}" [configuration]="currencyAutoCompleteConfiguration"></app-single-auto-complete>
</mat-form-field>
</div>
<div class="col-auto">
<mat-form-field>
<input matInput placeholder="Description" 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')">
</mat-form-field>
</div>
<div class="col-auto">
<mat-form-field>
<input matInput placeholder="Value" type="text" [formControl]="cost.get('value')">
</mat-form-field>
</div>
</div>
</ng-template>
<mat-card class="col-12 cost-element" *ngFor="let cost of form['controls']; let i = index">
<ng-container *ngTemplateOutlet="costTemplate; context: { $implicit: cost, index: i }">
</ng-container>
</mat-card>
</mat-card>

10
dmp-frontend/src/app/ui/dmp/editor/cost-editor/cost-listing/cost-listing.component.scss Normal file
View File

@ -0,0 +1,10 @@
.listing-container {
height: fit-content;
width: fit-content;
background-color: whitesmoke;
}
.cost-element {
margin-bottom: 1em;
}

51
dmp-frontend/src/app/ui/dmp/editor/cost-editor/cost-listing/cost-listing.component.ts Normal file
View File

@ -0,0 +1,51 @@
import { Component, OnInit, Input } from '@angular/core';
import { BaseComponent } from '@common/base/base.component';
import { FormArray } 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';
@Component({
selector: 'app-cost-listing',
templateUrl: './cost-listing.component.html',
styleUrls: ['./cost-listing.component.scss']
})
export class CostListingComponent extends BaseComponent implements OnInit {
@Input() form: FormArray;
costs: CostModel[] = [];
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)
};
constructor(
private currencyService: CurrencyService,
) {
super();
}
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;
}
}

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

@ -140,10 +140,12 @@
</mat-form-field>
<!-- <h4 mat-subheader class="col-12">{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}</h4> -->
</div>
<div class="row pt-1">
<button matSuffix class="input-btn" type="button" (click)="addCost($event)">
<mat-icon class="icon-btn">add_circle</mat-icon>
</button>
<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)">
<mat-icon class="icon-btn">add_circle</mat-icon>
</button>
</div>
<div class="row pt-2">
<mat-form-field class="col-sm-12 col-md-8">

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

@ -37,3 +37,7 @@
::ng-deep .mat-form-field-appearance-legacy .mat-form-field-wrapper {
padding-bottom: 1.25em;
}
.cost-placeholder {
text-decoration: underline;
}