From 8577404fe85ace89bcaf621ab6fa8d7bc6c82191 Mon Sep 17 00:00:00 2001 From: Florian Eisenmenger Date: Thu, 6 Jun 2024 17:18:14 +0200 Subject: [PATCH] loader --- .../_components/paging/paging.component.html | 3 ++- .../_components/paging/paging.component.ts | 20 +++++++++++++++---- .../_helpers/loading-interceptor.service.ts | 14 ++++--------- matsen-tool/src/app/app.module.ts | 3 ++- matsen-tool/src/assets/scss/_basics.scss | 4 +++- 5 files changed, 27 insertions(+), 17 deletions(-) diff --git a/matsen-tool/src/app/_components/paging/paging.component.html b/matsen-tool/src/app/_components/paging/paging.component.html index d81e167..c6029d9 100644 --- a/matsen-tool/src/app/_components/paging/paging.component.html +++ b/matsen-tool/src/app/_components/paging/paging.component.html @@ -15,6 +15,7 @@ showFirstLastButtons> +{{loading}}
{{'form.no-data' | translate}}
@@ -27,4 +28,4 @@ showFirstLastButtons>
- + diff --git a/matsen-tool/src/app/_components/paging/paging.component.ts b/matsen-tool/src/app/_components/paging/paging.component.ts index ca316b5..4ffbf53 100644 --- a/matsen-tool/src/app/_components/paging/paging.component.ts +++ b/matsen-tool/src/app/_components/paging/paging.component.ts @@ -1,7 +1,8 @@ import {ChangeDetectorRef, Component, Input, OnInit, ViewChild} from '@angular/core'; import {MatPaginator, MatPaginatorIntl, PageEvent} from "@angular/material/paginator"; import {FormBuilder, FormGroup} from "@angular/forms"; -import {debounceTime, distinctUntilChanged} from "rxjs"; +import {debounceTime, distinctUntilChanged, Subscription} from "rxjs"; +import {LoadingService} from "@app/_services/loading.service"; @Component({ selector: 'app-paging', @@ -25,17 +26,28 @@ export class PagingComponent implements OnInit { public pageEvent: PageEvent; protected pageIndex: number; public searchForm!: FormGroup; + public loadingSub: Subscription; + public loading: boolean; constructor( - private fb: FormBuilder + private fb: FormBuilder, + private loadingService: LoadingService ) { this.dataLength = 0; this.pageEvent = new PageEvent(); this.pageIndex = 0; this.searchable = false; + this.loadingSub = new Subscription(); + this.loading = false; } ngOnInit() { + this.loadingSub = this.loadingService.getLoading().subscribe( + loading => { + this.loading = loading; + console.log(this.loading); + } + ); this.pageSize = this.pageSize !== undefined ? this.pageSize : this.defaultPageSize; this.pageSizeOptions = this.pageSizeOptions !== undefined ? this.pageSizeOptions : this.defaultPageSizeOptions; this.paginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype); @@ -45,8 +57,8 @@ export class PagingComponent implements OnInit { inputText: [''] }); this.searchForm.get('inputText')?.valueChanges.pipe( - debounceTime(1000), // Warte 2 Sekunden - distinctUntilChanged() // Nur bei Änderungen auslösen + debounceTime(1000), + distinctUntilChanged() ).subscribe(value => { this.getData() }); diff --git a/matsen-tool/src/app/_helpers/loading-interceptor.service.ts b/matsen-tool/src/app/_helpers/loading-interceptor.service.ts index 8e06418..fd8432b 100644 --- a/matsen-tool/src/app/_helpers/loading-interceptor.service.ts +++ b/matsen-tool/src/app/_helpers/loading-interceptor.service.ts @@ -1,6 +1,6 @@ import { Injectable } from '@angular/core'; import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http'; -import {Observable, tap} from 'rxjs'; +import {finalize, Observable, tap} from 'rxjs'; import { environment } from '@environments/environment'; import { AccountService } from '@app/_services'; @@ -17,15 +17,9 @@ export class LoadingInterceptor implements HttpInterceptor { this.loadingService.setLoading(true); return next.handle(request).pipe( - tap({ - next: event => { - this.loadingService.setLoading(false); - }, - error: error => { - this.loadingService.setLoading(false); - } - } - ) + finalize(() => { + this.loadingService.setLoading(false); + }) ); } } \ No newline at end of file diff --git a/matsen-tool/src/app/app.module.ts b/matsen-tool/src/app/app.module.ts index a81d2ad..d6d32e7 100644 --- a/matsen-tool/src/app/app.module.ts +++ b/matsen-tool/src/app/app.module.ts @@ -63,6 +63,7 @@ import { UserDetailComponent } from './_views/user/user-detail/user-detail.compo import { UserListComponent } from './_views/user/user-list/user-list.component'; import { AssignProductComponent } from './_views/products/assign-product/assign-product.component'; import { LinkedLabelComponent } from './_components/linked-label/linked-label.component'; +import {LoadingInterceptor} from "@app/_helpers/loading-interceptor.service"; export function apiConfigFactory(): Configuration { @@ -154,7 +155,7 @@ export function HttpLoaderFactory(http: HttpClient) { {provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true}, {provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true}, {provide: HTTP_INTERCEPTORS, useClass: PropertyInterceptor, multi: true}, - + {provide: HTTP_INTERCEPTORS, useClass: LoadingInterceptor, multi: true}, ], bootstrap: [AppComponent] }) diff --git a/matsen-tool/src/assets/scss/_basics.scss b/matsen-tool/src/assets/scss/_basics.scss index c5327d1..a0c644e 100644 --- a/matsen-tool/src/assets/scss/_basics.scss +++ b/matsen-tool/src/assets/scss/_basics.scss @@ -262,7 +262,9 @@ img { margin: 35px auto 0; border: 1px solid #FFF; border-radius: 0 0 50px 50px; - position: relative; + position: fixed; + left: 50%; + top: 50%; box-shadow: 0px 0px #FF3D00 inset; background-image: linear-gradient(#FF3D00 100px, transparent 0); background-position: 0px 0px;