Winsomnia/MireaFrontend
1
0
Fork 0
Code Pull Requests Actions Projects Releases Activity

feat: add a retry button in case of a load error

Browse Source
This commit is contained in:
Polianin Nikita 2024-03-13 04:35:27 +03:00
parent 4463d54cfb
commit 2f280b2b95
10 changed files with 107 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/loading-indicator/loading-indicator.component.html Normal file
View File

@ -0,0 +1,7 @@
@if (loading) {
<app-data-spinner/>
} @else {
<button mat-fab color="primary" (click)="retryFunction.emit()">
<mat-icon>refresh</mat-icon>
</button>
}

20
src/components/loading-indicator/loading-indicator.component.ts Normal file
View File

@ -0,0 +1,20 @@
import {Component, EventEmitter, Input, Output} from '@angular/core';
import {DataSpinnerComponent} from "@component/data-spinner/data-spinner.component";
import {MatIcon} from "@angular/material/icon";
import {MatButton, MatFabButton} from "@angular/material/button";
@Component({
selector: 'app-loading-indicator',
standalone: true,
imports: [
DataSpinnerComponent,
MatButton,
MatIcon,
MatFabButton
],
templateUrl: './loading-indicator.component.html'
})
export class LoadingIndicatorComponent {
@Input() loading: boolean = true;
@Output() retryFunction: EventEmitter<void> = new EventEmitter<void>();
}

16
src/components/schedule-tabs/schedule-tabs-group/schedule-tabs-group.component.html
View File

@ -5,30 +5,31 @@
Факультет
</mat-panel-title>
</mat-expansion-panel-header>
<mat-chip-listbox hideSingleSelectionIndicator (change)="selectedFaculty($event)">
<mat-chip-listbox hideSingleSelectionIndicator (change)="chooseFaculty($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/>
<app-loading-indicator [loading]="facultiesLoaded !== null" (retryFunction)="facultiesLoadRetry.emit()"/>
}
</mat-chip-listbox>
</mat-expansion-panel>
<mat-expansion-panel [disabled]="facultiesId === null" #courseNumberPanel>
<mat-expansion-panel [disabled]="facultyId === 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">
<mat-chip-listbox hideSingleSelectionIndicator (change)="chooseCourseNumber($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/>
<app-loading-indicator [loading]="groupsLoaded !== null"
(retryFunction)="groupsLoadRetry.emit(this.facultyId!)"/>
}
</mat-chip-listbox>
</mat-expansion-panel>
@ -39,13 +40,14 @@
Группа
</mat-panel-title>
</mat-expansion-panel-header>
<mat-chip-listbox hideSingleSelectionIndicator (change)="selectGroup($event)" [formControl]="chipGroup">
<mat-chip-listbox hideSingleSelectionIndicator (change)="chooseGroup($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/>
<app-loading-indicator [loading]="groupsLoaded !== null"
(retryFunction)="groupsLoadRetry.emit(this.facultyId!)"/>
}
</mat-chip-listbox>
</mat-expansion-panel>

26
src/components/schedule-tabs/schedule-tabs-group/schedule-tabs-group.component.ts
View File

