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

43 lines
1.9 KiB
HTML

<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="{{'ADDEDITCOST-EDITOR.DESCRIPTION' | translate}}" type="text" [formControl]="cost.get('description')">
</mat-form-field>
</div>
<div class="col-auto">
<mat-form-field>
<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="{{'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">
<ng-container *ngTemplateOutlet="costTemplate; context: { $implicit: cost, index: i }">
</ng-container>
</mat-card>
</mat-card>