OZG-725-7891 forwarding item eibinden

alfa-client/libs/design-system/src/lib/forwarding-item/forwarding-item.component.ts

@@ -35,7 +35,7 @@ export enum ForwardingDirection {
   standalone: true,
   imports: [CommonModule, ForwardVorgangIconComponent],
   template: `<div
-    class="flex flex-col items-start justify-between gap-2 rounded-lg border border-grayborder p-3 md:flex-row md:items-center md:gap-0"
+    class="flex flex-col items-start items-center justify-between gap-2 rounded-lg border border-grayborder p-3 md:flex-row md:items-center md:gap-0"
   >
     <div class="flex gap-3">
       <ods-forward-vorgang-icon class="fill-text" />
@@ -45,7 +45,7 @@ export enum ForwardingDirection {
         <p>{{ address }}</p>
       </div>
     </div>
-    <div class="self-end text-end empty:hidden">
+    <div class="text-end empty:hidden">
       <ng-content />
     </div>
   </div>`,

alfa-client/libs/forwarding/src/lib/forwarding-dialog-container/forwarding-dialog-container.component.html

-<alfa-forwarding-dialog />
\ No newline at end of file
+<alfa-forwarding-dialog [selectedSearchResult]="selectedSearchResult$ | async"/>
\ No newline at end of file

alfa-client/libs/forwarding/src/lib/forwarding-dialog-container/forwarding-dialog-container.component.ts

 import { ResourceRepository } from '@alfa-client/tech-shared';
 import { VorgangService } from '@alfa-client/vorgang-shared';
 import { createOrganisationEinheitService } from '@alfa-client/zustaendige-stelle';
-import { ZUSTAENDIGE_STELLE_SERVICE } from '@alfa-client/zustaendige-stelle-shared';
-import { Component } from '@angular/core';
+import {
+  OrganisationsEinheitResource,
+  OrganisationsEinheitService,
+  ZUSTAENDIGE_STELLE_SERVICE,
+} from '@alfa-client/zustaendige-stelle-shared';
+import { AsyncPipe } from '@angular/common';
+import { Component, inject } from '@angular/core';
+import { Observable } from 'rxjs';
 import { ForwardingDialogComponent } from './forwarding-dialog/forwarding-dialog.component';
 
 @Component({
   selector: 'alfa-forwarding-dialog-container',
   standalone: true,
-  imports: [ForwardingDialogComponent],
+  imports: [ForwardingDialogComponent, AsyncPipe],
   templateUrl: './forwarding-dialog-container.component.html',
   providers: [
     {
@@ -18,4 +24,12 @@ import { ForwardingDialogComponent } from './forwarding-dialog/forwarding-dialog
     },
   ],
 })
-export class ForwardingDialogContainerComponent {}
+export class ForwardingDialogContainerComponent {
+  private readonly organisationsEinheitService = inject(ZUSTAENDIGE_STELLE_SERVICE) as OrganisationsEinheitService;
+
+  public selectedSearchResult$: Observable<OrganisationsEinheitResource>;
+
+  ngOnInit(): void {
+    this.selectedSearchResult$ = this.organisationsEinheitService.getSelectedResult();
+  }
+}

alfa-client/libs/forwarding/src/lib/forwarding-dialog-container/forwarding-dialog/forwarding-dialog-forwarding-item/forwarding-dialog-forwarding-item.component.html

+<ods-forwarding-item [label]="organisationsEinheitResource.name" [address]="organisationsEinheitResource.anschrift | anschriftToString" >
+  <alfa-forwarding-item-change-button-container />
+</ods-forwarding-item>
\ No newline at end of file

alfa-client/libs/forwarding/src/lib/forwarding-dialog-container/forwarding-dialog/forwarding-dialog-forwarding-item/forwarding-dialog-forwarding-item.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { getMockComponent } from '@alfa-client/test-utils';
+import { Anschrift, OrganisationsEinheitResource } from '@alfa-client/zustaendige-stelle-shared';
+import { ForwardingItemComponent } from '@ods/system';
+import { MockComponent } from 'ng-mocks';
+import { createOrganisationsEinheitResource } from '../../../../../../zustaendige-stelle-shared/test/organisations-einheit';
+import { ForwardingDialogForwardingItemComponent } from './forwarding-dialog-forwarding-item.component';
+import { ForwardingItemChangeButtonContainerComponent } from './forwarding-item-change-button-container/forwarding-item-change-button-container.component';
+
+describe('ForwardingDialogForwardingItemComponent', () => {
+  let component: ForwardingDialogForwardingItemComponent;
+  let fixture: ComponentFixture<ForwardingDialogForwardingItemComponent>;
+
+  const organisationsEinheitResource: OrganisationsEinheitResource = createOrganisationsEinheitResource();
+  const anschrift: Anschrift = organisationsEinheitResource.anschrift;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ForwardingDialogForwardingItemComponent],
+      declarations: [MockComponent(ForwardingItemChangeButtonContainerComponent), MockComponent(ForwardingItemComponent)],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ForwardingDialogForwardingItemComponent);
+    component = fixture.componentInstance;
+    component.organisationsEinheitResource = organisationsEinheitResource;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('forwarding item', () => {
+    it('should exist with input', () => {
+      const forwardingItem: ForwardingItemComponent = getMockComponent(fixture, ForwardingItemComponent);
+
+      expect(forwardingItem.label).toBe(organisationsEinheitResource.name);
+      expect(forwardingItem.address).toBe(`${anschrift.strasse} ${anschrift.hausnummer}, ${anschrift.plz} ${anschrift.ort}`);
+    });
+  });
+});

