Fix key navigation bug in accelerator dashboard
This commit is contained in:
		
							parent
							
								
									3dbbc83077
								
							
						
					
					
						commit
						4723ca88ec
					
				| @ -50,18 +50,39 @@ export class AccelerationsListComponent implements OnInit, OnDestroy { | |||||||
|     if (!this.widget) { |     if (!this.widget) { | ||||||
|       this.websocketService.want(['blocks']); |       this.websocketService.want(['blocks']); | ||||||
|       this.seoService.setTitle($localize`:@@02573b6980a2d611b4361a2595a4447e390058cd:Accelerations`); |       this.seoService.setTitle($localize`:@@02573b6980a2d611b4361a2595a4447e390058cd:Accelerations`); | ||||||
|  | 
 | ||||||
|  |       this.paramSubscription = this.route.params.pipe( | ||||||
|  |         tap(params => { | ||||||
|  |           this.page = +params['page'] || 1; | ||||||
|  |           this.pageSubject.next(this.page); | ||||||
|  |         }) | ||||||
|  |       ).subscribe(); | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  |       this.keyNavigationSubscription = this.stateService.keyNavigation$.pipe( | ||||||
|  |         tap((event) => { | ||||||
|  |           const prevKey = this.dir === 'ltr' ? 'ArrowLeft' : 'ArrowRight'; | ||||||
|  |           const nextKey = this.dir === 'ltr' ? 'ArrowRight' : 'ArrowLeft'; | ||||||
|  |           if (event.key === prevKey && this.page > 1) { | ||||||
|  |             this.page--; | ||||||
|  |             this.isLoading = true; | ||||||
|  |             this.cd.markForCheck(); | ||||||
|  |           } | ||||||
|  |           if (event.key === nextKey && this.page * 15 < this.accelerationCount) { | ||||||
|  |             this.page++; | ||||||
|  |             this.isLoading = true; | ||||||
|  |             this.cd.markForCheck(); | ||||||
|  |           } | ||||||
|  |         }), | ||||||
|  |         throttleTime(1000, undefined, { leading: true, trailing: true }), | ||||||
|  |       ).subscribe(() => { | ||||||
|  |         this.pageChange(this.page); | ||||||
|  |       }); | ||||||
|     } |     } | ||||||
| 
 | 
 | ||||||
|     this.skeletonLines = this.widget === true ? [...Array(6).keys()] : [...Array(15).keys()]; |     this.skeletonLines = this.widget === true ? [...Array(6).keys()] : [...Array(15).keys()]; | ||||||
|     this.paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 3 : 5; |     this.paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 3 : 5; | ||||||
| 
 | 
 | ||||||
|     this.paramSubscription = this.route.params.pipe( |  | ||||||
|       tap(params => { |  | ||||||
|         this.page = +params['page'] || 1; |  | ||||||
|         this.pageSubject.next(this.page); |  | ||||||
|       }) |  | ||||||
|     ).subscribe(); |  | ||||||
| 
 |  | ||||||
|     this.accelerationList$ = this.pageSubject.pipe( |     this.accelerationList$ = this.pageSubject.pipe( | ||||||
|       switchMap((page) => { |       switchMap((page) => { | ||||||
|         this.isLoading = true; |         this.isLoading = true; | ||||||
| @ -100,26 +121,6 @@ export class AccelerationsListComponent implements OnInit, OnDestroy { | |||||||
|         ); |         ); | ||||||
|       }) |       }) | ||||||
|     ); |     ); | ||||||
| 
 |  | ||||||
|     this.keyNavigationSubscription = this.stateService.keyNavigation$.pipe( |  | ||||||
|       tap((event) => { |  | ||||||
|         const prevKey = this.dir === 'ltr' ? 'ArrowLeft' : 'ArrowRight'; |  | ||||||
|         const nextKey = this.dir === 'ltr' ? 'ArrowRight' : 'ArrowLeft'; |  | ||||||
|         if (event.key === prevKey && this.page > 1) { |  | ||||||
|           this.page--; |  | ||||||
|           this.isLoading = true; |  | ||||||
|           this.cd.markForCheck(); |  | ||||||
|         } |  | ||||||
|         if (event.key === nextKey && this.page * 15 < this.accelerationCount) { |  | ||||||
|           this.page++; |  | ||||||
|           this.isLoading = true; |  | ||||||
|           this.cd.markForCheck(); |  | ||||||
|         } |  | ||||||
|       }), |  | ||||||
|       throttleTime(1000, undefined, { leading: true, trailing: true }), |  | ||||||
|     ).subscribe(() => { |  | ||||||
|       this.pageChange(this.page); |  | ||||||
|     }); |  | ||||||
|   } |   } | ||||||
| 
 | 
 | ||||||
|   pageChange(page: number): void { |   pageChange(page: number): void { | ||||||
|  | |||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user