fix: add user by project admin (DEV-3414) (#1519)

apps/dsp-app/src/app/project/collaboration/add-user/add-user.component.html

@@ -34,7 +34,7 @@ <h2 class="mat-headline-6">{{ 'appLabels.form.user.title.add2project' | translat
             </button>
 
             <mat-autocomplete #user="matAutocomplete" (optionSelected)="addUser($event.option.value)">
-              <mat-option *ngFor="let user of filteredUsers | async" [value]="user?.name">
+              <mat-option *ngFor="let user of filteredUsers$ | async; trackBy: trackByFn" [value]="user?.name">
                 {{ user?.label }}
               </mat-option>
             </mat-autocomplete>

apps/dsp-app/src/app/project/collaboration/add-user/add-user.component.ts

@@ -80,7 +80,7 @@ export class AddUserComponent implements OnInit {
   /**
    * filter users while typing (autocomplete)
    */
-  filteredUsers: Observable<AutocompleteItem[]>;
+  filteredUsers$: Observable<AutocompleteItem[]>;
 
   /**
    * list of usernames to prevent duplicate entries
@@ -156,7 +156,7 @@ export class AddUserComponent implements OnInit {
       }
 
       let i = 0;
-      for (const u of response.body.users) {
+      for (const u of response.body.users.filter(user => user.username.length > 0)) {
         // if the user is already member of the project
         // add the email to the list of existing
         this.existingEmails.push(new RegExp(`(?:^|W)${u.email.toLowerCase()}(?:$|W)`));
@@ -169,10 +169,20 @@ export class AddUserComponent implements OnInit {
           existsInProject = '* ';
         }
 
+        let usernameLabel = existsInProject + u.username;
+        if (usernameLabel.length > 0) {
+          usernameLabel += ' | ';
+        }
+
+        let emailLabel = u.email;
+        if (emailLabel.length > 0) {
+          emailLabel += ' | ';
+        }
+
         this.users[i] = {
           iri: u.id,
           name: u.username,
-          label: `${existsInProject + u.username} | ${u.email} | ${u.givenName} ${u.familyName}`,
+          label: `${usernameLabel} ${emailLabel} ${u.givenName} ${u.familyName}`,
         };
         i++;
       }
@@ -206,7 +216,7 @@ export class AddUserComponent implements OnInit {
       ),
     });
 
-    this.filteredUsers = this.selectUserForm.controls['username'].valueChanges.pipe(
+    this.filteredUsers$ = this.selectUserForm.controls['username'].valueChanges.pipe(
       startWith(''),
       map(user => (user.length >= 2 ? this.filter(this.users, user) : []))
     );
@@ -321,4 +331,6 @@ export class AddUserComponent implements OnInit {
     ev.preventDefault();
     this.selectUserForm.controls['username'].reset('');
   }
+
+  trackByFn = (index: number, item: AutocompleteItem) => `${index}-${item.label}`;
 }

apps/dsp-app/src/app/project/collaboration/collaboration.component.html

@@ -4,7 +4,7 @@
   <div *ngIf="isCurrentProjectAdminOrSysAdmin$ | async" class="content large middle">
     <!-- add user to the project -->
     <app-add-user
-      *ngIf="(project$ | async)?.status && ((isSysAdmin$ | async) === true)"
+      *ngIf="(project$ | async)?.status && ((isCurrentProjectAdminOrSysAdmin$ | async) === true)"
       [projectUuid]="projectUuid"
       (refreshParent)="refresh()"
       #addUserComponent></app-add-user>

apps/dsp-app/src/app/user/user-form/user-form.component.ts

@@ -9,7 +9,7 @@ import {
   Output,
 } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
-import { ApiResponseError, Constants, ReadUser, StringLiteral, UpdateUserRequest, User } from '@dasch-swiss/dsp-js';
+import { Constants, ReadUser, StringLiteral, UpdateUserRequest, User } from '@dasch-swiss/dsp-js';
 import { UserApiService } from '@dasch-swiss/vre/shared/app-api';
 import { ProjectService } from '@dasch-swiss/vre/shared/app-helper-services';
 import { NotificationService } from '@dasch-swiss/vre/shared/app-notification';
@@ -20,8 +20,8 @@ import {
   SetUserAction,
   UserSelectors,
 } from '@dasch-swiss/vre/shared/app-state';
-import { Actions, ofActionSuccessful, Select, Store } from '@ngxs/store';
-import { combineLatest, Observable } from 'rxjs';
+import { Actions, Select, Store, ofActionSuccessful } from '@ngxs/store';
+import { Observable, combineLatest } from 'rxjs';
 import { take, tap } from 'rxjs/operators';
 import { AppGlobal } from '../../app-global';
 import { existingNamesValidator } from '../../main/directive/existing-name/existing-names.validator';
@@ -354,7 +354,11 @@ export class UserFormComponent implements OnInit, OnChanges {
     combineLatest([this._actions$.pipe(ofActionSuccessful(CreateUserAction)), this.allUsers$])
       .pipe(take(1))
       .subscribe(([loadUsersAction, allUsers]) => {
-        this.user = allUsers.find(user => user.username === loadUsersAction.userData.username);
+        this.user = allUsers.find(
+          user =>
+            user.familyName === loadUsersAction.userData.familyName &&
+            user.givenName === loadUsersAction.userData.givenName
+        );
         this.buildForm(this.user);
         if (this.projectUuid) {
           // if a projectUuid exists, add the user to the project