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);
+ }
+}