OZG-5977 extract single multi file upload comp

alfa-client/libs/binary-file/src/lib/multi-file-upload/multi-file-upload.component.html

+<ods-file-upload-list-container
+  [parentFormArrayName]="filesFormFieldName"
+  [fileUploadType]="fileUploadType"
+  [filesResource]="filesResource"
+  [filesLinkRel]="filesLinkRelation"
+  data-test-id="multi-file-upload-list"
+></ods-file-upload-list-container>
+<ods-multi-file-upload-editor
+  [fileUploadType]="fileUploadType"
+  [uploadResource]="uploadResource"
+  [uploadLinkRelation]="uploadLinkRelation"
+  data-test-id="multi-file-upload-editor"
+></ods-multi-file-upload-editor>
\ No newline at end of file

alfa-client/libs/binary-file/src/lib/multi-file-upload/multi-file-upload.component.spec.ts

+import { FileUploadListContainerComponent, MultiFileUploadEditorComponent } from '@alfa-client/binary-file';
+import { FileUploadType } from '@alfa-client/binary-file-shared';
+import { existsAsHtmlElement, getElementComponentFromFixtureByCss } from '@alfa-client/test-utils';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { faker } from '@faker-js/faker/.';
+import { expect } from '@jest/globals';
+import { Resource } from '@ngxp/rest';
+import { MockComponent } from 'ng-mocks';
+import { getDataTestIdOf } from '../../../../tech-shared/test/data-test';
+import { DummyLinkRel } from '../../../../tech-shared/test/dummy';
+import { createDummyResource } from '../../../../tech-shared/test/resource';
+import { MultiFileUploadComponent } from './multi-file-upload.component';
+
+describe('OdsMultiFileUploadComponent', () => {
+  let component: MultiFileUploadComponent;
+  let fixture: ComponentFixture<MultiFileUploadComponent>;
+
+  const fileUploadListTestId: string = getDataTestIdOf('multi-file-upload-list');
+  const fileUploadEditorTestId: string = getDataTestIdOf('multi-file-upload-editor');
+
+  const fileUploadType: FileUploadType = faker.word.noun();
+  const uploadLinkRel: string = DummyLinkRel.DUMMY;
+  const uploadResource: Resource = createDummyResource();
+  const filesLinkRel: string = DummyLinkRel.DUMMY;
+  const filesResource: Resource = createDummyResource();
+  const formFieldsName: string = faker.word.noun();
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MultiFileUploadComponent],
+      declarations: [MockComponent(MultiFileUploadEditorComponent), MockComponent(FileUploadListContainerComponent)],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MultiFileUploadComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('template', () => {
+    beforeEach(() => {
+      component.filesFormFieldName = formFieldsName;
+      component.fileUploadType = fileUploadType;
+      component.uploadResource = uploadResource;
+      component.uploadLinkRelation = uploadLinkRel;
+      component.filesResource = filesResource;
+      component.filesLinkRelation = filesLinkRel;
+    });
+
+    describe('file upload list', () => {
+      it('should exists', () => {
+        existsAsHtmlElement(fixture, fileUploadListTestId);
+      });
+
+      it('should have inputs', () => {
+        fixture.detectChanges();
+
+        const fileUploadListComponent: FileUploadListContainerComponent = getElementComponentFromFixtureByCss(
+          fixture,
+          fileUploadListTestId,
+        );
+
+        expect(fileUploadListComponent.parentFormArrayName).toEqual(formFieldsName);
+        expect(fileUploadListComponent.fileUploadType).toEqual(fileUploadType);
+        expect(fileUploadListComponent.filesResource).toEqual(filesResource);
+        expect(fileUploadListComponent.filesLinkRel).toEqual(filesLinkRel);
+      });
+    });
+
+    describe('file upload editor', () => {
+      it('should exists', () => {
+        existsAsHtmlElement(fixture, fileUploadEditorTestId);
+      });
+
+      it('should have inputs', () => {
+        fixture.detectChanges();
+
+        const fileUploadEditorComponent: MultiFileUploadEditorComponent = getElementComponentFromFixtureByCss(
+          fixture,
+          fileUploadEditorTestId,
+        );
+
+        expect(fileUploadEditorComponent.fileUploadType).toEqual(fileUploadType);
+        expect(fileUploadEditorComponent.uploadResource).toEqual(uploadResource);
+        expect(fileUploadEditorComponent.uploadLinkRelation).toEqual(uploadLinkRel);
+      });
+    });
+  });
+});

