OZG-5977 set loading on multi upload button

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" />

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);
     });
   });
 });

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();
   }