feat: unit import staff autocomplete

macite · Jun 18, 2023 · b489620 · b489620
1 parent 5399627
commit b489620
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 13 deletions.
diff --git a/...ates/teaching-periods/teaching-period-unit-import/teaching-period-unit-import.dialog.html b/...ates/teaching-periods/teaching-period-unit-import/teaching-period-unit-import.dialog.html
@@ -31,7 +31,14 @@ <h1 mat-dialog-title>Import Units Into {{ data.teachingPeriod.name() }}</h1>
     <ng-container matColumnDef="convenor">
       <th mat-header-cell *matHeaderCellDef> Main Convenor </th>
       <td mat-cell *matCellDef="let unitToImport">
-        <object-select placeholder="No Staff Selected" [source]="teachingStaff" [(target)]="unitToImport.convenor"></object-select>
+        <mat-form-field appearance="outline">
+          <input type="text" matInput [formControl]="unitToImport.convenorFormControl" [matAutocomplete]="auto" [(ngModel)]="unitToImport.convenor">
+          <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
+            <mat-option *ngFor="let staff of unitToImport.filteredStaff | async" [value]="staff">
+              {{staff.name}}
+            </mat-option>
+          </mat-autocomplete>
+        </mat-form-field>
       </td>
     </ng-container>
 

diff --git a/...states/teaching-periods/teaching-period-unit-import/teaching-period-unit-import.dialog.ts b/...states/teaching-periods/teaching-period-unit-import/teaching-period-unit-import.dialog.ts
@@ -1,14 +1,10 @@
 import { Component, Inject, Injectable, OnInit, ViewChild } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule, MatDialog } from '@angular/material/dialog';
-import { MatButtonModule } from '@angular/material/button';
-import { FormControl, FormsModule } from '@angular/forms';
-import { MatInputModule } from '@angular/material/input';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatStepperModule } from '@angular/material/stepper';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialog } from '@angular/material/dialog';
+import { FormControl } from '@angular/forms';
 import { Unit, TeachingPeriod, User, UserService, UnitService } from 'src/app/api/models/doubtfire-model';
-import { Observable, filter, map, startWith } from 'rxjs';
 import { MatTable, MatTableDataSource } from '@angular/material/table';
 import { GlobalStateService } from 'src/app/projects/states/index/global-state.service';
+import { Observable, map, startWith } from 'rxjs';
 
 export interface TeachingPeriodUnitImportData {
   teachingPeriod: TeachingPeriod;
@@ -21,6 +17,8 @@ interface UnitImportData {
   convenor: User;
   relatedUnits?: { value: Unit; text: string }[];
   done?: boolean;
+  convenorFormControl: FormControl<User>;
+  filteredStaff: Observable<User[]>;
 }
 
 @Injectable()
@@ -57,7 +55,8 @@ export class TeachingPeriodUnitImportDialogComponent implements OnInit {
 
   public dataSource = new MatTableDataSource(this.unitsToImport);
 
-  public teachingStaff: { value: User; text: string }[];
+  public teachingStaff: User[];
+  public filteredOptions: Observable<User[]>;
 
   public allUnits: Unit[];
 
@@ -86,15 +85,23 @@ export class TeachingPeriodUnitImportDialogComponent implements OnInit {
     this.userService.getTutors().subscribe((staff) => {
       // Load all units now we have the staff
       this.loadAllUnits();
+
       this.teachingStaff = staff
         .filter((s) => ['Convenor', 'Admin'].includes(s.systemRole))
-        .sort((a, b) => a.name.localeCompare(b.name))
-        .map((s) => {
-          return { value: s, text: s.name };
-        });
+        .sort((a, b) => a.name.localeCompare(b.name));
     });
   }
 
+  displayFn(user: User): string {
+    return user && user.name ? user.name : '';
+  }
+
+  private _filter(name: string): User[] {
+    const filterValue = name.toLowerCase();
+
+    return this.teachingStaff.filter(option => option.name.toLowerCase().includes(filterValue));
+  }
+
   private loadAllUnits() {
     // Load all units
     this.unitService.query(undefined, { params: { include_in_active: true } }).subscribe({
@@ -167,12 +174,21 @@ export class TeachingPeriodUnitImportDialogComponent implements OnInit {
 
       const relatedUnits = this.relatedUnits(code);
       const sourceUnit = relatedUnits.length > 0 ? relatedUnits[0].value : null;
+      const formControl = new FormControl<User>(sourceUnit?.mainConvenor?.user || sourceUnit?.mainConvenorUser);
 
       this.unitsToImport.push({
         unitCode: code,
         sourceUnit: sourceUnit,
         convenor: sourceUnit?.mainConvenor?.user || sourceUnit?.mainConvenorUser,
         relatedUnits: relatedUnits,
+        convenorFormControl: formControl,
+        filteredStaff: formControl.valueChanges.pipe(
+          startWith(''),
+          map(value => {
+            const name = typeof value === 'string' ? value : value?.name;
+            return name ? this._filter(name as string) : this.teachingStaff;
+          })
+        )
       });
     }