diff --git a/goofy-client/libs/ui/src/lib/ui/spinner/spinner.component.scss b/goofy-client/libs/ui/src/lib/ui/spinner/spinner.component.scss index 17a7465a2b74d8dc4b776c71ec01e25d3bec7dc1..2b2b68f49baa425465f34e5b63561d9576f7ccbb 100644 --- a/goofy-client/libs/ui/src/lib/ui/spinner/spinner.component.scss +++ b/goofy-client/libs/ui/src/lib/ui/spinner/spinner.component.scss @@ -1,3 +1,7 @@ mat-spinner { margin: auto; } + +p { + color: #999; +} diff --git a/goofy-client/libs/ui/src/lib/ui/spinner/spinner.component.spec.ts b/goofy-client/libs/ui/src/lib/ui/spinner/spinner.component.spec.ts index 28cef749514487c4e9fa3029c7af30298674be0f..b01492538994adc72f84867baa3822fd0c8cd6da 100644 --- a/goofy-client/libs/ui/src/lib/ui/spinner/spinner.component.spec.ts +++ b/goofy-client/libs/ui/src/lib/ui/spinner/spinner.component.spec.ts @@ -1,37 +1,28 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { MatIcon } from '@angular/material/icon'; import { MatSpinner } from '@angular/material/progress-spinner'; -import { createEmptyStateResource, StateResource } from '@goofy-client/tech-shared'; +import { createEmptyStateResource } from '@goofy-client/tech-shared'; import { SpinnerComponent } from './spinner.component'; -import { Component } from '@angular/core'; - -@Component({ - template: `<goofy-client-spinner [stateResource]="stateResource"></goofy-client-spinner>`, -}) -export class TestWrapperComponent { - stateResource: StateResource<any> = createEmptyStateResource(); -} describe('SpinnerComponent', () => { - let component: TestWrapperComponent; - let fixture: ComponentFixture<TestWrapperComponent>; + let component: SpinnerComponent; + let fixture: ComponentFixture<SpinnerComponent>; const spinnerSelector = '[data-test-class="spinner"]' beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [ SpinnerComponent, - TestWrapperComponent, MatIcon, MatSpinner - ] - }) - .compileComponents(); + ], + }).compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(TestWrapperComponent); + fixture = TestBed.createComponent(SpinnerComponent); component = fixture.componentInstance; + fixture.detectChanges(); }); @@ -58,4 +49,27 @@ describe('SpinnerComponent', () => { expect(spinner).toBeInstanceOf(HTMLElement); }); }); + + describe('loaded spinner', () => { + beforeEach(() => { + component.showWhileLoaded = true; + fixture.detectChanges(); + }) + + it('should NOT be visible if NOT loaded', () => { + const spinner = fixture.nativeElement.querySelector(spinnerSelector); + + expect(spinner).not.toBeInstanceOf(HTMLElement); + }) + + it('should be visible if loaded', () => { + component.showWhileLoaded = true; + component.stateResource = { ...createEmptyStateResource(), loaded: true }; + fixture.detectChanges(); + + const spinner = fixture.nativeElement.querySelector(spinnerSelector); + + expect(spinner).toBeInstanceOf(HTMLElement); + }); + }); }); diff --git a/goofy-client/libs/ui/src/lib/ui/spinner/spinner.component.ts b/goofy-client/libs/ui/src/lib/ui/spinner/spinner.component.ts index 3eac7ab37daff2e9219242881957dc7e866049ca..f3af5240da3901c7dc1536cee6158e4874da9ffd 100644 --- a/goofy-client/libs/ui/src/lib/ui/spinner/spinner.component.ts +++ b/goofy-client/libs/ui/src/lib/ui/spinner/spinner.component.ts @@ -6,7 +6,7 @@ import { createEmptyStateResource, StateResource } from '@goofy-client/tech-shar templateUrl: './spinner.component.html', styleUrls: ['./spinner.component.scss'] }) -export class SpinnerComponent implements OnChanges { +export class SpinnerComponent { @Input() stateResource: StateResource<any> = createEmptyStateResource(); @Input() diameter: number = 70; @@ -14,12 +14,10 @@ export class SpinnerComponent implements OnChanges { @Input() text: string; @Input() showWhileLoaded: boolean; - showSpinner: boolean; - - ngOnChanges(changes: SimpleChanges) { - if (changes.stateResource) { - if (this.showWhileLoaded) this.showSpinner = this.stateResource.loaded; - else this.showSpinner = this.stateResource.loading; - } + get showSpinner(): boolean { + console.log(this.showWhileLoaded) + if (this.showWhileLoaded) return this.stateResource.loaded && this.stateResource.resource; + return this.stateResource.loading; } } + diff --git a/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-redirect/vorgang-redirect.component.html b/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-redirect/vorgang-redirect.component.html index bec2b14d092b5509b64bbccf60697ef492f066d1..03407597d099c48ff3224e5aaa03807761c9f513 100644 --- a/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-redirect/vorgang-redirect.component.html +++ b/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-redirect/vorgang-redirect.component.html @@ -1,6 +1,10 @@ <ng-container *ngIf="redirectStateResource$ | async as redirectStateResource"> - <goofy-client-spinner [stateResource]="redirectStateResource" [showWhileLoaded]="true" text="Vorgang wird weitergeleitet"> + <goofy-client-spinner + [stateResource]="redirectStateResource" + [showWhileLoaded]="true" + padding="0" + text="Vorgang wird weitergeleitet"> <form class="form" [formGroup]="formService.form" (submit)="submit()"> <goofy-client-text-editor diff --git a/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-redirect/vorgang-redirect.component.scss b/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-redirect/vorgang-redirect.component.scss index 9a78a6e424425d0d92a32aa29e3f741aadf8c831..1e53852bad540fecd45eb8be4ed38b772e7d93ed 100644 --- a/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-redirect/vorgang-redirect.component.scss +++ b/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-redirect/vorgang-redirect.component.scss @@ -1,9 +1,12 @@ +:host { + width: 100%; + max-width: 320px; + display: block; +} + .form { display: flex; flex-direction: column; - position: relative; - max-width: 320px; - width: 100%; ::ng-deep { mat-form-field { @@ -12,16 +15,8 @@ } } -.spinner { - display: inline-flex; - flex-direction: column; - align-items: center; - - .mat-spinner { - margin: 8px; - } - - p { - color: #999; +goofy-client-spinner { + ::ng-deep .spinner { + text-align: center; } }