alfa-client/libs/binary-file/src/lib/multi-file-upload/multi-file-upload.component.ts

+import { FileUploadListContainerComponent, MultiFileUploadEditorComponent } from '@alfa-client/binary-file';
+import { FileUploadType } from '@alfa-client/binary-file-shared';
+import { Component, Input } from '@angular/core';
+import { Resource } from '@ngxp/rest';
+import { BinaryFileListOrientation } from '../directive/binary-file-list-orientation/binary-file-list-orientation.directive';
+
+@Component({
+  selector: 'ods-multi-file-upload',
+  standalone: true,
+  templateUrl: './multi-file-upload.component.html',
+  imports: [FileUploadListContainerComponent, MultiFileUploadEditorComponent],
+})
+export class MultiFileUploadComponent {
+  @Input({ required: true }) filesFormFieldName: string;
+  @Input({ required: true }) fileUploadType: FileUploadType;
+  @Input({ required: true }) uploadResource: Resource;
+  @Input({ required: true }) uploadLinkRelation: string;
+  @Input({ required: true }) filesResource: Resource;
+  @Input({ required: true }) filesLinkRelation: string;
+  @Input() listOrientation: BinaryFileListOrientation = BinaryFileListOrientation.HORIZONTAL;
+}

alfa-client/libs/kommentar/src/lib/kommentar-list-in-vorgang-container/kommentar-form/kommentar-form.component.html

@@ -27,19 +27,14 @@
   <ozgcloud-textarea-editor [formControlName]="formServiceClass.TEXT" label="Kommentar" [required]="true">
   </ozgcloud-textarea-editor>
 
-  <ods-file-upload-list-container
-    [parentFormArrayName]="formServiceClass.FIELD_ATTACHMENTS"
-    [fileUploadType]="KOMMENTAR_UPLOADED_ATTACHMENTS"
-    [filesResource]="kommentar"
-    [filesLinkRel]="KommentarLinkRel.ATTACHMENTS"
-    data-test-id="kommentar-file-upload-list"
-  ></ods-file-upload-list-container>
-  <ods-multi-file-upload-editor
+  <ods-multi-file-upload
+      [filesFormFieldName]="formServiceClass.FIELD_ATTACHMENTS"
       [fileUploadType]="KOMMENTAR_UPLOADED_ATTACHMENTS"
       [uploadResource]="kommentarListStateResource.resource"
       [uploadLinkRelation]="kommentarListLinkRel.UPLOAD_FILE"
-    data-test-id="kommentar-multi-file-upload-editor"
-  ></ods-multi-file-upload-editor>
+      [filesResource]="kommentar"
+      [filesLinkRelation]="KommentarLinkRel.ATTACHMENTS"
+  ></ods-multi-file-upload>
 
   <div class="buttons">
     <ozgcloud-stroked-button-with-spinner

alfa-client/libs/kommentar/src/lib/kommentar-list-in-vorgang-container/kommentar-form/kommentar-form.component.spec.ts

@@ -21,11 +21,11 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { BinaryFileAttachmentContainerComponent, FileUploadListContainerComponent, MultiFileUploadEditorComponent, } from '@alfa-client/binary-file';
+import { BinaryFileAttachmentContainerComponent } from '@alfa-client/binary-file';
 import { CommandResource } from '@alfa-client/command-shared';
-import { KOMMENTAR_UPLOADED_ATTACHMENTS, KommentarLinkRel, KommentarListLinkRel, KommentarListResource, KommentarService, } from '@alfa-client/kommentar-shared';
+import { KommentarLinkRel, KommentarListResource, KommentarService } from '@alfa-client/kommentar-shared';
 import { createEmptyStateResource, createErrorStateResource, createStateResource, StateResource } from '@alfa-client/tech-shared';
