refactor: folders and components
This commit is contained in:
277
src/components/schedule/tabs/tabs.component.ts
Normal file
277
src/components/schedule/tabs/tabs.component.ts
Normal file
@ -0,0 +1,277 @@
|
||||
import {Component, EventEmitter, Output, ViewChild} from '@angular/core';
|
||||
import {HttpClientModule} from "@angular/common/http";
|
||||
import {ApiService} from '@service/api.service';
|
||||
import {OtherComponent} from "@component/schedule/tabs/other/other.component";
|
||||
import {MatTab, MatTabChangeEvent, MatTabGroup} from "@angular/material/tabs";
|
||||
import {
|
||||
ProfessorComponent
|
||||
} from "@component/schedule/tabs/professor/professor.component";
|
||||
import {GroupComponent} from "@component/schedule/tabs/group/group.component";
|
||||
import {
|
||||
LectureHallComponent
|
||||
} from "@component/schedule/tabs/lecture-hall/lecture-hall.component";
|
||||
import {ProfessorResponse} from "@model/professorResponse";
|
||||
import {catchError, map, Observable, of, switchMap, tap} from "rxjs";
|
||||
import {GroupResponse} from "@model/groupResponse";
|
||||
import {FacultyResponse} from "@model/facultyResponse";
|
||||
import {CampusBasicInfoResponse} from "@model/campusBasicInfoResponse";
|
||||
import {LectureHallResponse} from "@model/lectureHallResponse";
|
||||
import {ReactiveFormsModule} from "@angular/forms";
|
||||
import {AsyncPipe, NgIf} from "@angular/common";
|
||||
import {DisciplineResponse} from "@model/disciplineResponse";
|
||||
import {MatButton} from "@angular/material/button";
|
||||
import {DataSpinnerComponent} from "@component/common/data-spinner/data-spinner.component";
|
||||
|
||||
@Component({
|
||||
selector: 'app-tabs',
|
||||
standalone: true,
|
||||
imports: [
|
||||
HttpClientModule,
|
||||
OtherComponent,
|
||||
MatTabGroup,
|
||||
MatTab,
|
||||
ProfessorComponent,
|
||||
GroupComponent,
|
||||
LectureHallComponent,
|
||||
ReactiveFormsModule,
|
||||
AsyncPipe,
|
||||
NgIf,
|
||||
MatButton,
|
||||
DataSpinnerComponent
|
||||
],
|
||||
templateUrl: './tabs.component.html',
|
||||
styleUrl: './tabs.component.css'
|
||||
})
|
||||
|
||||
export class TabsComponent {
|
||||
protected professorsData: ProfessorResponse[] = [];
|
||||
|
||||
protected faculties: Observable<FacultyResponse[]> = of([]);
|
||||
protected groups: Observable<GroupResponse[]> = of([]);
|
||||
private groupsData: Observable<GroupResponse[]> = of([]);
|
||||
|
||||
protected campuses: Observable<CampusBasicInfoResponse[]> = of([]);
|
||||
protected lectureHalls: Observable<LectureHallResponse[]> = of([]);
|
||||
private lectureHallsData: Observable<LectureHallResponse[]> = of([]);
|
||||
|
||||
// States
|
||||
protected facultiesLoaded: boolean | null = false;
|
||||
protected groupLoaded: boolean | null = false;
|
||||
protected campusesLoaded: boolean | null = false;
|
||||
protected lectureHallsLoaded: boolean | null = false;
|
||||
protected disciplinesLoaded: boolean | null = false;
|
||||
protected professorsLoaded: boolean | null = false;
|
||||
|
||||
@Output() groupSelected: EventEmitter<number> = new EventEmitter<number>();
|
||||
@Output() lectureHallSelected: EventEmitter<number> = new EventEmitter<number>();
|
||||
@Output() professorSelected: EventEmitter<number> = new EventEmitter<number>();
|
||||
|
||||
constructor(private api: ApiService) {
|
||||
this.facultyLoad().then();
|
||||
}
|
||||
|
||||
protected async chooseTabs(event: MatTabChangeEvent) {
|
||||
console.log(event);
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
await this.facultyLoad();
|
||||
break;
|
||||
case 1:
|
||||
this.professorsLoad();
|
||||
break;
|
||||
case 2:
|
||||
await this.campusLoad();
|
||||
break;
|
||||
case 3:
|
||||
await this.extensionLoad();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
protected async facultyLoad() {
|
||||
if (this.facultiesLoaded === null) this.facultiesLoaded = false;
|
||||
if (this.facultiesLoaded) return;
|
||||
|
||||
this.faculties = this.api.get<FacultyResponse[]>("Faculty/Get").pipe(
|
||||
tap(() => {
|
||||
this.facultiesLoaded = true;
|
||||
}),
|
||||
catchError((error) => {
|
||||
this.facultiesLoaded = null;
|
||||
throw error;
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
protected groupLoad(id: number) {
|
||||
if (this.groupLoaded === null) this.groupLoaded = false;
|
||||
|
||||
if (this.groupLoaded)
|
||||
this.groups = this.groupsData.pipe(map(data => data.filter(x => x.facultyId === id)));
|
||||
else
|
||||
this.groups = this.api.get<GroupResponse[]>("Group/GetByFaculty/" + id).pipe(
|
||||
tap(() => {
|
||||
this.groupLoaded = false;
|
||||
}),
|
||||
catchError((error) => {
|
||||
this.groupLoaded = null;
|
||||
throw error;
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
protected professorsLoad() {
|
||||
if (this.professorsLoaded === null) this.professorsLoaded = false;
|
||||
|
||||
if (this.professorsLoaded) return;
|
||||
|
||||
this.api.get<ProfessorResponse[]>("Professor/Get").pipe(
|
||||
catchError((error) => {
|
||||
this.professorsLoaded = null;
|
||||
throw error;
|
||||
})
|
||||
).subscribe(data => {
|
||||
this.professorsData = data;
|
||||
this.professorEx.Data = data.map(x =>
|
||||
({
|
||||
id: x.id,
|
||||
name: x.altName ? x.altName : x.name,
|
||||
selected: false
|
||||
}));
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
protected async campusLoad() {
|
||||
if (this.campusesLoaded === null) this.campusesLoaded = false;
|
||||
|
||||
if (this.campusesLoaded) return;
|
||||
|
||||
this.campuses = this.api.get<CampusBasicInfoResponse[]>("Campus/Get").pipe(
|
||||
tap(() => {
|
||||
this.campusesLoaded = true;
|
||||
}),
|
||||
catchError((error) => {
|
||||
this.campusesLoaded = null;
|
||||
throw error;
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
protected lectureHallLoad(id: number) {
|
||||
if (this.lectureHallsLoaded === null) this.lectureHallsLoaded = false;
|
||||
|
||||
if (this.lectureHallsLoaded)
|
||||
this.lectureHalls = this.lectureHallsData.pipe(map(data => data.filter(x => x.campusId === id)));
|
||||
else
|
||||
this.lectureHalls = this.api.get<LectureHallResponse[]>("LectureHall/GetByCampus/" + id).pipe(
|
||||
tap(() => {
|
||||
this.lectureHallsLoaded = false;
|
||||
}),
|
||||
catchError((error) => {
|
||||
this.lectureHallsLoaded = null;
|
||||
throw error;
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
protected async loadLectureHalls() {
|
||||
if (!this.campusesLoaded)
|
||||
await this.campusLoad();
|
||||
|
||||
if (!this.lectureHallsLoaded) {
|
||||
this.lectureHallsData = this.api.get<LectureHallResponse[]>("LectureHall/Get");
|
||||
this.lectureHallsData.pipe(
|
||||
switchMap(lectureHalls => this.campuses.pipe(
|
||||
map(campuses => {
|
||||
return lectureHalls.map(x => {
|
||||
const campus = campuses.find(c => c.id === x.campusId);
|
||||
const codeName = campus ? campus.codeName : '';
|
||||
return {
|
||||
id: x.id,
|
||||
name: `${x.name} (${codeName})`,
|
||||
selected: false
|
||||
};
|
||||
});
|
||||
})
|
||||
)),
|
||||
).subscribe(data => {
|
||||
this.lectureHallEx.Data = data;
|
||||
this.lectureHallsLoaded = true;
|
||||
this.campusesLoaded = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
protected async loadDisciplines() {
|
||||
if (!this.disciplinesLoaded) {
|
||||
this.api.get<DisciplineResponse[]>("Discipline/Get").pipe(
|
||||
catchError((error) => {
|
||||
this.disciplinesLoaded = null;
|
||||
throw error;
|
||||
})).subscribe(data => {
|
||||
this.disciplineEx.Data = data.map(x =>
|
||||
({
|
||||
id: x.id,
|
||||
name: x.name,
|
||||
selected: false
|
||||
}));
|
||||
this.disciplinesLoaded = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
protected async loadGroups() {
|
||||
if (!this.facultiesLoaded)
|
||||
await this.facultyLoad();
|
||||
|
||||
if (!this.groupLoaded) {
|
||||
this.groupsData = this.api.get<GroupResponse[]>("Group/Get");
|
||||
this.groupsData.pipe(
|
||||
switchMap(groups => this.faculties.pipe(
|
||||
map(campuses => {
|
||||
return groups.map(x => {
|
||||
const faculties = campuses.find(c => c.id === x.facultyId);
|
||||
const name = faculties ? faculties.name : '';
|
||||
return {
|
||||
id: x.id,
|
||||
name: `${x.name} (${name})`,
|
||||
selected: false
|
||||
};
|
||||
});
|
||||
})
|
||||
))
|
||||
).subscribe(data => {
|
||||
this.groupEx.Data = data;
|
||||
this.groupLoaded = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
protected async extensionLoad() {
|
||||
// Lecture Hall
|
||||
await this.loadLectureHalls();
|
||||
|
||||
// Disciplines
|
||||
await this.loadDisciplines();
|
||||
|
||||
// Groups
|
||||
await this.loadGroups();
|
||||
|
||||
// Professors
|
||||
if (this.professorsData.length === 0)
|
||||
this.professorsLoad();
|
||||
}
|
||||
|
||||
@ViewChild('discipline') disciplineEx!: OtherComponent;
|
||||
@ViewChild('lecture') lectureHallEx!: OtherComponent;
|
||||
@ViewChild('group') groupEx!: OtherComponent;
|
||||
@ViewChild('professor') professorEx!: OtherComponent;
|
||||
|
||||
onClickNagmi() {
|
||||
console.log('huy = ' + this.disciplineEx.selectedIds);
|
||||
console.log('huy2 = ' + this.lectureHallEx.selectedIds);
|
||||
console.log('huy3 = ' + this.groupEx.selectedIds);
|
||||
console.log('huy3 = ' + this.professorEx.selectedIds);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user