ng2-encrm-components
Version:
69 lines (63 loc) • 2.84 kB
HTML
<table class="table table-striped table-hover" style="margin-bottom: 0px;">
<thead>
<tr>
<th class="first-column"></th>
<th *ngFor="let head of headers" [ngStyle]="{'width': head[3]?head[3]+'px':'auto' }">
{{head[0]}}
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of rows">
<td class="first-column">
<button type="button" class="btn btn-danger btn-sm" (click)="remove(row)">
<!--<i class="fa fa-trash-o" aria-hidden="true"></i>-->
<i class="material-icons" aria-hidden="true">delete</i>
</button>
<button *ngIf="!isEdited(row)" type="button" class="btn btn-info btn-sm" (click)="edit = row">
<!--<i class="fa fa-pencil-square-o" aria-hidden="true"></i>-->
<i class="material-icons" aria-hidden="true">mode_edit</i>
</button>
<button *ngIf="isEdited(row)" type="button" class="btn btn-default btn-sm" (click)="unedit()">
<!--<i class="fa fa-times" aria-hidden="true"></i>-->
<i class="material-icons" aria-hidden="true">close</i>
</button>
</td>
<td *ngFor="let item of toArray(row)">
<span *ngIf="!isBoolean(row[item]) && !isEdited(row)">{{row[item]}}</span>
<input *ngIf="!isBoolean(row[item]) && isEdited(row)" type="text" class="form-control"
[(ngModel)]="row[item]">
<label class="custom-control custom-checkbox" *ngIf="isBoolean(row[item])">
<input class="custom-control-input" [disabled]="!isEdited(row)" type="checkbox"
[(ngModel)]="row[item]">
<span class="custom-control-indicator"></span>
</label>
</td>
</tr>
<tr>
<td class="first-column">
<button *ngIf="!event.addRow && rows.length !== 0" type="button"
class="btn btn-success btn-sm add-button" (click)="addRow()">
<!--<i class="fa fa-plus-square-o" aria-hidden="true"></i>-->
<i class="material-icons" aria-hidden="true">add</i>
</button>
<button *ngIf="event.addRow || rows.length === 0" type="button" class="btn btn-success btn-sm"
(click)="save(data)">
<!--<i class="fa fa-floppy-o" aria-hidden="true"></i>-->
<i class="material-icons" aria-hidden="true">save</i>
</button>
<button *ngIf="event.addRow || rows.length === 0" type="button" class="btn btn-default btn-sm"
(click)="cancel(data)">
<i class="material-icons" aria-hidden="true">close</i>
</button>
</td>
<td *ngFor="let head of headers">
<div [ngClass]="{'invisible': !event.addRow }">
<input *ngIf="!isBoolean(head[2])" type="text" placeholder="{{head[2]}}"
class="form-control" [(ngModel)]="data[head[1]]">
<input *ngIf="isBoolean(head[2])" type="checkbox" [(ngModel)]="data[head[1]]">
</div>
</td>
</tr>
</tbody>
</table>