From 52929782c0ee7fcea835e55439311aed73048f36 Mon Sep 17 00:00:00 2001
From: MoritzWeber <kontakt@moritz-weber.net>
Date: Wed, 2 Oct 2024 15:53:48 +0200
Subject: [PATCH] feat: Display total number of users and project users

---
 .../project-user-settings.component.html          | 15 ++++++++-------
 .../user-settings/user-settings.component.html    | 14 ++++++++++----
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.html b/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.html
index 4e654ecd4..3bba0d045 100644
--- a/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.html
+++ b/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.html
@@ -30,10 +30,7 @@ <h2 class="mb-2 mr-2.5 text-xl font-medium">Project Members</h2>
   </div>
 
   <mat-divider></mat-divider>
-  <mat-form-field
-    class="mb-[-20px] mt-[10px] w-full pl-1 pr-4"
-    appearance="outline"
-  >
+  <mat-form-field class="mb-[-20px] mt-[10px] w-full" appearance="outline">
     <mat-label>Search</mat-label>
     <input [(ngModel)]="search" matInput placeholder="Username" class="mr-2" />
     <mat-icon matSuffix>search</mat-icon>
@@ -41,15 +38,19 @@ <h2 class="mb-2 mr-2.5 text-xl font-medium">Project Members</h2>
   <div class="max-h-[50vh] overflow-y-scroll">
     @for (role of projectUserRoles; track role) {
       <div class="mt-2.5 pl-1 text-lg font-bold text-gray-400">
+        {{
+          getProjectUsersByRole(projectUserService.projectUsers$ | async, role)
+            ?.length
+        }}
         @switch (role) {
           @case ("manager") {
-            Project Administrator
+            Project Administrator(s)
           }
           @case ("administrator") {
-            Global Administrator
+            Global Administrator(s)
           }
           @case ("user") {
-            Project User
+            Project User(s)
           }
         }
       </div>
diff --git a/frontend/src/app/users/user-settings/user-settings.component.html b/frontend/src/app/users/user-settings/user-settings.component.html
index db6776ec4..b83fbdd71 100644
--- a/frontend/src/app/users/user-settings/user-settings.component.html
+++ b/frontend/src/app/users/user-settings/user-settings.component.html
@@ -5,15 +5,20 @@
 
 <div class="flex flex-wrap gap-5">
   <div class="collab-card mb-[10px] w-full !pb-0 sm:w-card sm:max-w-[85vw]">
-    <h2 class="text-xl font-medium">Manage Users</h2>
+    <div class="flex items-center justify-between">
+      <h2 class="text-xl font-medium">Manage Users</h2>
+      @if (userWrapperService.users$ | async; as users) {
+        <span class="text-sm">{{ users.length }} registered users</span>
+      }
+    </div>
 
-    <mat-form-field class="mt-[5px] w-full pb-0" appearance="outline">
+    <mat-form-field class="mb-[-20px] mt-[10px] w-full" appearance="outline">
       <mat-label>Search</mat-label>
       <input
         [(ngModel)]="search"
-        autocomplete="off"
         matInput
         placeholder="Username"
+        class="mr-2"
       />
       <mat-icon matSuffix>search</mat-icon>
     </mat-form-field>
@@ -21,7 +26,8 @@ <h2 class="text-xl font-medium">Manage Users</h2>
     <div [class]="'max-h-[50vh] overflow-y-scroll'">
       @for (role of userRoles; track role) {
         <div class="mt-2.5 pl-1 text-lg font-bold text-gray-400">
-          {{ roleMapping[role] }}
+          {{ getUsersByRole(userWrapperService.users$ | async, role)?.length }}
+          {{ roleMapping[role] + "(s)" }}
         </div>
         @for (
           user of getUsersByRole(userWrapperService.users$ | async, role);