Allow adding existing users to registrar (#2616)

console-webapp/src/app/users/users.component.ts

@@ -14,29 +14,18 @@
 
 import { CommonModule } from '@angular/common';
 import { HttpErrorResponse } from '@angular/common/http';
-import { Component, effect, ViewChild } from '@angular/core';
+import { Component, effect } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { MatSort } from '@angular/material/sort';
-import { MatTableDataSource } from '@angular/material/table';
 import { SelectedRegistrarModule } from '../app.module';
 import { MaterialModule } from '../material.module';
 import { RegistrarService } from '../registrar/registrar.service';
 import { SnackBarModule } from '../snackbar.module';
 import { UserEditComponent } from './userEdit.component';
-import { roleToDescription, User, UsersService } from './users.service';
-
-export const columns = [
-  {
-    columnDef: 'emailAddress',
-    header: 'User email',
-    cell: (record: User) => `${record.emailAddress || ''}`,
-  },
-  {
-    columnDef: 'role',
-    header: 'User role',
-    cell: (record: User) => `${roleToDescription(record.role)}`,
-  },
-];
+import { User, UsersService } from './users.service';
+import { UserDataService } from '../shared/services/userData.service';
+import { FormsModule } from '@angular/forms';
+import { UsersListComponent } from './usersList.component';
+import { MatSelectChange } from '@angular/material/select';
 
 @Component({
   selector: 'app-users',
@@ -44,41 +33,45 @@ export const columns = [
   styleUrls: ['./users.component.scss'],
   standalone: true,
   imports: [
+    FormsModule,
     MaterialModule,
     SnackBarModule,
     CommonModule,
     SelectedRegistrarModule,
+    UsersListComponent,
     UserEditComponent,
   ],
   providers: [UsersService],
 })
 export class UsersComponent {
-  dataSource: MatTableDataSource<User>;
-  columns = columns;
-  displayedColumns = this.columns.map((c) => c.columnDef);
   isLoading = false;
-
-  @ViewChild(MatSort) sort!: MatSort;
+  selectingExistingUser = false;
+  selectedRegistrarId = '';
+  usersSelection: User[] = [];
+  selectedExistingUser: User | undefined;
 
   constructor(
     protected registrarService: RegistrarService,
     protected usersService: UsersService,
+    private userDataService: UserDataService,
     private _snackBar: MatSnackBar
   ) {
-    this.dataSource = new MatTableDataSource<User>(usersService.users());
-
     effect(() => {
       if (registrarService.registrarId()) {
         this.loadUsers();
       }
     });
-    effect(() => {
-      this.dataSource.data = usersService.users();
-    });
   }
 
-  ngAfterViewInit() {
-    this.dataSource.sort = this.sort;
+  addExistingUser() {
+    this.selectingExistingUser = true;
+    this.selectedRegistrarId = '';
+    this.usersSelection = [];
+    this.selectedExistingUser = undefined;
+  }
+
+  existingUserSelected(user: User) {
+    this.selectedExistingUser = user;
   }
 
   loadUsers() {
@@ -96,7 +89,7 @@ export class UsersComponent {
 
   createNewUser() {
     this.isLoading = true;
-    this.usersService.createNewUser().subscribe({
+    this.usersService.createOrAddNewUser(null).subscribe({
       error: (err: HttpErrorResponse) => {
         this._snackBar.open(err.error || err.message);
         this.isLoading = false;
@@ -107,7 +100,39 @@ export class UsersComponent {
     });
   }
 
-  openDetails(emailAddress: string) {
-    this.usersService.currentlyOpenUserEmail.set(emailAddress);
+  openDetails(user: User) {
+    this.usersService.currentlyOpenUserEmail.set(user.emailAddress);
+  }
+
+  onRegistrarSelectionChange(e: MatSelectChange) {
+    if (e.value) {
+      this.usersService.fetchUsersForRegistrar(e.value).subscribe({
+        error: (err) => {
+          this._snackBar.open(err.error || err.message);
+        },
+        next: (users) => {
+          this.usersSelection = users;
+        },
+      });
+    }
+  }
+
+  submitExistingUser() {
+    this.isLoading = true;
+    if (this.selectedExistingUser) {
+      this.usersService
+        .createOrAddNewUser(this.selectedExistingUser)
+        .subscribe({
+          error: (err) => {
+            this._snackBar.open(err.error || err.message);
+            this.isLoading = false;
+          },
+          complete: () => {
+            this.isLoading = false;
+            this.selectingExistingUser = false;
+            this.loadUsers();
+          },
+        });
+    }
   }
 }