@ -1,29 +1,31 @@
import {Component, EventEmitter, Input, Output, ViewChild} from '@angular/core';
import {MatExpansionModule, MatExpansionPanel} from "@angular/material/expansion";
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";
import {LoadingIndicatorComponent} from "@component/loading-indicator/loading-indicator.component";
@Component({
selector: 'app-schedule-tabs-group',
standalone: true,
imports: [
MatExpansionModule,
DataSpinnerComponent,
MatChipsModule,
ReactiveFormsModule,
LoadingIndicatorComponent,
AsyncPipe
],
templateUrl: './schedule-tabs-group.component.html',
styleUrl: './schedule-tabs-group.component.css'
})
export class ScheduleTabsGroupComponent {
protected facultiesId: number | null = null;
protected facultyId: number | null = null;
protected courseNumber: number | null = null;
protected filteredGroups: Observable<GroupResponse[]> = of([]);
protected courseNumbers: Observable<number[]> = of([]);
protected groups: Observable<GroupResponse[]> = of([]);
@ -35,8 +37,12 @@ export class ScheduleTabsGroupComponent {
@ViewChild('groupPanel') groupPanel!: MatExpansionPanel;
@Input() faculties: Observable<FacultyResponse[]> = of([]);
@Input() facultiesLoaded: boolean | null = false;
@Output() facultiesLoadRetry: EventEmitter<void> = new EventEmitter<void>();
@Input() groupsLoaded: boolean | null = false;
@Output() groupsLoadRetry: EventEmitter<number> = new EventEmitter<number>();
@Input() set groupsSet(data: Observable<GroupResponse[]>) {
@Input() set setGroups(data: Observable<GroupResponse[]>) {
this.groups = data;
this.courseNumbers = this.groups.pipe(
map(data => data.map(g => g.courseNumber)),
@ -48,23 +54,23 @@ export class ScheduleTabsGroupComponent {
@Output() groupSelected = new EventEmitter<number>();
@Output() facultySelected = new EventEmitter<number>();
protected selectedFaculty(event: MatChipListboxChange) {
protected chooseFaculty(event: MatChipListboxChange) {
this.courseNumber = null;
this.groups = of([]);
this.chipGroup.reset();
this.chipCourse.reset();
if (event.value === undefined || event.value === null) {
this.facultiesId = null;
this.facultyId = null;
return;
}
this.facultiesId = event.value;
this.facultyId = event.value;
this.courseNumberPanel.open();
this.facultySelected.emit(this.facultiesId!);
this.facultySelected.emit(this.facultyId!);
}
protected selectCourseNumber(event: MatChipListboxChange) {
protected chooseCourseNumber(event: MatChipListboxChange) {
this.filteredGroups = of([]);
this.chipGroup.reset();
@ -79,7 +85,7 @@ export class ScheduleTabsGroupComponent {
this.filteredGroups = of(data.filter(g => g.courseNumber === this.courseNumber)));
}
protected selectGroup(event: MatChipListboxChange) {
protected chooseGroup(event: MatChipListboxChange) {
if (event.value === undefined || event.value === null)
return;

8
src/components/schedule-tabs/schedule-tabs-lecture-hall/schedule-tabs-lecture-hall.component.html
View File

@ -5,13 +5,13 @@
Кампус
</mat-panel-title>
</mat-expansion-panel-header>
<mat-chip-listbox hideSingleSelectionIndicator (change)="selectedCampus($event)">
<mat-chip-listbox hideSingleSelectionIndicator (change)="chooseCampus($event)">
@for (campus of campuses | async; track $index) {
<mat-chip-option [value]="campus.id" color="accent">
{{ campus.codeName }}
</mat-chip-option>
} @empty {
<app-data-spinner/>
<app-loading-indicator [loading]="campusesLoaded !== null" (retryFunction)="campusesLoadRetry.emit()"/>
}
</mat-chip-listbox>
</mat-expansion-panel>
@ -22,13 +22,13 @@
Кабинет
</mat-panel-title>
</mat-expansion-panel-header>
<mat-chip-listbox hideSingleSelectionIndicator (change)="selectedLectureHall($event)" [formControl]="chipLecture">
<mat-chip-listbox hideSingleSelectionIndicator (change)="chooseLectureHall($event)" [formControl]="chipLecture">
@for (lectureHall of lectureHalls | async; track $index) {
<mat-chip-option [value]="lectureHall.id" color="accent">
{{ lectureHall.name }}
</mat-chip-option>
} @empty {
<app-data-spinner/>
<app-loading-indicator [loading]="lectureHallsLoaded !== null" (retryFunction)="lectureHallsLoadRetry.emit()"/>
}
</mat-chip-listbox>
</mat-expansion-panel>

14
src/components/schedule-tabs/schedule-tabs-lecture-hall/schedule-tabs-lecture-hall.component.ts
View File

@ -1,23 +1,23 @@
import {Component, EventEmitter, Input, Output, ViewChild} from '@angular/core';
import {AsyncPipe} from "@angular/common";
import {DataSpinnerComponent} from "@component/data-spinner/data-spinner.component";
import {MatAccordion, MatExpansionModule, MatExpansionPanel} from "@angular/material/expansion";
import {MatChipListboxChange, MatChipsModule} from "@angular/material/chips";
import {Observable, of} from "rxjs";
import {CampusBasicInfoResponse} from "@model/campusBasicInfoResponse";
import {FormControl, ReactiveFormsModule} from "@angular/forms";
import {LectureHallResponse} from "@model/lectureHallResponse";
import {LoadingIndicatorComponent} from "@component/loading-indicator/loading-indicator.component";
@Component({
selector: 'app-schedule-tabs-lecture-hall',
standalone: true,
imports: [
MatChipsModule,
DataSpinnerComponent,
MatExpansionModule,
AsyncPipe,
ReactiveFormsModule,
MatAccordion
MatAccordion,
LoadingIndicatorComponent
],
templateUrl: './schedule-tabs-lecture-hall.component.html',
styleUrl: './schedule-tabs-lecture-hall.component.css'
@ -29,12 +29,16 @@ export class ScheduleTabsLectureHallComponent {
@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>();
@Output() campusSelected = new EventEmitter<number>();
@Output() lectureHallSelected = new EventEmitter<number>();
protected selectedCampus(event: MatChipListboxChange) {
protected chooseCampus(event: MatChipListboxChange) {
this.chipLecture.reset();
if (event.value === undefined || event.value === null) {
@ -49,7 +53,7 @@ export class ScheduleTabsLectureHallComponent {
this.campusSelected.emit(this.campusId!);
}
protected selectedLectureHall(event: MatChipListboxChange) {
protected chooseLectureHall(event: MatChipListboxChange) {
if (event.value === undefined || event.value === null)
return;

17
src/components/schedule-tabs/schedule-tabs-other/schedule-tabs-other.component.html
View File

@ -1,31 +1,34 @@
<!--suppress CssInvalidPropertyValue -->
<button mat-button [matMenuTriggerFor]="menu" #menuTrigger="matMenuTrigger" [id]="idButton">{{ buttonText }}</button>
<button mat-button [matMenuTriggerFor]="menu" #menuTrigger="matMenuTrigger" [id]="idButton">{{ textButton }}</button>
<mat-menu #menu="matMenu" [hasBackdrop]="false" class="menu-options">
<div (click)="$event.stopPropagation()" (keydown)="$event.stopPropagation()" style="padding: 0 15px 15px">
<div class="header-menu">
<mat-form-field appearance="outline" color="accent" style="display:flex;">
<input matInput placeholder="Поиск..." [(ngModel)]="searchQuery" [disabled]="data.length === 0">
<button mat-icon-button matSuffix (click)="clearSearch()" [disabled]="data.length === 0">
<button mat-icon-button matSuffix (click)="clearSearchQuery()" [disabled]="data.length === 0">
<mat-icon style="color: var(--mdc-filled-button-label-text-color);">close</mat-icon>
</button>
</mat-form-field>
<div class="button-group">
<mat-checkbox (click)="selectData()" [disabled]="data.length === 0" #chooseCheckbox/>
<mat-checkbox (click)="checkData()" [disabled]="data.length === 0" #chooseCheckbox/>
<button mat-button (click)="clearAll()" [disabled]="data.length === 0">Очистить</button>
</div>
<hr/>
</div>
@if (data.length === 0) {
<app-data-spinner style="display: flex; justify-content: center;"/>
<app-loading-indicator style="display: flex; justify-content: center;" [loading]="dataLoaded !== null"
(retryFunction)="retryLoadData.emit()"/>
} @else {
<mat-selection-list>
@if (filteredData.value.length !== 0) {
<cdk-virtual-scroll-viewport autosize [minBufferPx]="300" [maxBufferPx]="500" style="height: 250px; width: 260px; overflow-x: clip;">
<cdk-virtual-scroll-viewport autosize [minBufferPx]="300" [maxBufferPx]="500"
style="height: 250px; width: 260px; overflow-x: clip;">
<div *cdkVirtualFor="let item of filteredData">
<mat-list-option togglePosition="before" style="height: auto;" [value]="item.id" [selected]="item.selected"
(click)="selectChange(item.id)">
<mat-list-option togglePosition="before" style="height: auto;" [value]="item.id"
[selected]="item.selected"
(click)="checkboxStateChange(item.id)">
<div style="text-wrap: balance;">{{ item.name }}</div>
</mat-list-option>
<mat-divider style="margin: 10px 0;"/>

21
src/components/schedule-tabs/schedule-tabs-other/schedule-tabs-other.component.ts
View File

@ -1,4 +1,4 @@
import {Component, HostListener, Input, ViewChild} from '@angular/core';
import {Component, EventEmitter, HostListener, Input, Output, ViewChild} from '@angular/core';
import {MatMenu, MatMenuTrigger} from "@angular/material/menu";
import {MatCheckbox} from "@angular/material/checkbox";
import {BehaviorSubject} from "rxjs";
@ -6,12 +6,12 @@ import {MatButton, MatIconButton} from "@angular/material/button";
import {MatFormField, MatSuffix} from "@angular/material/form-field";
import {MatIcon} from "@angular/material/icon";
import {FormsModule} from "@angular/forms";
import {DataSpinnerComponent} from "@component/data-spinner/data-spinner.component";
import {MatListOption, MatSelectionList} from "@angular/material/list";
import {ScrollingModule} from "@angular/cdk/scrolling";
import {ScrollingModule as ExperimentalScrollingModule} from '@angular/cdk-experimental/scrolling';
import {MatDivider} from "@angular/material/divider";
import {MatInput} from "@angular/material/input";
import {LoadingIndicatorComponent} from "@component/loading-indicator/loading-indicator.component";
export interface SelectData {
id: number,
@ -30,7 +30,6 @@ export interface SelectData {
MatIcon,
FormsModule,
MatCheckbox,
DataSpinnerComponent,
MatSelectionList,
MatListOption,
MatDivider,
@ -38,7 +37,8 @@ export interface SelectData {
MatInput,
MatSuffix,
ScrollingModule,
ExperimentalScrollingModule
ExperimentalScrollingModule,
LoadingIndicatorComponent
],
templateUrl: './schedule-tabs-other.component.html',
styleUrl: './schedule-tabs-other.component.css'
@ -49,10 +49,13 @@ export class ScheduleTabsOtherComponent {
protected data: SelectData[] = [];
@Input() idButton!: string;
@Input() buttonText!: string;
@Input() textButton!: string;
@ViewChild('menuTrigger') menuTrigger!: MatMenuTrigger;
@ViewChild('chooseCheckbox') chooseCheckbox!: MatCheckbox;
@Input() dataLoaded: boolean | null = false;
@Output() retryLoadData: EventEmitter<void> = new EventEmitter<void>();
get selectedIds(): number[] {
return this.data.filter(x => x.selected).map(x => x.id);
}
@ -60,7 +63,7 @@ export class ScheduleTabsOtherComponent {
set Data(data: SelectData[]) {
this.data = data;
this.data.forEach(x => x.selected = false);
this.filteredData.next(this.data)
this.filteredData.next(this.data);
}
protected get searchQuery(): string {
@ -83,7 +86,7 @@ export class ScheduleTabsOtherComponent {
));
}
protected clearSearch(): void {
protected clearSearchQuery(): void {
this.searchQuery = '';
}
@ -101,7 +104,7 @@ export class ScheduleTabsOtherComponent {
this.updateCheckBox();
}
protected selectData() {
protected checkData() {
const check: boolean = this.filteredData.value.some(x => !x.selected) && !this.filteredData.value.every(x => x.selected);
const updatedData = this.filteredData.value.map(data => {
@ -113,7 +116,7 @@ export class ScheduleTabsOtherComponent {
this.updateCheckBox();
}
selectChange(item: number) {
protected checkboxStateChange(item: number) {
const data = this.data.find(x => x.id === item)!;
data.selected = !data.selected;
const updatedData = this.filteredData.value;

8
src/components/schedule-tabs/schedule-tabs-professor/schedule-tabs-professor.component.html
View File

@ -1,13 +1,13 @@
<div class="search-content">
@if (teachers.length === 0) {
<app-data-spinner/>
@if (professors.length === 0) {
<app-loading-indicator [loading]="professorsLoaded !== null" (retryFunction)="professorsLoadRetry.emit()"/>
} @else {
<mat-form-field color="accent" style="width: 100%;">
<input type="text" placeholder="Поиск..." matInput [formControl]="teacherControl" [matAutocomplete]="auto">
<input type="text" placeholder="Поиск..." matInput [formControl]="professorControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="onOptionSelected($event)"
[autoActiveFirstOption]="false" [hideSingleSelectionIndicator]="true">
@for (option of filteredTeachers | async; track option) {
@for (option of filteredProfessors | async; track option) {
<mat-option [value]="option.id">
{{ option.name }}
</mat-option>

29
src/components/schedule-tabs/schedule-tabs-professor/schedule-tabs-professor.component.ts
View File

@ -3,9 +3,9 @@ import {MatFormField, MatInput} from "@angular/material/input";
import {FormControl, ReactiveFormsModule} from "@angular/forms";
import {MatAutocompleteModule, MatAutocompleteSelectedEvent} from "@angular/material/autocomplete";
import {AsyncPipe} from "@angular/common";
import {DataSpinnerComponent} from "@component/data-spinner/data-spinner.component";
import {map, Observable, startWith} from "rxjs";
import {ProfessorResponse} from "@model/professorResponse";
import {LoadingIndicatorComponent} from "@component/loading-indicator/loading-indicator.component";
@Component({
selector: 'app-schedule-tabs-professor',
@ -13,43 +13,46 @@ import {ProfessorResponse} from "@model/professorResponse";
imports: [
MatAutocompleteModule,
MatFormField,
DataSpinnerComponent,
AsyncPipe,
ReactiveFormsModule,
MatInput
MatInput,
LoadingIndicatorComponent
],
templateUrl: './schedule-tabs-professor.component.html',
styleUrl: './schedule-tabs-professor.component.css'
})
export class ScheduleTabsProfessorComponent implements OnInit {
protected teacherControl = new FormControl();
protected filteredTeachers!: Observable<ProfessorResponse[]>;
protected professorControl = new FormControl();
protected filteredProfessors!: Observable<ProfessorResponse[]>;
@Input() teachers: ProfessorResponse[] = [];
@Input() professors: ProfessorResponse[] = [];
@Output() professorSelected = new EventEmitter<number>();
@Input() professorsLoaded: boolean | null = false;
@Output() professorsLoadRetry: EventEmitter<void> = new EventEmitter<void>();
ngOnInit(): void {
this.filteredTeachers = this.teacherControl.valueChanges.pipe(
this.filteredProfessors = this.professorControl.valueChanges.pipe(
startWith(''),
map(value => this._filterTeachers(value))
map(value => this._filterProfessors(value))
);
}
private _filterTeachers(value: string | number): ProfessorResponse[] {
private _filterProfessors(value: string | number): ProfessorResponse[] {
if (typeof value === 'string') {
if (value === '') return [];
const filterValue = value.toLowerCase();
return this.teachers.filter(teacher => teacher.name.toLowerCase().includes(filterValue));
return this.professors.filter(teacher => teacher.name.toLowerCase().includes(filterValue));
} else {
const selectedTeacher = this.teachers.find(teacher => teacher.id === value);
const selectedTeacher = this.professors.find(teacher => teacher.id === value);
return selectedTeacher ? [selectedTeacher] : [];
}
}
protected onOptionSelected(event: MatAutocompleteSelectedEvent) {
const selectedOption = this.teachers.find(teacher => teacher.id === event.option.value);
const selectedOption = this.professors.find(teacher => teacher.id === event.option.value);
if (selectedOption) {
this.teacherControl.setValue(selectedOption.name);
this.professorControl.setValue(selectedOption.name);
this.professorSelected.emit(selectedOption.id);
}
}