hermes-web-angular/src/app/policy-table/policy-table.component.html

48 lines
1.8 KiB
HTML
Raw Normal View History

<table mat-table [dataSource]="policies" class="mat-elevation-z8">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- Position Column -->
<ng-container matColumnDef="path">
<th mat-header-cell *matHeaderCellDef>Path</th>
<td mat-cell *matCellDef="let policy">
@if (policy.editing) {
<input type="text" [(ngModel)]="policy.path" />
}
@if (!policy.editing) {
{{policy.path}}
}
</td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="usage">
<th mat-header-cell *matHeaderCellDef> Usage </th>
<td mat-cell *matCellDef="let policy"> {{policy.name}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="span">
<th mat-header-cell *matHeaderCellDef> Span </th>
<td mat-cell *matCellDef="let policy"> {{policy.weight}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> Actions </th>
<td mat-cell *matCellDef="let policy">
@if (!policy.editing) {
<button mat-mini-fab (click)="edit(policy)"><mat-icon>edit</mat-icon></button>
<button mat-mini-fab (click)="delete(policy)"><mat-icon>delete</mat-icon></button>
}
@if (policy.editing) {
<button mat-mini-fab (click)="save(policy)"><mat-icon>save</mat-icon></button>
<button mat-mini-fab (click)="cancel(policy)"><mat-icon>cancel</mat-icon></button>
}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>