diff --git a/CHANGELOG.md b/CHANGELOG.md index 8dff9d6c3..d48751572 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added - Extended the export functionality by the user account’s performance calculation type +- Added a user detail dialog to the users section of the admin control panel ### Changed 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 84b82d111..fce97877b 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 @@ -19,6 +19,7 @@ import { ViewChild } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; +import { MatDialog } from '@angular/material/dialog'; import { MatMenuModule } from '@angular/material/menu'; import { MatPaginator, @@ -26,6 +27,7 @@ import { PageEvent } from '@angular/material/paginator'; import { MatTableDataSource, MatTableModule } from '@angular/material/table'; +import { ActivatedRoute, Router } from '@angular/router'; import { IonIcon } from '@ionic/angular/standalone'; import { differenceInSeconds, @@ -37,8 +39,10 @@ import { contractOutline, ellipsisHorizontal, keyOutline, + personOutline, trashOutline } from 'ionicons/icons'; +import { DeviceDetectorService } from 'ngx-device-detector'; import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -49,6 +53,8 @@ import { AdminService } from '../../services/admin.service'; import { DataService } from '../../services/data.service'; import { ImpersonationStorageService } from '../../services/impersonation-storage.service'; import { UserService } from '../../services/user/user.service'; +import { UserDetailDialogParams } from '../user-detail-dialog/interfaces/interfaces'; +import { GfUserDetailDialogComponent } from '../user-detail-dialog/user-detail-dialog.component'; @Component({ imports: [ @@ -71,6 +77,7 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit { public dataSource = new MatTableDataSource(); public defaultDateFormat: string; + public deviceType: string; public displayedColumns: string[] = []; public getEmojiFlag = getEmojiFlag; public hasPermissionForSubscription: boolean; @@ -87,11 +94,16 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit { private adminService: AdminService, private changeDetectorRef: ChangeDetectorRef, private dataService: DataService, + private deviceService: DeviceDetectorService, + private dialog: MatDialog, private impersonationStorageService: ImpersonationStorageService, private notificationService: NotificationService, + private route: ActivatedRoute, + private router: Router, private tokenStorageService: TokenStorageService, private userService: UserService ) { + this.deviceType = this.deviceService.getDeviceInfo().deviceType; this.info = this.dataService.fetchInfo(); this.hasPermissionForSubscription = hasPermission( @@ -121,6 +133,14 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit { ]; } + this.route.queryParams + .pipe(takeUntil(this.unsubscribeSubject)) + .subscribe((params) => { + if (params['userDetailDialog'] && params['userId']) { + this.openUserDetailDialog(params['userId']); + } + }); + this.userService.stateChanged .pipe(takeUntil(this.unsubscribeSubject)) .subscribe((state) => { @@ -138,7 +158,13 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit { } }); - addIcons({ contractOutline, ellipsisHorizontal, keyOutline, trashOutline }); + addIcons({ + contractOutline, + ellipsisHorizontal, + keyOutline, + personOutline, + trashOutline + }); } public ngOnInit() { @@ -161,6 +187,12 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit { return ''; } + public onChangePage(page: PageEvent) { + this.fetchUsers({ + pageIndex: page.pageIndex + }); + } + public onDeleteUser(aId: string) { this.notificationService.confirm({ confirmFn: () => { @@ -212,9 +244,9 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit { window.location.reload(); } - public onChangePage(page: PageEvent) { - this.fetchUsers({ - pageIndex: page.pageIndex + public onOpenUserDetailDialog(userId: string) { + this.router.navigate([], { + queryParams: { userId, userDetailDialog: true } }); } @@ -245,4 +277,34 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit { this.changeDetectorRef.markForCheck(); }); } + + private openUserDetailDialog(userId: string) { + const userData = this.dataSource.data.find(({ id }) => { + return id === userId; + }); + + if (!userData) { + this.router.navigate(['.'], { relativeTo: this.route }); + return; + } + + const dialogRef = this.dialog.open(GfUserDetailDialogComponent, { + autoFocus: false, + data: { + userData, + deviceType: this.deviceType, + locale: this.user?.settings?.locale + } as UserDetailDialogParams, + height: this.deviceType === 'mobile' ? '98vh' : '60vh', + width: this.deviceType === 'mobile' ? '100vw' : '50rem' + }); + + dialogRef + .afterClosed() + .pipe(takeUntil(this.unsubscribeSubject)) + .subscribe(() => { + this.fetchUsers(); + this.router.navigate(['.'], { relativeTo: this.route }); + }); + } } 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 4e58abf08..e802e3272 100644 --- a/apps/client/src/app/components/admin-users/admin-users.html +++ b/apps/client/src/app/components/admin-users/admin-users.html @@ -216,6 +216,15 @@ + @if (hasPermissionToImpersonateAllUsers) {