OZG-725 Wrap search in forwarding item

alfa-client/libs/design-system/src/index.ts

@@ -41,6 +41,7 @@ export * from './lib/form/file-upload-button/file-upload-button.component';
 export * from './lib/form/radio-button-card/radio-button-card.component';
 export * from './lib/form/text-input/text-input.component';
 export * from './lib/form/textarea/textarea.component';
+export * from './lib/forwarding-item/forwarding-item-info/forwarding-item-info.component';
 export * from './lib/forwarding-item/forwarding-item.component';
 export * from './lib/icons/accessibility-icon/accessibility-icon.component';
 export * from './lib/icons/account-circle-icon/account-circle-icon.component';

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

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ForwardingItemInfoComponent } from './forwarding-item-info.component';
+
+describe('ForwardingItemInfoComponent', () => {
+  let component: ForwardingItemInfoComponent;
+  let fixture: ComponentFixture<ForwardingItemInfoComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ForwardingItemInfoComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ForwardingItemInfoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'ods-forwarding-item-info',
+  standalone: true,
+  template: `<p class="font-medium">{{ label }}</p>
+    <p>{{ address }}</p>`,
+})
+export class ForwardingItemInfoComponent {
+  @Input({ required: true }) label!: string;
+  @Input({ required: true }) address!: string;
+}

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

@@ -21,7 +21,6 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { CommonModule } from '@angular/common';
 import { Component, Input } from '@angular/core';
 import { ForwardVorgangIconComponent } from '../icons/forward-vorgang-icon/forward-vorgang-icon.component';
 
@@ -33,25 +32,20 @@ export enum ForwardingDirection {
 @Component({
   selector: 'ods-forwarding-item',
   standalone: true,
-  imports: [CommonModule, ForwardVorgangIconComponent],
+  imports: [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"
   >
-    <div class="flex gap-3">
+    <div class="flex flex-1 gap-3">
       <ods-forward-vorgang-icon class="fill-text" />
       <p class="text-gray-500">{{ direction }}:</p>
-      <div>
-        <p class="font-medium">{{ label }}</p>
-        <p>{{ address }}</p>
-      </div>
+      <ng-content />
     </div>
     <div class="text-end empty:hidden">
-      <ng-content />
+      <ng-content select="[end-content]" />
     </div>
   </div>`,
 })
 export class ForwardingItemComponent {
-  @Input({ required: true }) label!: string;
-  @Input({ required: true }) address!: string;
   @Input() direction: ForwardingDirection = ForwardingDirection.TO;
 }

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

@@ -24,11 +24,9 @@
 import { argsToTemplate, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
 
 import { ButtonComponent } from '../button/button.component';
+import { ForwardingItemInfoComponent } from './forwarding-item-info/forwarding-item-info.component';
 import { ForwardingDirection, ForwardingItemComponent } from './forwarding-item.component';
 
-const label: string = 'Bund für Umwelt und Naturschutz Kreisgruppe Kiel';
-const address: string = 'Kaiserstraße 25, 12443 Kiel';
-
 const meta: Meta<ForwardingItemComponent> = {
   title: 'Forwarding item',
   component: ForwardingItemComponent,
@@ -41,7 +39,7 @@ const meta: Meta<ForwardingItemComponent> = {
   },
   decorators: [
     moduleMetadata({
-      imports: [ForwardingItemComponent, ButtonComponent],
+      imports: [ForwardingItemComponent, ForwardingItemInfoComponent, ButtonComponent],
     }),
   ],
   excludeStories: /.*Data$/,
@@ -53,40 +51,39 @@ type Story = StoryObj<ForwardingItemComponent>;
 
 export const Default: Story = {
   args: {
-    label: label,
-    address: address,
     direction: ForwardingDirection.TO,
   },
   argTypes: {
     direction: { control: 'select', options: [ForwardingDirection.TO, ForwardingDirection.FROM] },
   },
+  render: () => ({
+    template: `<ods-forwarding-item>
+        <ods-forwarding-item-info label="Bund für Umwelt und Naturschutz Kreisgruppe Kiel" address="Kaiserstraße 25, 12443 Kiel" />
+      </ods-forwarding-item>`,
+  }),
 };
 
 export const WithButton: Story = {
-  args: {
-    label: label,
-    address: address,
-  },
-
-  render: (args: ForwardingItemComponent) => ({
-    props: args,
-    template: `<ods-forwarding-item ${argsToTemplate(args)}>
-        <ods-button variant="outline" text="Stelle ändern" />
+  render: () => ({
+    template: `<ods-forwarding-item>
+        <ods-forwarding-item-info label="Bund für Umwelt und Naturschutz Kreisgruppe Kiel" address="Kaiserstraße 25, 12443 Kiel" />
+        <ods-button variant="outline" text="Stelle ändern" end-content />
       </ods-forwarding-item>`,
   }),
 };
 
 export const WithCreationInfo: Story = {
   args: {
-    label: label,
-    address: address,
     direction: ForwardingDirection.FROM,
   },
   render: (args: ForwardingItemComponent) => ({
     props: args,
     template: `<ods-forwarding-item ${argsToTemplate(args)}>
+        <ods-forwarding-item-info label="Bund für Umwelt und Naturschutz Kreisgruppe Kiel" address="Kaiserstraße 25, 12443 Kiel" />
+        <div end-content>
           <p>20. Dez. 09:35</p>
           <p class="text-sm">Karin Wanowski-Müller</p>
+        </div>
       </ods-forwarding-item>`,
   }),
 };

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

@@ -5,11 +5,15 @@
   </div>
 
   @if (!selectedSearchResult) {
+    <ods-forwarding-item>
+      <div class="w-full">
         <alfa-search-zustaendige-stelle-form-container cdkFocusInitial focusOnSearchField="true" data-test-id="zufi-search" />
-    <div class="h-[calc(50vh)]"></div>
+      </div>
+    </ods-forwarding-item>
   } @else {
     <alfa-forwarding-item-in-dialog [organisationsEinheitResource]="selectedSearchResult" data-test-id="forwarding-item" />
   }
+  <div class="h-[calc(50vh)]"></div>
 
   <div class="flex gap-4">
     <alfa-forwarding-button [disabled]="!selectedSearchResult" />

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

@@ -4,6 +4,7 @@ import { A11yModule } from '@angular/cdk/a11y';
 import { Component, Input } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { CancelDialogButtonComponent } from '@ods/component';
+import { ForwardingItemComponent } from '@ods/system';
 import { ForwardingButtonComponent } from './forwarding-button/forwarding-button.component';
 import { ForwardingItemInDialogComponent } from './forwarding-item/forwarding-item.component';
 
@@ -17,6 +18,7 @@ import { ForwardingItemInDialogComponent } from './forwarding-item/forwarding-it
     ZustaendigeStelleModule,
     ForwardingButtonComponent,
     ForwardingItemInDialogComponent,
+    ForwardingItemComponent,
   ],
   templateUrl: './forwarding-dialog.component.html',
 })

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

