users-administration.component.html

<mat-sidenav-container autosize class="maarch-container">
    <ng-template #adminMenuTemplate>
        <mat-nav-list>
            <h3 mat-subheader>{{lang.actions}}</h3>
            <a mat-list-item routerLink="/administration/users/new">
                <mat-icon color="primary" mat-list-icon class="fa fa-plus"></mat-icon>
                <p mat-line>
                    {{lang.add}}
                </p>
            </a>
        </mat-nav-list>
        <mat-divider></mat-divider>
        <mat-divider *ngIf="quota.userQuota"></mat-divider>
        <mat-nav-list *ngIf="quota.userQuota">
            <h3 mat-subheader>{{lang.quota}}</h3>
            <p mat-line style="margin-left:20px">{{lang.actives}} : {{quota.actives}}</p>
            <p mat-line style="margin-left:20px">{{lang.inactives}} : {{quota.inactives}}</p>
            <p mat-line style="margin-left:20px">{{lang.quota}} : {{quota.userQuota}}</p>
        </mat-nav-list>
    </ng-template>
    <mat-sidenav-content>
        <div class="bg-head">
            <div class="bg-head-title" [class.customContainerRight]="appService.getViewMode()">
                <div class="bg-head-title-label">
                    <header-left></header-left>
                </div>
                <div class="bg-head-title-tool">
                    <header-right></header-right>
                </div>
            </div>
            <div class="bg-head-content" [class.fullContainer]="appService.getViewMode()">
            </div>
        </div>
        <div class="container" [class.fullContainer]="appService.getViewMode()">
            <div class="container-content">
                <div *ngIf="loading" style="display:flex;height:100%;">
                    <mat-spinner style="margin:auto;"></mat-spinner>
                </div>
                <mat-card *ngIf="!loading" class="card-app-content">
                    <div class="row">
                        <div class="col-md-6 col-xs-6">
                            <mat-form-field>
                                <input matInput (keyup)="applyFilter($event.target.value)"
                                    placeholder="{{lang.filterBy}}">
                                <mat-button-toggle class="webserviceAccount" matSuffix
                                    (click)="$event.stopPropagation();toggleWebserviceAccount()"
                                    [checked]="this.withWebserviceAccount" title="{{lang.displayWebserviceAccount}}">
                                    <mat-icon fontSet="fas" fontIcon="fa-user-shield fa-2x"
                                        style="margin-left: -2px; margin-top: -4px;"></mat-icon>
                                </mat-button-toggle>
                            </mat-form-field>
                        </div>
                        <div class="col-md-6 col-xs-6">
                            <mat-paginator #paginator [length]="100" [hidePageSize]="true" [pageSize]="10">
                            </mat-paginator>
                        </div>
                    </div>
                    <mat-table #table [dataSource]="dataSource" matSort matSortActive="user_id" matSortDirection="asc">
                        <ng-container matColumnDef="id">
                            <mat-header-cell *matHeaderCellDef mat-sort-header
                                [class.hide-for-mobile]="appService.getViewMode()">{{lang.technicalId}}
                            </mat-header-cell>
                            <mat-cell *matCellDef="let element" [class.hide-for-mobile]="appService.getViewMode()">
                                {{element.id}} </mat-cell>
                        </ng-container>
                        <ng-container matColumnDef="user_id">
                            <mat-header-cell *matHeaderCellDef mat-sort-header
                                [class.hide-for-mobile]="appService.getViewMode()">{{lang.id}}</mat-header-cell>
                            <mat-cell *matCellDef="let element" [class.hide-for-mobile]="appService.getViewMode()">
                                {{element.user_id}} </mat-cell>
                        </ng-container>
                        <ng-container matColumnDef="lastname">
                            <mat-header-cell *matHeaderCellDef mat-sort-header>{{lang.lastname}}</mat-header-cell>
                            <mat-cell *matCellDef="let element"> {{element.lastname}} </mat-cell>
                        </ng-container>
                        <ng-container matColumnDef="firstname">
                            <mat-header-cell *matHeaderCellDef mat-sort-header>{{lang.firstname}}</mat-header-cell>
                            <mat-cell *matCellDef="let element"> {{element.firstname}} </mat-cell>
                        </ng-container>
                        <ng-container matColumnDef="status">
                            <mat-header-cell *matHeaderCellDef mat-sort-header>{{lang.status}}</mat-header-cell>
                            <mat-cell *matCellDef="let element">
                                <span
                                    [ngClass]="{'statusUserLabelWarn': ['SPD','ABS'].indexOf(element.status) > -1, 'statusUserLabelPrimary': ['SPD','ABS'].indexOf(element.status) == -1}"
                                    class="label">{{lang['user'+element.status]}}</span>
                            </mat-cell>
                        </ng-container>
                        <ng-container matColumnDef="mail">
                            <mat-header-cell *matHeaderCellDef mat-sort-header
                                [class.hide-for-mobile]="appService.getViewMode()">{{lang.email}}</mat-header-cell>
                            <mat-cell *matCellDef="let element" [class.hide-for-mobile]="appService.getViewMode()">
                                {{element.mail}} </mat-cell>
                        </ng-container>
                        <ng-container matColumnDef="actions">
                            <mat-header-cell *matHeaderCellDef>
                            </mat-header-cell>
                            <mat-cell *matCellDef="let element" style="justify-content: flex-end;">
                                <button mat-icon-button color="primary" [disabled]="element.id===user.id"
                                    *ngIf="element.status != 'SPD'" matTooltip="{{lang.suspend}}"
                                    (click)="$event.stopPropagation();deleteUser(element, 'suspend')">
                                    <mat-icon class="fa fa-pause fa-2x" aria-hidden="true"></mat-icon>
                                </button>
                                <button mat-icon-button color="accent" *ngIf="element.status == 'SPD'"
                                    matTooltip="{{lang.authorize}}"
                                    (click)="$event.stopPropagation();activateUser(element)">
                                    <mat-icon class="fa fa-check fa-2x" aria-hidden="true"></mat-icon>
                                </button>
                                <button mat-icon-button color="warn" [disabled]="element.id===user.id || ['root_visible', 'root_invisible'].indexOf(element.mode) > -1"
                                    matTooltip="{{lang.delete}}" data-toggle="modal" data-target="#changeDiffListDest"
                                    (click)="$event.stopPropagation();deleteUser(element, 'delete')">
                                    <mat-icon class="fa fa-trash-alt fa-2x"></mat-icon>
                                </button>
                            </mat-cell>
                        </ng-container>
                        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                        <mat-row *matRowDef="let row; columns: displayedColumns;"
                            routerLink="/administration/users/{{row.id}}" style="cursor:pointer;"
                            matTooltip="{{lang.view}}" [class.admin]="['root_visible', 'root_invisible'].indexOf(row.mode) > -1"></mat-row>
                    </mat-table>
                    <div class="mat-paginator"
                        style="min-height:48px;min-height: 48px;display: flex;justify-content: end;align-items: center;padding-right: 20px;">
                        {{data.length}} {{lang.usersAlt}}</div>
                </mat-card>
            </div>
        </div>
    </mat-sidenav-content>
</mat-sidenav-container>