feat: split group by graduate

src/components/schedule/tabs/group/group.component.css

@@ -0,0 +1,5 @@
+.div-wrapper {
+  display: block;
+  width: 100%;
+  padding: 10px 0;
+}

src/components/schedule/tabs/group/group.component.html

@@ -6,11 +6,13 @@
       </mat-panel-title>
     </mat-expansion-panel-header>
     <mat-chip-listbox hideSingleSelectionIndicator (change)="onFacultySelected($event.value)" #facultyChip>
+
       @for (faculty of faculties; track $index) {
         <mat-chip-option [value]="faculty.id" color="accent">
           {{ faculty.name }}
         </mat-chip-option>
       }
+
       @if (faculties === null) {
         <app-loading-indicator [loading]="true"
                                (retryFunction)="loadFaculties()"
@@ -28,11 +30,13 @@
     <mat-chip-listbox hideSingleSelectionIndicator (change)="onCourseSelected($event.value)"
                       [formControl]="formChipCourse"
                       #courseChip>
+
       @for (course of courseNumbers; track $index) {
         <mat-chip-option [value]="course" color="accent">
           {{ course }}
         </mat-chip-option>
       }
+
       @if (courseNumbers === null) {
         <app-loading-indicator [loading]="true"
                                (retryFunction)="loadCourseGroup()"
@@ -50,11 +54,63 @@
     <mat-chip-listbox hideSingleSelectionIndicator (change)="onGroupSelected($event.value)"
                       [formControl]="formChipGroup"
                       #groupChip>
-      @for (group of filteredGroups; track $index) {
+
-        <mat-chip-option [value]="group.id" color="accent">
+      @if (filteredGroupsSpecialist && filteredGroupsSpecialist.length > 0) {
-          {{ group.name }}
+        <div class="div-wrapper">
-        </mat-chip-option>
+          Специалитет:
+        </div>
+
+        <div class="div-wrapper">
+          @for (group of filteredGroupsSpecialist; track $index) {
+            <mat-chip-option [value]="group.id" color="accent">
+              {{ group.name }}
+            </mat-chip-option>
+          }
+        </div>
       }
+
+      @if (filteredGroupsSpecialist && filteredGroupsSpecialist.length > 0 && (filteredGroupsBehaviour && filteredGroupsBehaviour.length > 0 || filteredGroupsMagistracy && filteredGroupsMagistracy.length > 0)) {
+        <div class="div-wrapper">
+          <hr/>
+        </div>
+      }
+
+      @if (filteredGroupsBehaviour && filteredGroupsBehaviour.length > 0) {
+        <div class="div-wrapper">
+          Бакалавариат:
+        </div>
+
+        <div class="div-wrapper">
+          @for (group of filteredGroupsBehaviour; track $index) {
+            <mat-chip-option [value]="group.id" color="accent">
+              {{ group.name }}
+            </mat-chip-option>
+          }
+        </div>
+      }
+
+      @if (((filteredGroupsSpecialist && filteredGroupsSpecialist.length > 0 && filteredGroupsBehaviour && filteredGroupsBehaviour.length > 0) ||
+      ((!filteredGroupsSpecialist || filteredGroupsSpecialist.length === 0) && filteredGroupsBehaviour && filteredGroupsBehaviour.length > 0)) &&
+      filteredGroupsMagistracy && filteredGroupsMagistracy.length > 0) {
+        <div class="div-wrapper">
+          <hr/>
+        </div>
+      }
+
+      @if (filteredGroupsMagistracy && filteredGroupsMagistracy.length > 0) {
+        <div class="div-wrapper">
+          Магистратура:
+        </div>
+
+        <div>
+          @for (group of filteredGroupsMagistracy; track $index) {
+            <mat-chip-option [value]="group.id" color="accent">
+              {{ group.name }}
+            </mat-chip-option>
+          }
+        </div>
+      }
+
       @if (faculties === null) {
         <app-loading-indicator [loading]="true"
                                (retryFunction)="loadCourseGroup()"

src/components/schedule/tabs/group/group.component.ts

@@ -30,7 +30,9 @@ export class GroupComponent implements IScheduleTab {
   protected faculties: FacultyResponse[] | null = null;
   protected courseNumbers: number[] | null = null;
   private groups: GroupResponse[] | null = null;
-  protected filteredGroups: GroupResponse[] | null = [];
+  protected filteredGroupsBehaviour: GroupResponse[] | null = null;
+  protected filteredGroupsMagistracy: GroupResponse[] | null = null;
+  protected filteredGroupsSpecialist: GroupResponse[] | null = null;
 
   protected facultyId: number | null = null;
   protected courseNumber: number | null = null;
@@ -132,8 +134,17 @@ export class GroupComponent implements IScheduleTab {
       return;
     }
 
-    if (this.courseNumber !== null)
+    if (this.courseNumber !== null) {
-      this.filteredGroups = this.groups!.filter(x => x.courseNumber === this.courseNumber);
+      const groupByCourse = this.groups!.filter(x => x.courseNumber === this.courseNumber);
+      groupByCourse.forEach(x => {
+        if (x.name[2].toUpperCase() === 'Б')
+          this.filteredGroupsBehaviour?.push(x);
+        else if (x.name[2].toUpperCase() === 'С')
+          this.filteredGroupsSpecialist?.push(x);
+        else
+          this.filteredGroupsMagistracy?.push(x);
+      });
+    }
   }
 
   protected onFacultySelected(index: number) {
@@ -156,7 +167,9 @@ export class GroupComponent implements IScheduleTab {
   }
 
   protected onCourseSelected(course: number) {
-    this.filteredGroups = [];
+    this.filteredGroupsBehaviour = [];
+    this.filteredGroupsMagistracy = [];
+    this.filteredGroupsSpecialist = [];
     this.formChipGroup.reset();
 
     if (course === undefined) {