alfa-client/libs/forwarding/src/lib/forwarding-dialog-container/forwarding-dialog/forwarding-dialog-forwarding-item/forwarding-dialog-forwarding-item.component.ts

+import { AnschriftToStringPipe, OrganisationsEinheitResource } from '@alfa-client/zustaendige-stelle-shared';
+import { Component, Input } from '@angular/core';
+import { ForwardingItemComponent } from '@ods/system';
+import { ForwardingItemChangeButtonContainerComponent } from './forwarding-item-change-button-container/forwarding-item-change-button-container.component';
+
+@Component({
+  selector: 'alfa-forwarding-dialog-forwarding-item',
+  standalone: true,
+  imports: [ForwardingItemComponent, ForwardingItemChangeButtonContainerComponent, AnschriftToStringPipe],
+  templateUrl: './forwarding-dialog-forwarding-item.component.html',
+})
+export class ForwardingDialogForwardingItemComponent {
+  @Input() organisationsEinheitResource!: OrganisationsEinheitResource;
+}

alfa-client/libs/forwarding/src/lib/forwarding-dialog-container/forwarding-dialog/forwarding-dialog-forwarding-item/forwarding-item-change-button-container/forwarding-item-change-button-container.component.html

+<ods-button
+  (clickEmitter)="onClick()"
+  text="Ändern"
+  variant="outline"
+  dataTestId="forwarding-item-change-button"
+  data-test-id="forwarding-item-change-button-container"
+/>

