Refactoring

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

@@ -4,6 +4,7 @@ import { GfValueComponent } from '@ghostfolio/ui/value';
 import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   CUSTOM_ELEMENTS_SCHEMA,
   Inject,
@@ -14,9 +15,8 @@ import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { MatDialogModule } from '@angular/material/dialog';
 import { EMPTY, Subject } from 'rxjs';
-import { catchError, finalize, takeUntil } from 'rxjs/operators';
+import { catchError, takeUntil } from 'rxjs/operators';
 
-import { NotificationService } from '../../core/notification/notification.service';
 import { AdminService } from '../../services/admin.service';
 import { GfDialogFooterComponent } from '../dialog-footer/dialog-footer.component';
 import { GfDialogHeaderComponent } from '../dialog-header/dialog-header.component';
@@ -39,15 +39,14 @@ import { UserDetailDialogParams } from './interfaces/interfaces';
   templateUrl: './user-detail-dialog.html'
 })
 export class GfUserDetailDialogComponent implements OnDestroy, OnInit {
-  public isLoading = true;
   public user: AdminUserResponse;
 
   private unsubscribeSubject = new Subject<void>();
 
   public constructor(
-    @Inject(MAT_DIALOG_DATA) public data: UserDetailDialogParams,
     private adminService: AdminService,
-    private notificationService: NotificationService,
+    private changeDetectorRef: ChangeDetectorRef,
+    @Inject(MAT_DIALOG_DATA) public data: UserDetailDialogParams,
     public dialogRef: MatDialogRef<GfUserDetailDialogComponent>
   ) {}
 
@@ -57,19 +56,15 @@ export class GfUserDetailDialogComponent implements OnDestroy, OnInit {
       .pipe(
         takeUntil(this.unsubscribeSubject),
         catchError(() => {
-          this.notificationService.alert({
-            title: $localize`User`,
-            message: $localize`Unable to load user`
-          });
-
           this.dialogRef.close();
 
           return EMPTY;
-        }),
+        })
-        finalize(() => (this.isLoading = false))
       )
       .subscribe((user) => {
         this.user = user;
+
+        this.changeDetectorRef.markForCheck();
       });
   }
 

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

@@ -6,10 +6,9 @@
 
 <div class="flex-grow-1" mat-dialog-content>
   <div class="container p-0">
-    @if (user) {
     <div class="mb-3 row">
       <div class="col-6 mb-3">
-          <gf-value i18n size="medium" [value]="user.id"> User ID </gf-value>
+        <gf-value i18n size="medium" [value]="user?.id">User ID</gf-value>
       </div>
       <div class="col-6 mb-3">
         <gf-value
@@ -17,22 +16,21 @@
           size="medium"
           [isDate]="true"
           [locale]="data.locale"
-            [value]="user.createdAt"
+          [value]="user?.createdAt"
+          >Registration Date</gf-value
         >
-            Registration Date
-          </gf-value>
       </div>
     </div>
 
     <div class="mb-3 row">
       <div class="col-6 mb-3">
-          <gf-value i18n size="medium" [value]="user.role"> Role </gf-value>
+        <gf-value i18n size="medium" [value]="user?.role"> Role </gf-value>
       </div>
       @if (data.hasPermissionForSubscription) {
         <div class="col-6 mb-3">
-            <gf-value i18n size="medium" [value]="user.country">
+          <gf-value i18n size="medium" [value]="user?.country"
-              Country
+            >Country</gf-value
-            </gf-value>
+          >
         </div>
       }
     </div>
@@ -43,20 +41,18 @@
           i18n
           size="medium"
           [locale]="data.locale"
-            [value]="user.accountCount"
+          [value]="user?.accountCount"
+          >Accounts</gf-value
         >
-            Accounts
-          </gf-value>
       </div>
       <div class="col-6 mb-3">
         <gf-value
           i18n
           size="medium"
           [locale]="data.locale"
-            [value]="user.activityCount"
+          [value]="user?.activityCount"
+          >Activities</gf-value
         >
-            Activities
-          </gf-value>
       </div>
     </div>
 
@@ -68,24 +64,21 @@
             size="medium"
             [locale]="data.locale"
             [precision]="0"
-              [value]="user.engagement"
+            [value]="user?.engagement"
+            >Engagement per Day</gf-value
           >
-              Engagement per Day
-            </gf-value>
         </div>
         <div class="col-6 mb-3">
           <gf-value
             i18n
             size="medium"
             [locale]="data.locale"
-              [value]="user.dailyApiRequests"
+            [value]="user?.dailyApiRequests"
+            >API Requests Today</gf-value
           >
-              API Requests Today
-            </gf-value>
         </div>
       </div>
     }
-    }
   </div>
 </div>