-<ods-forwarding-item [label]="organisationsEinheitResource.name" [address]="organisationsEinheitResource.anschrift | anschriftToString" >
-  <alfa-forwarding-item-change-button-container />
+<ods-forwarding-item>
+  <ods-forwarding-item-info
+    [label]="organisationsEinheitResource.name"
+    [address]="organisationsEinheitResource.anschrift | anschriftToString"
+  />
+  <alfa-forwarding-item-change-button-container end-content />
 </ods-forwarding-item>

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

@@ -2,7 +2,7 @@ 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 { ForwardingItemComponent, ForwardingItemInfoComponent } from '@ods/system';
 import { MockComponent } from 'ng-mocks';
 import { createOrganisationsEinheitResource } from '../../../../../../zustaendige-stelle-shared/test/organisations-einheit';
 import { ForwardingItemChangeButtonContainerComponent } from './forwarding-item-change-button-container/forwarding-item-change-button-container.component';
@@ -18,7 +18,11 @@ describe('ForwardingDialogForwardingItemComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [ForwardingItemInDialogComponent],
-      declarations: [MockComponent(ForwardingItemChangeButtonContainerComponent), MockComponent(ForwardingItemComponent)],
+      declarations: [
+        MockComponent(ForwardingItemChangeButtonContainerComponent),
+        MockComponent(ForwardingItemComponent),
+        MockComponent(ForwardingItemInfoComponent),
+      ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ForwardingItemInDialogComponent);
@@ -31,12 +35,12 @@ describe('ForwardingDialogForwardingItemComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  describe('forwarding item', () => {
+  describe('forwarding item info', () => {
     it('should exist with input', () => {
-      const forwardingItem: ForwardingItemComponent = getMockComponent(fixture, ForwardingItemComponent);
+      const forwardingItemInfo: ForwardingItemInfoComponent = getMockComponent(fixture, ForwardingItemInfoComponent);
 
-      expect(forwardingItem.label).toBe(organisationsEinheitResource.name);
-      expect(forwardingItem.address).toBe(`${anschrift.strasse} ${anschrift.hausnummer}, ${anschrift.plz} ${anschrift.ort}`);
+      expect(forwardingItemInfo.label).toBe(organisationsEinheitResource.name);
+      expect(forwardingItemInfo.address).toBe(`${anschrift.strasse} ${anschrift.hausnummer}, ${anschrift.plz} ${anschrift.ort}`);
     });
   });
 });

alfa-client/libs/forwarding/src/lib/forwarding-dialog-container/forwarding-dialog/forwarding-item/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 { ForwardingItemComponent, ForwardingItemInfoComponent } from '@ods/system';
 import { ForwardingItemChangeButtonContainerComponent } from './forwarding-item-change-button-container/forwarding-item-change-button-container.component';
 
 @Component({
   selector: 'alfa-forwarding-item-in-dialog',
   standalone: true,
-  imports: [ForwardingItemChangeButtonContainerComponent, AnschriftToStringPipe, ForwardingItemComponent],
+  imports: [
+    ForwardingItemChangeButtonContainerComponent,
+    AnschriftToStringPipe,
+    ForwardingItemComponent,
+    ForwardingItemInfoComponent,
+  ],
   templateUrl: './forwarding-item.component.html',
 })
 export class ForwardingItemInDialogComponent {