diff --git a/CHANGELOG.md b/CHANGELOG.md index b1f881dc5..caf00d539 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Added a chart to the account detail dialog +### Changed + +- Changed the users table in the admin control panel to an `@angular/material` data table + ## 2.12.0 - 2023-10-17 ### Added diff --git a/apps/client/src/app/components/admin-users/admin-users.component.ts b/apps/client/src/app/components/admin-users/admin-users.component.ts index 48783c91b..7cccfe2f7 100644 --- a/apps/client/src/app/components/admin-users/admin-users.component.ts +++ b/apps/client/src/app/components/admin-users/admin-users.component.ts @@ -1,4 +1,5 @@ import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core'; +import { MatTableDataSource } from '@angular/material/table'; import { AdminService } from '@ghostfolio/client/services/admin.service'; import { DataService } from '@ghostfolio/client/services/data.service'; import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service'; @@ -20,13 +21,15 @@ import { takeUntil } from 'rxjs/operators'; templateUrl: './admin-users.html' }) export class AdminUsersComponent implements OnDestroy, OnInit { + public dataSource: MatTableDataSource = + new MatTableDataSource(); public defaultDateFormat: string; + public displayedColumns: string[] = []; public getEmojiFlag = getEmojiFlag; public hasPermissionForSubscription: boolean; public hasPermissionToImpersonateAllUsers: boolean; public info: InfoItem; public user: User; - public users: AdminData['users']; private unsubscribeSubject = new Subject(); @@ -44,6 +47,29 @@ export class AdminUsersComponent implements OnDestroy, OnInit { permissions.enableSubscription ); + if (this.hasPermissionForSubscription) { + this.displayedColumns = [ + 'index', + 'user', + 'country', + 'registration', + 'accounts', + 'activities', + 'engagementPerDay', + 'lastRequest', + 'actions' + ]; + } else { + this.displayedColumns = [ + 'index', + 'user', + 'registration', + 'accounts', + 'activities', + 'actions' + ]; + } + this.userService.stateChanged .pipe(takeUntil(this.unsubscribeSubject)) .subscribe((state) => { @@ -118,7 +144,7 @@ export class AdminUsersComponent implements OnDestroy, OnInit { .fetchAdminData() .pipe(takeUntil(this.unsubscribeSubject)) .subscribe(({ users }) => { - this.users = users; + this.dataSource = new MatTableDataSource(users); this.changeDetectorRef.markForCheck(); }); diff --git a/apps/client/src/app/components/admin-users/admin-users.html b/apps/client/src/app/components/admin-users/admin-users.html index 71166a6e1..b6e296b95 100644 --- a/apps/client/src/app/components/admin-users/admin-users.html +++ b/apps/client/src/app/components/admin-users/admin-users.html @@ -2,136 +2,232 @@
- - - - - - - - - - - - - - - - - - - + + + + + + - - - - + + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + - - - + + + + + +
#User - Country - - Registration - - Accounts - - Activities - - Engagement per Day - - Last Request -
{{ i + 1 }} -
- {{ userItem.id }} - {{ (userItem.id | slice:0:5) + '...' }} - -
-
- {{ getEmojiFlag(userItem.country) }} + + + # + + {{ i + 1 }} + + User + +
+ {{ element.id }} + {{ (element.id | slice:0:5) + '...' }} -
- {{ formatDistanceToNow(userItem.createdAt) }} - - - - - + + + Country + + {{ getEmojiFlag(element.country) }} - - + + + + + Registration + + {{ formatDistanceToNow(element.createdAt) }} + + Accounts + + + + Activities + + + + Engagement per Day + + + + Last Request + + {{ formatDistanceToNow(element.lastActivity) }} + + + + + + - - - - -
diff --git a/apps/client/src/app/components/admin-users/admin-users.module.ts b/apps/client/src/app/components/admin-users/admin-users.module.ts index 8c381b205..689b39787 100644 --- a/apps/client/src/app/components/admin-users/admin-users.module.ts +++ b/apps/client/src/app/components/admin-users/admin-users.module.ts @@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatMenuModule } from '@angular/material/menu'; +import { MatTableModule } from '@angular/material/table'; import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator'; import { GfValueModule } from '@ghostfolio/ui/value'; @@ -15,7 +16,8 @@ import { AdminUsersComponent } from './admin-users.component'; GfPremiumIndicatorModule, GfValueModule, MatButtonModule, - MatMenuModule + MatMenuModule, + MatTableModule ], schemas: [CUSTOM_ELEMENTS_SCHEMA] })