refactor: bind components to api

src/components/schedule/tabs/lecture-hall/lecture-hall.component.ts

@@ -2,11 +2,13 @@ import {Component, EventEmitter, Input, Output, ViewChild} from '@angular/core';
 import {AsyncPipe} from "@angular/common";
 import {MatAccordion, MatExpansionModule, MatExpansionPanel} from "@angular/material/expansion";
 import {MatChipListboxChange, MatChipsModule} from "@angular/material/chips";
-import {Observable, of} from "rxjs";
+import {catchError, Observable, of} from "rxjs";
 import {FormControl, ReactiveFormsModule} from "@angular/forms";
 import {LoadingIndicatorComponent} from "@component/common/loading-indicator/loading-indicator.component";
 import {CampusBasicInfoResponse} from "@api/v1/campusBasicInfoResponse";
 import {LectureHallResponse} from "@api/v1/lectureHallResponse";
+import {CampusService} from "@api/v1/campus.service";
+import {LectureHallService} from "@api/v1/lectureHall.service";
 
 @Component({
   selector: 'app-lecture-hall',
@@ -20,7 +22,8 @@ import {LectureHallResponse} from "@api/v1/lectureHallResponse";
     LoadingIndicatorComponent
   ],
   templateUrl: './lecture-hall.component.html',
-  styleUrl: './lecture-hall.component.css'
+  styleUrl: './lecture-hall.component.css',
+  providers: [CampusService, LectureHallService]
 })
 
 export class LectureHallComponent {
@@ -29,29 +32,66 @@ export class LectureHallComponent {
 
   @ViewChild('lecturePanel') lecturePanel!: MatExpansionPanel;
 
-  @Input() campuses: Observable<CampusBasicInfoResponse[]> = of([]);
-  @Input() campusesLoaded: boolean | null = false;
-  @Output() campusesLoadRetry: EventEmitter<void> = new EventEmitter<void>();
-  @Input() lectureHalls: Observable<LectureHallResponse[]> = of([]);
-  @Input() lectureHallsLoaded: boolean | null = false;
-  @Output() lectureHallsLoadRetry: EventEmitter<number> = new EventEmitter<number>();
+  protected campuses: CampusBasicInfoResponse[] = [];
+  protected campusesLoaded: boolean | null = false;
 
-  @Output() campusSelected = new EventEmitter<number>();
-  @Output() lectureHallSelected = new EventEmitter<number>();
+  private lectureHalls: LectureHallResponse[] = [];
+  protected lectureHallsFiltered: LectureHallResponse[] = [];
+  protected lectureHallsLoaded: boolean | null = false;
+
+  @Output() eventResult = new EventEmitter<number>();
+
+  constructor(private campusApi: CampusService, private lectureHallApi: LectureHallService) {
+    this.loadCampuses();
+  }
+
+  protected loadCampuses() {
+    this.campusesLoaded = false;
+    this.campusApi.getCampus()
+      .pipe(catchError(error => {
+        this.campusesLoaded = null;
+        throw error;
+      }))
+      .subscribe(data => {
+        this.campuses = data;
+        this.campusesLoaded = true;
+      });
+  }
+
+  private filteringLectureHalls() {
+    this.lectureHallsFiltered = this.lectureHalls.filter(x => x.campusId === this.campusId);
+  }
 
   protected chooseCampus(event: MatChipListboxChange) {
     this.chipLecture.reset();
 
     if (event.value === undefined || event.value === null) {
       this.campusId = null;
-      this.lectureHalls = of([]);
+      this.lectureHalls = [];
       return;
     }
 
     this.campusId = event.value;
     this.lecturePanel.open();
 
-    this.campusSelected.emit(this.campusId!);
+    if (this.lectureHalls.length === 0)
+      this.loadLectureHalls();
+    else
+      this.filteringLectureHalls();
+  }
+
+  protected loadLectureHalls() {
+    this.lectureHallsLoaded = false;
+    this.lectureHallApi.getLectureHalls()
+      .pipe(catchError(error => {
+        this.lectureHallsLoaded = null;
+        throw error;
+      }))
+      .subscribe(data => {
+        this.lectureHalls = data;
+        this.filteringLectureHalls();
+        this.lectureHallsLoaded = true;
+      });
   }
 
   protected chooseLectureHall(event: MatChipListboxChange) {
@@ -59,6 +99,6 @@ export class LectureHallComponent {
       return;
 
     this.lecturePanel.close();
-    this.lectureHallSelected.emit(event.value);
+    this.eventResult.emit(event.value);
   }
 }