Improve the user table (#16)

CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Changed the about page for the new license
 - Optimized the data management for historical data
 - Optimized the exchange rate service
+- Improved the user table in the admin control panel
 
 ### Fixed
 

apps/api/src/app/admin/admin.service.ts

@@ -14,7 +14,6 @@ export class AdminService {
 
   public async get(): Promise<AdminData> {
     return {
-      analytics: await this.getUserAnalytics(),
       exchangeRates: [
         {
           label1: Currency.EUR,
@@ -64,7 +63,8 @@ export class AdminService {
       ],
       lastDataGathering: await this.getLastDataGathering(),
       transactionCount: await this.prisma.order.count(),
-      userCount: await this.prisma.user.count()
+      userCount: await this.prisma.user.count(),
+      users: await this.getUsersWithAnalytics()
     };
   }
 
@@ -88,19 +88,26 @@ export class AdminService {
     return null;
   }
 
-  private async getUserAnalytics() {
-    return await this.prisma.analytics.findMany({
-      orderBy: { updatedAt: 'desc' },
+  private async getUsersWithAnalytics() {
+    return await this.prisma.user.findMany({
+      orderBy: {
+        Analytics: {
+          updatedAt: 'desc'
+        }
+      },
       select: {
-        activityCount: true,
-        updatedAt: true,
-        User: {
+        _count: {
+          select: { Order: true }
+        },
+        alias: true,
+        Analytics: {
           select: {
-            alias: true,
-            createdAt: true,
-            id: true
+            activityCount: true,
+            updatedAt: true
           }
-        }
+        },
+        createdAt: true,
+        id: true
       },
       take: 20
     });

apps/api/src/app/admin/interfaces/admin-data.interface.ts

@@ -1,5 +1,9 @@
 export interface AdminData {
-  analytics: {
+  exchangeRates: { label1: string; label2: string; value: number }[];
+  lastDataGathering: Date | 'IN_PROGRESS';
+  transactionCount: number;
+  userCount: number;
+  users: {
     activityCount: number;
     updatedAt: Date;
     User: {
@@ -7,8 +11,4 @@ export interface AdminData {
       id: string;
     };
   }[];
-  exchangeRates: { label1: string; label2: string; value: number }[];
-  lastDataGathering: Date | 'IN_PROGRESS';
-  transactionCount: number;
-  userCount: number;
 }

apps/client/src/app/pages/admin/admin-page.component.ts

@@ -15,13 +15,13 @@ import { DataService } from '../../services/data.service';
   styleUrls: ['./admin-page.scss']
 })
 export class AdminPageComponent implements OnInit {
-  public analytics: AdminData['analytics'];
   public dataGatheringInProgress: boolean;
   public defaultDateFormat = DEFAULT_DATE_FORMAT;
   public exchangeRates: { label1: string; label2: string; value: number }[];
   public lastDataGathering: string;
   public transactionCount: number;
   public userCount: number;
+  public users: AdminData['users'];
 
   private unsubscribeSubject = new Subject<void>();
 
@@ -44,14 +44,14 @@ export class AdminPageComponent implements OnInit {
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(
         ({
-          analytics,
           exchangeRates,
           lastDataGathering,
           transactionCount,
-          userCount
+          userCount,
+          users
         }) => {
-          this.analytics = analytics;
           this.exchangeRates = exchangeRates;
+          this.users = users;
 
           if (isValid(parseISO(lastDataGathering?.toString()))) {
             this.lastDataGathering = formatDistanceToNow(

apps/client/src/app/pages/admin/admin-page.html

@@ -67,33 +67,45 @@
   </div>
   <div class="row">
     <div class="col">
-      <h3 class="mb-3 text-center" i18n>Analytics</h3>
-      <mat-card>
+      <h3 class="mb-3 text-center" i18n>Users</h3>
+      <mat-card class="px-0">
         <mat-card-content>
-          <table class="analytics w-100">
+          <table class="users w-100">
             <thead>
               <tr class="mat-header-row">
-                <th class="mat-header-cell pl-2 py-2" i18n>User</th>
-                <th class="mat-header-cell pr-2 py-2" i18n>
+                <th class="mat-header-cell pl-2 py-2 text-truncate" i18n>
+                  User
+                </th>
+                <th class="mat-header-cell pr-2 py-2 text-truncate" i18n>
                   Registration Date
                 </th>
-                <th class="mat-header-cell pr-2 py-2" i18n>Engagement</th>
-                <th class="mat-header-cell pr-2 py-2" i18n>Last Activitiy</th>
+                <th class="mat-header-cell pr-2 py-2 text-truncate" i18n>
+                  Transactions
+                </th>
+                <th class="mat-header-cell pr-2 py-2 text-truncate" i18n>
+                  Engagement
+                </th>
+                <th class="mat-header-cell pr-2 py-2 text-truncate" i18n>
+                  Last Activitiy
+                </th>
               </tr>
             </thead>
             <tbody>
-              <tr *ngFor="let analyticsItem of analytics" class="mat-row">
-                <td class="mat-cell text-truncate pl-2 py-2">
-                  {{ analyticsItem.User.alias || analyticsItem.User.id }}
+              <tr *ngFor="let userItem of users" class="mat-row">
+                <td class="mat-cell pl-2 py-2 text-truncate">
+                  {{ userItem.alias || userItem.id }}
+                </td>
+                <td class="mat-cell pr-2 py-2 text-truncate">
+                  {{ userItem.createdAt | date: defaultDateFormat }}
                 </td>
-                <td class="mat-cell pr-2 py-2">
-                  {{ analyticsItem.User.createdAt | date: defaultDateFormat }}
+                <td class="mat-cell pr-2 py-2 text-truncate">
+                  {{ userItem._count.Order }}
                 </td>
-                <td class="mat-cell pr-2 py-2">
-                  {{ analyticsItem.activityCount }}
+                <td class="mat-cell pr-2 py-2 text-truncate">
+                  {{ userItem.Analytics.activityCount }}
                 </td>
-                <td class="mat-cell pr-2 py-2">
-                  {{ formatDistanceToNow(analyticsItem.updatedAt) }}
+                <td class="mat-cell pr-2 py-2 text-truncate">
+                  {{ formatDistanceToNow(userItem.Analytics.updatedAt) }}
                 </td>
               </tr>
             </tbody>

apps/client/src/app/pages/admin/admin-page.scss

@@ -3,7 +3,7 @@
   display: block;
 
   table {
-    &.analytics {
+    &.users {
       table-layout: fixed;
 
       tr {