From 967f5572fa760b2c25d41c6d8b0b43447b0d7cd3 Mon Sep 17 00:00:00 2001
From: Polianin Nikita <nikitkapolyanin@yandex.ru>
Date: Fri, 16 Feb 2024 17:50:58 +0300
Subject: [PATCH] feat: implement a search for professors

---
 .../schedule-tabs-professor.component.css     |  5 ++
 .../schedule-tabs-professor.component.html    | 18 +++++
 .../schedule-tabs-professor.component.ts      | 71 +++++++++++++++++++
 3 files changed, 94 insertions(+)
 create mode 100644 src/components/schedule-tabs/schedule-tabs-professor/schedule-tabs-professor.component.css
 create mode 100644 src/components/schedule-tabs/schedule-tabs-professor/schedule-tabs-professor.component.html
 create mode 100644 src/components/schedule-tabs/schedule-tabs-professor/schedule-tabs-professor.component.ts

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 @@
+<div class="search-content">
+  @if (teachers.length === 0) {
+    <app-data-spinner/>
+  } @else {
+    <mat-form-field color="accent" style="width: 100%;">
+      <input type="text" placeholder="Поиск..." matInput [formControl]="teacherControl" [matAutocomplete]="auto">
+
+      <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onOptionSelected($event)"
+                        [autoActiveFirstOption]="false" [hideSingleSelectionIndicator]="true">
+        @for (option of filteredTeachers | async; track option) {
+          <mat-option [value]="option.id">
+            {{ option.name }}
+          </mat-option>
+        }
+      </mat-autocomplete>
+    </mat-form-field>
+  }
+</div>
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<Professors[]>;
+
+  @Input() teachers: Professors[] = [];
+  @Output() optionSelected = new EventEmitter<number>();
+
+  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);
+    }
+  }
+}