new task user search

matsen-tool/src/app/tasks/new-task/new-task.component.ts

@@ -3,7 +3,7 @@ import {TaskJsonld, TaskService, UserJsonld, UserService} from "@app/core/api/v1
 import {ModalStatus} from "@app/_helpers/modal.states";
 import {FormGroupInitializer} from "@app/_helpers/formgroup.initializer";
 import {FormGroup} from "@angular/forms";
-import {debounceTime, distinctUntilChanged, Observable, OperatorFunction, Subscription} from "rxjs";
+import {debounceTime, distinctUntilChanged, Observable, OperatorFunction, Subscription, switchMap} from "rxjs";
 import {taskForm} from "@app/_forms/apiForms";
 import {ApiConverter} from "@app/_helpers/api.converter";
 import {filter, map} from "rxjs/operators";
@@ -28,29 +28,6 @@ export class NewTaskComponent implements OnInit {
         { id: '/api/users/66', name: 'Jaylen Schmiett' },
     ];
 
-    protected formatter = (apiData: any) => apiData.name;
-
-    protected search: OperatorFunction<string, readonly { id: any; name: any }[]> = (text$: Observable<string>) =>
-        text$.pipe(
-            debounceTime(200),
-            distinctUntilChanged(),
-            filter((term) => term.length >= 2),
-            map((term) => this.users.filter((user) => new RegExp(term, 'mi').test(user.name)).slice(0, 10)),
-            // map((term) => {
-            //     this.userService.usersGetCollection(0, 50, term, term).subscribe(data => {
-            //         const users: Array<UserJsonld> = data["hydra:member"];
-            //         let res: { id: any; name: any }[] = [];
-            //         users.forEach(user => {
-            //             res.push({
-            //                 id: user.id,
-            //                 name: user.firstName + " " + user.lastName
-            //             });
-            //         });
-            //         return res;
-            //     });
-            // })
-        );
-
     constructor(
         private taskService: TaskService,
         private userService: UserService
@@ -65,15 +42,33 @@ export class NewTaskComponent implements OnInit {
         this.taskForm = FormGroupInitializer.initFormGroup(this.taskForm, this.task);
     }
 
-    onAssignedToSelect(selectedItem: any): void {
+    protected search: OperatorFunction<string, readonly { id: any; name: any }[]> = (text$: Observable<string>) =>
+        text$.pipe(
+            debounceTime(200),
+            distinctUntilChanged(),
+            filter((term) => term.length >= 2),
+            switchMap((term) => this.fetchUsers(term)),
+            map((users) => users.slice(0, 10)),
+        );
+
+    protected formatter = (apiData: any) => apiData.name;
+
+    protected fetchUsers(term: string): Observable<{ id: any; name: any }[]> {
+        return this.userService.usersGetCollection(1, 50, undefined, term).pipe(
+            map((response) => response['hydra:member'].map(user => ({ id: user.id, name: user.firstName + ' ' + user.lastName }))),
+        );
+    }
+
+
+    protected onAssignedToSelect(selectedItem: any): void {
         this.taskForm.get('assignedTo')?.setValue(selectedItem.item.id);
     }
 
-    onDueAtChange(selectedItem: any) {
+    protected onDueAtChange(selectedItem: any) {
         this.taskForm.get('dueAt')?.setValue(selectedItem.target.value);
     }
 
-    onSubmit() {
+    protected onSubmit() {
         if (this.taskForm.valid) {
             if (this.task.id === null || this.task.id === undefined) {
                 // Create new task