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,85 +6,78 @@
 
 <div class="flex-grow-1" mat-dialog-content>
   <div class="container p-0">
-    @if (user) {
+    <div class="mb-3 row">
-      <div class="mb-3 row">
+      <div class="col-6 mb-3">
-        <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>
+      <div class="col-6 mb-3">
-        <div class="col-6 mb-3">
+        <gf-value
-          <gf-value
+          i18n
-            i18n
+          size="medium"
-            size="medium"
+          [isDate]="true"
-            [isDate]="true"
+          [locale]="data.locale"
-            [locale]="data.locale"
+          [value]="user?.createdAt"
-            [value]="user.createdAt"
+          >Registration Date</gf-value
-          >
+        >
-            Registration Date
-          </gf-value>
-        </div>
       </div>
+    </div>
 
-      <div class="mb-3 row">
+    <div class="mb-3 row">
+      <div class="col-6 mb-3">
+        <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.role"> Role </gf-value>
+          <gf-value i18n size="medium" [value]="user?.country"
+            >Country</gf-value
+          >
         </div>
-        @if (data.hasPermissionForSubscription) {
+      }
-          <div class="col-6 mb-3">
+    </div>
-            <gf-value i18n size="medium" [value]="user.country">
+
-              Country
+    <div class="mb-3 row">
-            </gf-value>
+      <div class="col-6 mb-3">
-          </div>
+        <gf-value
-        }
+          i18n
+          size="medium"
+          [locale]="data.locale"
+          [value]="user?.accountCount"
+          >Accounts</gf-value
+        >
       </div>
+      <div class="col-6 mb-3">
+        <gf-value
+          i18n
+          size="medium"
+          [locale]="data.locale"
+          [value]="user?.activityCount"
+          >Activities</gf-value
+        >
+      </div>
+    </div>
 
+    @if (data.hasPermissionForSubscription) {
       <div class="mb-3 row">
         <div class="col-6 mb-3">
           <gf-value
             i18n
             size="medium"
             [locale]="data.locale"
-            [value]="user.accountCount"
+            [precision]="0"
+            [value]="user?.engagement"
+            >Engagement per Day</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?.dailyApiRequests"
+            >API Requests Today</gf-value
           >
-            Activities
-          </gf-value>
         </div>
       </div>
-
-      @if (data.hasPermissionForSubscription) {
-        <div class="mb-3 row">
-          <div class="col-6 mb-3">
-            <gf-value
-              i18n
-              size="medium"
-              [locale]="data.locale"
-              [precision]="0"
-              [value]="user.engagement"
-            >
-              Engagement per Day
-            </gf-value>
-          </div>
-          <div class="col-6 mb-3">
-            <gf-value
-              i18n
-              size="medium"
-              [locale]="data.locale"
-              [value]="user.dailyApiRequests"
-            >
-              API Requests Today
-            </gf-value>
-          </div>
-        </div>
-      }
     }
   </div>
 </div>