Extend user table (#47)

* Column: accounts
* Horizontal scrollbar

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Prepared further for multi accounts support: store account for new transactions
+- Added a horizontal scrollbar to the user table of the admin control panel
 
 ### Fixed
 

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

@@ -97,7 +97,7 @@ export class AdminService {
       },
       select: {
         _count: {
-          select: { Order: true }
+          select: { Account: true, Order: true }
         },
         alias: true,
         Analytics: {

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

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

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

@@ -2,16 +2,23 @@
   color: rgb(var(--dark-primary-text));
   display: block;
 
-  table {
+  .mat-card-content {
     &.users {
-      table-layout: fixed;
+      overflow-x: auto;
 
-      tr {
+      table {
-        &:nth-child(even) {
+        tr {
-          background-color: rgba(
+          &:nth-child(even) {
-            var(--dark-primary-text),
+            background-color: rgba(
-            var(--palette-background-hover-alpha)
+              var(--dark-primary-text),
-          );
+              var(--palette-background-hover-alpha)
+            );
+          }
+        }
+
+        .mat-row,
+        .mat-header-row {
+          width: 100%;
         }
       }
     }