100 lines
3.9 KiB
HTML
100 lines
3.9 KiB
HTML
<div class="flex column fill">
|
|
@if (users && users.error) {
|
|
<div class="flex column fill">
|
|
<mat-card class="accent box">
|
|
<mat-card-header>
|
|
<mat-card-title>{{ 'users.error.' + users.error.status | i18n}}</mat-card-title>
|
|
<mat-card-subtitle>{{'users.error' | i18n}}</mat-card-subtitle>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<p>
|
|
{{ 'users.error.' + users.error.status + '.text' | i18n}}
|
|
</p>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</div>
|
|
}
|
|
|
|
<div class="flex wrap filter-container">
|
|
<a mat-icon-button (click)="filterOpen=!filterOpen" title="{{'users.filter' | i18n}}"
|
|
[color]="filterOpen ? 'primary': 'accent'">
|
|
<mat-icon>filter_alt</mat-icon>
|
|
</a>
|
|
|
|
@if (filterOpen) {
|
|
<form class="flex wrap filter">
|
|
<mat-form-field class="margin">
|
|
<mat-label>{{'users.filter.search' | i18n}}</mat-label>
|
|
<input type="text" matInput [value]="users && users.filter && users.filter || ''"
|
|
(input)="setFilter( $event.target)">
|
|
</mat-form-field>
|
|
</form>
|
|
}
|
|
</div>
|
|
|
|
@if (users) {
|
|
<div class="scroll-container">
|
|
<table class="default-table" mat-table [dataSource]="users.results || []" matSort
|
|
(matSortChange)="applySort($event)" [matSortDisableClear]="true">
|
|
<ng-container matColumnDef="username">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header [disableClear]="false">{{'user.username' |
|
|
i18n}}
|
|
</th>
|
|
<td mat-cell *matCellDef="let user">
|
|
<div class="flex middle">
|
|
@if (user.roles && user.roles.indexOf('ROLE_ADMIN') != -1) {
|
|
<mat-icon>admin_panel_settings</mat-icon>
|
|
}
|
|
{{user.username}}
|
|
</div>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="name">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{'profile.name' | i18n}}</th>
|
|
<td mat-cell *matCellDef="let user">{{user.name}}</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="email">
|
|
<th mat-header-cell *matHeaderCellDef>{{'profile.email' | i18n}}</th>
|
|
<td mat-cell *matCellDef="let user">{{user.email}}</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="about">
|
|
<th mat-header-cell *matHeaderCellDef>{{'profile.about' | i18n}}</th>
|
|
<td mat-cell *matCellDef="let user">
|
|
<span class="ellipsis" matTooltip="{{user.about}}">{{user.about}}</span>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<tr mat-header-row *matHeaderRowDef="columns; sticky: true"></tr>
|
|
<tr class="user" mat-row *matRowDef="let user; columns: columns;" [routerLink]="'/u/' + user.username">
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
@if (users.total == 0) {
|
|
<mat-list>
|
|
<mat-list-item>
|
|
<p>{{'paginator.empty' | i18n}}</p>
|
|
</mat-list-item>
|
|
</mat-list>
|
|
}
|
|
|
|
<span class="spacer"></span>
|
|
|
|
<div class="mat-mdc-paginator flex wrap middle">
|
|
<a class="margin" routerLink="/user" mat-raised-button color="primary">
|
|
<mat-icon>person_add</mat-icon>
|
|
<span class="hide-small">{{'user.create' | i18n}}</span>
|
|
</a>
|
|
<span class="spacer"></span>
|
|
<mat-paginator [pageSizeOptions]="pageSizeOptions" [pageIndex]="users.offset / users.limit"
|
|
[length]="users.total" [pageSize]="users.limit" (page)="applyPage($event)" showFirstLastButtons>
|
|
</mat-paginator>
|
|
</div>
|
|
}
|
|
|
|
@if (!users || !users.results && !users.error) {
|
|
<mat-progress-bar *ngIf="" mode="indeterminate"></mat-progress-bar>
|
|
}
|
|
</div> |