Refactoring

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

@@ -171,38 +171,6 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
     this.fetchUsers();
   }
 
-  public onOpenUserDetailDialog(userId: string) {
-    this.router.navigate([], {
-      queryParams: { userId, userDetailDialog: true }
-    });
-  }
-
-  private openUserDetailDialog(userId: string) {
-    // Find the user data from the current dataSource
-    const userData = this.dataSource.data.find(({ id }) => {
-      return id === userId;
-    });
-
-    const dialogRef = this.dialog.open(GfUserDetailDialogComponent, {
-      autoFocus: false,
-      data: {
-        userData,
-        userId,
-        deviceType: this.deviceType
-      } as UserDetailDialogParams,
-      height: this.deviceType === 'mobile' ? '80vh' : '60vh',
-      width: this.deviceType === 'mobile' ? '100vw' : '50rem'
-    });
-
-    dialogRef
-      .afterClosed()
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(() => {
-        this.fetchUsers();
-        this.router.navigate(['.'], { relativeTo: this.route });
-      });
-  }
-
   public formatDistanceToNow(aDateString: string) {
     if (aDateString) {
       const distanceString = formatDistanceToNowStrict(parseISO(aDateString), {
@@ -219,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: () => {
@@ -270,9 +244,9 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
     window.location.reload();
   }
 
-  public onChangePage(page: PageEvent) {
+  public onOpenUserDetailDialog(userId: string) {
-    this.fetchUsers({
+    this.router.navigate([], {
-      pageIndex: page.pageIndex
+      queryParams: { userId, userDetailDialog: true }
     });
   }
 
@@ -303,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 });
+      });
+  }
 }

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

@@ -2,5 +2,6 @@ import { AdminUsers } from '@ghostfolio/common/interfaces';
 
 export interface UserDetailDialogParams {
   deviceType: string;
+  locale: string;
   userData: AdminUsers['users'][0];
 }

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

@@ -1,17 +1,14 @@
 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 {
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
   CUSTOM_ELEMENTS_SCHEMA,
   Inject,
-  OnDestroy,
+  OnDestroy
-  OnInit
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
@@ -36,35 +33,18 @@ import { UserDetailDialogParams } from './interfaces/interfaces';
   styleUrls: ['./user-detail-dialog.component.scss'],
   templateUrl: './user-detail-dialog.html'
 })
-export class GfUserDetailDialogComponent implements OnDestroy, OnInit {
+export class GfUserDetailDialogComponent implements OnDestroy {
-  public title: string = 'User Information';
-  public user: User;
   private unsubscribeSubject = new Subject<void>();
 
   public constructor(
-    private changeDetectorRef: ChangeDetectorRef,
     @Inject(MAT_DIALOG_DATA) public data: UserDetailDialogParams,
     public dialogRef: MatDialogRef<GfUserDetailDialogComponent>
   ) {}
 
-  public ngOnInit() {
-    this.initialize();
-  }
-
   public onClose() {
     this.dialogRef.close();
   }
 
-  private fetchUserDetails() {
-    if (this.data.userData) {
-      this.changeDetectorRef.markForCheck();
-    }
-  }
-
-  private initialize() {
-    this.fetchUserDetails();
-  }
-
   public ngOnDestroy() {
     this.unsubscribeSubject.next();
     this.unsubscribeSubject.complete();

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

@@ -6,10 +6,6 @@
 
 <div class="flex-grow-1" mat-dialog-content>
   <div class="container p-0">
-    <div class="col-12 d-flex justify-content-center mb-3">
-      <gf-value i18n size="medium" [value]="title"></gf-value>
-    </div>
-
     <div class="mb-3 row">
       <div class="col-6 mb-3">
         <gf-value i18n size="medium" [value]="data.userData.id"
@@ -21,7 +17,7 @@
           i18n
           size="medium"
           [isDate]="true"
-          [locale]="user?.settings?.locale"
+          [locale]="data.locale"
           [value]="data.userData.createdAt"
           >Registration Date</gf-value
         >