Merge pull request #1871 from DSD-DBS/display-number-of-users

feat: Display total number of users and project users
DSD-DBS · Oct 2, 2024 · 8601089 · 8601089
2 parents cc5e336 + 5292978
commit 8601089
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 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
@@ -30,26 +30,27 @@ <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>
   </mat-form-field>
   <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
@@ -5,23 +5,29 @@
 
 <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>
 
     <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);