From 94ca6c66ea22462a3866ccdcc014f490acca81a9 Mon Sep 17 00:00:00 2001
From: Polianin Nikita <nikitkapolyanin@yandex.ru>
Date: Sat, 17 Feb 2024 08:57:30 +0300
Subject: [PATCH] feat: add a group tab

---
 .../schedule-tabs-group.component.css         |  0
 .../schedule-tabs-group.component.html        | 52 +++++++++++
 .../schedule-tabs-group.component.ts          | 88 +++++++++++++++++++
 3 files changed, 140 insertions(+)
 create mode 100644 src/components/schedule-tabs/schedule-tabs-group/schedule-tabs-group.component.css
 create mode 100644 src/components/schedule-tabs/schedule-tabs-group/schedule-tabs-group.component.html
 create mode 100644 src/components/schedule-tabs/schedule-tabs-group/schedule-tabs-group.component.ts

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 @@
+<mat-accordion>
+  <mat-expansion-panel expanded>
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+        Факультет
+      </mat-panel-title>
+    </mat-expansion-panel-header>
+    <mat-chip-listbox hideSingleSelectionIndicator (change)="selectedFaculty($event)">
+      @for (faculty of faculties | async; track $index) {
+        <mat-chip-option [value]="faculty.id" color="accent">
+          {{ faculty.name }}
+        </mat-chip-option>
+      } @empty {
+        <app-data-spinner/>
+      }
+    </mat-chip-listbox>
+  </mat-expansion-panel>
+
+  <mat-expansion-panel [disabled]="facultiesId === null" #courseNumberPanel>
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+        Курс
+      </mat-panel-title>
+    </mat-expansion-panel-header>
+    <mat-chip-listbox hideSingleSelectionIndicator (change)="selectCourseNumber($event)" [formControl]="chipCourse">
+      @for (course of courseNumbers | async; track $index) {
+        <mat-chip-option [value]="course" color="accent">
+          {{ course }}
+        </mat-chip-option>
+      } @empty {
+        <app-data-spinner/>
+      }
+    </mat-chip-listbox>
+  </mat-expansion-panel>
+
+  <mat-expansion-panel [disabled]="courseNumber === null" #groupPanel>
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+        Группа
+      </mat-panel-title>
+    </mat-expansion-panel-header>
+    <mat-chip-listbox hideSingleSelectionIndicator (change)="selectGroup($event)" [formControl]="chipGroup">
+      @for (group of filteredGroups | async; track $index) {
+        <mat-chip-option [value]="group.id" color="accent">
+          {{ group.name }}
+        </mat-chip-option>
+      } @empty {
+        <app-data-spinner/>
+      }
+    </mat-chip-listbox>
+  </mat-expansion-panel>
+</mat-accordion>
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<FacultyResponse[]>;
+  protected facultiesId: number | null = null;
+  protected courseNumber: number | null = null;
+  protected groups: Observable<GroupResponse[]> = of([]);
+  protected filteredGroups: Observable<GroupResponse[]> = of([]);
+  protected courseNumbers: Observable<number[]> = of([]);
+
+  protected chipCourse: FormControl = new FormControl();
+  protected chipGroup: FormControl = new FormControl();
+
+  @ViewChild('courseNumberPanel') courseNumberPanel!: MatExpansionPanel;
+  @ViewChild('groupPanel') groupPanel!: MatExpansionPanel;
+
+  @Output() groupSelected = new EventEmitter<number>();
+
+  constructor(private api: ApiService) {
+    this.faculties = api.get<FacultyResponse[]>("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<GroupResponse[]>("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);
+  }
+}