argos/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.html

58 lines
2.4 KiB
HTML

<div class="main-content">
<div class="container-fluid user-listing">
<div class="d-flex align-items-center">
<h3>{{'USERS.LISTING.TITLE' | translate}}</h3>
<div class="col-auto ml-auto">
<button mat-raised-button type="button" class="export-btn" (click)="exportUsers()">{{'USERS.LISTING.EXPORT' | translate}}</button>
</div>
</div>
<app-user-criteria-component></app-user-criteria-component>
<!-- <mat-card class="mat-card"> -->
<div class="mat-elevation-z6">
<mat-table [dataSource]="dataSource" matSort>
<!-- Column Definition: Label -->
<ng-container cdkColumnDef="avatar">
<mat-header-cell *matHeaderCellDef></mat-header-cell>
<mat-cell *matCellDef="let row">
<img mat-card-avatar *ngIf="row.avatarUrl" class="my-mat-card-avatar" [src]="row.avatarUrl" (error)="this.setDefaultAvatar($event)">
<img mat-card-avatar *ngIf="!row.avatarUrl" class="my-mat-card-avatar" [src]="'assets/images/profile-placeholder.png'">
</mat-cell>
</ng-container>
<ng-container cdkColumnDef="name">
<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.NAME' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">
<!-- <img mat-card-avatar *ngIf="row.avatarUrl" class="my-mat-card-avatar" [src]="row.avatarUrl"> -->
{{row.name}}
</mat-cell>
</ng-container>
<ng-container cdkColumnDef="email">
<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.EMAIL' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.email}}</mat-cell>
</ng-container>
<ng-container cdkColumnDef="lastloggedin">
<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.LAST-LOGGED-IN' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.lastloggedin | date:'shortDate'}}</mat-cell>
</ng-container>
<!-- Column Definition: Roles -->
<ng-container cdkColumnDef="roles">
<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.ROLES' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">
<app-user-role-editor-component [item]="row"></app-user-role-editor-component>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]"></mat-paginator>
<!-- </mat-card> -->
</div>
</div>
</div>