diff --git a/alfa-client/libs/binary-file/src/lib/multi-file-upload-editor/multi-file-upload-editor.component.html b/alfa-client/libs/binary-file/src/lib/multi-file-upload-editor/multi-file-upload-editor.component.html index 4bb9d09a52d824d83d6501a8c8c5513d855e81ae..c88dc5e129136ca2ee8944c2e2ac00e35b376c4a 100644 --- a/alfa-client/libs/binary-file/src/lib/multi-file-upload-editor/multi-file-upload-editor.component.html +++ b/alfa-client/libs/binary-file/src/lib/multi-file-upload-editor/multi-file-upload-editor.component.html @@ -28,7 +28,7 @@ [accept]="accept" [attr.data-test-id]="(label | convertForDataTest) + '-file-upload-button'" [multi]="true" - [isLoading]="false" + [isLoading]="isUploadInProgress$ | async" class="relative w-72" > <ods-spinner-icon spinner size="medium" /> diff --git a/alfa-client/libs/binary-file/src/lib/multi-file-upload-editor/multi-file-upload-editor.component.spec.ts b/alfa-client/libs/binary-file/src/lib/multi-file-upload-editor/multi-file-upload-editor.component.spec.ts index eb07b93279f1fe6c1117ced655d9ed18a2090463..d853b3ad0fd85a2daa60ba004191273b9ff7740d 100644 --- a/alfa-client/libs/binary-file/src/lib/multi-file-upload-editor/multi-file-upload-editor.component.spec.ts +++ b/alfa-client/libs/binary-file/src/lib/multi-file-upload-editor/multi-file-upload-editor.component.spec.ts @@ -30,7 +30,9 @@ import { getUrl, Resource } from '@ngxp/rest'; import { FileUploadButtonComponent, SpinnerIconComponent } from '@ods/system'; import { getDataTestIdOf } from 'libs/tech-shared/test/data-test'; import { MockComponent } from 'ng-mocks'; +import { of } from 'rxjs'; import { createFileList } from '../../../../tech-shared/test/file'; +import { singleColdCompleted } from '../../../../tech-shared/test/marbles'; import { createDummyResource } from '../../../../tech-shared/test/resource'; import { MultiFileUploadEditorComponent } from './multi-file-upload-editor.component'; @@ -49,6 +51,15 @@ describe('MultiFileUploadEditorComponent', () => { binaryFileService = mock(BinaryFileService); }); + function createComponent(): void { + fixture = TestBed.createComponent(MultiFileUploadEditorComponent); + component = fixture.componentInstance; + component.uploadResource = uploadResource; + component.uploadLinkRelation = uploadLinkRel; + component.label = 'Ein Label'; + fixture.detectChanges(); + } + beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [ @@ -64,15 +75,8 @@ describe('MultiFileUploadEditorComponent', () => { }, ], }).compileComponents(); - }); - beforeEach(() => { - fixture = TestBed.createComponent(MultiFileUploadEditorComponent); - component = fixture.componentInstance; - component.uploadResource = uploadResource; - component.uploadLinkRelation = uploadLinkRel; - component.label = 'Ein Label'; - fixture.detectChanges(); + createComponent(); }); describe('component', () => { @@ -80,6 +84,14 @@ describe('MultiFileUploadEditorComponent', () => { expect(component).toBeTruthy(); }); + it('should set initial values', () => { + binaryFileService.isUploadInProgress = jest.fn().mockReturnValue(of(true)); + + createComponent(); + + expect(component.isUploadInProgress$).toBeObservable(singleColdCompleted(true)); + }); + describe('onFilesUpload', () => { beforeEach(() => { component._uploadFiles = jest.fn(); @@ -122,12 +134,14 @@ describe('MultiFileUploadEditorComponent', () => { }); it('should have inputs', () => { + binaryFileService.isUploadInProgress = jest.fn().mockReturnValue(of(true)); + createComponent(); const fileButtonComponent: FileUploadButtonComponent = getElementComponentFromFixtureByCss(fixture, buttonTestId); expect(fileButtonComponent.id).toEqual(component.uploadButtonId); expect(fileButtonComponent.accept).toEqual(component.accept); expect(fileButtonComponent.multi).toEqual(true); - expect(fileButtonComponent.isLoading).toEqual(false); + expect(fileButtonComponent.isLoading).toEqual(true); }); }); }); diff --git a/alfa-client/libs/binary-file/src/lib/multi-file-upload-editor/multi-file-upload-editor.component.ts b/alfa-client/libs/binary-file/src/lib/multi-file-upload-editor/multi-file-upload-editor.component.ts index 4a8b5683a078d328bd8cd6b86f8613852585a055..e7cb960516dfb8f92fa7d35b7780e908a02ad01b 100644 --- a/alfa-client/libs/binary-file/src/lib/multi-file-upload-editor/multi-file-upload-editor.component.ts +++ b/alfa-client/libs/binary-file/src/lib/multi-file-upload-editor/multi-file-upload-editor.component.ts @@ -23,13 +23,16 @@ */ import { BinaryFileModule } from '@alfa-client/binary-file'; import { BinaryFileService, FileUploadType } from '@alfa-client/binary-file-shared'; +import { KOMMENTAR_UPLOADED_ATTACHMENTS } from '@alfa-client/kommentar-shared'; import { TechSharedModule } from '@alfa-client/tech-shared'; +import { AsyncPipe } from '@angular/common'; import { Component, HostListener, inject, Input } from '@angular/core'; import { ControlContainer, FormGroupDirective, ReactiveFormsModule } from '@angular/forms'; import { getUrl, Resource } from '@ngxp/rest'; import { FormControlEditorAbstractComponent } from '@ods/component'; import { AttachmentIconComponent, FileUploadButtonComponent, SpinnerIconComponent } from '@ods/system'; import { uniqueId } from 'lodash-es'; +import { Observable } from 'rxjs'; @Component({ selector: 'ods-multi-file-upload-editor', @@ -43,6 +46,7 @@ import { uniqueId } from 'lodash-es'; ReactiveFormsModule, TechSharedModule, BinaryFileModule, + AsyncPipe, ], }) export class MultiFileUploadEditorComponent extends FormControlEditorAbstractComponent { @@ -54,9 +58,13 @@ export class MultiFileUploadEditorComponent extends FormControlEditorAbstractCom private readonly binaryFileService: BinaryFileService = inject(BinaryFileService); + public isUploadInProgress$: Observable<boolean> = this.binaryFileService.isUploadInProgress(KOMMENTAR_UPLOADED_ATTACHMENTS); + public readonly uploadButtonId: string = uniqueId(); - @HostListener('change', ['$event.target.files']) onFilesUpload(fileList: FileList): void { + @HostListener('change', ['$event.target.files']) + public onFilesUpload(fileList: FileList): void { + this.binaryFileService.isUploadInProgress(KOMMENTAR_UPLOADED_ATTACHMENTS).subscribe(console.info); this._uploadFiles(fileList); this.setErrors(); }