Extend user detail dialog

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,19 +139,10 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
       ];
     }
 
-    this.route.paramMap
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe((params) => {
-        const userId = params.get('userId');
-
-        if (userId) {
-          this.openUserDetailDialog(userId);
-        }
-      });
-
     this.userService.stateChanged
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(
-      .subscribe((state) => {
+        takeUntil(this.unsubscribeSubject),
+        tap((state) => {
           if (state?.user) {
             this.user = state.user;
 
@@ -164,6 +155,15 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
               permissions.impersonateAllUsers
             );
           }
+        }),
+        switchMap(() => this.route.paramMap)
+      )
+      .subscribe((params) => {
+        const userId = params.get('userId');
+
+        if (userId) {
+          this.openUserDetailDialog(userId);
+        }
       });
 
     addIcons({
@@ -296,7 +296,8 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
         deviceType: this.deviceType,
         hasPermissionForSubscription: this.hasPermissionForSubscription,
         locale: this.user?.settings?.locale,
-        userId: aUserId
+        userId: aUserId,
+        currentUserId: this.user?.id
       },
       height: this.deviceType === 'mobile' ? '98vh' : '60vh',
       width: this.deviceType === 'mobile' ? '100vw' : '50rem'
@@ -305,10 +306,14 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
     dialogRef
       .afterClosed()
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(() => {
+      .subscribe((data) => {
+        if (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

@@ -3,4 +3,5 @@ export interface UserDetailDialogParams {
   hasPermissionForSubscription: boolean;
   locale: string;
   userId: string;
+  currentUserId: 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,12 @@ export class GfUserDetailDialogComponent implements OnDestroy, OnInit {
       });
   }
 
+  public deleteUser() {
+    this.dialogRef.close({
+      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
+<div class="d-flex justify-content-end">
-  position="center"
+  <button
-  [deviceType]="data.deviceType"
+    class="mx-1 no-min-width px-2"
-  (closeButtonClicked)="onClose()"
+    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
+<div class="justify-content-end" mat-dialog-actions>
-  [deviceType]="data.deviceType"
+  <button mat-button type="button" (click)="onClose()">
-  (closeButtonClicked)="onClose()"
+    <ng-container i18n>Close</ng-container>
-/>
+  </button>
+</div>