-import { existsAsHtmlElement, getElementComponentFromFixtureByCss, Mock, mock, triggerEvent, useFromMock, } from '@alfa-client/test-utils';
+import { existsAsHtmlElement, Mock, mock, triggerEvent, useFromMock } from '@alfa-client/test-utils';
 import { OzgcloudStrokedButtonWithSpinnerComponent, TextAreaEditorComponent } from '@alfa-client/ui';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
@@ -34,6 +34,7 @@ import { expect } from '@jest/globals';
 import { MockComponent } from 'ng-mocks';
 import { EMPTY, of } from 'rxjs';
 import { createBinaryFileListResource } from '../../../../../binary-file-shared/test/binary-file';
+import { MultiFileUploadComponent } from '../../../../../binary-file/src/lib/multi-file-upload/multi-file-upload.component';
 import { createSuccessfullyDoneCommandStateResource } from '../../../../../command-shared/test/command';
 import { createKommentarListResource, createKommentarResource } from '../../../../../kommentar-shared/test/kommentar';
 import { getDataTestIdOf } from '../../../../../tech-shared/test/data-test';
@@ -47,8 +48,6 @@ describe('KommentarFormComponent', () => {
   let fixture: ComponentFixture<KommentarFormComponent>;
 
   const cancelButtonTestId: string = getDataTestIdOf('cancel-button');
-  const fileUploadListTestId: string = getDataTestIdOf('kommentar-file-upload-list');
-  const fileUploadEditorTestId: string = getDataTestIdOf('kommentar-multi-file-upload-editor');
 
   const kommentarListStateResource: StateResource<KommentarListResource> = createStateResource(createKommentarListResource());
 
@@ -67,8 +66,7 @@ describe('KommentarFormComponent', () => {
         MockComponent(TextAreaEditorComponent),
         MockComponent(OzgcloudStrokedButtonWithSpinnerComponent),
         MockComponent(BinaryFileAttachmentContainerComponent),
-        MockComponent(FileUploadListContainerComponent),
-        MockComponent(MultiFileUploadEditorComponent),
+        MockComponent(MultiFileUploadComponent),
       ],
       imports: [MatFormFieldModule, ReactiveFormsModule],
       providers: [
@@ -198,43 +196,6 @@ describe('KommentarFormComponent', () => {
   });
 
   describe('template', () => {
-    describe('file upload list', () => {
-      it('should exists', () => {
-        existsAsHtmlElement(fixture, fileUploadListTestId);
-      });
-
-      it('should have inputs', () => {
-        fixture.detectChanges();
-
-        const fileUploadListComponent: FileUploadListContainerComponent = getElementComponentFromFixtureByCss(
-          fixture,
-          fileUploadListTestId,
-        );
-
-        expect(fileUploadListComponent.parentFormArrayName).toEqual(KommentarFormService.FIELD_ATTACHMENTS);
-        expect(fileUploadListComponent.fileUploadType).toEqual(KOMMENTAR_UPLOADED_ATTACHMENTS);
-      });
-    });
-
-    describe('file upload editor', () => {
-      it('should exists', () => {
-        existsAsHtmlElement(fixture, fileUploadEditorTestId);
-      });
-
-      it('should have inputs', () => {
-        fixture.detectChanges();
-
-        const fileUploadEditorComponent: MultiFileUploadEditorComponent = getElementComponentFromFixtureByCss(
-          fixture,
-          fileUploadEditorTestId,
-        );
-
-        expect(fileUploadEditorComponent.fileUploadType).toEqual(KOMMENTAR_UPLOADED_ATTACHMENTS);
-        expect(fileUploadEditorComponent.uploadResource).toEqual(component.kommentarListStateResource.resource);
-        expect(fileUploadEditorComponent.uploadLinkRelation).toEqual(KommentarListLinkRel.UPLOAD_FILE);
-      });
-    });
-
     describe('cancel button', () => {
       it('should exists', () => {
         existsAsHtmlElement(fixture, cancelButtonTestId);

alfa-client/libs/kommentar/src/lib/kommentar.module.ts

@@ -32,6 +32,7 @@ import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { FileUploadListContainerComponent } from '../../../binary-file/src/lib/file-upload-list-container/file-upload-list-container.component';
 import { MultiFileUploadEditorComponent } from '../../../binary-file/src/lib/multi-file-upload-editor/multi-file-upload-editor.component';
+import { MultiFileUploadComponent } from '../../../binary-file/src/lib/multi-file-upload/multi-file-upload.component';
 import { KommentarFormComponent } from './kommentar-list-in-vorgang-container/kommentar-form/kommentar-form.component';
 import { KommentarListInVorgangContainerComponent } from './kommentar-list-in-vorgang-container/kommentar-list-in-vorgang-container.component';
 import { KommentarListInVorgangComponent } from './kommentar-list-in-vorgang-container/kommentar-list-in-vorgang/kommentar-list-in-vorgang.component';
@@ -46,6 +47,7 @@ import { KommentarListItemInVorgangComponent } from './kommentar-list-in-vorgang
     BinaryFileModule,
     MultiFileUploadEditorComponent,
     FileUploadListContainerComponent,
+    MultiFileUploadComponent,
     ReactiveFormsModule,
     TextAreaEditorComponent,
     OzgcloudStrokedButtonWithSpinnerComponent,

alfa-client/libs/wiedervorlage/src/lib/submit-wiedervorlage-button/submit-wiedervorlage-button.component.spec.ts

@@ -89,7 +89,7 @@ describe('SubmitWiedervorlageButtonComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  describe('_navigateIfCommandIsDone', () => {
+  describe('navigate if command is done', () => {
     it('should navigate on success', () => {
       component._navigateIfCommandIsDone(commandWithError);
 

alfa-client/libs/wiedervorlage/src/lib/wiedervorlage-page-container/wiedervorlage-page/wiedervorlage-form/wiedervorlage-form.component.html

@@ -45,19 +45,14 @@
   >
   </ozgcloud-date-editor>
 
-  <ods-file-upload-list-container
-    [parentFormArrayName]="formServiceClass.FIELD_ATTACHMENTS"
-    [fileUploadType]="WIEDERVORLAGE_UPLOADED_ATTACHMENTS"
-    [filesResource]="wiedervorlage"
-    [filesLinkRel]="WiedervorlageLinkRel.ATTACHMENTS"
-    data-test-id="wiedervorlage-file-upload-list"
-  ></ods-file-upload-list-container>
-  <ods-multi-file-upload-editor
+  <ods-multi-file-upload
+    [filesFormFieldName]="formServiceClass.FIELD_ATTACHMENTS"
     [fileUploadType]="WIEDERVORLAGE_UPLOADED_ATTACHMENTS"
     [uploadResource]="wiedervorlageListStateResource.resource"
     [uploadLinkRelation]="WiedervorlageListLinkRel.UPLOAD_FILE"
-    data-test-id="wiedervorlage-file-upload-editor"
-  ></ods-multi-file-upload-editor>
+    [filesResource]="wiedervorlage"
+    [filesLinkRelation]="WiedervorlageLinkRel.ATTACHMENTS"
+  ></ods-multi-file-upload>
 
   <alfa-submit-wiedervorlage-button class="submit-button"></alfa-submit-wiedervorlage-button>
 </form>

alfa-client/libs/wiedervorlage/src/lib/wiedervorlage-page-container/wiedervorlage-page/wiedervorlage-form/wiedervorlage-form.component.spec.ts

@@ -21,7 +21,7 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { BinaryFileAttachmentContainerComponent, FileUploadListContainerComponent, MultiFileUploadEditorComponent, } from '@alfa-client/binary-file';
+import { BinaryFileAttachmentContainerComponent } from '@alfa-client/binary-file';
 import { createStateResource, StateResource } from '@alfa-client/tech-shared';
 import { Mock, mock, useFromMock } from '@alfa-client/test-utils';
 import { DateEditorComponent, OzgcloudTextEditorComponent, TextAreaEditorComponent } from '@alfa-client/ui';
@@ -31,6 +31,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule, UntypedFormBuilder } from '@angular/forms';
 import { createWiedervorlageListResource, createWiedervorlageResource } from 'libs/wiedervorlage-shared/test/wiedervorlage';
 import { MockComponent } from 'ng-mocks';
+import { MultiFileUploadComponent } from '../../../../../../binary-file/src/lib/multi-file-upload/multi-file-upload.component';
 import { SubmitWiedervorlageButtonComponent } from '../../../submit-wiedervorlage-button/submit-wiedervorlage-button.component';
 import { WiedervorlageFormComponent } from './wiedervorlage-form.component';
 import { WiedervorlageFormService } from './wiedervorlage.formservice';
@@ -55,8 +56,7 @@ describe('WiedervorlageFormComponent', () => {
         MockComponent(TextAreaEditorComponent),
         MockComponent(BinaryFileAttachmentContainerComponent),
         MockComponent(SubmitWiedervorlageButtonComponent),
-        MockComponent(MultiFileUploadEditorComponent),
-        MockComponent(FileUploadListContainerComponent),
+        MockComponent(MultiFileUploadComponent),
       ],
       imports: [ReactiveFormsModule],
       providers: [

alfa-client/libs/wiedervorlage/src/lib/wiedervorlage-page-container/wiedervorlage-page/wiedervorlage-form/wiedervorlage-form.component.ts

@@ -21,6 +21,7 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
+import { KOMMENTAR_UPLOADED_ATTACHMENTS, KommentarLinkRel, KommentarListLinkRel } from '@alfa-client/kommentar-shared';
 import { isNotNil, StateResource } from '@alfa-client/tech-shared';
 import { WIEDERVORLAGE_UPLOADED_ATTACHMENTS, WiedervorlageLinkRel, WiedervorlageListLinkRel, WiedervorlageListResource, WiedervorlageResource, } from '@alfa-client/wiedervorlage-shared';
 import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
@@ -55,4 +56,8 @@ export class WiedervorlageFormComponent implements OnChanges {
       this.formService.patch(this.wiedervorlage);
     }
   }
+
+  protected readonly KOMMENTAR_UPLOADED_ATTACHMENTS = KOMMENTAR_UPLOADED_ATTACHMENTS;
+  protected readonly kommentarListLinkRel = KommentarListLinkRel;
+  protected readonly KommentarLinkRel = KommentarLinkRel;
 }

alfa-client/libs/wiedervorlage/src/lib/wiedervorlage.module.ts

@@ -21,7 +21,7 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { BinaryFileModule, FileUploadListContainerComponent, MultiFileUploadEditorComponent } from '@alfa-client/binary-file';
+import { BinaryFileModule } from '@alfa-client/binary-file';
 import { ConvertForDataTestPipe, FormatToPrettyDatePipe, HasLinkPipe, ToEmbeddedResourcesPipe, ToResourceUriPipe, ToTrafficLightPipe, ToTrafficLightTooltipPipe, } from '@alfa-client/tech-shared';
 import { BackButtonComponent, DateEditorComponent, ExpansionPanelComponent, IconButtonWithSpinnerComponent, OzgcloudStrokedButtonWithSpinnerComponent, OzgcloudTextEditorComponent, SpinnerComponent, SubnavigationComponent, TextAreaEditorComponent, } from '@alfa-client/ui';
 import { UserProfileModule } from '@alfa-client/user-profile';
@@ -35,6 +35,7 @@ import { MatTooltip } from '@angular/material/tooltip';
 import { RouterModule, Routes } from '@angular/router';
 import { ButtonWithSpinnerComponent } from '@ods/component';
 import { CheckCircleIconComponent, PlusIconComponent, SaveIconComponent, TooltipDirective, UpdateIconComponent, } from '@ods/system';
+import { MultiFileUploadComponent } from '../../../binary-file/src/lib/multi-file-upload/multi-file-upload.component';
 import { CreateWiedervorlageButtonContainerComponent } from './create-wiedervorlage-button-container/create-wiedervorlage-button-container.component';
 import { ErledigenButtonContainerComponent } from './erledigen-button-container/erledigen-button-container.component';
 import { SubmitWiedervorlageButtonComponent } from './submit-wiedervorlage-button/submit-wiedervorlage-button.component';
@@ -96,8 +97,7 @@ const routes: Routes = [
     PlusIconComponent,
     CheckCircleIconComponent,
     SaveIconComponent,
-    MultiFileUploadEditorComponent,
-    FileUploadListContainerComponent,
+    MultiFileUploadComponent,
   ],
   declarations: [
     WiedervorlagePageComponent,