diff --git a/alfa-client/libs/design-system/src/index.ts b/alfa-client/libs/design-system/src/index.ts
index d05d44db8ce46777152a6f48145ac2000dd5d0a3..a820f6d4ce30953ae4b1de7a42341cdc51d9c822 100644
--- a/alfa-client/libs/design-system/src/index.ts
+++ b/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';
diff --git a/alfa-client/libs/design-system/src/lib/forwarding-item/forwarding-item-info/forwarding-item-info.component.spec.ts b/alfa-client/libs/design-system/src/lib/forwarding-item/forwarding-item-info/forwarding-item-info.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..aa29de43383f328ce1179743c2fb6bbd0b435954
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/forwarding-item/forwarding-item-info/forwarding-item-info.component.spec.ts
@@ -0,0 +1,21 @@
+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();
+ });
+});
diff --git a/alfa-client/libs/design-system/src/lib/forwarding-item/forwarding-item-info/forwarding-item-info.component.ts b/alfa-client/libs/design-system/src/lib/forwarding-item/forwarding-item-info/forwarding-item-info.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..abace4dec64981bfc6fd2e5cd8e3c66abeca881e
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/forwarding-item/forwarding-item-info/forwarding-item-info.component.ts
@@ -0,0 +1,12 @@
+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;
+}
diff --git a/alfa-client/libs/design-system/src/lib/forwarding-item/forwarding-item.component.ts b/alfa-client/libs/design-system/src/lib/forwarding-item/forwarding-item.component.ts
index 7f8ebfd800c662910c5ec0905935c3d12487b7f3..71d2aee374ff244e69c7883b50044d2be3986961 100644
--- a/alfa-client/libs/design-system/src/lib/forwarding-item/forwarding-item.component.ts
+++ b/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;
}
diff --git a/alfa-client/libs/design-system/src/lib/forwarding-item/forwarding-item.stories.ts b/alfa-client/libs/design-system/src/lib/forwarding-item/forwarding-item.stories.ts
index 53d2116e9f314c9e2194cd8a9ff7c72e39dd1b12..d70b202b1147e34a030258198844ac19afc7b1b6 100644
--- a/alfa-client/libs/design-system/src/lib/forwarding-item/forwarding-item.stories.ts
+++ b/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)}>
- <p>20. Dez. 09:35</p>
- <p class="text-sm">Karin Wanowski-Müller</p>
+ <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>`,
}),
};
diff --git a/alfa-client/libs/forwarding/src/lib/forwarding-dialog-container/forwarding-dialog/forwarding-dialog.component.html b/alfa-client/libs/forwarding/src/lib/forwarding-dialog-container/forwarding-dialog/forwarding-dialog.component.html
index f557b1c6c740deee4c324f20d66c2e9172b85b19..581556972eaee8f093c438b0644e13cb7277a2b4 100644
--- a/alfa-client/libs/forwarding/src/lib/forwarding-dialog-container/forwarding-dialog/forwarding-dialog.component.html
+++ b/alfa-client/libs/forwarding/src/lib/forwarding-dialog-container/forwarding-dialog/forwarding-dialog.component.html
@@ -5,11 +5,15 @@
</div>
@if (!selectedSearchResult) {
- <alfa-search-zustaendige-stelle-form-container cdkFocusInitial focusOnSearchField="true" data-test-id="zufi-search" />
- <div class="h-[calc(50vh)]"></div>
+ <ods-forwarding-item>
+ <div class="w-full">
+ <alfa-search-zustaendige-stelle-form-container cdkFocusInitial focusOnSearchField="true" data-test-id="zufi-search" />
+ </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" />
diff --git a/alfa-client/libs/forwarding/src/lib/forwarding-dialog-container/forwarding-dialog/forwarding-dialog.component.ts b/alfa-client/libs/forwarding/src/lib/forwarding-dialog-container/forwarding-dialog/forwarding-dialog.component.ts
index c1695f42a08728b6921b6813694fad2ffb5440fe..5e27faec88cbc71cbb0f21066bd8e40ffd85573f 100644
--- a/alfa-client/libs/forwarding/src/lib/forwarding-dialog-container/forwarding-dialog/forwarding-dialog.component.ts
+++ b/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',
})
diff --git a/alfa-client/libs/forwarding/src/lib/forwarding-dialog-container/forwarding-dialog/forwarding-item/forwarding-item.component.html b/alfa-client/libs/forwarding/src/lib/forwarding-dialog-container/forwarding-dialog/forwarding-item/forwarding-item.component.html
index bd41e43d6a1c75eb03bca208ca264c7553aaa5a8..89aad7082d31a38843c769b9ad53f66122e14987 100644
--- a/alfa-client/libs/forwarding/src/lib/forwarding-dialog-container/forwarding-dialog/forwarding-item/forwarding-item.component.html
+++ b/alfa-client/libs/forwarding/src/lib/forwarding-dialog-container/forwarding-dialog/forwarding-item/forwarding-item.component.html
@@ -1,3 +1,7 @@
-<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
+<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>
diff --git a/alfa-client/libs/forwarding/src/lib/forwarding-dialog-container/forwarding-dialog/forwarding-item/forwarding-item.component.spec.ts b/alfa-client/libs/forwarding/src/lib/forwarding-dialog-container/forwarding-dialog/forwarding-item/forwarding-item.component.spec.ts
index b8ffb55d8ab7ff80771ddd8cdd2d1e6611dbe459..66e27ffe0d3eaf90265acf2a9b0c5fe38fdc2376 100644
--- a/alfa-client/libs/forwarding/src/lib/forwarding-dialog-container/forwarding-dialog/forwarding-item/forwarding-item.component.spec.ts
+++ b/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}`);
});
});
});
diff --git a/alfa-client/libs/forwarding/src/lib/forwarding-dialog-container/forwarding-dialog/forwarding-item/forwarding-item.component.ts b/alfa-client/libs/forwarding/src/lib/forwarding-dialog-container/forwarding-dialog/forwarding-item/forwarding-item.component.ts
index 9828f682d8860e851cc15cde31fef24150120f4a..dba40ffa1105c8e53a62be88cb3e8423e8a6142e 100644
--- a/alfa-client/libs/forwarding/src/lib/forwarding-dialog-container/forwarding-dialog/forwarding-item/forwarding-item.component.ts
+++ b/alfa-client/libs/forwarding/src/lib/forwarding-dialog-container/forwarding-dialog/forwarding-item/forwarding-item.component.ts
@@ -1,12 +1,17 @@
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 {