diff --git a/src/app/admin/states/teaching-periods/teaching-period-unit-import/teaching-period-unit-import.dialog.html b/src/app/admin/states/teaching-periods/teaching-period-unit-import/teaching-period-unit-import.dialog.html index c6d2cc0e8..75b3d9ec3 100644 --- a/src/app/admin/states/teaching-periods/teaching-period-unit-import/teaching-period-unit-import.dialog.html +++ b/src/app/admin/states/teaching-periods/teaching-period-unit-import/teaching-period-unit-import.dialog.html @@ -31,7 +31,14 @@

Import Units Into {{ data.teachingPeriod.name() }}

Main Convenor - + + + + + {{staff.name}} + + + diff --git a/src/app/admin/states/teaching-periods/teaching-period-unit-import/teaching-period-unit-import.dialog.ts b/src/app/admin/states/teaching-periods/teaching-period-unit-import/teaching-period-unit-import.dialog.ts index 2e34cbd57..52ec584b6 100644 --- a/src/app/admin/states/teaching-periods/teaching-period-unit-import/teaching-period-unit-import.dialog.ts +++ b/src/app/admin/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; + filteredStaff: Observable; } @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; 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(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; + }) + ) }); }