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 ++++++++++++- .../my-account-notifications.component.html | 2 +- .../my-account-notifications.component.ts | 2 - client/src/app/core/users/user.service.ts | 20 +++++- .../shared/shared-icons/global-icon.component.ts | 3 +- .../video-channel/video-channel.service.ts | 7 +- 12 files changed, 177 insertions(+), 35 deletions(-) (limited to 'client/src/app') 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') { diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html index 0727f90e8..9b5f2dd2f 100644 --- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html +++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html @@ -6,7 +6,7 @@
- diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts index 03b91e050..8a51319fe 100644 --- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts +++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts @@ -17,6 +17,4 @@ export class MyAccountNotificationsComponent { hasUnreadNotifications () { return this.userNotification.notifications.filter(n => n.read === false).length !== 0 } - - onNotificationSortTypeChanged () {} } diff --git a/client/src/app/core/users/user.service.ts b/client/src/app/core/users/user.service.ts index 2c817d45e..5f9300bec 100644 --- a/client/src/app/core/users/user.service.ts +++ b/client/src/app/core/users/user.service.ts @@ -374,13 +374,23 @@ export class UserService { private formatUser (user: UserServerModel) { let videoQuota if (user.videoQuota === -1) { - videoQuota = this.i18n('Unlimited') + videoQuota = '∞' } else { videoQuota = this.bytesPipe.transform(user.videoQuota, 0) } const videoQuotaUsed = this.bytesPipe.transform(user.videoQuotaUsed, 0) + let videoQuotaDaily + let videoQuotaUsedDaily + if (user.videoQuotaDaily === -1) { + videoQuotaDaily = '∞' + videoQuotaUsedDaily = this.bytesPipe.transform(0, 0) + } else { + videoQuotaDaily = this.bytesPipe.transform(user.videoQuotaDaily, 0) + videoQuotaUsedDaily = this.bytesPipe.transform(user.videoQuotaUsedDaily || 0, 0) + } + const roleLabels: { [ id in UserRole ]: string } = { [UserRole.USER]: this.i18n('User'), [UserRole.ADMINISTRATOR]: this.i18n('Administrator'), @@ -390,7 +400,13 @@ export class UserService { return Object.assign(user, { roleLabel: roleLabels[user.role], videoQuota, - videoQuotaUsed + videoQuotaUsed, + rawVideoQuota: user.videoQuota, + rawVideoQuotaUsed: user.videoQuotaUsed, + videoQuotaDaily, + videoQuotaUsedDaily, + rawVideoQuotaDaily: user.videoQuotaDaily, + rawVideoQuotaUsedDaily: user.videoQuotaUsedDaily }) } } diff --git a/client/src/app/shared/shared-icons/global-icon.component.ts b/client/src/app/shared/shared-icons/global-icon.component.ts index 66adb7579..c58ef29fa 100644 --- a/client/src/app/shared/shared-icons/global-icon.component.ts +++ b/client/src/app/shared/shared-icons/global-icon.component.ts @@ -64,7 +64,8 @@ const icons = { 'go': require('!!raw-loader?!../../../assets/images/feather/arrow-up-right.svg').default, 'cross': require('!!raw-loader?!../../../assets/images/feather/x.svg').default, 'tick': require('!!raw-loader?!../../../assets/images/feather/check.svg').default, - 'repeat': require('!!raw-loader?!../../../assets/images/feather/repeat.svg').default + 'repeat': require('!!raw-loader?!../../../assets/images/feather/repeat.svg').default, + 'columns': require('!!raw-loader?!../../../assets/images/feather/columns.svg').default } export type GlobalIconName = keyof typeof icons diff --git a/client/src/app/shared/shared-main/video-channel/video-channel.service.ts b/client/src/app/shared/shared-main/video-channel/video-channel.service.ts index 5483e305f..64dcf638a 100644 --- a/client/src/app/shared/shared-main/video-channel/video-channel.service.ts +++ b/client/src/app/shared/shared-main/video-channel/video-channel.service.ts @@ -43,7 +43,8 @@ export class VideoChannelService { listAccountVideoChannels ( account: Account, componentPagination?: ComponentPaginationLight, - withStats = false + withStats = false, + search?: string ): Observable> { const pagination = componentPagination ? this.restService.componentPaginationToRestPagination(componentPagination) @@ -53,6 +54,10 @@ export class VideoChannelService { params = this.restService.addRestGetParams(params, pagination) params = params.set('withStats', withStats + '') + if (search) { + params = params.set('search', search) + } + const url = AccountService.BASE_ACCOUNT_URL + account.nameWithHost + '/video-channels' return this.authHttp.get>(url, { params }) .pipe( -- cgit v1.2.3