Merge branch 'master' into OZG-6101-logout-admin

alfa-client/apps/demo/src/app/app.component.ts

@@ -16,6 +16,7 @@ import {
   FileIconComponent,
   FileUploadButtonComponent,
   InstantSearchComponent,
+  OfficeIconComponent,
   RadioButtonCardComponent,
   SaveIconComponent,
   SendIconComponent,
@@ -54,6 +55,7 @@ import { CustomStepperComponent } from './components/cdk-demo/custom-stepper.com
     RadioButtonCardComponent,
     ReactiveFormsModule,
     InstantSearchComponent,
+    OfficeIconComponent,
     SaveIconComponent,
     SendIconComponent,
     StampIconComponent,

alfa-client/libs/collaboration-shared/src/lib/organisations-einheit.service.spec.ts

 import { StateResource, createStateResource } from '@alfa-client/tech-shared';
 import { Mock, mock, useFromMock } from '@alfa-client/test-utils';
 import faker from '@faker-js/faker';
-import { of } from 'rxjs';
-import { createOrganisationsEinheitListResource } from '../../test/organisations-einheit';
+import { Observable, of } from 'rxjs';
+import { singleColdCompleted } from '../../../tech-shared/test/marbles';
+import {
+  createOrganisationsEinheitListResource,
+  createOrganisationsEinheitResource,
+} from '../../test/organisations-einheit';
 import { OrganisationsEinheitResourceSearchService } from './organisations-einheit-resource-search.service';
-import { OrganisationsEinheitListResource } from './organisations-einheit.model';
+import {
+  OrganisationsEinheitListResource,
+  OrganisationsEinheitResource,
+} from './organisations-einheit.model';
 import { OrganisationsEinheitService } from './organisations-einheit.service';
 
 jest.mock('./organisations-einheit-resource-search.service');
@@ -60,4 +67,39 @@ describe('OrganisationsEinheitService', () => {
       expect(searchService.clearResultList).toHaveBeenCalledWith();
     });
   });
+
+  describe('get selected result', () => {
+    const organisationsEinheitStateResource: StateResource<OrganisationsEinheitResource> =
+      createStateResource(createOrganisationsEinheitResource());
+
+    beforeEach(() => {
+      searchService.getSelectedResult.mockReturnValue(of(organisationsEinheitStateResource));
+    });
+
+    it('should call service', () => {
+      service.getSelectedResult();
+
+      expect(searchService.getSelectedResult).toHaveBeenCalled();
+    });
+
+    it('should return result', () => {
+      const selectedResult$: Observable<StateResource<OrganisationsEinheitResource>> =
+        service.getSelectedResult();
+
+      expect(selectedResult$).toBeObservable(
+        singleColdCompleted(organisationsEinheitStateResource),
+      );
+    });
+  });
+
+  describe('select search result', () => {
+    const organisationsEinheitResource: OrganisationsEinheitResource =
+      createOrganisationsEinheitResource();
+
+    it('should call service', () => {
+      service.selectSearchResult(organisationsEinheitResource);
+
+      expect(searchService.selectResult).toHaveBeenCalledWith(organisationsEinheitResource);
+    });
+  });
 });

alfa-client/libs/collaboration-shared/src/lib/organisations-einheit.service.ts

