migrated admin-users table to mat-table

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';
@@ -26,8 +27,19 @@ export class AdminUsersComponent implements OnDestroy, OnInit {
   public hasPermissionToImpersonateAllUsers: boolean;
   public info: InfoItem;
   public user: User;
-  public users: AdminData['users'];
-
+  public dataSource: MatTableDataSource<AdminData['users'][0]> =
+    new MatTableDataSource();
+  public displayedColumns = [
+    'index',
+    'user',
+    'country',
+    'registration',
+    'accounts',
+    'activities',
+    'engagementPerDay',
+    'lastRequest',
+    'actions'
+  ];
   private unsubscribeSubject = new Subject<void>();
 
   public constructor(
@@ -118,8 +130,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,107 +2,193 @@
   <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>
+        <table class="gf-table" mat-table [dataSource]="dataSource">
+          <ng-container matColumnDef="index">
             <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"
+              *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; 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
-                *ngIf="hasPermissionForSubscription"
+              *matHeaderCellDef
               class="mat-mdc-header-cell px-1 py-2"
               i18n
+              mat-header-cell
             >
-                Last Request
+              User
             </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
+              *matCellDef="let element"
+              class="mat-mdc-cell px-1 py-2"
+              mat-cell
             >
-              <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
+                  >{{ element.id }}</span
                 >
                 <span class="d-inline-block d-sm-none text-monospace"
-                    >{{ (userItem.id | slice:0:5) + '...' }}</span
+                  >{{ (element.id | slice:0:5) + '...' }}</span
                 >
                 <gf-premium-indicator
-                    *ngIf="userItem?.subscription?.type === 'Premium'"
+                  *ngIf="element?.subscription?.type === 'Premium'"
                   class="ml-1"
                   [enableLink]="false"
-                    [title]="'Expires ' + formatDistanceToNow(userItem.subscription.expiresAt) + ' (' + (userItem.subscription.expiresAt | date: defaultDateFormat) + ')'"
+                  [title]="'Expires ' + formatDistanceToNow(element.subscription.expiresAt) + ' (' + (element.subscription.expiresAt | date: defaultDateFormat) + ')'"
                 ></gf-premium-indicator>
               </div>
             </td>
-              <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]="userItem.country"
-                  >{{ getEmojiFlag(userItem.country) }}</span
+              <span class="h5" [title]="element.country"
+                >{{ getEmojiFlag(element.country) }}</span
               >
             </td>
-              <td class="mat-mdc-cell px-1 py-2">
-                {{ formatDistanceToNow(userItem.createdAt) }}
+          </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>
-              <td class="mat-mdc-cell px-1 py-2 text-right">
+          </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]="userItem.accountCount"
+                [value]="element.accountCount"
               ></gf-value>
             </td>
-              <td class="mat-mdc-cell px-1 py-2 text-right">
+          </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]="userItem.transactionCount"
+                [value]="element.transactionCount"
               ></gf-value>
             </td>
-              <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]="userItem.engagement"
+                [value]="element.engagement"
               ></gf-value>
             </td>
-              <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(userItem.lastActivity) }}
+              {{ formatDistanceToNow(element.lastActivity) }}
             </td>
-              <td class="mat-mdc-cell px-1 py-2">
+          </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
@@ -115,23 +201,33 @@
                 <button
                   *ngIf="hasPermissionToImpersonateAllUsers"
                   mat-menu-item
-                    (click)="onImpersonateUser(userItem.id)"
+                  (click)="onImpersonateUser(element.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)"
+                  [disabled]="element.id === user?.id"
+                  (click)="onDeleteUser(element.id)"
                 >
                   <ion-icon class="mr-2" name="trash-outline"></ion-icon>
                   <span i18n>Delete User</span>
                 </button>
               </mat-menu>
             </td>
-            </tr>
-          </tbody>
+          </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

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