statuses-administration.component.html

<div class="page-header">
    <h1>{{lang.administration}} {{lang.statuses}}
        <small>{{statuses.length}} {{lang.statuses}}</small>
    </h1>
</div>
<div *ngIf="loading">
    <mat-spinner style="margin:auto;"></mat-spinner>
</div>
<div *ngIf="!loading" class="container-fluid">
    <div class="row">
        <div class="col-md-2 col-xs-2">
            <button color="default" mat-mini-fab routerLink='/administration' matTooltip="{{lang.back}}" class="enableAtionTopLeftSmarpthone">
                <mat-icon class="fa fa-chevron-left"></mat-icon>
            </button>
        </div>
        <div class="col-md-6 col-xs-6">
            <mat-form-field>
                <input matInput (keyup)="applyFilter($event.target.value)" placeholder="{{lang.filterBy}}">
            </mat-form-field>
        </div>
        <div class="col-md-4 col-xs-4">
            <mat-paginator #paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[10, 25, 50, 100]">
            </mat-paginator>
        </div>
    </div>
    <mat-table #table [dataSource]="dataSource" matSort matSortActive="label_status" matSortDirection="asc">
        <ng-container matColumnDef="img_filename">
            <mat-header-cell *matHeaderCellDef>{{lang.imgRelated}}</mat-header-cell>
            <mat-cell *matCellDef="let element" color="primary">
                <mat-icon class="fm {{element.img_filename}} fm-2x" *ngIf="element.img_filename.indexOf('fm') == 0" aria-hidden="true"></mat-icon>
                <mat-icon class="fa {{element.img_filename}} fa-2x" *ngIf="element.img_filename.indexOf('fa') == 0" aria-hidden="true"></mat-icon>
            </mat-cell>
        </ng-container>
        <ng-container matColumnDef="id">
            <mat-header-cell *matHeaderCellDef mat-sort-header>{{lang.id}}</mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.id}} </mat-cell>
        </ng-container>
        <ng-container matColumnDef="label_status">
            <mat-header-cell *matHeaderCellDef mat-sort-header>{{lang.statusName}}</mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.label_status}} </mat-cell>
        </ng-container>
        <ng-container matColumnDef="identifier">
            <mat-header-cell *matHeaderCellDef style="text-align: right;padding: 10px">
                <button mat-mini-fab color="accent" class="enableAtionTopRightSmarpthone" matTooltip="{{lang.add}}" routerLink="/administration/statuses/new">
                    <mat-icon class="fa fa-plus" aria-hidden="true"></mat-icon>
                </button>
            </mat-header-cell>
            <mat-cell *matCellDef="let element" style="text-align:right">
                <button mat-icon-button color="primary" matTooltip="{{lang.update}}" routerLink="/administration/statuses/{{element.identifier}}">
                    <mat-icon class="fa fa-edit fa-2x" aria-hidden="true"></mat-icon>
                </button>
                <button mat-icon-button color="warn" matTooltip="{{lang.delete}}" (click)="deleteStatus(element)">
                    <mat-icon class="fa fa-trash fa-2x" aria-hidden="true"></mat-icon>
                </button>
            </mat-cell>
        </ng-container>
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>
</div>