diff --git a/src/components/schedule-tabs/schedule-tabs-professor/schedule-tabs-professor.component.css b/src/components/schedule-tabs/schedule-tabs-professor/schedule-tabs-professor.component.css new file mode 100644 index 0000000..e46df67 --- /dev/null +++ b/src/components/schedule-tabs/schedule-tabs-professor/schedule-tabs-professor.component.css @@ -0,0 +1,5 @@ +.search-content { + display: flex; + align-items: center; + justify-content: center; +} diff --git a/src/components/schedule-tabs/schedule-tabs-professor/schedule-tabs-professor.component.html b/src/components/schedule-tabs/schedule-tabs-professor/schedule-tabs-professor.component.html new file mode 100644 index 0000000..5c5d54a --- /dev/null +++ b/src/components/schedule-tabs/schedule-tabs-professor/schedule-tabs-professor.component.html @@ -0,0 +1,18 @@ +
+ @if (teachers.length === 0) { + + } @else { + + + + + @for (option of filteredTeachers | async; track option) { + + {{ option.name }} + + } + + + } +
diff --git a/src/components/schedule-tabs/schedule-tabs-professor/schedule-tabs-professor.component.ts b/src/components/schedule-tabs/schedule-tabs-professor/schedule-tabs-professor.component.ts new file mode 100644 index 0000000..7cacdef --- /dev/null +++ b/src/components/schedule-tabs/schedule-tabs-professor/schedule-tabs-professor.component.ts @@ -0,0 +1,71 @@ +import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core"; +import {MatFormField, MatInput} from "@angular/material/input"; +import {FormControl, FormsModule, ReactiveFormsModule} from "@angular/forms"; +import { + MatAutocomplete, + MatAutocompleteSelectedEvent, + MatAutocompleteTrigger, + MatOptgroup, + MatOption +} from "@angular/material/autocomplete"; +import {AsyncPipe} from "@angular/common"; +import {DataSpinnerComponent} from "@component/data-spinner/data-spinner.component"; +import {map, Observable, startWith} from "rxjs"; + + +export interface Professors { + id: number, + name: string +} + +@Component({ + selector: 'app-schedule-tabs-professor', + standalone: true, + imports: [ + MatFormField, + MatInput, + FormsModule, + MatAutocompleteTrigger, + MatAutocomplete, + MatOptgroup, + ReactiveFormsModule, + MatOption, + AsyncPipe, + DataSpinnerComponent + ], + templateUrl: './schedule-tabs-professor.component.html', + styleUrl: './schedule-tabs-professor.component.css' +}) +export class ScheduleTabsProfessorComponent implements OnInit { + protected teacherControl = new FormControl(); + protected filteredTeachers!: Observable; + + @Input() teachers: Professors[] = []; + @Output() optionSelected = new EventEmitter(); + + ngOnInit(): void { + this.filteredTeachers = this.teacherControl.valueChanges.pipe( + startWith(''), + map(value => this._filterTeachers(value)) + ); + } + + private _filterTeachers(value: string | number): Professors[] { + 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.optionSelected.emit(selectedOption.id); + } + } +}