diff options
author | Rigel Kent <sendmemail@rigelk.eu> | 2020-07-15 11:17:03 +0200 |
---|---|---|
committer | Rigel Kent <par@rigelk.eu> | 2020-07-29 18:15:53 +0200 |
commit | bc99dfe54e093e69ba8fd06d36b36fbbda3f45de (patch) | |
tree | 2c13497b77928c2593310746e3ec33333e2b4d66 /client/src/app/+admin/users/user-list/user-list.component.html | |
parent | 654a188f80fc1f089aa14837084664c908fe27d2 (diff) | |
download | PeerTube-bc99dfe54e093e69ba8fd06d36b36fbbda3f45de.tar.gz PeerTube-bc99dfe54e093e69ba8fd06d36b36fbbda3f45de.tar.zst PeerTube-bc99dfe54e093e69ba8fd06d36b36fbbda3f45de.zip |
variable columns for users list, more columns possible, badge display for statuses
Diffstat (limited to 'client/src/app/+admin/users/user-list/user-list.component.html')
-rw-r--r-- | client/src/app/+admin/users/user-list/user-list.component.html | 81 |
1 files changed, 63 insertions, 18 deletions
diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html index b022331db..571c780d6 100644 --- a/client/src/app/+admin/users/user-list/user-list.component.html +++ b/client/src/app/+admin/users/user-list/user-list.component.html | |||
@@ -50,19 +50,41 @@ | |||
50 | <p-tableHeaderCheckbox></p-tableHeaderCheckbox> | 50 | <p-tableHeaderCheckbox></p-tableHeaderCheckbox> |
51 | </th> | 51 | </th> |
52 | <th style="width: 40px"></th> | 52 | <th style="width: 40px"></th> |
53 | <th pResizableColumn i18n pSortableColumn="username">Username <p-sortIcon field="username"></p-sortIcon></th> | 53 | <th *ngIf="getColumn('username')" pResizableColumn i18n pSortableColumn="username">{{ getColumn('username').label }} <p-sortIcon field="username"></p-sortIcon></th> |
54 | <th i18n>Email</th> | 54 | <th *ngIf="getColumn('email')" i18n>{{ getColumn('email').label }}</th> |
55 | <th style="width: 140px;" i18n pSortableColumn="videoQuotaUsed">Video quota <p-sortIcon field="videoQuotaUsed"></p-sortIcon></th> | 55 | <th *ngIf="getColumn('quota')" style="width: 160px;" i18n pSortableColumn="videoQuotaUsed">{{ getColumn('quota').label }} <p-sortIcon field="videoQuotaUsed"></p-sortIcon></th> |
56 | <th style="width: 120px;" i18n>Role</th> | 56 | <th *ngIf="getColumn('quotaDaily')" style="width: 160px;" i18n>{{ getColumn('quotaDaily').label }}</th> |
57 | <th style="width: 140px;" pResizableColumn i18n>Auth plugin</th> | 57 | <th *ngIf="getColumn('role')" style="width: 120px;" i18n pSortableColumn="role">{{ getColumn('role').label }} <p-sortIcon field="role"></p-sortIcon></th> |
58 | <th style="width: 150px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th> | 58 | <th *ngIf="getColumn('pluginAuth')" style="width: 140px;" pResizableColumn i18n>{{ getColumn('pluginAuth').label }}</th> |
59 | <th style="width: 60px;"></th> | 59 | <th *ngIf="getColumn('createdAt')" style="width: 150px;" i18n pSortableColumn="createdAt">{{ getColumn('createdAt').label }} <p-sortIcon field="createdAt"></p-sortIcon></th> |
60 | <th *ngIf="getColumn('lastLoginDate')" style="width: 150px;" i18n pSortableColumn="lastLoginDate">{{ getColumn('lastLoginDate').label }} <p-sortIcon field="lastLoginDate"></p-sortIcon></th> | ||
61 | <th style="width: 60px;"> | ||
62 | <div class="c-hand" ngbDropdown placement="bottom-right auto" container="body" autoClose="outside"> | ||
63 | <my-global-icon iconName="columns" ngbDropdownToggle></my-global-icon> | ||
64 | |||
65 | <div role="menu" class="dropdown-menu" ngbDropdownMenu> | ||
66 | <div class="dropdown-header" i18n>Table parameters</div> | ||
67 | <div ngbDropdownItem class="dropdown-item"> | ||
68 | <p-multiSelect | ||
69 | [options]="columns" [showToggleAll]="true" [(ngModel)]="selectedColumns" optionLabel="label" | ||
70 | emptyFilterMessage="No matching column found" i18n-emptyFilterMessage [filter]="false" | ||
71 | selectedItemsLabel="{0} columns displayed" i18n-emptyFilterMessage [showHeader]="false" | ||
72 | [maxSelectedLabels]="4" | ||
73 | ></p-multiSelect> | ||
74 | </div> | ||
75 | <div ngbDropdownItem class="dropdown-item"> | ||
76 | <my-peertube-checkbox inputName="highlightBannedUsers" [(ngModel)]="highlightBannedUsers" | ||
77 | i18n-labelText labelText="Highlight banned users"></my-peertube-checkbox> | ||
78 | </div> | ||
79 | </div> | ||
80 | </div> | ||
81 | </th> | ||
60 | </tr> | 82 | </tr> |
61 | </ng-template> | 83 | </ng-template> |
62 | 84 | ||
63 | <ng-template pTemplate="body" let-expanded="expanded" let-user> | 85 | <ng-template pTemplate="body" let-expanded="expanded" let-user> |
64 | 86 | ||
65 | <tr [pSelectableRow]="user" [ngClass]="{ banned: user.blocked }"> | 87 | <tr [pSelectableRow]="user" [ngClass]="{ banned: highlightBannedUsers && user.blocked }"> |
66 | <td> | 88 | <td> |
67 | <p-tableCheckbox [value]="user"></p-tableCheckbox> | 89 | <p-tableCheckbox [value]="user"></p-tableCheckbox> |
68 | </td> | 90 | </td> |
@@ -73,7 +95,7 @@ | |||
73 | </span> | 95 | </span> |
74 | </td> | 96 | </td> |
75 | 97 | ||
76 | <td> | 98 | <td *ngIf="getColumn('username')"> |
77 | <a i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer" [routerLink]="[ '/accounts/' + user.username ]"> | 99 | <a i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer" [routerLink]="[ '/accounts/' + user.username ]"> |
78 | <div class="chip two-lines"> | 100 | <div class="chip two-lines"> |
79 | <img | 101 | <img |
@@ -83,17 +105,16 @@ | |||
83 | alt="Avatar" | 105 | alt="Avatar" |
84 | > | 106 | > |
85 | <div> | 107 | <div> |
86 | <span class="user-table-primary-text"> | 108 | <span class="user-table-primary-text">{{ user.account.displayName }}</span> |
87 | <span *ngIf="user.blocked" i18n-title title="The user was banned" class="glyphicon glyphicon-ban-circle"></span> | ||
88 | {{ user.account.displayName }} | ||
89 | </span> | ||
90 | <span class="text-muted">{{ user.username }}</span> | 109 | <span class="text-muted">{{ user.username }}</span> |
91 | </div> | 110 | </div> |
92 | </div> | 111 | </div> |
93 | </a> | 112 | </a> |
94 | </td> | 113 | </td> |
95 | 114 | ||
96 | <td *ngIf="!requiresEmailVerification || user.blocked; else emailWithVerificationStatus" [title]="user.email">{{ user.email }}</td> | 115 | <td *ngIf="!requiresEmailVerification || user.blocked; else emailWithVerificationStatus" [title]="user.email"> |
116 | <a class="table-email" [href]="'mailto:' + user.email">{{ user.email }}</a> | ||
117 | </td> | ||
97 | 118 | ||
98 | <ng-template #emailWithVerificationStatus> | 119 | <ng-template #emailWithVerificationStatus> |
99 | <td *ngIf="user.emailVerified === false; else emailVerifiedNotFalse" i18n-title title="User's email must be verified to login"> | 120 | <td *ngIf="user.emailVerified === false; else emailVerifiedNotFalse" i18n-title title="User's email must be verified to login"> |
@@ -106,14 +127,38 @@ | |||
106 | </ng-template> | 127 | </ng-template> |
107 | </ng-template> | 128 | </ng-template> |
108 | 129 | ||
109 | <td>{{ user.videoQuotaUsed }} / {{ user.videoQuota }}</td> | 130 | <td *ngIf="getColumn('quota')"> |
110 | <td>{{ user.roleLabel }}</td> | 131 | <div class="progress" i18n-title title="Total video quota"> |
132 | <div class="progress-bar" role="progressbar" [style]="{ width: getUserVideoQuotaPercentage(user) + '%' }" | ||
133 | [attr.aria-valuenow]="user.rawVideoQuotaUsed" aria-valuemin="0" [attr.aria-valuemax]="user.rawVideoQuota"> | ||
134 | </div> | ||
135 | <span>{{ user.videoQuotaUsed }}</span> | ||
136 | <span>{{ user.videoQuota }}</span> | ||
137 | </div> | ||
138 | </td> | ||
139 | |||
140 | <td *ngIf="getColumn('quotaDaily')"> | ||
141 | <div class="progress" i18n-title title="Total daily video quota"> | ||
142 | <div class="progress-bar secondary" role="progressbar" [style]="{ width: getUserVideoQuotaDailyPercentage(user) + '%' }" | ||
143 | [attr.aria-valuenow]="user.rawVideoQuotaUsedDaily" aria-valuemin="0" [attr.aria-valuemax]="user.rawVideoQuotaDaily"> | ||
144 | </div> | ||
145 | <span>{{ user.videoQuotaUsedDaily }}</span> | ||
146 | <span>{{ user.videoQuotaDaily }}</span> | ||
147 | </div> | ||
148 | </td> | ||
111 | 149 | ||
112 | <td> | 150 | <td *ngIf="getColumn('role')"> |
151 | <span *ngIf="user.blocked" class="badge badge-banned" i18n-title title="The user was banned">{{ user.roleLabel }}</span> | ||
152 | <span *ngIf="!user.blocked" class="badge" [ngClass]="getRoleClass(user.role)">{{ user.roleLabel }}</span> | ||
153 | </td> | ||
154 | |||
155 | <td *ngIf="getColumn('pluginAuth')"> | ||
113 | <ng-container *ngIf="user.pluginAuth">{{ user.pluginAuth }}</ng-container> | 156 | <ng-container *ngIf="user.pluginAuth">{{ user.pluginAuth }}</ng-container> |
114 | </td> | 157 | </td> |
115 | 158 | ||
116 | <td [title]="user.createdAt">{{ user.createdAt | date: 'short' }}</td> | 159 | <td *ngIf="getColumn('createdAt')" [title]="user.createdAt">{{ user.createdAt | date: 'short' }}</td> |
160 | |||
161 | <td *ngIf="getColumn('lastLoginDate')" [title]="user.lastLoginDate">{{ user.lastLoginDate | date: 'short' }}</td> | ||
117 | 162 | ||
118 | <td class="action-cell"> | 163 | <td class="action-cell"> |
119 | <my-user-moderation-dropdown | 164 | <my-user-moderation-dropdown |