Task/extend user detail dialog by actions menu (#6256)

* Extend user detail dialog

* Update changelog

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Added the ability to fetch top holdings for ETF and mutual fund assets from _Yahoo Finance_
 - Added support for the impersonation mode in the endpoint `GET api/v1/account/:id/balances`
+- Added an action menu to the user detail dialog in the users section of the admin control panel
 
 ### Changed
 

apps/client/src/app/components/admin-users/admin-users.component.ts

@@ -57,7 +57,7 @@ import {
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { switchMap, takeUntil, tap } from 'rxjs/operators';
 
 @Component({
   imports: [
@@ -139,8 +139,25 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
       ];
     }
 
-    this.route.paramMap
-      .pipe(takeUntil(this.unsubscribeSubject))
+    this.userService.stateChanged
+      .pipe(
+        takeUntil(this.unsubscribeSubject),
+        tap((state) => {
+          if (state?.user) {
+            this.user = state.user;
+
+            this.defaultDateFormat = getDateFormatString(
+              this.user.settings.locale
+            );
+
+            this.hasPermissionToImpersonateAllUsers = hasPermission(
+              this.user.permissions,
+              permissions.impersonateAllUsers
+            );
+          }
+        }),
+        switchMap(() => this.route.paramMap)
+      )
       .subscribe((params) => {
         const userId = params.get('userId');
 
@@ -149,23 +166,6 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
         }
       });
 
-    this.userService.stateChanged
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe((state) => {
-        if (state?.user) {
-          this.user = state.user;
-
-          this.defaultDateFormat = getDateFormatString(
-            this.user.settings.locale
-          );
-
-          this.hasPermissionToImpersonateAllUsers = hasPermission(
-            this.user.permissions,
-            permissions.impersonateAllUsers
-          );
-        }
-      });
-
     addIcons({
       contractOutline,
       ellipsisHorizontal,
@@ -208,10 +208,13 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
           .deleteUser(aId)
           .pipe(takeUntil(this.unsubscribeSubject))
           .subscribe(() => {
-            this.fetchUsers();
+            this.router.navigate(['..'], { relativeTo: this.route });
           });
       },
       confirmType: ConfirmationDialogType.Warn,
+      discardFn: () => {
+        this.router.navigate(['..'], { relativeTo: this.route });
+      },
       title: $localize`Do you really want to delete this user?`
     });
   }
@@ -293,6 +296,7 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
     >(GfUserDetailDialogComponent, {
       autoFocus: false,
       data: {
+        currentUserId: this.user?.id,
         deviceType: this.deviceType,
         hasPermissionForSubscription: this.hasPermissionForSubscription,
         locale: this.user?.settings?.locale,
@@ -305,10 +309,14 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
     dialogRef
       .afterClosed()
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(() => {
-        this.router.navigate(
-          internalRoutes.adminControl.subRoutes.users.routerLink
-        );
+      .subscribe((data) => {
+        if (data?.action === 'delete' && data?.userId) {
+          this.onDeleteUser(data.userId);
+        } else {
+          this.router.navigate(
+            internalRoutes.adminControl.subRoutes.users.routerLink
+          );
+        }
       });
   }
 }

apps/client/src/app/components/user-detail-dialog/interfaces/interfaces.ts

@@ -1,4 +1,5 @@
 export interface UserDetailDialogParams {
+  currentUserId: string;
   deviceType: string;
   hasPermissionForSubscription: boolean;
   locale: string;

apps/client/src/app/components/user-detail-dialog/user-detail-dialog.component.ts

@@ -1,6 +1,4 @@
 import { AdminUserResponse } from '@ghostfolio/common/interfaces';
-import { GfDialogFooterComponent } from '@ghostfolio/ui/dialog-footer';
-import { GfDialogHeaderComponent } from '@ghostfolio/ui/dialog-header';
 import { AdminService } from '@ghostfolio/ui/services';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 
@@ -16,6 +14,10 @@ import {
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { MatDialogModule } from '@angular/material/dialog';
+import { MatMenuModule } from '@angular/material/menu';
+import { IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { ellipsisVertical } from 'ionicons/icons';
 import { EMPTY, Subject } from 'rxjs';
 import { catchError, takeUntil } from 'rxjs/operators';
 
@@ -25,11 +27,11 @@ import { UserDetailDialogParams } from './interfaces/interfaces';
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'd-flex flex-column h-100' },
   imports: [
-    GfDialogFooterComponent,
-    GfDialogHeaderComponent,
     GfValueComponent,
+    IonIcon,
     MatButtonModule,
-    MatDialogModule
+    MatDialogModule,
+    MatMenuModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-user-detail-dialog',
@@ -46,7 +48,11 @@ export class GfUserDetailDialogComponent implements OnDestroy, OnInit {
     private changeDetectorRef: ChangeDetectorRef,
     @Inject(MAT_DIALOG_DATA) public data: UserDetailDialogParams,
     public dialogRef: MatDialogRef<GfUserDetailDialogComponent>
-  ) {}
+  ) {
+    addIcons({
+      ellipsisVertical
+    });
+  }
 
   public ngOnInit() {
     this.adminService
@@ -66,6 +72,13 @@ export class GfUserDetailDialogComponent implements OnDestroy, OnInit {
       });
   }
 
+  public deleteUser() {
+    this.dialogRef.close({
+      action: 'delete',
+      userId: this.data.userId
+    });
+  }
+
   public onClose() {
     this.dialogRef.close();
   }

apps/client/src/app/components/user-detail-dialog/user-detail-dialog.html

@@ -1,9 +1,28 @@
-<gf-dialog-header
-  position="center"
-  [deviceType]="data.deviceType"
-  (closeButtonClicked)="onClose()"
-/>
-
+<div class="d-flex justify-content-end">
+  <button
+    class="mx-1 no-min-width px-2"
+    mat-button
+    type="button"
+    [matMenuTriggerFor]="userDetailActionsMenu"
+    (click)="$event.stopPropagation()"
+  >
+    <ion-icon name="ellipsis-vertical" />
+  </button>
+  <mat-menu
+    #userDetailActionsMenu="matMenu"
+    class="no-max-width"
+    xPosition="before"
+  >
+    <button
+      mat-menu-item
+      type="button"
+      [disabled]="this.data.currentUserId === this.data.userId"
+      (click)="deleteUser()"
+    >
+      <ng-container i18n>Delete</ng-container>
+    </button>
+  </mat-menu>
+</div>
 <div class="flex-grow-1" mat-dialog-content>
   <div class="container p-0">
     <div class="mb-3 row">
@@ -103,7 +122,8 @@
   </div>
 </div>
 
-<gf-dialog-footer
-  [deviceType]="data.deviceType"
-  (closeButtonClicked)="onClose()"
-/>
+<div class="justify-content-end" mat-dialog-actions>
+  <button mat-button type="button" (click)="onClose()">
+    <ng-container i18n>Close</ng-container>
+  </button>
+</div>