alfa-client/libs/forwarding/src/lib/forwarding-dialog-container/forwarding-dialog/forwarding-dialog-forwarding-item/forwarding-item-change-button-container/forwarding-item-change-button-container.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { dispatchEventFromFixture, mock, Mock, MockEvent } from '@alfa-client/test-utils';
+import { OrganisationsEinheitService, ZUSTAENDIGE_STELLE_SERVICE } from '@alfa-client/zustaendige-stelle-shared';
+import { ButtonComponent } from '@ods/system';
+import { MockComponent } from 'ng-mocks';
+import { getDataTestIdOf } from '../../../../../../../tech-shared/test/data-test';
+import { ForwardingItemChangeButtonContainerComponent } from './forwarding-item-change-button-container.component';
+
+describe('ForwardingItemChangeButtonContainerComponent', () => {
+  let component: ForwardingItemChangeButtonContainerComponent;
+  let fixture: ComponentFixture<ForwardingItemChangeButtonContainerComponent>;
+
+  const buttonContainer: string = getDataTestIdOf('forwarding-item-change-button-container');
+
+  let service: Mock<OrganisationsEinheitService>;
+
+  beforeEach(() => {
+    service = mock(OrganisationsEinheitService);
+
+    TestBed.configureTestingModule({
+      imports: [ForwardingItemChangeButtonContainerComponent],
+      declarations: [MockComponent(ButtonComponent)],
+      providers: [{ provide: ZUSTAENDIGE_STELLE_SERVICE, useValue: service }],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ForwardingItemChangeButtonContainerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('button', () => {
+    it('should call onClick on button click', () => {
+      component.onClick = jest.fn();
+
+      dispatchEventFromFixture(fixture, buttonContainer, MockEvent.CLICK);
+
+      expect(component.onClick).toHaveBeenCalled();
+    });
+  });
+
+  describe('onClick', () => {
+    it('should clear selected result', () => {
+      component.onClick();
+
+      expect(service.clearSelectedResult).toHaveBeenCalled();
+    });
+  });
+});

alfa-client/libs/forwarding/src/lib/forwarding-dialog-container/forwarding-dialog/forwarding-dialog-forwarding-item/forwarding-item-change-button-container/forwarding-item-change-button-container.component.ts

+import { OrganisationsEinheitService, ZUSTAENDIGE_STELLE_SERVICE } from '@alfa-client/zustaendige-stelle-shared';
+import { Component, inject } from '@angular/core';
+import { ButtonComponent } from '@ods/system';
+
+@Component({
+  selector: 'alfa-forwarding-item-change-button-container',
+  standalone: true,
+  imports: [ButtonComponent],
+  templateUrl: './forwarding-item-change-button-container.component.html',
+})
+export class ForwardingItemChangeButtonContainerComponent {
+  private readonly organisationsEinheitService = inject(ZUSTAENDIGE_STELLE_SERVICE) as OrganisationsEinheitService;
+
+  public onClick(): void {
+    this.organisationsEinheitService.clearSelectedResult();
+  }
+}

alfa-client/libs/forwarding/src/lib/forwarding-dialog-container/forwarding-dialog/forwarding-dialog.component.html

-<div class="block bg-background-100 flex w-[620px] flex-col gap-4 p-8">
-  <div class="flex justify-between items-center">
+<div class="block flex w-[620px] flex-col gap-4 bg-background-100 p-8">
+  <div class="flex items-center justify-between">
     <h1 class="text-xl font-semibold text-primary">Vorgang weiterleiten</h1>
     <ods-cancel-dialog-button showAsIconButton="true" />
   </div>
-  <alfa-search-zustaendige-stelle-form-container cdkFocusInitial/>
+
+  @if (isNil(selectedSearchResult)) {
+    <alfa-search-zustaendige-stelle-form-container cdkFocusInitial data-test-id="zufi-search" />
+  } @else {
+    <alfa-forwarding-dialog-forwarding-item
+      [organisationsEinheitResource]="selectedSearchResult"
+      data-test-id="forwarding-item"
+    />
+  }
+
   <div class="flex gap-4">
     <alfa-forwarding-button />
     <ods-cancel-dialog-button />

alfa-client/libs/forwarding/src/lib/forwarding-dialog-container/forwarding-dialog/forwarding-dialog.component.spec.ts

+import { existsAsHtmlElement, notExistsAsHtmlElement } from '@alfa-client/test-utils';
 import { ZustaendigeStelleModule } from '@alfa-client/zustaendige-stelle';
+import { OrganisationsEinheitResource } from '@alfa-client/zustaendige-stelle-shared';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { CancelDialogButtonComponent } from '@ods/component';
 import { MockComponent, MockModule } from 'ng-mocks';
+import { getDataTestIdOf } from '../../../../../tech-shared/test/data-test';
+import { createOrganisationsEinheitResource } from '../../../../../zustaendige-stelle-shared/test/organisations-einheit';
 import { ForwardingButtonComponent } from './forwarding-button/forwarding-button.component';
+import { ForwardingDialogForwardingItemComponent } from './forwarding-dialog-forwarding-item/forwarding-dialog-forwarding-item.component';
 import { ForwardingDialogComponent } from './forwarding-dialog.component';
 
 describe('ForwardingDialogComponent', () => {
   let component: ForwardingDialogComponent;
   let fixture: ComponentFixture<ForwardingDialogComponent>;
 
+  const zufiSearch: string = getDataTestIdOf('zufi-search');
+  const forwardingItem: string = getDataTestIdOf('forwarding-item');
+
+  const organisationsEinheitResource: OrganisationsEinheitResource = createOrganisationsEinheitResource();
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [ForwardingDialogComponent],
       declarations: [
         MockComponent(CancelDialogButtonComponent),
         MockComponent(ForwardingButtonComponent),
+        MockComponent(ForwardingDialogForwardingItemComponent),
         MockModule(ZustaendigeStelleModule),
       ],
     }).compileComponents();
@@ -27,4 +37,49 @@ describe('ForwardingDialogComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  describe('template', () => {
+    describe('zufi search', () => {
+      it('should render if selectedSearchResult is null', () => {
+        component.selectedSearchResult = null;
+
+        fixture.detectChanges();
+
+        existsAsHtmlElement(fixture, zufiSearch);
+      });
+
+      it('should NOT render if selectedSearchResult is NOT null', () => {
+        component.selectedSearchResult = organisationsEinheitResource;
+
+        fixture.detectChanges();
+
+        notExistsAsHtmlElement(fixture, zufiSearch);
+      });
+    });
+  });
+  it('should render zufi search if selectedSearchResult is null', () => {
+    component.selectedSearchResult = null;
+
+    fixture.detectChanges();
+  });
+
+  describe('template', () => {
+    describe('forwarding item', () => {
+      it('should render if selectedSearchResult is NOT null', () => {
+        component.selectedSearchResult = organisationsEinheitResource;
+
+        fixture.detectChanges();
+
+        existsAsHtmlElement(fixture, forwardingItem);
+      });
+
+      it('should NOT render if selectedSearchResult is null', () => {
+        component.selectedSearchResult = null;
+
+        fixture.detectChanges();
+
+        notExistsAsHtmlElement(fixture, forwardingItem);
+      });
+    });
+  });
 });

alfa-client/libs/forwarding/src/lib/forwarding-dialog-container/forwarding-dialog/forwarding-dialog.component.ts

 import { ZustaendigeStelleModule } from '@alfa-client/zustaendige-stelle';
+import { OrganisationsEinheitResource } from '@alfa-client/zustaendige-stelle-shared';
 import { A11yModule } from '@angular/cdk/a11y';
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
-import { Resource } from '@ngxp/rest';
 import { CancelDialogButtonComponent } from '@ods/component';
-import { InstantSearchResult } from '@ods/system';
+import { isNil } from 'lodash-es';
 import { ForwardingButtonComponent } from './forwarding-button/forwarding-button.component';
+import { ForwardingDialogForwardingItemComponent } from './forwarding-dialog-forwarding-item/forwarding-dialog-forwarding-item.component';
 
 @Component({
   selector: 'alfa-forwarding-dialog',
   standalone: true,
-  imports: [A11yModule, CancelDialogButtonComponent, ReactiveFormsModule, ZustaendigeStelleModule, ForwardingButtonComponent],
+  imports: [
+    A11yModule,
+    CancelDialogButtonComponent,
+    ReactiveFormsModule,
+    ZustaendigeStelleModule,
+    ForwardingButtonComponent,
+    ForwardingDialogForwardingItemComponent,
+  ],
   templateUrl: './forwarding-dialog.component.html',
 })
 export class ForwardingDialogComponent {
-  @Input() searchResults: InstantSearchResult<Resource>[];
-  @Output() selectSearchResult: EventEmitter<Resource> = new EventEmitter<Resource>();
-  @Output() search: EventEmitter<string> = new EventEmitter();
-  @Output() clearSearchResult: EventEmitter<void> = new EventEmitter();
+  @Input() selectedSearchResult: OrganisationsEinheitResource;
+
+  protected readonly isNil = isNil;
 }

alfa-client/libs/zustaendige-stelle-shared/src/index.ts

@@ -21,6 +21,7 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
+export * from './lib/anschrift-to-string.pipe';
 export * from './lib/externe-fachstelle/externe-fachstelle.model';
 export * from './lib/externe-fachstelle/externe-fachstelle.service';
 export * from './lib/organisations-einheit/organisations-einheit.model';

alfa-client/libs/zustaendige-stelle-shared/src/lib/anschrift-to-string.pipe.spec.ts

+import { EMPTY_STRING } from '@alfa-client/tech-shared';
+import { Anschrift } from '@alfa-client/zustaendige-stelle-shared';
+import { AnschriftToStringPipe } from './anschrift-to-string.pipe';
+
+describe('AnschriftToString', () => {
+  let pipe: AnschriftToStringPipe;
+
+  beforeEach(() => {
+    pipe = new AnschriftToStringPipe();
+  });
+
+  it('should create an instance', () => {
+    expect(pipe).toBeTruthy();
+  });
+
+  it('should format anschrift', () => {
+    const anschrift: Anschrift = {
+      strasse: 'Musterstraße',
+      hausnummer: '12',
+      plz: '12345',
+      ort: 'Musterstadt',
+    };
+    expect(pipe.transform(anschrift)).toBe('Musterstraße 12, 12345 Musterstadt');
+  });
+
+  it('should return empty string if anschrift is null', () => {
+    expect(pipe.transform(null)).toBe(EMPTY_STRING);
+  });
+});

alfa-client/libs/zustaendige-stelle-shared/src/lib/anschrift-to-string.pipe.ts

+import { EMPTY_STRING } from '@alfa-client/tech-shared';
+import { Anschrift } from '@alfa-client/zustaendige-stelle-shared';
+import { Pipe, PipeTransform } from '@angular/core';
+import { isNil } from 'lodash-es';
+
+@Pipe({
+  standalone: true,
+  name: 'anschriftToString',
+})
+export class AnschriftToStringPipe implements PipeTransform {
+  transform(anschrift: Anschrift): string {
+    if (isNil(anschrift)) return EMPTY_STRING;
+    return `${anschrift.strasse} ${anschrift.hausnummer}, ${anschrift.plz} ${anschrift.ort}`;
+  }
+}