2 [value]=
"users" [lazy]=
"true" [paginator]=
"totalRecords > 0" [totalRecords]=
"totalRecords" [rows]=
"rowsPerPage" [rowsPerPageOptions]=
"rowsPerPageOptions"
3 [sortField]=
"sort.field" [sortOrder]=
"sort.order" (onLazyLoad)=
"loadLazy($event)" dataKey=
"id" [resizableColumns]=
"true"
4 [(selection)]=
"selectedUsers"
5 [showCurrentPageReport]=
"true" i18n-currentPageReportTemplate
6 currentPageReportTemplate=
"Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} users"
7 (onPage)=
"onPage($event)" [expandedRowKeys]=
"expandedRows"
9 <ng-template pTemplate=
"caption">
11 <div class=
"left-buttons">
13 *
ngIf=
"isInSelectionMode()" i18n-label
label=
"Batch actions" theme=
"orange"
14 [actions]=
"bulkUserActions" [entry]=
"selectedUsers"
18 <a *
ngIf=
"!isInSelectionMode()" class=
"add-button" routerLink=
"/admin/users/create">
19 <my-global-icon iconName=
"user-add" aria-hidden=
"true"></my-global-icon>
20 <ng-container i18n
>Create user
</ng-container>
25 <my-advanced-input-filter [filters]=
"inputFilters" (search)=
"onSearch($event)" (resetTableFilter)=
"resetTableFilter()"></my-advanced-input-filter>
31 <ng-template pTemplate=
"header">
33 <th style=
"width: 40px">
34 <p-tableHeaderCheckbox ariaLabel=
"Select all rows" i18n-ariaLabel
></p-tableHeaderCheckbox>
36 <th style=
"width: 40px"></th>
37 <th style=
"width: 60px;">
38 <div class=
"c-hand column-toggle" ngbDropdown
placement=
"bottom-left auto" container=
"body" autoClose=
"outside">
39 <my-global-icon iconName=
"columns" ngbDropdownToggle
></my-global-icon>
41 <div role=
"menu" class=
"dropdown-menu" ngbDropdownMenu
>
42 <div class=
"dropdown-header" i18n
>Table parameters
</div>
43 <div ngbDropdownItem
class=
"dropdown-item">
46 [availableItems]=
"columns"
47 [selectableGroup]=
"false" [(ngModel)]=
"selectedColumns"
48 i18n-placeholder
placeholder=
"Select columns"
52 <div ngbDropdownItem
class=
"dropdown-item">
53 <my-peertube-checkbox inputName=
"highlightBannedUsers" [(ngModel)]=
"highlightBannedUsers"
54 i18n-labelText
labelText=
"Highlight banned users"></my-peertube-checkbox>
59 <th *
ngIf=
"isSelected('username')" pResizableColumn
pSortableColumn=
"username">{{ getColumn('username').label }}
<p-sortIcon field=
"username"></p-sortIcon></th>
60 <th *
ngIf=
"isSelected('email')">{{ getColumn('email').label }}
</th>
61 <th *
ngIf=
"isSelected('quota')" style=
"width: 160px;" pSortableColumn=
"videoQuotaUsed">{{ getColumn('quota').label }}
<p-sortIcon field=
"videoQuotaUsed"></p-sortIcon></th>
62 <th *
ngIf=
"isSelected('quotaDaily')" style=
"width: 160px;">{{ getColumn('quotaDaily').label }}
</th>
63 <th *
ngIf=
"isSelected('role')" style=
"width: 120px;" pSortableColumn=
"role">{{ getColumn('role').label }}
<p-sortIcon field=
"role"></p-sortIcon></th>
64 <th *
ngIf=
"isSelected('pluginAuth')" style=
"width: 140px;" pResizableColumn
>{{ getColumn('pluginAuth').label }}
</th>
65 <th *
ngIf=
"isSelected('createdAt')" style=
"width: 150px;" pSortableColumn=
"createdAt">{{ getColumn('createdAt').label }}
<p-sortIcon field=
"createdAt"></p-sortIcon></th>
66 <th *
ngIf=
"isSelected('lastLoginDate')" style=
"width: 150px;" pSortableColumn=
"lastLoginDate">{{ getColumn('lastLoginDate').label }}
<p-sortIcon field=
"lastLoginDate"></p-sortIcon></th>
70 <ng-template pTemplate=
"body" let-expanded=
"expanded" let-user
>
72 <tr [pSelectableRow]=
"user" [ngClass]=
"{ banned: highlightBannedUsers && user.blocked }">
73 <td class=
"checkbox-cell">
74 <p-tableCheckbox [value]=
"user" ariaLabel=
"Select this row" i18n-ariaLabel
></p-tableCheckbox>
77 <td class=
"expand-cell">
78 <span *
ngIf=
"user.blockedReason" class=
"expander" [pRowToggler]=
"user">
79 <i [ngClass]=
"expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
83 <td class=
"action-cell">
84 <my-user-moderation-dropdown *
ngIf=
"!isInSelectionMode()" [user]=
"user" container=
"body"
85 (userChanged)=
"onUserChanged()" (userDeleted)=
"onUserChanged()">
86 </my-user-moderation-dropdown>
89 <td *
ngIf=
"isSelected('username')">
90 <a i18n-title
title=
"Open account in a new tab" target=
"_blank" rel=
"noopener noreferrer" [routerLink]=
"[ '/accounts/' + user.username ]">
91 <div class=
"chip two-lines">
92 <my-actor-avatar [account]=
"user?.account" size=
"32"></my-actor-avatar>
94 <span class=
"user-table-primary-text">{{ user.account.displayName }}
</span>
95 <span class=
"text-muted">{{ user.username }}
</span>
101 <td *
ngIf=
"isSelected('email')" [title]=
"user.email">
102 <ng-container *
ngIf=
"!requiresEmailVerification || user.blocked; else emailWithVerificationStatus">
103 <a class=
"table-email" [href]=
"'mailto:' + user.email">{{ user.email }}
</a>
107 <ng-template #emailWithVerificationStatus
>
108 <td *
ngIf=
"user.emailVerified === false; else emailVerifiedNotFalse" i18n-title
title=
"User's email must be verified to login">
109 <em>? {{ user.email }}
</em>
111 <ng-template #emailVerifiedNotFalse
>
112 <td i18n-title
title=
"User's email is verified / User can login without email verification">
113 ✓ {{ user.email }}
118 <td *
ngIf=
"isSelected('quota')">
119 <div class=
"progress" i18n-title
title=
"Total video quota">
120 <div class=
"progress-bar" role=
"progressbar" [style]=
"{ width: getUserVideoQuotaPercentage(user) + '%' }"
121 [attr.aria-valuenow]=
"user.rawVideoQuotaUsed" aria-valuemin=
"0" [attr.aria-valuemax]=
"user.rawVideoQuota">
123 <span>{{ user.videoQuotaUsed }}
</span>
124 <span>{{ user.videoQuota }}
</span>
128 <td *
ngIf=
"isSelected('quotaDaily')">
129 <div class=
"progress" i18n-title
title=
"Total daily video quota">
130 <div class=
"progress-bar secondary" role=
"progressbar" [style]=
"{ width: getUserVideoQuotaDailyPercentage(user) + '%' }"
131 [attr.aria-valuenow]=
"user.rawVideoQuotaUsedDaily" aria-valuemin=
"0" [attr.aria-valuemax]=
"user.rawVideoQuotaDaily">
133 <span>{{ user.videoQuotaUsedDaily }}
</span>
134 <span>{{ user.videoQuotaDaily }}
</span>
138 <td *
ngIf=
"isSelected('role')">
139 <span *
ngIf=
"user.blocked" class=
"badge badge-banned" i18n-title
title=
"The user was banned">{{ user.roleLabel }}
</span>
140 <span *
ngIf=
"!user.blocked" class=
"badge" [ngClass]=
"getRoleClass(user.role)">{{ user.roleLabel }}
</span>
143 <td *
ngIf=
"isSelected('pluginAuth')">
144 <ng-container *
ngIf=
"user.pluginAuth">{{ user.pluginAuth }}
</ng-container>
147 <td *
ngIf=
"isSelected('createdAt')" [title]=
"user.createdAt">{{ user.createdAt | date: 'short' }}
</td>
149 <td *
ngIf=
"isSelected('lastLoginDate')" [title]=
"user.lastLoginDate">{{ user.lastLoginDate | date: 'short' }}
</td>
153 <ng-template pTemplate=
"rowexpansion" let-user
>
154 <tr class=
"user-blocked-reason">
156 <span i18n
class=
"ban-reason-label">Ban reason:
</span>
157 {{ user.blockedReason }}
163 <my-user-ban-modal #userBanModal (userBanned)=
"onUserChanged()"></my-user-ban-modal>