From a2d9afd29f0852eb5fe8dcbb6b419ade568a40ab Mon Sep 17 00:00:00 2001
From: OZGCloud <ozgcloud@mgm-tp.com>
Date: Thu, 1 Jul 2021 09:58:39 +0200
Subject: [PATCH] fix file upload spinner
---
.../ui/file-upload/file-upload.component.html | 20 +++++++++++++------
.../ui/file-upload/file-upload.component.scss | 17 ++++++++++++++++
.../file-upload/file-upload.component.spec.ts | 5 ++++-
.../ui/file-upload/file-upload.component.ts | 3 +++
.../wiedervorlage-attachments.component.html | 15 +++++++-------
5 files changed, 46 insertions(+), 14 deletions(-)
diff --git a/goofy-client/libs/ui/src/lib/ui/file-upload/file-upload.component.html b/goofy-client/libs/ui/src/lib/ui/file-upload/file-upload.component.html
index f62ed59ecc..78af6beee7 100644
--- a/goofy-client/libs/ui/src/lib/ui/file-upload/file-upload.component.html
+++ b/goofy-client/libs/ui/src/lib/ui/file-upload/file-upload.component.html
@@ -1,6 +1,14 @@
-<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>
-</label>
+<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 *ngIf="!uploadInProgress.loading">attach_file</mat-icon>
+
+ <goofy-client-spinner
+ [stateResource]="uploadInProgress"
+ [diameter]="22"
+ padding="0">
+ </goofy-client-spinner>
+ </label>
+</ng-container>
diff --git a/goofy-client/libs/ui/src/lib/ui/file-upload/file-upload.component.scss b/goofy-client/libs/ui/src/lib/ui/file-upload/file-upload.component.scss
index 9917b0cb76..4f6ab900dd 100644
--- a/goofy-client/libs/ui/src/lib/ui/file-upload/file-upload.component.scss
+++ b/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;
+}
diff --git a/goofy-client/libs/ui/src/lib/ui/file-upload/file-upload.component.spec.ts b/goofy-client/libs/ui/src/lib/ui/file-upload/file-upload.component.spec.ts
index 3b0aeee377..6af2d2fefb 100644
--- a/goofy-client/libs/ui/src/lib/ui/file-upload/file-upload.component.spec.ts
+++ b/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();
diff --git a/goofy-client/libs/ui/src/lib/ui/file-upload/file-upload.component.ts b/goofy-client/libs/ui/src/lib/ui/file-upload/file-upload.component.ts
index 9249f5d9b4..eb96f4ba1f 100644
--- a/goofy-client/libs/ui/src/lib/ui/file-upload/file-upload.component.ts
+++ b/goofy-client/libs/ui/src/lib/ui/file-upload/file-upload.component.ts
@@ -1,5 +1,7 @@
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();
diff --git a/goofy-client/libs/wiedervorlage/src/lib/wiedervorlage-attachments/wiedervorlage-attachments.component.html b/goofy-client/libs/wiedervorlage/src/lib/wiedervorlage-attachments/wiedervorlage-attachments.component.html
index 25bdd7df19..e4e8f11d9e 100644
--- a/goofy-client/libs/wiedervorlage/src/lib/wiedervorlage-attachments/wiedervorlage-attachments.component.html
+++ b/goofy-client/libs/wiedervorlage/src/lib/wiedervorlage-attachments/wiedervorlage-attachments.component.html
@@ -1,14 +1,15 @@
<ng-container *ngIf="attachments$ | async as attachmentStateResource">
<goofy-client-spinner [stateResource]="attachmentStateResource">
-
+
<goofy-client-anhang-list-in-wiedervorlage data-test-id="wiedervorlage-attachment-list"
- [attachments]="attachmentStateResource.resource" [deletable]="true"
- (deleteAttachment)="deleteAttachment($event)">
+ [attachments]="attachmentStateResource.resource" [deletable]="true"
+ (deleteAttachment)="deleteAttachment($event)">
</goofy-client-anhang-list-in-wiedervorlage>
- </goofy-client-spinner>
+ </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>
--
GitLab