diff options
author | Chocobozzz <me@florianbigard.com> | 2020-08-11 16:07:53 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2020-08-11 16:18:42 +0200 |
commit | 52c4976fcf4ee255a3af68ff9778e4f5c4f84bd4 (patch) | |
tree | 887d2b6106548ad23cf016d82baf1977198027d9 /client/src/app/+admin/users/user-list/user-list.component.html | |
parent | 3d25d5de33d8aa0ba00d7514522b25d22bf0e0a1 (diff) | |
download | PeerTube-52c4976fcf4ee255a3af68ff9778e4f5c4f84bd4.tar.gz PeerTube-52c4976fcf4ee255a3af68ff9778e4f5c4f84bd4.tar.zst PeerTube-52c4976fcf4ee255a3af68ff9778e4f5c4f84bd4.zip |
Use ng select for multiselect
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 | 44 |
1 files changed, 22 insertions, 22 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 3090247e5..d02f6526f 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 | |||
@@ -57,12 +57,12 @@ | |||
57 | <div role="menu" class="dropdown-menu" ngbDropdownMenu> | 57 | <div role="menu" class="dropdown-menu" ngbDropdownMenu> |
58 | <div class="dropdown-header" i18n>Table parameters</div> | 58 | <div class="dropdown-header" i18n>Table parameters</div> |
59 | <div ngbDropdownItem class="dropdown-item"> | 59 | <div ngbDropdownItem class="dropdown-item"> |
60 | <p-multiSelect | 60 | <my-select-checkbox |
61 | [options]="columns" [showToggleAll]="true" [(ngModel)]="selectedColumns" optionLabel="label" | 61 | name="columns" |
62 | emptyFilterMessage="No matching column found" i18n-emptyFilterMessage [filter]="false" | 62 | [availableItems]="columns" |
63 | selectedItemsLabel="{0} columns displayed" i18n-emptyFilterMessage [showHeader]="false" | 63 | [selectableGroup]="false" [(ngModel)]="selectedColumns" |
64 | [maxSelectedLabels]="4" | 64 | > |
65 | ></p-multiSelect> | 65 | </my-select-checkbox> |
66 | </div> | 66 | </div> |
67 | <div ngbDropdownItem class="dropdown-item"> | 67 | <div ngbDropdownItem class="dropdown-item"> |
68 | <my-peertube-checkbox inputName="highlightBannedUsers" [(ngModel)]="highlightBannedUsers" | 68 | <my-peertube-checkbox inputName="highlightBannedUsers" [(ngModel)]="highlightBannedUsers" |
@@ -71,14 +71,14 @@ | |||
71 | </div> | 71 | </div> |
72 | </div> | 72 | </div> |
73 | </th> | 73 | </th> |
74 | <th *ngIf="getColumn('username')" pResizableColumn i18n pSortableColumn="username">{{ getColumn('username').label }} <p-sortIcon field="username"></p-sortIcon></th> | 74 | <th *ngIf="isSelected('username')" pResizableColumn i18n pSortableColumn="username">{{ getColumn('username').label }} <p-sortIcon field="username"></p-sortIcon></th> |
75 | <th *ngIf="getColumn('email')" i18n>{{ getColumn('email').label }}</th> | 75 | <th *ngIf="isSelected('email')" i18n>{{ getColumn('email').label }}</th> |
76 | <th *ngIf="getColumn('quota')" style="width: 160px;" i18n pSortableColumn="videoQuotaUsed">{{ getColumn('quota').label }} <p-sortIcon field="videoQuotaUsed"></p-sortIcon></th> | 76 | <th *ngIf="isSelected('quota')" style="width: 160px;" i18n pSortableColumn="videoQuotaUsed">{{ getColumn('quota').label }} <p-sortIcon field="videoQuotaUsed"></p-sortIcon></th> |
77 | <th *ngIf="getColumn('quotaDaily')" style="width: 160px;" i18n>{{ getColumn('quotaDaily').label }}</th> | 77 | <th *ngIf="isSelected('quotaDaily')" style="width: 160px;" i18n>{{ getColumn('quotaDaily').label }}</th> |
78 | <th *ngIf="getColumn('role')" style="width: 120px;" i18n pSortableColumn="role">{{ getColumn('role').label }} <p-sortIcon field="role"></p-sortIcon></th> | 78 | <th *ngIf="isSelected('role')" style="width: 120px;" i18n pSortableColumn="role">{{ getColumn('role').label }} <p-sortIcon field="role"></p-sortIcon></th> |
79 | <th *ngIf="getColumn('pluginAuth')" style="width: 140px;" pResizableColumn i18n>{{ getColumn('pluginAuth').label }}</th> | 79 | <th *ngIf="isSelected('pluginAuth')" style="width: 140px;" pResizableColumn i18n>{{ getColumn('pluginAuth').label }}</th> |
80 | <th *ngIf="getColumn('createdAt')" style="width: 150px;" i18n pSortableColumn="createdAt">{{ getColumn('createdAt').label }} <p-sortIcon field="createdAt"></p-sortIcon></th> | 80 | <th *ngIf="isSelected('createdAt')" style="width: 150px;" i18n pSortableColumn="createdAt">{{ getColumn('createdAt').label }} <p-sortIcon field="createdAt"></p-sortIcon></th> |
81 | <th *ngIf="getColumn('lastLoginDate')" style="width: 150px;" i18n pSortableColumn="lastLoginDate">{{ getColumn('lastLoginDate').label }} <p-sortIcon field="lastLoginDate"></p-sortIcon></th> | 81 | <th *ngIf="isSelected('lastLoginDate')" style="width: 150px;" i18n pSortableColumn="lastLoginDate">{{ getColumn('lastLoginDate').label }} <p-sortIcon field="lastLoginDate"></p-sortIcon></th> |
82 | </tr> | 82 | </tr> |
83 | </ng-template> | 83 | </ng-template> |
84 | 84 | ||
@@ -101,7 +101,7 @@ | |||
101 | </my-user-moderation-dropdown> | 101 | </my-user-moderation-dropdown> |
102 | </td> | 102 | </td> |
103 | 103 | ||
104 | <td *ngIf="getColumn('username')"> | 104 | <td *ngIf="isSelected('username')"> |
105 | <a i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer" [routerLink]="[ '/accounts/' + user.username ]"> | 105 | <a i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer" [routerLink]="[ '/accounts/' + user.username ]"> |
106 | <div class="chip two-lines"> | 106 | <div class="chip two-lines"> |
107 | <img | 107 | <img |
@@ -118,7 +118,7 @@ | |||
118 | </a> | 118 | </a> |
119 | </td> | 119 | </td> |
120 | 120 | ||
121 | <td *ngIf="getColumn('email')" [title]="user.email"> | 121 | <td *ngIf="isSelected('email')" [title]="user.email"> |
122 | <ng-container *ngIf="!requiresEmailVerification || user.blocked; else emailWithVerificationStatus"> | 122 | <ng-container *ngIf="!requiresEmailVerification || user.blocked; else emailWithVerificationStatus"> |
123 | <a class="table-email" [href]="'mailto:' + user.email">{{ user.email }}</a> | 123 | <a class="table-email" [href]="'mailto:' + user.email">{{ user.email }}</a> |
124 | </ng-container> | 124 | </ng-container> |
@@ -135,7 +135,7 @@ | |||
135 | </ng-template> | 135 | </ng-template> |
136 | </ng-template> | 136 | </ng-template> |
137 | 137 | ||
138 | <td *ngIf="getColumn('quota')"> | 138 | <td *ngIf="isSelected('quota')"> |
139 | <div class="progress" i18n-title title="Total video quota"> | 139 | <div class="progress" i18n-title title="Total video quota"> |
140 | <div class="progress-bar" role="progressbar" [style]="{ width: getUserVideoQuotaPercentage(user) + '%' }" | 140 | <div class="progress-bar" role="progressbar" [style]="{ width: getUserVideoQuotaPercentage(user) + '%' }" |
141 | [attr.aria-valuenow]="user.rawVideoQuotaUsed" aria-valuemin="0" [attr.aria-valuemax]="user.rawVideoQuota"> | 141 | [attr.aria-valuenow]="user.rawVideoQuotaUsed" aria-valuemin="0" [attr.aria-valuemax]="user.rawVideoQuota"> |
@@ -145,7 +145,7 @@ | |||
145 | </div> | 145 | </div> |
146 | </td> | 146 | </td> |
147 | 147 | ||
148 | <td *ngIf="getColumn('quotaDaily')"> | 148 | <td *ngIf="isSelected('quotaDaily')"> |
149 | <div class="progress" i18n-title title="Total daily video quota"> | 149 | <div class="progress" i18n-title title="Total daily video quota"> |
150 | <div class="progress-bar secondary" role="progressbar" [style]="{ width: getUserVideoQuotaDailyPercentage(user) + '%' }" | 150 | <div class="progress-bar secondary" role="progressbar" [style]="{ width: getUserVideoQuotaDailyPercentage(user) + '%' }" |
151 | [attr.aria-valuenow]="user.rawVideoQuotaUsedDaily" aria-valuemin="0" [attr.aria-valuemax]="user.rawVideoQuotaDaily"> | 151 | [attr.aria-valuenow]="user.rawVideoQuotaUsedDaily" aria-valuemin="0" [attr.aria-valuemax]="user.rawVideoQuotaDaily"> |
@@ -155,18 +155,18 @@ | |||
155 | </div> | 155 | </div> |
156 | </td> | 156 | </td> |
157 | 157 | ||
158 | <td *ngIf="getColumn('role')"> | 158 | <td *ngIf="isSelected('role')"> |
159 | <span *ngIf="user.blocked" class="badge badge-banned" i18n-title title="The user was banned">{{ user.roleLabel }}</span> | 159 | <span *ngIf="user.blocked" class="badge badge-banned" i18n-title title="The user was banned">{{ user.roleLabel }}</span> |
160 | <span *ngIf="!user.blocked" class="badge" [ngClass]="getRoleClass(user.role)">{{ user.roleLabel }}</span> | 160 | <span *ngIf="!user.blocked" class="badge" [ngClass]="getRoleClass(user.role)">{{ user.roleLabel }}</span> |
161 | </td> | 161 | </td> |
162 | 162 | ||
163 | <td *ngIf="getColumn('pluginAuth')"> | 163 | <td *ngIf="isSelected('pluginAuth')"> |
164 | <ng-container *ngIf="user.pluginAuth">{{ user.pluginAuth }}</ng-container> | 164 | <ng-container *ngIf="user.pluginAuth">{{ user.pluginAuth }}</ng-container> |
165 | </td> | 165 | </td> |
166 | 166 | ||
167 | <td *ngIf="getColumn('createdAt')" [title]="user.createdAt">{{ user.createdAt | date: 'short' }}</td> | 167 | <td *ngIf="isSelected('createdAt')" [title]="user.createdAt">{{ user.createdAt | date: 'short' }}</td> |
168 | 168 | ||
169 | <td *ngIf="getColumn('lastLoginDate')" [title]="user.lastLoginDate">{{ user.lastLoginDate | date: 'short' }}</td> | 169 | <td *ngIf="isSelected('lastLoginDate')" [title]="user.lastLoginDate">{{ user.lastLoginDate | date: 'short' }}</td> |
170 | </tr> | 170 | </tr> |
171 | </ng-template> | 171 | </ng-template> |
172 | 172 | ||