@@ -2,7 +2,10 @@ import { StateResource } from '@alfa-client/tech-shared';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { OrganisationsEinheitResourceSearchService } from './organisations-einheit-resource-search.service';
-import { OrganisationsEinheitListResource } from './organisations-einheit.model';
+import {
+  OrganisationsEinheitListResource,
+  OrganisationsEinheitResource,
+} from './organisations-einheit.model';
 
 @Injectable()
 export class OrganisationsEinheitService {
@@ -19,4 +22,12 @@ export class OrganisationsEinheitService {
   public clearSearchResult(): void {
     this.searchService.clearResultList();
   }
+
+  public getSelectedResult(): Observable<StateResource<OrganisationsEinheitResource>> {
+    return this.searchService.getSelectedResult();
+  }
+
+  public selectSearchResult(organisationsEinheitResource: OrganisationsEinheitResource): void {
+    this.searchService.selectResult(organisationsEinheitResource);
+  }
 }

alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-in-vorgang-container.component.html

@@ -10,8 +10,8 @@
 </ng-template>
 
 <ng-container *ngIf="isRequestFormVisible$ | async; else anfrageErstellenButton">
-  <alfa-collaboration-request-container
-    data-test-id="collaboration-request-container"
-    (hideRequestForm)="hideRequestForm()"
-  ></alfa-collaboration-request-container>
+  <alfa-collaboration-request-form
+    data-test-id="collaboration-request-form"
+    (hide)="hideRequestForm()"
+  ></alfa-collaboration-request-form>
 </ng-container>

alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-in-vorgang-container.component.spec.ts

@@ -12,14 +12,14 @@ import { getDataTestIdAttributeOf, getDataTestIdOf } from 'libs/tech-shared/test
 import { MockComponent } from 'ng-mocks';
 import { of } from 'rxjs';
 import { CollaborationInVorgangContainerComponent } from './collaboration-in-vorgang-container.component';
-import { CollaborationRequestContainerComponent } from './collaboration-request-container/collaboration-request-container.component';
+import { CollaborationRequestFormComponent } from './collaboration-request-form/collaboration-request-form.component';
 
 describe('CollaborationInVorgangContainerComponent', () => {
   let component: CollaborationInVorgangContainerComponent;
   let fixture: ComponentFixture<CollaborationInVorgangContainerComponent>;
 
   const anfrageErstellenButton: string = getDataTestIdAttributeOf('anfrage-erstellen-button');
-  const collaborationRequestContainer: string = getDataTestIdOf('collaboration-request-container');
+  const collaborationRequestForm: string = getDataTestIdOf('collaboration-request-form');
 
   const service: Mock<CollaborationService> = {
     ...mock(CollaborationService),
@@ -31,7 +31,7 @@ describe('CollaborationInVorgangContainerComponent', () => {
       declarations: [
         CollaborationInVorgangContainerComponent,
         MockComponent(ButtonComponent),
-        MockComponent(CollaborationRequestContainerComponent),
+        MockComponent(CollaborationRequestFormComponent),
         MockComponent(CollaborationIconComponent),
       ],
       providers: [
@@ -97,13 +97,13 @@ describe('CollaborationInVorgangContainerComponent', () => {
       it('should be shown', () => {
         fixture.detectChanges();
 
-        existsAsHtmlElement(fixture, collaborationRequestContainer);
+        existsAsHtmlElement(fixture, collaborationRequestForm);
       });
 
       it('should call service on hideFormular output', () => {
         fixture.detectChanges();
 
-        dispatchEventFromFixture(fixture, collaborationRequestContainer, 'hideRequestForm');
+        dispatchEventFromFixture(fixture, collaborationRequestForm, 'hide');
 
         expect(service.hideRequestForm).toHaveBeenCalled();
       });
@@ -114,7 +114,7 @@ describe('CollaborationInVorgangContainerComponent', () => {
 
       fixture.detectChanges();
 
-      notExistsAsHtmlElement(fixture, collaborationRequestContainer);
+      notExistsAsHtmlElement(fixture, collaborationRequestForm);
     });
   });
 });

alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-container/collaboration-request-container.component.html

-<div class="my-6">
-  <alfa-collaboration-request-form></alfa-collaboration-request-form>
-</div>
-
-<div class="flex items-center gap-6">
-  <ods-button text="Zuarbeit anfragen" dataTestId="collaboration-request-send-button"></ods-button>
-  <ods-button
-    variant="outline"
-    text="Abbrechen"
-    dataTestId="collaboration-request-cancel-button"
-    (clickEmitter)="hideRequestForm.emit()"
-  >
-    <ods-close-icon icon class="fill-primary"></ods-close-icon>
-  </ods-button>
-</div>

alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-container/collaboration-request-container.component.spec.ts

-import { dispatchEventFromFixture } from '@alfa-client/test-utils';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ButtonComponent, CloseIconComponent } from '@ods/system';
-import { getDataTestIdAttributeOf } from 'libs/tech-shared/test/data-test';
-import { MockComponent } from 'ng-mocks';
-import { CollaborationRequestContainerComponent } from './collaboration-request-container.component';
-import { CollaborationRequestFormComponent } from './collaboration-request-form/collaboration-request-form.component';
-
-describe('CollaborationRequestContainerComponent', () => {
-  let component: CollaborationRequestContainerComponent;
-  let fixture: ComponentFixture<CollaborationRequestContainerComponent>;
-
-  const cancelButton: string = getDataTestIdAttributeOf('collaboration-request-cancel-button');
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [
-        CollaborationRequestContainerComponent,
-        MockComponent(ButtonComponent),
-        MockComponent(CloseIconComponent),
-        MockComponent(CollaborationRequestFormComponent),
-      ],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(CollaborationRequestContainerComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  describe('cancel button', () => {
-    it('should emit hideRequestForm', () => {
-      const emitSpy: jest.SpyInstance = (component.hideRequestForm.emit = jest.fn());
-
-      dispatchEventFromFixture(fixture, cancelButton, 'clickEmitter');
-
-      expect(emitSpy).toHaveBeenCalled();
-    });
-  });
-});

alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-container/collaboration-request-container.component.ts

-import { Component, EventEmitter, Output } from '@angular/core';
-
-@Component({
-  selector: 'alfa-collaboration-request-container',
-  templateUrl: './collaboration-request-container.component.html',
-})
-export class CollaborationRequestContainerComponent {
-  @Output() public hideRequestForm: EventEmitter<void> = new EventEmitter<void>();
-}

alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-container/collaboration-request-form/collaboration-request-form.component.html → alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-form/collaboration-request-form.component.html

-<div class="mb-6">
-  <alfa-organisations-einheit-in-collaboration-container></alfa-organisations-einheit-in-collaboration-container>
-</div>
-<form [formGroup]="formService.form" class="flex flex-col gap-2">
+<alfa-organisations-einheit-container
+  [fieldControl]="formService.form.controls.organisationseinheit"
+></alfa-organisations-einheit-container>
+
+<form [formGroup]="formService.form" class="mt-4 flex flex-col gap-2">
   <ods-text-editor
     label="Titel"
     [formControlName]="formServiceClass.FIELD_TITLE"
@@ -13,3 +14,19 @@
     [isRequired]="true"
   ></ods-textarea-editor>
 </form>
+
+<div class="mt-4 flex items-center gap-6">
+  <ods-button
+    text="Zuarbeit anfragen"
+    dataTestId="collaboration-request-send-button"
+    (clickEmitter)="formService.submit()"
+  ></ods-button>
+  <ods-button
+    variant="outline"
+    text="Abbrechen"
+    dataTestId="collaboration-request-cancel-button"
+    (clickEmitter)="hide.emit()"
+  >
+    <ods-close-icon icon class="fill-primary"></ods-close-icon>
+  </ods-button>
+</div>

alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-container/collaboration-request-form/collaboration-request-form.component.spec.ts → alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-form/collaboration-request-form.component.spec.ts

-import { Mock, mock } from '@alfa-client/test-utils';
+import { dispatchEventFromFixture } from '@alfa-client/test-utils';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ReactiveFormsModule } from '@angular/forms';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { TextEditorComponent, TextareaEditorComponent } from '@ods/component';
+import { ButtonComponent, CloseIconComponent } from '@ods/system';
+import { getDataTestIdAttributeOf } from 'libs/tech-shared/test/data-test';
 import { MockComponent } from 'ng-mocks';
-import { OrganisationsEinheitInCollaborationContainerComponent } from '../../../organisations-einheit-in-collaboration-container/organisations-einheit-in-collaboration-container.component';
 import { CollaborationRequestFormComponent } from './collaboration-request-form.component';
 import { CollaborationRequestFormService } from './collaboration.request.formservice';
+import { OrganisationsEinheitContainerComponent } from './organisations-einheit-container/organisations-einheit-container.component';
 
 describe('CollaborationRequestFormComponent', () => {
   let component: CollaborationRequestFormComponent;
   let fixture: ComponentFixture<CollaborationRequestFormComponent>;
 
-  const formService: Mock<CollaborationRequestFormService> = mock(CollaborationRequestFormService);
+  const cancelButton: string = getDataTestIdAttributeOf('collaboration-request-cancel-button');
+
+  const formService: CollaborationRequestFormService = new CollaborationRequestFormService(
+    new FormBuilder(),
+  );
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [ReactiveFormsModule],
       declarations: [
         CollaborationRequestFormComponent,
+        MockComponent(ButtonComponent),
+        MockComponent(CloseIconComponent),
         MockComponent(TextEditorComponent),
         MockComponent(TextareaEditorComponent),
-        MockComponent(OrganisationsEinheitInCollaborationContainerComponent),
+        MockComponent(OrganisationsEinheitContainerComponent),
       ],
       providers: [
         {
@@ -38,4 +46,14 @@ describe('CollaborationRequestFormComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  describe('cancel button', () => {
+    it('should emit hideRequestForm', () => {
+      const emitSpy: jest.SpyInstance = (component.hide.emit = jest.fn());
+
+      dispatchEventFromFixture(fixture, cancelButton, 'clickEmitter');
+
+      expect(emitSpy).toHaveBeenCalled();
+    });
+  });
 });

alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-container/collaboration-request-form/collaboration-request-form.component.ts → alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-form/collaboration-request-form.component.ts

-import { Component } from '@angular/core';
+import { Component, EventEmitter, Output } from '@angular/core';
 import { CollaborationRequestFormService } from './collaboration.request.formservice';
 
 @Component({
@@ -7,6 +7,8 @@ import { CollaborationRequestFormService } from './collaboration.request.formser
   providers: [CollaborationRequestFormService],
 })
 export class CollaborationRequestFormComponent {
+  @Output() public hide: EventEmitter<void> = new EventEmitter<void>();
+
   constructor(readonly formService: CollaborationRequestFormService) {}
 
   public readonly formServiceClass = CollaborationRequestFormService;

alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-container/collaboration-request-form/collaboration.request.formservice.ts → alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-form/collaboration.request.formservice.ts

 import { CommandResource } from '@alfa-client/command-shared';
-import { AbstractFormService, EMPTY_STRING, StateResource } from '@alfa-client/tech-shared';
+import { AbstractFormService, StateResource } from '@alfa-client/tech-shared';
 import { Injectable } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { ResourceUri } from '@ngxp/rest';
 import { Observable, of } from 'rxjs';
 
 @Injectable()
 export class CollaborationRequestFormService extends AbstractFormService {
-  public static readonly FIELD_TITLE = 'titel';
-  public static readonly FIELD_NACHRICHT = 'nachricht';
+  public static readonly FIELD_ORGANISATIONS_EINHEIT: string = 'organisationseinheit';
+  public static readonly FIELD_TITLE: string = 'titel';
+  public static readonly FIELD_NACHRICHT: string = 'nachricht';
 
-  constructor(formBuilder: UntypedFormBuilder) {
+  private static readonly PATH_PREFIX: string = 'command.body';
+
+  constructor(formBuilder: FormBuilder) {
     super(formBuilder);
   }
 
-  protected initForm(): UntypedFormGroup {
+  protected initForm(): FormGroup {
     return this.formBuilder.group({
-      [CollaborationRequestFormService.FIELD_TITLE]: new UntypedFormControl(null),
-      [CollaborationRequestFormService.FIELD_NACHRICHT]: new UntypedFormControl(null),
+      [CollaborationRequestFormService.FIELD_ORGANISATIONS_EINHEIT]: new FormControl<ResourceUri>(
+        null,
+      ),
+      [CollaborationRequestFormService.FIELD_TITLE]: new FormControl<string>(null),
+      [CollaborationRequestFormService.FIELD_NACHRICHT]: new FormControl<string>(null),
     });
   }
 
   protected doSubmit(): Observable<StateResource<CommandResource>> {
+    console.info('FormValue: ', this.getFormValue());
     return of();
   }
 
   protected getPathPrefix(): string {
-    return EMPTY_STRING;
+    return CollaborationRequestFormService.PATH_PREFIX;
   }
 }

alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-form/organisations-einheit-container/organisations-einheit-container.component.html

+<ng-container *ngIf="organisationsEinheitResource; else searchButton">
+  <div class="flex items-center gap-3">
+    <ods-office-icon size="large" class="flex-none" />
+    <alfa-organisations-einheit
+      data-test-id="organisations-einheit-in-collaboration"
+      [organisationsEinheitResource]="organisationsEinheitResource"
+    ></alfa-organisations-einheit>
+  </div>
+</ng-container>
+<ng-template #searchButton>
+  <div class="flex items-center gap-3">
+    <ods-button
+      variant="outline"
+      text="Zuständige Stelle auswählen"
+      data-test-id="organisations-einheit-search-button"
+      (clickEmitter)="openSearchDialog()"
+    >
+      <ods-search-icon icon />
+    </ods-button>
+  </div>
+</ng-template>

alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-form/organisations-einheit-container/organisations-einheit-container.component.spec.ts

+import { OrganisationsEinheitResource } from '@alfa-client/collaboration-shared';
+import {
+  Mock,
+  dispatchEventFromFixture,
+  existsAsHtmlElement,
+  getMockComponent,
+  mock,
+} from '@alfa-client/test-utils';
+import { OzgcloudDialogService } from '@alfa-client/ui';
+import { DialogConfig, DialogRef } from '@angular/cdk/dialog';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormControl } from '@angular/forms';
+import { getUrl } from '@ngxp/rest';
+import { ButtonComponent, OfficeIconComponent } from '@ods/system';
+import { createOrganisationsEinheitResource } from 'libs/collaboration-shared/test/organisations-einheit';
+import { SearchIconComponent } from 'libs/design-system/src/lib/icons/search-icon/search-icon.component';
+import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
+import { MockComponent } from 'ng-mocks';
+import { Subject } from 'rxjs';
+import { SearchOrganisationsEinheitContainerComponent } from '../../../search-organisations-einheit-container/search-organisations-einheit-container.component';
+import { OrganisationsEinheitContainerComponent } from './organisations-einheit-container.component';
+import { OrganisationsEinheitComponent } from './organisations-einheit/organisations-einheit.component';
+
+describe('OrganisationsEinheitContainerComponent', () => {
+  let component: OrganisationsEinheitContainerComponent;
+  let fixture: ComponentFixture<OrganisationsEinheitContainerComponent>;
+
+  const searchOrganisationsEinheit: string = getDataTestIdOf('organisations-einheit-search-button');
+  const organisationsEinheitComp: string = getDataTestIdOf(
+    'organisations-einheit-in-collaboration',
+  );
+
+  const organisationsEinheitResource: OrganisationsEinheitResource =
+    createOrganisationsEinheitResource();
+
+  const dialogService: Mock<OzgcloudDialogService> = mock(OzgcloudDialogService);
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [
+        OrganisationsEinheitContainerComponent,
+        MockComponent(SearchIconComponent),
+        MockComponent(OfficeIconComponent),
+        MockComponent(ButtonComponent),
+        MockComponent(OrganisationsEinheitComponent),
+      ],
+      providers: [
+        {
+          provide: OzgcloudDialogService,
+          useValue: dialogService,
+        },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(OrganisationsEinheitContainerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('search zustaendige stelle button', () => {
+    beforeEach(() => {
+      component.organisationsEinheitResource = undefined;
+    });
+
+    it('should be visible on missing organisationsEinheit', () => {
+      fixture.detectChanges();
+
+      existsAsHtmlElement(fixture, searchOrganisationsEinheit);
+    });
+    it('should call openSearchDialog', () => {
+      component.openSearchDialog = jest.fn();
+
+      fixture.detectChanges();
+      dispatchEventFromFixture(fixture, searchOrganisationsEinheit, 'clickEmitter');
+
+      expect(component.openSearchDialog).toHaveBeenCalled();
+    });
+  });
+
+  describe('organisationsEinheit component', () => {
+    beforeEach(() => {
+      component.organisationsEinheitResource = organisationsEinheitResource;
+    });
+
+    it('should be visible on existing organisationsEinheit', () => {
+      fixture.detectChanges();
+
+      existsAsHtmlElement(fixture, organisationsEinheitComp);
+    });
+
+    it('should be called with resource', () => {
+      fixture.detectChanges();
+
+      const comp: OrganisationsEinheitComponent = getMockComponent<OrganisationsEinheitComponent>(
+        fixture,
+        OrganisationsEinheitComponent,
+      );
+      expect(comp.organisationsEinheitResource).toBe(organisationsEinheitResource);
+    });
+  });
+
+  describe('open search dialog', () => {
+    beforeEach(() => {
+      component.listenToDialogClose = jest.fn();
+    });
+
+    it('should call dialog service', () => {
+      const DIALOG_CONFIG: DialogConfig = {
+        backdropClass: ['backdrop-blur-1', 'bg-greybackdrop'],
+      };
+
+      component.openSearchDialog();
+
+      expect(dialogService.openInCallingComponentContext).toHaveBeenCalledWith(
+        SearchOrganisationsEinheitContainerComponent,
+        component.viewContainerRef,
+        null,
+        DIALOG_CONFIG,
+      );
+    });
+
+    it('should call listenToDialogClose', () => {
+      component.openSearchDialog();
+
+      expect(component.listenToDialogClose).toHaveBeenCalled();
+    });
+  });
+
+  describe('listen to dialog close, after closed', () => {
+    it('should call handleDialogClosed', () => {
+      const closedSubj: Subject<OrganisationsEinheitResource> = new Subject();
+      component.dialogRef = <DialogRef>{ closed: closedSubj.asObservable() };
+      component.handleDialogClosed = jest.fn();
+
+      component.listenToDialogClose();
+      closedSubj.next(organisationsEinheitResource);
+
+      expect(component.handleDialogClosed).toHaveBeenCalledWith(organisationsEinheitResource);
+    });
+  });
+
+  describe('handle dialog closed', () => {
+    beforeEach(() => {
+      component.fieldControl = new FormControl();
+    });
+
+    it('should set organisationsEinheit', () => {
+      component.organisationsEinheitResource = undefined;
+
+      component.handleDialogClosed(organisationsEinheitResource);
+
+      expect(component.organisationsEinheitResource).toBe(organisationsEinheitResource);
+    });
+
+    it('should patch fieldControl with resource uri', () => {
+      const fieldControlPatchSpy: jest.SpyInstance = (component.fieldControl.patchValue =
+        jest.fn());
+
+      component.handleDialogClosed(organisationsEinheitResource);
+
+      expect(fieldControlPatchSpy).toHaveBeenCalledWith(getUrl(organisationsEinheitResource));
+    });
+  });
+});

alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-form/organisations-einheit-container/organisations-einheit-container.component.ts

+import {
+  OrganisationsEinheitResource,
+  OrganisationsEinheitService,
+} from '@alfa-client/collaboration-shared';
+import { OzgcloudDialogService } from '@alfa-client/ui';
+import { DialogConfig, DialogRef } from '@angular/cdk/dialog';
+import { Component, Input, ViewContainerRef } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { ResourceUri, getUrl } from '@ngxp/rest';
+import { first } from 'rxjs';
+import { SearchOrganisationsEinheitContainerComponent } from '../../../search-organisations-einheit-container/search-organisations-einheit-container.component';
+
+const DIALOG_CONFIG: DialogConfig = {
+  backdropClass: ['backdrop-blur-1', 'bg-greybackdrop'],
+};
+
+@Component({
+  selector: 'alfa-organisations-einheit-container',
+  templateUrl: './organisations-einheit-container.component.html',
+  providers: [OrganisationsEinheitService],
+})
+export class OrganisationsEinheitContainerComponent {
+  @Input() public fieldControl: FormControl<ResourceUri>;
+
+  public organisationsEinheitResource: OrganisationsEinheitResource;
+
+  dialogRef: DialogRef;
+
+  constructor(
+    private readonly dialogService: OzgcloudDialogService,
+    readonly viewContainerRef: ViewContainerRef,
+  ) {}
+
+  public openSearchDialog(): void {
+    this.dialogRef =
+      this.dialogService.openInCallingComponentContext<SearchOrganisationsEinheitContainerComponent>(
+        SearchOrganisationsEinheitContainerComponent,
+        this.viewContainerRef,
+        null,
+        DIALOG_CONFIG,
+      );
+    this.listenToDialogClose();
+  }
+
+  listenToDialogClose(): void {
+    this.dialogRef.closed
+      .pipe(first())
+      .subscribe((result: OrganisationsEinheitResource) => this.handleDialogClosed(result));
+  }
+
+  handleDialogClosed(organisationsEinheitResource: OrganisationsEinheitResource): void {
+    this.organisationsEinheitResource = organisationsEinheitResource;
+    this.fieldControl.patchValue(getUrl(organisationsEinheitResource));
+  }
+}

alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-form/organisations-einheit-container/organisations-einheit/organisations-einheit.component.html

+<p class="font-bold">{{ name }}</p>
+<p>{{ address }}</p>

alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-form/organisations-einheit-container/organisations-einheit/organisations-einheit.component.spec.ts

+import { OrganisationsEinheitResource } from '@alfa-client/collaboration-shared';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { createOrganisationsEinheitResource } from 'libs/collaboration-shared/test/organisations-einheit';
+import { OrganisationsEinheitComponent } from './organisations-einheit.component';
+
+describe('OrganisationsEinheitComponent', () => {
+  let component: OrganisationsEinheitComponent;
+  let fixture: ComponentFixture<OrganisationsEinheitComponent>;
+
+  const organisationsEinheitResource: OrganisationsEinheitResource =
+    createOrganisationsEinheitResource();
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [OrganisationsEinheitComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(OrganisationsEinheitComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('set organisationsEinheit', () => {
+    it('should call update by organisationsEinehit', () => {
+      component.updateByOrganisationsEinheit = jest.fn();
+
+      component.organisationsEinheitResource = organisationsEinheitResource;
+
+      expect(component.updateByOrganisationsEinheit).toHaveBeenCalledWith(
+        organisationsEinheitResource,
+      );
+    });
+  });
+
+  describe('update by organisationsEinheit', () => {
+    it('should set name', () => {
+      component.name = null;
+
+      component.updateByOrganisationsEinheit(organisationsEinheitResource);
+
+      expect(component.name).toEqual(organisationsEinheitResource.name);
+    });
+
+    it('should set address', () => {
+      component.address = null;
+
+      component.updateByOrganisationsEinheit(organisationsEinheitResource);
+
+      expect(component.address).toEqual(
+        `${organisationsEinheitResource.anschrift.strasse} ${organisationsEinheitResource.anschrift.hausnummer}, ${organisationsEinheitResource.anschrift.plz} ${organisationsEinheitResource.anschrift.ort}`,
+      );
+    });
+  });
+});

alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-form/organisations-einheit-container/organisations-einheit/organisations-einheit.component.ts

+import { Anschrift, OrganisationsEinheitResource } from '@alfa-client/collaboration-shared';
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'alfa-organisations-einheit',
+  templateUrl: './organisations-einheit.component.html',
+})
+export class OrganisationsEinheitComponent {
+  @Input() public set organisationsEinheitResource(
+    organisationsEinheit: OrganisationsEinheitResource,
+  ) {
+    this.updateByOrganisationsEinheit(organisationsEinheit);
+  }
+
+  public name: string;
+  public address: string;
+
+  updateByOrganisationsEinheit(organisationsEinheit: OrganisationsEinheitResource): void {
+    this.name = organisationsEinheit.name;
+    this.address = this.buildAddress(organisationsEinheit.anschrift);
+  }
+
+  private buildAddress(anschrift: Anschrift): string {
+    return `${anschrift.strasse} ${anschrift.hausnummer}, ${anschrift.plz} ${anschrift.ort}`;
+  }
+}

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

@@ -9,13 +9,14 @@ import {
   CloseIconComponent,
   CollaborationIconComponent,
   InstantSearchComponent,
+  OfficeIconComponent,
   SaveIconComponent,
+  SearchIconComponent,
 } from '@ods/system';
-import { SearchIconComponent } from 'libs/design-system/src/lib/icons/search-icon/search-icon.component';
 import { CollaborationInVorgangContainerComponent } from './collaboration-in-vorgang-container/collaboration-in-vorgang-container.component';
-import { CollaborationRequestContainerComponent } from './collaboration-in-vorgang-container/collaboration-request-container/collaboration-request-container.component';
-import { CollaborationRequestFormComponent } from './collaboration-in-vorgang-container/collaboration-request-container/collaboration-request-form/collaboration-request-form.component';
-import { OrganisationsEinheitInCollaborationContainerComponent } from './organisations-einheit-in-collaboration-container/organisations-einheit-in-collaboration-container.component';
+import { CollaborationRequestFormComponent } from './collaboration-in-vorgang-container/collaboration-request-form/collaboration-request-form.component';
+import { OrganisationsEinheitContainerComponent } from './collaboration-in-vorgang-container/collaboration-request-form/organisations-einheit-container/organisations-einheit-container.component';
+import { OrganisationsEinheitComponent } from './collaboration-in-vorgang-container/collaboration-request-form/organisations-einheit-container/organisations-einheit/organisations-einheit.component';
 import { SearchOrganisationsEinheitContainerComponent } from './search-organisations-einheit-container/search-organisations-einheit-container.component';
 import { SearchOrganisationsEinheitFormComponent } from './search-organisations-einheit-container/search-organisations-einheit-form/search-organisations-einheit-form.component';
 
@@ -23,6 +24,7 @@ import { SearchOrganisationsEinheitFormComponent } from './search-organisations-
   imports: [
     CommonModule,
     ButtonComponent,
+    OfficeIconComponent,
     SaveIconComponent,
     CloseIconComponent,
     SearchIconComponent,
@@ -37,11 +39,11 @@ import { SearchOrganisationsEinheitFormComponent } from './search-organisations-
   ],
   declarations: [
     CollaborationInVorgangContainerComponent,
-    CollaborationRequestContainerComponent,
     CollaborationRequestFormComponent,
     SearchOrganisationsEinheitContainerComponent,
     SearchOrganisationsEinheitFormComponent,
-    OrganisationsEinheitInCollaborationContainerComponent,
+    OrganisationsEinheitContainerComponent,
+    OrganisationsEinheitComponent,
   ],
   exports: [CollaborationInVorgangContainerComponent],
 })