57 lines
2.0 KiB
TypeScript
57 lines
2.0 KiB
TypeScript
import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
|
|
import {MatFormField, MatInput} from "@angular/material/input";
|
|
import {FormControl, ReactiveFormsModule} from "@angular/forms";
|
|
import {MatAutocompleteModule, MatAutocompleteSelectedEvent} from "@angular/material/autocomplete";
|
|
import {AsyncPipe} from "@angular/common";
|
|
import {DataSpinnerComponent} from "@component/data-spinner/data-spinner.component";
|
|
import {map, Observable, startWith} from "rxjs";
|
|
import {ProfessorResponse} from "@model/professorResponse";
|
|
|
|
@Component({
|
|
selector: 'app-schedule-tabs-professor',
|
|
standalone: true,
|
|
imports: [
|
|
MatAutocompleteModule,
|
|
MatFormField,
|
|
DataSpinnerComponent,
|
|
AsyncPipe,
|
|
ReactiveFormsModule,
|
|
MatInput
|
|
],
|
|
templateUrl: './schedule-tabs-professor.component.html',
|
|
styleUrl: './schedule-tabs-professor.component.css'
|
|
})
|
|
export class ScheduleTabsProfessorComponent implements OnInit {
|
|
protected teacherControl = new FormControl();
|
|
protected filteredTeachers!: Observable<ProfessorResponse[]>;
|
|
|
|
@Input() teachers: ProfessorResponse[] = [];
|
|
@Output() professorSelected = new EventEmitter<number>();
|
|
|
|
ngOnInit(): void {
|
|
this.filteredTeachers = this.teacherControl.valueChanges.pipe(
|
|
startWith(''),
|
|
map(value => this._filterTeachers(value))
|
|
);
|
|
}
|
|
|
|
private _filterTeachers(value: string | number): ProfessorResponse[] {
|
|
if (typeof value === 'string') {
|
|
if (value === '') return [];
|
|
const filterValue = value.toLowerCase();
|
|
return this.teachers.filter(teacher => teacher.name.toLowerCase().includes(filterValue));
|
|
} else {
|
|
const selectedTeacher = this.teachers.find(teacher => teacher.id === value);
|
|
return selectedTeacher ? [selectedTeacher] : [];
|
|
}
|
|
}
|
|
|
|
protected onOptionSelected(event: MatAutocompleteSelectedEvent) {
|
|
const selectedOption = this.teachers.find(teacher => teacher.id === event.option.value);
|
|
if (selectedOption) {
|
|
this.teacherControl.setValue(selectedOption.name);
|
|
this.professorSelected.emit(selectedOption.id);
|
|
}
|
|
}
|
|
}
|