From 1a553a296fe67219238f76c09b8be877559428ef Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 22 May 2021 10:17:12 +0200
Subject: [PATCH] Feature/improve user table of admin control panel (#109)

* Improve user table

* Add index
* Increase limit
* Improve alignment of cell content

* Update changelog
---
 CHANGELOG.md                                  | 10 ++++++
 apps/api/src/app/admin/admin.service.ts       |  2 +-
 .../src/app/pages/admin/admin-page.html       | 32 +++++++++++++------
 3 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ec9abaff7..57bc34b79 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 1.6.0 - 22.05.2021
+
+### Added
+
+- Added an index in the user table of the admin control panel
+
+### Changed
+
+- Improved the alignment in the user table of the admin control panel
+
 ## 1.5.0 - 22.05.2021
 
 ### Added
diff --git a/apps/api/src/app/admin/admin.service.ts b/apps/api/src/app/admin/admin.service.ts
index 1437a0244..89af3efbc 100644
--- a/apps/api/src/app/admin/admin.service.ts
+++ b/apps/api/src/app/admin/admin.service.ts
@@ -108,7 +108,7 @@ export class AdminService {
         createdAt: true,
         id: true
       },
-      take: 20,
+      take: 30,
       where: {
         NOT: {
           Analytics: null
diff --git a/apps/client/src/app/pages/admin/admin-page.html b/apps/client/src/app/pages/admin/admin-page.html
index ac0806faf..5fdc96666 100644
--- a/apps/client/src/app/pages/admin/admin-page.html
+++ b/apps/client/src/app/pages/admin/admin-page.html
@@ -73,26 +73,40 @@
         <table class="gf-table">
           <thead>
             <tr class="mat-header-row">
+              <th class="mat-header-cell px-1 py-2 text-center" i18n>#</th>
               <th class="mat-header-cell px-1 py-2" i18n>User</th>
-              <th class="mat-header-cell px-1 py-2" i18n>Registration Date</th>
-              <th class="mat-header-cell px-1 py-2" i18n>Accounts</th>
-              <th class="mat-header-cell px-1 py-2" i18n>Transactions</th>
-              <th class="mat-header-cell px-1 py-2" i18n>Engagement</th>
+              <th class="mat-header-cell px-1 py-2 text-center" i18n>
+                Registration Date
+              </th>
+              <th class="mat-header-cell px-1 py-2 text-center" i18n>
+                Accounts
+              </th>
+              <th class="mat-header-cell px-1 py-2 text-center" i18n>
+                Transactions
+              </th>
+              <th class="mat-header-cell px-1 py-2 text-center" i18n>
+                Engagement
+              </th>
               <th class="mat-header-cell px-1 py-2" i18n>Last Activitiy</th>
               <th class="mat-header-cell px-1 py-2"></th>
             </tr>
           </thead>
           <tbody>
-            <tr *ngFor="let userItem of users" class="mat-row">
+            <tr *ngFor="let userItem of users; let i = index" class="mat-row">
+              <td class="mat-cell px-1 py-2 text-right">{{ i + 1 }}</td>
               <td class="mat-cell px-1 py-2">
                 {{ userItem.alias || userItem.id }}
               </td>
-              <td class="mat-cell px-1 py-2">
+              <td class="mat-cell px-1 py-2 text-right">
                 {{ userItem.createdAt | date: defaultDateFormat }}
               </td>
-              <td class="mat-cell px-1 py-2">{{ userItem._count?.Account }}</td>
-              <td class="mat-cell px-1 py-2">{{ userItem._count?.Order }}</td>
-              <td class="mat-cell px-1 py-2">
+              <td class="mat-cell px-1 py-2 text-right">
+                {{ userItem._count?.Account }}
+              </td>
+              <td class="mat-cell px-1 py-2 text-right">
+                {{ userItem._count?.Order }}
+              </td>
+              <td class="mat-cell px-1 py-2 text-right">
                 {{ userItem.Analytics?.activityCount }}
               </td>
               <td class="mat-cell px-1 py-2">