From 9d5c174009b6417f7a681484b04aac88008a15ed Mon Sep 17 00:00:00 2001 From: Matthijs Smets Date: Tue, 3 Dec 2024 12:17:31 +0100 Subject: [PATCH] feat: loading progress spinner --- src/app/debug/table/table.component.html | 4 ++- src/app/debug/table/table.component.ts | 9 +++---- .../loading-spinner.component.css | 5 ++++ .../loading-spinner.component.html | 5 ++++ .../loading-spinner.component.spec.ts | 22 ++++++++++++++++ .../loading-spinner.component.ts | 10 ++++++++ src/app/test/test.component.html | 15 ++++++----- src/app/test/test.component.ts | 25 ++++++++++--------- 8 files changed, 70 insertions(+), 25 deletions(-) create mode 100644 src/app/shared/components/loading-spinner/loading-spinner.component.css create mode 100644 src/app/shared/components/loading-spinner/loading-spinner.component.html create mode 100644 src/app/shared/components/loading-spinner/loading-spinner.component.spec.ts create mode 100644 src/app/shared/components/loading-spinner/loading-spinner.component.ts diff --git a/src/app/debug/table/table.component.html b/src/app/debug/table/table.component.html index 4716ff11..9439477e 100644 --- a/src/app/debug/table/table.component.html +++ b/src/app/debug/table/table.component.html @@ -103,7 +103,7 @@ } } - + @if (hasTimedOut) {

[One or more reports are in progress for more @@ -161,6 +161,8 @@

[One or more reports are in progress for mor +} @else { + } diff --git a/src/app/debug/table/table.component.ts b/src/app/debug/table/table.component.ts index 7a44beb7..d04fb777 100644 --- a/src/app/debug/table/table.component.ts +++ b/src/app/debug/table/table.component.ts @@ -11,9 +11,7 @@ import { TabService } from '../../shared/services/tab.service'; import { FilterService } from '../filter-side-drawer/filter.service'; import { ReportData } from '../../shared/interfaces/report-data'; import { TableCellShortenerPipe } from '../../shared/pipes/table-cell-shortener.pipe'; -import { ToastComponent } from '../../shared/components/toast/toast.component'; import { MatSort, MatSortModule } from '@angular/material/sort'; -import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { ActiveFiltersComponent } from '../active-filters/active-filters.component'; import { FormControl, FormsModule, ReactiveFormsModule, ValidatorFn, Validators } from '@angular/forms'; import { @@ -24,7 +22,7 @@ import { NgbDropdownToggle, } from '@ng-bootstrap/ng-bootstrap'; import { FilterSideDrawerComponent } from '../filter-side-drawer/filter-side-drawer.component'; -import { KeyValuePipe, NgClass } from '@angular/common'; +import { NgClass } from '@angular/common'; import { MatTableDataSource, MatTableModule } from '@angular/material/table'; import { View } from '../../shared/interfaces/view'; import { OptionsSettings } from '../../shared/interfaces/options-settings'; @@ -34,6 +32,7 @@ import { DebugTabService } from '../debug-tab.service'; import { ViewDropdownComponent } from '../../shared/components/view-dropdown/view-dropdown.component'; import { DeleteModalComponent } from '../../shared/components/delete-modal/delete-modal.component'; import { RefreshCondition } from '../../shared/interfaces/refresh-condition'; +import { LoadingSpinnerComponent } from '../../shared/components/loading-spinner/loading-spinner.component'; @Component({ selector: 'app-table', @@ -50,16 +49,14 @@ import { RefreshCondition } from '../../shared/interfaces/refresh-condition'; ReactiveFormsModule, FormsModule, ActiveFiltersComponent, - MatProgressSpinnerModule, MatSortModule, NgClass, TableSettingsModalComponent, - ToastComponent, - KeyValuePipe, TableCellShortenerPipe, MatTableModule, ViewDropdownComponent, DeleteModalComponent, + LoadingSpinnerComponent, ], }) export class TableComponent implements OnInit, OnDestroy { diff --git a/src/app/shared/components/loading-spinner/loading-spinner.component.css b/src/app/shared/components/loading-spinner/loading-spinner.component.css new file mode 100644 index 00000000..ef79e785 --- /dev/null +++ b/src/app/shared/components/loading-spinner/loading-spinner.component.css @@ -0,0 +1,5 @@ +.loading-spinner { + color: #fdc300; + width: 3rem; + height: 3rem; +} diff --git a/src/app/shared/components/loading-spinner/loading-spinner.component.html b/src/app/shared/components/loading-spinner/loading-spinner.component.html new file mode 100644 index 00000000..3f72d40f --- /dev/null +++ b/src/app/shared/components/loading-spinner/loading-spinner.component.html @@ -0,0 +1,5 @@ +
+ +
diff --git a/src/app/shared/components/loading-spinner/loading-spinner.component.spec.ts b/src/app/shared/components/loading-spinner/loading-spinner.component.spec.ts new file mode 100644 index 00000000..24d148f9 --- /dev/null +++ b/src/app/shared/components/loading-spinner/loading-spinner.component.spec.ts @@ -0,0 +1,22 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LoadingSpinnerComponent } from './loading-spinner.component'; + +describe('LoadingSpinnerComponent', () => { + let component: LoadingSpinnerComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [LoadingSpinnerComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(LoadingSpinnerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/components/loading-spinner/loading-spinner.component.ts b/src/app/shared/components/loading-spinner/loading-spinner.component.ts new file mode 100644 index 00000000..f7a2016c --- /dev/null +++ b/src/app/shared/components/loading-spinner/loading-spinner.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-loading-spinner', + standalone: true, + imports: [], + templateUrl: './loading-spinner.component.html', + styleUrl: './loading-spinner.component.css', +}) +export class LoadingSpinnerComponent {} diff --git a/src/app/test/test.component.html b/src/app/test/test.component.html index 983b39ab..f8ee20b0 100644 --- a/src/app/test/test.component.html +++ b/src/app/test/test.component.html @@ -1,4 +1,4 @@ -
+
@@ -35,11 +35,14 @@

Generator is {{ generatorEnabled|booleanToString: 'enabled':'disabled' }}

- - - + @if (loading) { + + } @else { + + + }
diff --git a/src/app/test/test.component.ts b/src/app/test/test.component.ts index 4bac08bc..e1c9de29 100644 --- a/src/app/test/test.component.ts +++ b/src/app/test/test.component.ts @@ -10,7 +10,6 @@ import { HelperService } from '../shared/services/helper.service'; import { ToastService } from '../shared/services/toast.service'; import { UpdatePathSettings } from '../shared/interfaces/update-path-settings'; import { TestFolderTreeComponent } from './test-folder-tree/test-folder-tree.component'; -import { ToastComponent } from '../shared/components/toast/toast.component'; import { FormsModule, NgModel, ReactiveFormsModule } from '@angular/forms'; import { TestListItem } from '../shared/interfaces/test-list-item'; import { OptionsSettings } from '../shared/interfaces/options-settings'; @@ -20,6 +19,7 @@ import { HttpErrorResponse } from '@angular/common/http'; import { TestReportsService } from './test-reports.service'; import { TestTableComponent } from './test-table/test-table.component'; import { DeleteModalComponent } from '../shared/components/delete-modal/delete-modal.component'; +import { LoadingSpinnerComponent } from '../shared/components/loading-spinner/loading-spinner.component'; export const updatePathActionConst = ['move', 'copy'] as const; export type UpdatePathAction = (typeof updatePathActionConst)[number]; @@ -33,12 +33,12 @@ export type UpdatePathAction = (typeof updatePathActionConst)[number]; TestFolderTreeComponent, ReactiveFormsModule, FormsModule, - ToastComponent, TestSettingsModalComponent, CloneModalComponent, BooleanToStringPipe, DeleteModalComponent, TestTableComponent, + LoadingSpinnerComponent, ], }) export class TestComponent implements OnInit, OnDestroy { @@ -48,18 +48,18 @@ export class TestComponent implements OnInit, OnDestroy { protected filteredReports: TestListItem[] = []; protected generatorEnabled: boolean = false; protected currentFilter: string = ''; + protected loading: boolean = true; + protected showStorageIds?: boolean; - private updatePathAction: UpdatePathAction = 'move'; - @ViewChild(CloneModalComponent) cloneModal!: CloneModalComponent; - @ViewChild(TestSettingsModalComponent) - testSettingsModal!: TestSettingsModalComponent; - @ViewChild(DeleteModalComponent) deleteModal!: DeleteModalComponent; - @ViewChild(TestFolderTreeComponent) - testFileTreeComponent!: TestFolderTreeComponent; - @ViewChild('moveToInput', { read: NgModel }) moveToInputModel!: NgModel; - @ViewChild(TestTableComponent) testTableComponent!: TestTableComponent; + @ViewChild(CloneModalComponent) protected cloneModal!: CloneModalComponent; + @ViewChild(TestSettingsModalComponent) protected testSettingsModal!: TestSettingsModalComponent; + @ViewChild(DeleteModalComponent) protected deleteModal!: DeleteModalComponent; + @ViewChild(TestFolderTreeComponent) protected testFileTreeComponent!: TestFolderTreeComponent; + @ViewChild('moveToInput', { read: NgModel }) protected moveToInputModel!: NgModel; + @ViewChild(TestTableComponent) protected testTableComponent!: TestTableComponent; + private updatePathAction: UpdatePathAction = 'move'; private testReportServiceSubscription?: Subscription; constructor( @@ -108,6 +108,7 @@ export class TestComponent implements OnInit, OnDestroy { } loadData(path?: string): void { + this.loading = true; if (path && path.endsWith('/')) { path = path.slice(0, -1); } @@ -119,8 +120,8 @@ export class TestComponent implements OnInit, OnDestroy { this.testFileTreeComponent.tree.selectItem(path ?? this.testFileTreeComponent.rootFolder.name); } this.matches(); + this.loading = false; }, - error: () => catchError(this.errorHandler.handleError()), }); this.testReportsService.getReports(); }