From bc99dfe54e093e69ba8fd06d36b36fbbda3f45de Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Wed, 15 Jul 2020 11:17:03 +0200 Subject: variable columns for users list, more columns possible, badge display for statuses --- .../followers-list/followers-list.component.html | 8 ++- .../following-list/following-list.component.html | 8 ++- .../src/app/+admin/follows/follows.component.scss | 4 ++ .../src/app/+admin/system/jobs/jobs.component.html | 10 +-- .../users/user-list/user-list.component.html | 81 +++++++++++++++++----- .../users/user-list/user-list.component.scss | 19 +++++ .../+admin/users/user-list/user-list.component.ts | 48 ++++++++++++- 7 files changed, 150 insertions(+), 28 deletions(-) (limited to 'client/src/app/+admin') diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.html b/client/src/app/+admin/follows/followers-list/followers-list.component.html index f50828bb9..050fe40fb 100644 --- a/client/src/app/+admin/follows/followers-list/followers-list.component.html +++ b/client/src/app/+admin/follows/followers-list/followers-list.component.html @@ -41,8 +41,12 @@ - Accepted - Pending + + Accepted + + + Pending + {{ follow.score }} {{ follow.createdAt | date: 'short' }} diff --git a/client/src/app/+admin/follows/following-list/following-list.component.html b/client/src/app/+admin/follows/following-list/following-list.component.html index 7d1a3d7f3..9dead2557 100644 --- a/client/src/app/+admin/follows/following-list/following-list.component.html +++ b/client/src/app/+admin/follows/following-list/following-list.component.html @@ -45,8 +45,12 @@ - Accepted - Pending + + Accepted + + + Pending + {{ follow.createdAt | date: 'short' }} diff --git a/client/src/app/+admin/follows/follows.component.scss b/client/src/app/+admin/follows/follows.component.scss index 0cffcb555..33ff17539 100644 --- a/client/src/app/+admin/follows/follows.component.scss +++ b/client/src/app/+admin/follows/follows.component.scss @@ -4,3 +4,7 @@ flex-grow: 0; margin-right: 30px; } + +.badge { + @include table-badge; +} diff --git a/client/src/app/+admin/system/jobs/jobs.component.html b/client/src/app/+admin/system/jobs/jobs.component.html index 596117ab7..185fae220 100644 --- a/client/src/app/+admin/system/jobs/jobs.component.html +++ b/client/src/app/+admin/system/jobs/jobs.component.html @@ -26,10 +26,10 @@ - ID - Type - Created - State + ID + Type + Created + State @@ -43,7 +43,7 @@ {{ job.id }} {{ job.type }} - {{ job.createdAt }} + {{ job.createdAt | date: 'short' }} Delayed Will start soon... Running... 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 @@ - Username - Email - Video quota - Role - Auth plugin - Created - + {{ getColumn('username').label }} + {{ getColumn('email').label }} + {{ getColumn('quota').label }} + {{ getColumn('quotaDaily').label }} + {{ getColumn('role').label }} + {{ getColumn('pluginAuth').label }} + {{ getColumn('createdAt').label }} + {{ getColumn('lastLoginDate').label }} + +
+ + + +
+ - + @@ -73,7 +95,7 @@ - +
Avatar
- - - {{ user.account.displayName }} - + {{ user.account.displayName }} {{ user.username }}
- {{ user.email }} + + {{ user.email }} + @@ -106,14 +127,38 @@ - {{ user.videoQuotaUsed }} / {{ user.videoQuota }} - {{ user.roleLabel }} + +
+
+
+ {{ user.videoQuotaUsed }} + {{ user.videoQuota }} +
+ + + +
+
+
+ {{ user.videoQuotaUsedDaily }} + {{ user.videoQuotaDaily }} +
+ - + + {{ user.roleLabel }} + {{ user.roleLabel }} + + + {{ user.pluginAuth }} - {{ user.createdAt | date: 'short' }} + {{ user.createdAt | date: 'short' }} + + {{ user.lastLoginDate | date: 'short' }} td { background-color: lighten($color: $red, $amount: 40) !important; } +.table-email { + @include disable-default-a-behaviour; + color: pvar(--mainForegroundColor); +} + .banned-info { font-style: italic; } @@ -36,10 +41,24 @@ p-tableCheckbox { top: -2.5px; } +my-global-icon { + width: 18px; +} + .chip { @include chip; } +.badge { + @include table-badge; +} + +.progress { + @include progressbar; + width: auto; + max-width: 100%; +} + .input-group { @include peertube-input-group(300px); input { diff --git a/client/src/app/+admin/users/user-list/user-list.component.ts b/client/src/app/+admin/users/user-list/user-list.component.ts index 0b72b07c1..b2978212e 100644 --- a/client/src/app/+admin/users/user-list/user-list.component.ts +++ b/client/src/app/+admin/users/user-list/user-list.component.ts @@ -4,7 +4,7 @@ import { AuthService, ConfirmService, Notifier, RestPagination, RestTable, Serve import { Actor, DropdownAction } from '@app/shared/shared-main' import { UserBanModalComponent } from '@app/shared/shared-moderation' import { I18n } from '@ngx-translate/i18n-polyfill' -import { ServerConfig, User } from '@shared/models' +import { ServerConfig, User, UserRole } from '@shared/models' import { Params, Router, ActivatedRoute } from '@angular/router' @Component({ @@ -19,9 +19,12 @@ export class UserListComponent extends RestTable implements OnInit { totalRecords = 0 sort: SortMeta = { field: 'createdAt', order: 1 } pagination: RestPagination = { count: this.rowsPerPage, start: 0 } + highlightBannedUsers = false selectedUsers: User[] = [] bulkUserActions: DropdownAction[][] = [] + columns: { key: string, label: string }[] + _selectedColumns: { key: string, label: string }[] private serverConfig: ServerConfig @@ -46,6 +49,14 @@ export class UserListComponent extends RestTable implements OnInit { return this.serverConfig.signup.requiresEmailVerification } + get selectedColumns () { + return this._selectedColumns + } + + set selectedColumns (val) { + this._selectedColumns = val + } + ngOnInit () { this.serverConfig = this.serverService.getTmpConfig() this.serverService.getConfig() @@ -92,12 +103,47 @@ export class UserListComponent extends RestTable implements OnInit { } ] ] + + this.columns = [ + { key: 'username', label: 'Username' }, + { key: 'email', label: 'Email' }, + { key: 'quota', label: 'Video quota' }, + { key: 'role', label: 'Role' }, + { key: 'createdAt', label: 'Created' } + ] + this.selectedColumns = [...this.columns] + this.columns.push({ key: 'quotaDaily', label: 'Daily quota' }) + this.columns.push({ key: 'pluginAuth', label: 'Auth plugin' }) + this.columns.push({ key: 'lastLoginDate', label: 'Last login' }) } getIdentifier () { return 'UserListComponent' } + getRoleClass (role: UserRole) { + switch (role) { + case UserRole.ADMINISTRATOR: + return 'badge-purple' + case UserRole.MODERATOR: + return 'badge-blue' + default: + return 'badge-yellow' + } + } + + getColumn (key: string) { + return this.selectedColumns.find((col: any) => col.key === key) + } + + getUserVideoQuotaPercentage (user: User & { rawVideoQuota: number, rawVideoQuotaUsed: number}) { + return user.rawVideoQuotaUsed * 100 / user.rawVideoQuota + } + + getUserVideoQuotaDailyPercentage (user: User & { rawVideoQuotaDaily: number, rawVideoQuotaUsedDaily: number}) { + return user.rawVideoQuotaUsedDaily * 100 / user.rawVideoQuotaDaily + } + openBanUserModal (users: User[]) { for (const user of users) { if (user.username === 'root') { -- cgit v1.2.3