Migrated users table in Admin Control to mat-table (#2469)

* Migrated users table in Admin Control to mat-table

* Update changelog

CHANGELOG.md

@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Added a chart to the account detail dialog
 
+### Changed
+
+- Changed the users table in the admin control panel to an `@angular/material` data table
+
 ## 2.12.0 - 2023-10-17
 
 ### Added

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

@@ -1,4 +1,5 @@
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
 import { AdminService } from '@ghostfolio/client/services/admin.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
@@ -20,13 +21,15 @@ import { takeUntil } from 'rxjs/operators';
   templateUrl: './admin-users.html'
 })
 export class AdminUsersComponent implements OnDestroy, OnInit {
+  public dataSource: MatTableDataSource<AdminData['users'][0]> =
+    new MatTableDataSource();
   public defaultDateFormat: string;
+  public displayedColumns: string[] = [];
   public getEmojiFlag = getEmojiFlag;
   public hasPermissionForSubscription: boolean;
   public hasPermissionToImpersonateAllUsers: boolean;
   public info: InfoItem;
   public user: User;
-  public users: AdminData['users'];
 
   private unsubscribeSubject = new Subject<void>();
 
@@ -44,6 +47,29 @@ export class AdminUsersComponent implements OnDestroy, OnInit {
       permissions.enableSubscription
     );
 
+    if (this.hasPermissionForSubscription) {
+      this.displayedColumns = [
+        'index',
+        'user',
+        'country',
+        'registration',
+        'accounts',
+        'activities',
+        'engagementPerDay',
+        'lastRequest',
+        'actions'
+      ];
+    } else {
+      this.displayedColumns = [
+        'index',
+        'user',
+        'registration',
+        'accounts',
+        'activities',
+        'actions'
+      ];
+    }
+
     this.userService.stateChanged
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((state) => {
@@ -118,7 +144,7 @@ export class AdminUsersComponent implements OnDestroy, OnInit {
       .fetchAdminData()
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(({ users }) => {
-        this.users = users;
+        this.dataSource = new MatTableDataSource(users);
 
         this.changeDetectorRef.markForCheck();
       });

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

@@ -2,136 +2,232 @@
   <div class="row">
     <div class="col">
       <div class="users">
-        <table class="gf-table">
-          <thead>
-            <tr class="mat-mdc-header-row">
-              <th class="mat-mdc-header-cell px-1 py-2 text-right">#</th>
-              <th class="mat-mdc-header-cell px-1 py-2" i18n>User</th>
-              <th
-                *ngIf="hasPermissionForSubscription"
-                class="mat-mdc-header-cell px-1 py-2"
-              >
-                <ng-container i18n>Country</ng-container>
-              </th>
-              <th class="mat-mdc-header-cell px-1 py-2">
-                <ng-container i18n>Registration</ng-container>
-              </th>
-              <th class="mat-mdc-header-cell px-1 py-2 text-right">
-                <ng-container i18n>Accounts</ng-container>
-              </th>
-              <th class="mat-mdc-header-cell px-1 py-2 text-right">
-                <ng-container i18n>Activities</ng-container>
-              </th>
-              <th
-                *ngIf="hasPermissionForSubscription"
-                class="mat-mdc-header-cell px-1 py-2 text-right"
-              >
-                <ng-container i18n>Engagement per Day</ng-container>
-              </th>
-              <th
-                *ngIf="hasPermissionForSubscription"
-                class="mat-mdc-header-cell px-1 py-2"
-                i18n
-              >
-                Last Request
-              </th>
-              <th class="mat-mdc-header-cell px-1 py-2"></th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              *ngFor="let userItem of users; let i = index"
-              class="mat-mdc-row"
-            >
-              <td class="mat-mdc-cell px-1 py-2 text-right">{{ i + 1 }}</td>
-              <td class="mat-mdc-cell px-1 py-2">
-                <div class="d-flex align-items-center">
-                  <span class="d-none d-sm-inline-block text-monospace"
-                    >{{ userItem.id }}</span
-                  >
-                  <span class="d-inline-block d-sm-none text-monospace"
-                    >{{ (userItem.id | slice:0:5) + '...' }}</span
-                  >
-                  <gf-premium-indicator
-                    *ngIf="userItem?.subscription?.type === 'Premium'"
-                    class="ml-1"
-                    [enableLink]="false"
-                    [title]="'Expires ' + formatDistanceToNow(userItem.subscription.expiresAt) + ' (' + (userItem.subscription.expiresAt | date: defaultDateFormat) + ')'"
-                  ></gf-premium-indicator>
-                </div>
-              </td>
-              <td
-                *ngIf="hasPermissionForSubscription"
-                class="mat-mdc-cell px-1 py-2"
-              >
-                <span class="h5" [title]="userItem.country"
-                  >{{ getEmojiFlag(userItem.country) }}</span
+        <table class="gf-table" mat-table [dataSource]="dataSource">
+          <ng-container matColumnDef="index">
+            <th
+              *matHeaderCellDef
+              class="mat-mdc-header-cell px-1 py-2 text-right"
+              mat-header-cell
+            >
+              #
+            </th>
+            <td
+              *matCellDef="let element; let i=index"
+              class="mat-mdc-cell px-1 py-2 text-right"
+              mat-cell
+            >
+              {{ i + 1 }}
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="user">
+            <th
+              *matHeaderCellDef
+              class="mat-mdc-header-cell px-1 py-2"
+              i18n
+              mat-header-cell
+            >
+              User
+            </th>
+            <td
+              *matCellDef="let element"
+              class="mat-mdc-cell px-1 py-2"
+              mat-cell
+            >
+              <div class="d-flex align-items-center">
+                <span class="d-none d-sm-inline-block text-monospace"
+                  >{{ element.id }}</span
+                >
+                <span class="d-inline-block d-sm-none text-monospace"
+                  >{{ (element.id | slice:0:5) + '...' }}</span
                 >
-              </td>
-              <td class="mat-mdc-cell px-1 py-2">
-                {{ formatDistanceToNow(userItem.createdAt) }}
-              </td>
-              <td class="mat-mdc-cell px-1 py-2 text-right">
-                <gf-value
-                  class="d-inline-block justify-content-end"
-                  [locale]="user?.settings?.locale"
-                  [value]="userItem.accountCount"
-                ></gf-value>
-              </td>
-              <td class="mat-mdc-cell px-1 py-2 text-right">
-                <gf-value
-                  class="d-inline-block justify-content-end"
-                  [locale]="user?.settings?.locale"
-                  [value]="userItem.transactionCount"
-                ></gf-value>
-              </td>
-              <td
-                *ngIf="hasPermissionForSubscription"
-                class="mat-mdc-cell px-1 py-2 text-right"
+                <gf-premium-indicator
+                  *ngIf="element?.subscription?.type === 'Premium'"
+                  class="ml-1"
+                  [enableLink]="false"
+                  [title]="'Expires ' + formatDistanceToNow(element.subscription.expiresAt) + ' (' + (element.subscription.expiresAt | date: defaultDateFormat) + ')'"
+                ></gf-premium-indicator>
+              </div>
+            </td>
+          </ng-container>
+
+          <ng-container
+            *ngIf="hasPermissionForSubscription"
+            matColumnDef="country"
+          >
+            <th
+              *matHeaderCellDef
+              class="mat-mdc-header-cell px-1 py-2"
+              mat-header-cell
+            >
+              <ng-container i18n>Country</ng-container>
+            </th>
+            <td
+              *matCellDef="let element"
+              class="mat-mdc-cell px-1 py-2"
+              mat-cell
+            >
+              <span class="h5" [title]="element.country"
+                >{{ getEmojiFlag(element.country) }}</span
               >
-                <gf-value
-                  class="d-inline-block justify-content-end"
-                  [locale]="user?.settings?.locale"
-                  [precision]="0"
-                  [value]="userItem.engagement"
-                ></gf-value>
-              </td>
-              <td
-                *ngIf="hasPermissionForSubscription"
-                class="mat-mdc-cell px-1 py-2"
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="registration">
+            <th
+              *matHeaderCellDef
+              class="mat-mdc-header-cell px-1 py-2"
+              mat-header-cell
+            >
+              <ng-container i18n>Registration</ng-container>
+            </th>
+            <td
+              *matCellDef="let element"
+              class="mat-mdc-cell px-1 py-2"
+              mat-cell
+            >
+              {{ formatDistanceToNow(element.createdAt) }}
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="accounts">
+            <th
+              *matHeaderCellDef
+              class="mat-mdc-header-cell px-1 py-2 text-right"
+              mat-header-cell
+            >
+              <ng-container i18n>Accounts</ng-container>
+            </th>
+            <td
+              *matCellDef="let element"
+              class="mat-mdc-cell px-1 py-2 text-right"
+              mat-cell
+            >
+              <gf-value
+                class="d-inline-block justify-content-end"
+                [locale]="user?.settings?.locale"
+                [value]="element.accountCount"
+              ></gf-value>
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="activities">
+            <th
+              *matHeaderCellDef
+              class="mat-mdc-header-cell px-1 py-2 text-right"
+              mat-header-cell
+            >
+              <ng-container i18n>Activities</ng-container>
+            </th>
+            <td
+              *matCellDef="let element"
+              class="mat-mdc-cell px-1 py-2 text-right"
+              mat-cell
+            >
+              <gf-value
+                class="d-inline-block justify-content-end"
+                [locale]="user?.settings?.locale"
+                [value]="element.transactionCount"
+              ></gf-value>
+            </td>
+          </ng-container>
+
+          <ng-container
+            *ngIf="hasPermissionForSubscription"
+            matColumnDef="engagementPerDay"
+          >
+            <th
+              *matHeaderCellDef
+              class="mat-mdc-header-cell px-1 py-2 text-right"
+              mat-header-cell
+            >
+              <ng-container i18n>Engagement per Day</ng-container>
+            </th>
+            <td
+              *matCellDef="let element"
+              class="mat-mdc-cell px-1 py-2 text-right"
+              mat-cell
+            >
+              <gf-value
+                class="d-inline-block justify-content-end"
+                [locale]="user?.settings?.locale"
+                [precision]="0"
+                [value]="element.engagement"
+              ></gf-value>
+            </td>
+          </ng-container>
+
+          <ng-container
+            *ngIf="hasPermissionForSubscription"
+            matColumnDef="lastRequest"
+          >
+            <th
+              *matHeaderCellDef
+              class="mat-mdc-header-cell px-1 py-2"
+              i18n
+              mat-header-cell
+            >
+              Last Request
+            </th>
+            <td
+              *matCellDef="let element"
+              class="mat-mdc-cell px-1 py-2"
+              mat-cell
+            >
+              {{ formatDistanceToNow(element.lastActivity) }}
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="actions">
+            <th
+              *matHeaderCellDef
+              class="mat-mdc-header-cell px-1 py-2"
+              mat-header-cell
+            ></th>
+            <td
+              *matCellDef="let element"
+              class="mat-mdc-cell px-1 py-2"
+              mat-cell
+            >
+              <button
+                class="mx-1 no-min-width px-2"
+                mat-button
+                [matMenuTriggerFor]="userMenu"
+                (click)="$event.stopPropagation()"
               >
-                {{ formatDistanceToNow(userItem.lastActivity) }}
-              </td>
-              <td class="mat-mdc-cell px-1 py-2">
+                <ion-icon name="ellipsis-horizontal"></ion-icon>
+              </button>
+              <mat-menu #userMenu="matMenu" xPosition="before">
+                <button
+                  *ngIf="hasPermissionToImpersonateAllUsers"
+                  mat-menu-item
+                  (click)="onImpersonateUser(element.id)"
+                >
+                  <ion-icon class="mr-2" name="contract-outline"></ion-icon>
+                  <span i18n>Impersonate User</span>
+                </button>
                 <button
-                  class="mx-1 no-min-width px-2"
-                  mat-button
-                  [matMenuTriggerFor]="userMenu"
-                  (click)="$event.stopPropagation()"
+                  mat-menu-item
+                  [disabled]="element.id === user?.id"
+                  (click)="onDeleteUser(element.id)"
                 >
-                  <ion-icon name="ellipsis-horizontal"></ion-icon>
+                  <ion-icon class="mr-2" name="trash-outline"></ion-icon>
+                  <span i18n>Delete User</span>
                 </button>
-                <mat-menu #userMenu="matMenu" xPosition="before">
-                  <button
-                    *ngIf="hasPermissionToImpersonateAllUsers"
-                    mat-menu-item
-                    (click)="onImpersonateUser(userItem.id)"
-                  >
-                    <ion-icon class="mr-2" name="contract-outline"></ion-icon>
-                    <span i18n>Impersonate User</span>
-                  </button>
-                  <button
-                    mat-menu-item
-                    [disabled]="userItem.id === user?.id"
-                    (click)="onDeleteUser(userItem.id)"
-                  >
-                    <ion-icon class="mr-2" name="trash-outline"></ion-icon>
-                    <span i18n>Delete User</span>
-                  </button>
-                </mat-menu>
-              </td>
-            </tr>
-          </tbody>
+              </mat-menu>
+            </td>
+          </ng-container>
+
+          <tr
+            *matHeaderRowDef="displayedColumns"
+            class="mat-mdc-header-row"
+            mat-header-row
+          ></tr>
+          <tr
+            *matRowDef="let row; columns: displayedColumns"
+            class="mat-mdc-row"
+            mat-row
+          ></tr>
         </table>
       </div>
     </div>

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

@@ -2,6 +2,7 @@ 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 { MatTableModule } from '@angular/material/table';
 import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
 import { GfValueModule } from '@ghostfolio/ui/value';
 
@@ -15,7 +16,8 @@ import { AdminUsersComponent } from './admin-users.component';
     GfPremiumIndicatorModule,
     GfValueModule,
     MatButtonModule,
-    MatMenuModule
+    MatMenuModule,
+    MatTableModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })