fix file upload spinner

goofy-client/libs/ui/src/lib/ui/file-upload/file-upload.component.html

+<ng-container *ngIf="uploadInProgress$ | async as uploadInProgress">
 	<input data-test-id="file-upload-input"
 			[id]="myId" type="file" [accept]="accept"
 			(change)="onFileChanged($event)">
 	<label [attr.for]="myId" matRipple aria-label="attachment icon">
-	<mat-icon>attach_file</mat-icon>
+		<mat-icon *ngIf="!uploadInProgress.loading">attach_file</mat-icon>
+
+		<goofy-client-spinner
+				[stateResource]="uploadInProgress"
+				[diameter]="22"
+				padding="0">
+		</goofy-client-spinner>
 	</label>
+</ng-container>

goofy-client/libs/ui/src/lib/ui/file-upload/file-upload.component.scss

@@ -3,6 +3,7 @@ $size: 40px;
 :host {
 	margin: 4px 0;
 	display: block;
+	position: relative;
 }
 
 input {
@@ -27,3 +28,19 @@ label:hover,
 :host:focus-within label {
 	background-color: rgba(#000, 0.16);
 }
+
+[disabled] {
+	background-color: rgba(#000, 0.08);
+}
+
+goofy-client-spinner {
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: flex;
+	height: 100%;
+	width: 100%;
+	justify-content: center;
+	align-items: center;
+	pointer-events: none;
+}

goofy-client/libs/ui/src/lib/ui/file-upload/file-upload.component.spec.ts

@@ -2,6 +2,8 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { FileUploadComponent } from './file-upload.component';
 import { MatIcon } from '@angular/material/icon';
+import { MockComponent } from 'ng-mocks';
+import { SpinnerComponent } from '@goofy-client/ui';
 
 describe('FileUploadComponent', () => {
   let component: FileUploadComponent;
@@ -11,7 +13,8 @@ describe('FileUploadComponent', () => {
     await TestBed.configureTestingModule({
       declarations: [
       	FileUploadComponent,
-				MatIcon
+				MatIcon,
+				MockComponent(SpinnerComponent)
 			]
     })
     .compileComponents();

goofy-client/libs/ui/src/lib/ui/file-upload/file-upload.component.ts

 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { uniqueId } from 'lodash-es';
+import { Observable } from 'rxjs';
+import { StateResource } from '@goofy-client/tech-shared';
 
 @Component({
 	selector: 'goofy-client-file-upload',
@@ -8,6 +10,7 @@ import { uniqueId } from 'lodash-es';
 })
 export class FileUploadComponent {
 	@Input() accept: string = '*/*';
+	@Input() uploadInProgress$: Observable<StateResource<any>>;
 
 	@Output() fileChanged: EventEmitter<File> = new EventEmitter();
 

goofy-client/libs/wiedervorlage/src/lib/wiedervorlage-attachments/wiedervorlage-attachments.component.html

@@ -9,6 +9,7 @@
 	</goofy-client-spinner>
 </ng-container>
 
-<goofy-client-spinner [stateResource]="uploadInProgress$ | async">
-	<goofy-client-file-upload (fileChanged)="uploadFile($event)" data-test-id="wiedervorlage-file-upload"></goofy-client-file-upload>
-</goofy-client-spinner>
+<goofy-client-file-upload data-test-id="wiedervorlage-file-upload"
+		(fileChanged)="uploadFile($event)"
+		[uploadInProgress$]="uploadInProgress$">
+</goofy-client-file-upload>