statuses-administration.component.html

<div *ngIf="loading">
    <i class="fa fa-spinner fa-spin fa-5x" style="margin-left: 50%;margin-top: 16%;font-size: 8em"></i>
</div>
<div *ngIf="!loading" class="container-fluid">
    <nav class="navbar navbar-default" style="font-size:17px !important;" id="toolBox">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" routerLink="/administration" style="cursor: pointer">
                    <i class="fa fa-arrow-circle-left" title="{{lang.back}}"></i>
                </a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li style="cursor: pointer" routerLink="/administration/status/new">
                        <a title="{{lang.newStatus}}"><i class="fa fa-check-circle"></i><sup><i class="fa fa-plus"></i></sup></a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <h1 style="margin-top: 0"><i class="fa fa-check-circle fa-2x"></i> {{lang.statusListTitle}} : {{nbStatus}} {{lang.status}}(s)</h1>

    <div class="col-md-12" style="margin-top: 15px">
        <table id="statusTable" class="display">
            <thead>
                <tr>
                    <th style="width:50px;"><span>{{lang.img_related}}</span></th>
                    <th><span>{{lang.identifier}}</span></th>
                    <th><span>{{lang.description}}</span></th>
                    <th><span>&nbsp;</span></th>
                </tr>
            </thead> 
            <tbody>
                <tr *ngFor="let status of statusList" id="{{status.id}}">
                    <td style="text-align:center;">
                        <i class="fm {{status.img_filename}} fm-2x" *ngIf="status.img_filename.indexOf('fm') == 0"></i>
                        <i class="fa {{status.img_filename}} fa-2x" *ngIf="status.img_filename.indexOf('fa') == 0"></i>
                    </td>
                    <td>{{status.id}}</td>
                    <td>{{status.label_status}}</td>
                    <td style="text-align:right;">
                        <div class="btn-group" role="group" aria-label="...">
                            <button routerLink="/administration/status/{{status.identifier}}" type="button" class="btn btn-default" title="{{lang.edit}}">
                                <a><i style="cursor:pointer" class="fa fa-edit"></i></a>
                            </button>
                            <button type="button" class="btn btn-default" title="{{lang.delete}}" (click)="deleteStatus(status.id, status.identifier)">
                                <a><i style="cursor:pointer;color: #D9534F" class="fa fa-trash"></i></a>
                            </button>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>