refactor: clean up user detail dialog and improve UI components

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

@@ -80,7 +80,6 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
   public displayedColumns: string[] = [];
   public deviceType: string;
   public getEmojiFlag = getEmojiFlag;
-  public hasImpersonationId: boolean;
   public hasPermissionForSubscription: boolean;
   public hasPermissionToImpersonateAllUsers: boolean;
   public info: InfoItem;
@@ -97,10 +96,10 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
     private dataService: DataService,
     private deviceService: DeviceDetectorService,
     private dialog: MatDialog,
-    private route: ActivatedRoute,
-    private router: Router,
     private impersonationStorageService: ImpersonationStorageService,
     private notificationService: NotificationService,
+    private route: ActivatedRoute,
+    private router: Router,
     private tokenStorageService: TokenStorageService,
     private userService: UserService
   ) {
@@ -153,17 +152,16 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
     addIcons({
       contractOutline,
       ellipsisHorizontal,
-      personOutline,
       keyOutline,
+      personOutline,
       trashOutline
     });
 
     this.deviceType = this.deviceService.getDeviceInfo().deviceType;
-    this.hasImpersonationId = !!this.impersonationStorageService.getId();
     this.route.queryParams
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((params) => {
-        if (params['userId'] && params['userDetailDialog']) {
+        if (params['userDetailDialog'] && params['userId']) {
           this.openUserDetailDialog(params['userId']);
         }
       });
@@ -185,9 +183,8 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
     const dialogRef = this.dialog.open(GfUserDetailDialogComponent, {
       autoFocus: false,
       data: {
-        userId: userId,
+        userId,
         deviceType: this.deviceType,
-        hasImpersonationId: this.hasImpersonationId,
         userData: userData // Pass the user data
       } as UserDetailDialogParams,
       height: this.deviceType === 'mobile' ? '80vh' : '60vh',

apps/client/src/app/components/admin-users/admin-users.html

@@ -264,9 +264,8 @@
           ></tr>
           <tr
             *matRowDef="let row; columns: displayedColumns"
-            class="mat-mdc-row"
+            class="cursor-pointer mat-mdc-row"
             mat-row
-            style="cursor: pointer"
             (click)="onOpenUserDetailDialog(row.id)"
           ></tr>
         </table>

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

@@ -1,8 +1,7 @@
 import { AdminUsers } from '@ghostfolio/common/interfaces';
 
 export interface UserDetailDialogParams {
-  userId: string;
   deviceType: string;
-  hasImpersonationId: boolean;
   userData?: AdminUsers['users'][0];
+  userId: string;
 }

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

@@ -4,21 +4,4 @@
   .mat-mdc-dialog-content {
     max-height: unset;
   }
-
-  .text-monospace {
-    font-family:
-      'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
-    font-size: 0.875rem;
-  }
-
-  small {
-    font-size: 0.75rem;
-    font-weight: 500;
-  }
-
-  h5 {
-    font-size: 1.25rem;
-    font-weight: 600;
-    margin-bottom: 1rem;
-  }
 }

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

@@ -1,6 +1,7 @@
 import { GfDialogFooterComponent } from '@ghostfolio/client/components/dialog-footer/dialog-footer.component';
 import { GfDialogHeaderComponent } from '@ghostfolio/client/components/dialog-header/dialog-header.component';
 import { User } from '@ghostfolio/common/interfaces';
+import { GfValueComponent } from '@ghostfolio/ui/value';
 
 import { CommonModule } from '@angular/common';
 import {
@@ -28,6 +29,7 @@ import { UserDetailDialogParams } from './interfaces/interfaces';
     CommonModule,
     GfDialogFooterComponent,
     GfDialogHeaderComponent,
+    GfValueComponent,
     MatButtonModule,
     MatDialogModule
   ],
@@ -37,11 +39,11 @@ import { UserDetailDialogParams } from './interfaces/interfaces';
   templateUrl: './user-detail-dialog.html'
 })
 export class GfUserDetailDialogComponent implements OnDestroy, OnInit {
-  private unsubscribeSubject = new Subject<void>();
+  public isLoading = false;
+  public registrationDate: Date;
   public user: User;
   public userId: string;
-  public registrationDate: Date;
+  private unsubscribeSubject = new Subject<void>();
-  public isLoading = false;
 
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
@@ -52,18 +54,14 @@ export class GfUserDetailDialogComponent implements OnDestroy, OnInit {
     addIcons({ personOutline });
   }
 
-  public ngOnInit(): void {
+  public ngOnInit() {
     this.initialize();
   }
 
-  public onClose(): void {
+  public onClose() {
     this.dialogRef.close();
   }
 
-  private initialize(): void {
-    this.fetchUserDetails();
-  }
-
   private fetchUserDetails(): void {
     this.isLoading = true;
 
@@ -81,8 +79,11 @@ export class GfUserDetailDialogComponent implements OnDestroy, OnInit {
       this.changeDetectorRef.markForCheck();
     }
   }
+  private initialize() {
+    this.fetchUserDetails();
+  }
 
-  public ngOnDestroy(): void {
+  public ngOnDestroy() {
     this.unsubscribeSubject.next();
     this.unsubscribeSubject.complete();
   }

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

@@ -9,22 +9,18 @@
   <div class="container p-0">
     <div class="row">
       <div class="col-12 mb-3">
-        <h5 i18n>User Information</h5>
+        <gf-value i18n size="medium">User Information</gf-value>
       </div>
     </div>
 
     <div class="mb-3 row">
       <div class="col-6 mb-3">
-        <div class="d-flex flex-column">
+        <gf-value i18n size="small" [value]="userId">User ID</gf-value>
-          <small class="text-muted mb-1" i18n>User ID</small>
-          <span class="text-monospace">{{ userId }}</span>
-        </div>
       </div>
       <div class="col-6 mb-3">
-        <div class="d-flex flex-column">
+        <gf-value i18n size="small" [value]="registrationDate | date: 'medium'"
-          <small class="text-muted mb-1" i18n>Registration Date</small>
+          >Registration Date</gf-value
-          <span>{{ registrationDate | date: 'medium' }}</span>
+        >
-        </div>
       </div>
     </div>
   </div>