Feature/improve users table of admin control panel (#866)

* Improve users table

* Update changelog

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Changed the date to UTC in the data gathering service
+- Reused the value component in the users table of the admin control panel
 
 ## 1.141.1 - 24.04.2022
 

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

@@ -1,6 +1,7 @@
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { DataService } from '@ghostfolio/client/services/data.service';
-import { AdminData } from '@ghostfolio/common/interfaces';
+import { UserService } from '@ghostfolio/client/services/user/user.service';
+import { AdminData, User } from '@ghostfolio/common/interfaces';
 import {
   differenceInSeconds,
   formatDistanceToNowStrict,
@@ -15,6 +16,7 @@ import { takeUntil } from 'rxjs/operators';
   templateUrl: './admin-users.html'
 })
 export class AdminUsersComponent implements OnDestroy, OnInit {
+  public user: User;
   public users: AdminData['users'];
 
   private unsubscribeSubject = new Subject<void>();
@@ -24,8 +26,17 @@ export class AdminUsersComponent implements OnDestroy, OnInit {
    */
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
-    private dataService: DataService
-  ) {}
+    private dataService: DataService,
+    private userService: UserService
+  ) {
+    this.userService.stateChanged
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((state) => {
+        if (state?.user) {
+          this.user = state.user;
+        }
+      });
+  }
 
   /**
    * Initializes the controller

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

@@ -45,14 +45,27 @@
               <td class="mat-cell px-1 py-2 text-right">
                 {{ formatDistanceToNow(userItem.createdAt) }}
               </td>
-              <td class="mat-cell px-1 py-2 text-right">
-                {{ userItem.accountCount }}
+              <td class="mat-cell px-1 py-2">
+                <gf-value
+                  class="align-items-end"
+                  [locale]="user?.settings?.locale"
+                  [value]="userItem.accountCount"
+                ></gf-value>
               </td>
-              <td class="mat-cell px-1 py-2 text-right">
-                {{ userItem.transactionCount }}
+              <td class="mat-cell px-1 py-2">
+                <gf-value
+                  class="align-items-end"
+                  [locale]="user?.settings?.locale"
+                  [value]="userItem.transactionCount"
+                ></gf-value>
               </td>
-              <td class="mat-cell px-1 py-2 text-right">
-                {{ userItem.engagement | number: '1.0-0' }}
+              <td class="mat-cell px-1 py-2">
+                <gf-value
+                  class="align-items-end"
+                  [locale]="user?.settings?.locale"
+                  [precision]="0"
+                  [value]="userItem.engagement"
+                ></gf-value>
               </td>
               <td class="mat-cell px-1 py-2">
                 {{ formatDistanceToNow(userItem.lastActivity) }}

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

@@ -2,13 +2,14 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
+import { GfValueModule } from '@ghostfolio/ui/value';
 
 import { AdminUsersComponent } from './admin-users.component';
 
 @NgModule({
   declarations: [AdminUsersComponent],
   exports: [],
-  imports: [CommonModule, MatButtonModule, MatMenuModule],
+  imports: [CommonModule, GfValueModule, MatButtonModule, MatMenuModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfAdminUsersModule {}