diff --git a/src/components/schedule-tabs/schedule-tabs-group/schedule-tabs-group.component.css b/src/components/schedule-tabs/schedule-tabs-group/schedule-tabs-group.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/components/schedule-tabs/schedule-tabs-group/schedule-tabs-group.component.html b/src/components/schedule-tabs/schedule-tabs-group/schedule-tabs-group.component.html new file mode 100644 index 0000000..7149905 --- /dev/null +++ b/src/components/schedule-tabs/schedule-tabs-group/schedule-tabs-group.component.html @@ -0,0 +1,52 @@ + + + + + Факультет + + + + @for (faculty of faculties | async; track $index) { + + {{ faculty.name }} + + } @empty { + + } + + + + + + + Курс + + + + @for (course of courseNumbers | async; track $index) { + + {{ course }} + + } @empty { + + } + + + + + + + Группа + + + + @for (group of filteredGroups | async; track $index) { + + {{ group.name }} + + } @empty { + + } + + + diff --git a/src/components/schedule-tabs/schedule-tabs-group/schedule-tabs-group.component.ts b/src/components/schedule-tabs/schedule-tabs-group/schedule-tabs-group.component.ts new file mode 100644 index 0000000..f4247d3 --- /dev/null +++ b/src/components/schedule-tabs/schedule-tabs-group/schedule-tabs-group.component.ts @@ -0,0 +1,88 @@ +import {Component, EventEmitter, Output, ViewChild} from '@angular/core'; +import {MatExpansionModule, MatExpansionPanel} from "@angular/material/expansion"; +import {ApiService} from "@service/api.service"; +import {DataSpinnerComponent} from "@component/data-spinner/data-spinner.component"; +import {MatChipListboxChange, MatChipsModule} from '@angular/material/chips'; +import {FormControl, ReactiveFormsModule} from "@angular/forms"; +import {AsyncPipe} from "@angular/common"; +import {map, Observable, of} from "rxjs"; +import {FacultyResponse} from "@model/facultyResponse"; +import {GroupResponse} from "@model/groupResponse"; + +@Component({ + selector: 'app-schedule-tabs-group', + standalone: true, + imports: [ + MatExpansionModule, + DataSpinnerComponent, + MatChipsModule, + ReactiveFormsModule, + AsyncPipe + ], + templateUrl: './schedule-tabs-group.component.html', + styleUrl: './schedule-tabs-group.component.css' +}) +export class ScheduleTabsGroupComponent { + protected faculties: Observable; + protected facultiesId: number | null = null; + protected courseNumber: number | null = null; + protected groups: Observable = of([]); + protected filteredGroups: Observable = of([]); + protected courseNumbers: Observable = of([]); + + protected chipCourse: FormControl = new FormControl(); + protected chipGroup: FormControl = new FormControl(); + + @ViewChild('courseNumberPanel') courseNumberPanel!: MatExpansionPanel; + @ViewChild('groupPanel') groupPanel!: MatExpansionPanel; + + @Output() groupSelected = new EventEmitter(); + + constructor(private api: ApiService) { + this.faculties = api.get("Faculty/Get"); + } + + protected selectedFaculty(event: MatChipListboxChange) { + this.courseNumber = null; + this.groups = of([]); + this.chipGroup.reset(); + this.chipCourse.reset(); + + if (event.value === undefined || event.value === null) { + this.facultiesId = null; + return; + } + this.facultiesId = event.value; + this.courseNumberPanel.open(); + + this.groups = this.api.get("Group/GetByFacultyId/" + this.facultiesId); + this.courseNumbers = this.groups.pipe( + map(data => data.map(g => g.courseNumber)), + map(courseNumbersArray => courseNumbersArray.filter((value, index, self) => self.indexOf(value) === index)), + map(uniqueCourseNumbers => uniqueCourseNumbers.sort((a, b) => a - b)) + ); + } + + protected selectCourseNumber(event: MatChipListboxChange) { + this.filteredGroups = of([]); + this.chipGroup.reset(); + + if (event.value === undefined || event.value === null) { + this.courseNumber = null; + return; + } + + this.courseNumber = event.value; + this.groupPanel.open(); + this.groups.subscribe(data => + this.filteredGroups = of(data.filter(g => g.courseNumber === this.courseNumber))); + } + + protected selectGroup(event: MatChipListboxChange) { + if (event.value === undefined || event.value === null) + return; + + this.groupPanel.close(); + this.groupSelected.emit(event.value); + } +}