1import { Component, DoCheck } from '@angular/core'; 2import { MatButtonModule } from '@angular/material/button'; 3import { MatDividerModule } from '@angular/material/divider'; 4import { MatIconModule } from '@angular/material/icon'; 5import { MatProgressBarModule } from '@angular/material/progress-bar'; 6import { MatToolbarModule } from '@angular/material/toolbar'; 7import { RouterOutlet } from '@angular/router'; 8import { finalize } from 'rxjs'; 9 10import { MotionGolden } from './golden'; 11import { GoldensService } from './goldens.service'; 12import { TestOverviewComponent } from './test-overview/test-overview.component'; 13import { ProgressTracker } from '../utils/progress'; 14 15@Component({ 16 selector: 'app-root', 17 standalone: true, 18 imports: [ 19 RouterOutlet, 20 MatToolbarModule, 21 TestOverviewComponent, 22 MatIconModule, 23 MatDividerModule, 24 MatButtonModule, 25 MatDividerModule, 26 MatProgressBarModule, 27 ], 28 templateUrl: './app.component.html', 29 styleUrl: './app.component.scss', 30}) 31export class AppComponent implements DoCheck { 32 constructor( 33 private goldenService: GoldensService, 34 private progressTracker: ProgressTracker, 35 ) {} 36 37 ngDoCheck() { 38 this.showProgress = this.progressTracker.isActive; 39 } 40 41 goldens: MotionGolden[] = []; 42 43 showProgress = false; 44 45 ngOnInit(): void { 46 this.fetchGoldens(); 47 } 48 49 fetchGoldens(): void { 50 this.progressTracker.beginProgress(); 51 this.goldenService 52 .getGoldens() 53 .pipe(finalize(() => this.progressTracker.endProgress())) 54 .subscribe((goldens) => (this.goldens = goldens)); 55 } 56 57 refreshGoldens(clear: boolean): void { 58 this.progressTracker.beginProgress(); 59 this.goldenService 60 .refreshGoldens(clear) 61 .pipe(finalize(() => this.progressTracker.endProgress())) 62 .subscribe((goldens) => (this.goldens = goldens)); 63 } 64} 65