diff --git a/goofy-client/apps/goofy-e2e/src/components/postfach/postfach-mail.e2e.component.ts b/goofy-client/apps/goofy-e2e/src/components/postfach/postfach-mail.e2e.component.ts
index 95abe920c275c613bcbb8816d0ee4aed4a90a02a..a8a9aa827e200e30feae06db4ba17a8e55c93029 100644
--- a/goofy-client/apps/goofy-e2e/src/components/postfach/postfach-mail.e2e.component.ts
+++ b/goofy-client/apps/goofy-e2e/src/components/postfach/postfach-mail.e2e.component.ts
@@ -27,7 +27,8 @@ import { UserProfileE2EComponent } from '../user-profile/user-profile.component.
export class PostfachMailE2EComponent {
- private readonly locatorButton: string = 'send-mail-button';
+ private readonly locatorCreateMailButtonWithText: string = 'create-mail-button-with-text';
+ private readonly locatorCreateMailButtonWithoutText: string = 'create-mail-button-without-text';
private readonly locatorList: string = 'postfach-mail-list';
private readonly locatorNoPostfachText: string = 'no-postfach-text';
private readonly locatorAttachments: string = 'postfach-nachricht-attachments-container';
@@ -38,9 +39,12 @@ export class PostfachMailE2EComponent {
return cy.getTestElement(this.locatorRoot);
}
- //TODO Umbenennen in bspw. sendButton
- public getButton() {
- return cy.getTestElement(this.locatorButton);
+ public getCreateButtonWithText() {
+ return cy.getTestElement(this.locatorCreateMailButtonWithText);
+ }
+
+ public getCreateButtonWithoutText() {
+ return cy.getTestElement(this.locatorCreateMailButtonWithoutText);
}
public getList() {
diff --git a/goofy-client/apps/goofy-e2e/src/integration/main-tests/postfach-mail/postfach-mail.e2e-spec.ts b/goofy-client/apps/goofy-e2e/src/integration/main-tests/postfach-mail/postfach-mail.e2e-spec.ts
index 04b274ef1774b2bb59793195f07101e811373dc1..99844d505e8c803520c4f4fb46509e95a862c1eb 100644
--- a/goofy-client/apps/goofy-e2e/src/integration/main-tests/postfach-mail/postfach-mail.e2e-spec.ts
+++ b/goofy-client/apps/goofy-e2e/src/integration/main-tests/postfach-mail/postfach-mail.e2e-spec.ts
@@ -118,8 +118,12 @@ describe('PostfachMail', () => {
exist(vorgangPage.getVorgangDetailHeader().getRoot());
})
- it('should show postfach mail button', () => {
- exist(postfachMailContainer.getButton());
+ it('should show postfach mail button with text', () => {
+ exist(postfachMailContainer.getCreateButtonWithText());
+ })
+
+ it('should show postfach mail button without text', () => {
+ exist(postfachMailContainer.getCreateButtonWithoutText());
})
it('should show postfach mail button in subnavigation', () => {
@@ -141,7 +145,7 @@ describe('PostfachMail', () => {
describe('click on button should open dialog', () => {
it('should show fixed dialog header and content', () => {
- postfachMailContainer.getButton().click();
+ postfachMailContainer.getCreateButtonWithText().click();
waitForSpinnerToDisappear();
exist(fixedDialog.getDialogHeader());
@@ -380,7 +384,7 @@ describe('PostfachMail', () => {
})
it('should not show postfach mail button', () => {
- notExist(postfachMailContainer.getButton());
+ notExist(postfachMailContainer.getCreateButtonWithText());
})
it('should not show postfach mail button in subnavigation', () => {
@@ -409,7 +413,7 @@ describe('PostfachMail', () => {
})
it('should show postfach mail button', () => {
- exist(postfachMailContainer.getButton());
+ exist(postfachMailContainer.getCreateButtonWithText());
})
it('should show postfach mail button in subnavigation', () => {
diff --git a/goofy-client/libs/postfach/src/lib/postfach-mail-button-container/postfach-mail-button-container.component.html b/goofy-client/libs/postfach/src/lib/postfach-mail-button-container/postfach-mail-button-container.component.html
index 5f9c6f92a10036f65795851519aa5ed4a00ff5bc..67a9a88a8a6f05d3777565fe2e2e230bae405673 100644
--- a/goofy-client/libs/postfach/src/lib/postfach-mail-button-container/postfach-mail-button-container.component.html
+++ b/goofy-client/libs/postfach/src/lib/postfach-mail-button-container/postfach-mail-button-container.component.html
@@ -29,6 +29,8 @@
[pendingSendPostfachMailCommand]="pendingSendPostfachMailCommand$ | async"
[postfachMailListStateResource]="postfachMailListStateResource"
[showAsIconButton]="showAsIconButton"
+ [toolTip]="toolTip"
+ [text]="text"
(openPostfachNachrichtenDialog)="openPostfachMailDialog(postfachMailListStateResource)">
</goofy-client-postfach-mail-button>
diff --git a/goofy-client/libs/postfach/src/lib/postfach-mail-button-container/postfach-mail-button-container.component.ts b/goofy-client/libs/postfach/src/lib/postfach-mail-button-container/postfach-mail-button-container.component.ts
index dc33cfb7e66177e9268189dee82c7a93a7ca08bb..f414a7836f4b9b9c5e9e5cf335f2ee2c058875b3 100644
--- a/goofy-client/libs/postfach/src/lib/postfach-mail-button-container/postfach-mail-button-container.component.ts
+++ b/goofy-client/libs/postfach/src/lib/postfach-mail-button-container/postfach-mail-button-container.component.ts
@@ -53,6 +53,8 @@ export class PostfachMailButtonContainerComponent {
}
}
@Input() showAsIconButton: boolean;
+ @Input() text: string;
+ @Input() toolTip: string;
pendingSendPostfachMailCommand$: Observable<StateResource<CommandResource>>;
postfachMailListStateResource$: Observable<StateResource<PostfachMailListResource>>;
diff --git a/goofy-client/libs/postfach/src/lib/postfach-mail-button-container/postfach-mail-button/postfach-mail-button.component.html b/goofy-client/libs/postfach/src/lib/postfach-mail-button-container/postfach-mail-button/postfach-mail-button.component.html
index 8a10653a1acbda212cbf05093f8c15d21b100f6b..84e14cd1b588e750854fdb3b97619b0b357c980a 100644
--- a/goofy-client/libs/postfach/src/lib/postfach-mail-button-container/postfach-mail-button/postfach-mail-button.component.html
+++ b/goofy-client/libs/postfach/src/lib/postfach-mail-button-container/postfach-mail-button/postfach-mail-button.component.html
@@ -24,11 +24,19 @@
-->
<ng-container *ngIf="postfachMailListStateResource.resource | hasLink: postfachMailListLinkRel.SEND_POSTFACH_MAIL">
+ <!-- TODO Aufteilen in 3 einzelne Komponenten -->
+ <goofy-client-button-with-spinner *ngIf="!showAsIconButton && text && !toolTip" data-test-id="create-mail-button-with-text"
+ [showSpinner]="pendingSendPostfachMailCommand.resource | hasLink: commandLinkRel.UPDATE"
+ class="create-button"
+ [text]="text"
+ icon="add"
+ (clickEmitter)="openPostfachNachrichtenDialog.emit()">
+ </goofy-client-button-with-spinner>
- <goofy-client-button-with-spinner *ngIf="!showAsIconButton" data-test-id="send-mail-button"
+ <goofy-client-button-with-spinner *ngIf="!showAsIconButton && !text && toolTip" data-test-id="create-mail-button-without-text"
[showSpinner]="pendingSendPostfachMailCommand.resource | hasLink: commandLinkRel.UPDATE"
class="create-button"
- text="Nachricht"
+ [toolTip]="toolTip"
icon="add"
(clickEmitter)="openPostfachNachrichtenDialog.emit()">
</goofy-client-button-with-spinner>
@@ -39,5 +47,5 @@
toolTip="Neue Nachricht erstellen"
(clickEmitter)="openPostfachNachrichtenDialog.emit()">
</goofy-client-icon-button-with-spinner>
-
+
</ng-container>
\ No newline at end of file
diff --git a/goofy-client/libs/postfach/src/lib/postfach-mail-button-container/postfach-mail-button/postfach-mail-button.component.spec.ts b/goofy-client/libs/postfach/src/lib/postfach-mail-button-container/postfach-mail-button/postfach-mail-button.component.spec.ts
index 7f6ff695ef6972fbb99dd07370287d436bf50713..b55c1d860e8d2b65428dfcd45266fbfc1e08da89 100644
--- a/goofy-client/libs/postfach/src/lib/postfach-mail-button-container/postfach-mail-button/postfach-mail-button.component.spec.ts
+++ b/goofy-client/libs/postfach/src/lib/postfach-mail-button-container/postfach-mail-button/postfach-mail-button.component.spec.ts
@@ -22,11 +22,13 @@
* unter der Lizenz sind dem Lizenztext zu entnehmen.
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
+import faker from '@faker-js/faker';
import { PostfachMailListLinkRel } from '@goofy-client/postfach-shared';
-import { createStateResource, HasLinkPipe } from '@goofy-client/tech-shared';
+import { createStateResource, EMPTY_STRING, HasLinkPipe } from '@goofy-client/tech-shared';
import { ButtonWithSpinnerComponent, IconButtonWithSpinnerComponent } from '@goofy-client/ui';
import { createCommandResource } from 'libs/command-shared/test/command';
import { createPostfachMailListResource } from 'libs/postfach-shared/test/postfach';
+import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
import { MockComponent } from 'ng-mocks';
import { PostfachMailButtonComponent } from './postfach-mail-button.component';
@@ -34,8 +36,9 @@ describe('PostfachMailButtonComponent', () => {
let component: PostfachMailButtonComponent;
let fixture: ComponentFixture<PostfachMailButtonComponent>;
- const sendMailButton: string = '[data-test-id="send-mail-button"]';
- const sendMailIconButton: string = '[data-test-id="send-mail-icon-button"]';
+ const sendMailButtonWithText: string = getDataTestIdOf('create-mail-button-with-text');
+ const sendMailButtonWithoutText: string = getDataTestIdOf('create-mail-button-without-text');
+ const sendMailIconButton: string = getDataTestIdOf('send-mail-icon-button');
beforeEach(async () => {
await TestBed.configureTestingModule({
@@ -60,30 +63,66 @@ describe('PostfachMailButtonComponent', () => {
});
describe('send mail button', () => {
-
beforeEach(() => {
component.showAsIconButton = false;
- fixture.detectChanges();
})
- it('should be hidden', () => {
- component.postfachMailListStateResource = createStateResource(createPostfachMailListResource());
+ describe('with text', () => {
- fixture.detectChanges();
- const buttonElement = fixture.nativeElement.querySelector(sendMailButton);
+ beforeEach(() => {
+ component.text = faker.word.noun();
+ component.toolTip = EMPTY_STRING;
+ fixture.detectChanges();
+ })
- expect(buttonElement).not.toBeInstanceOf(HTMLElement);
- });
+ it('should be hidden', () => {
+ component.postfachMailListStateResource = createStateResource(createPostfachMailListResource());
- it('should be visible', () => {
- component.postfachMailListStateResource = createStateResource(createPostfachMailListResource([PostfachMailListLinkRel.SEND_POSTFACH_MAIL]));
- component.pendingSendPostfachMailCommand = createStateResource(createCommandResource());
+ fixture.detectChanges();
+ const buttonElement = fixture.nativeElement.querySelector(sendMailButtonWithText);
- fixture.detectChanges();
- const buttonElement = fixture.nativeElement.querySelector(sendMailButton);
+ expect(buttonElement).not.toBeInstanceOf(HTMLElement);
+ });
+
+ it('should be visible', () => {
+ component.postfachMailListStateResource = createStateResource(createPostfachMailListResource([PostfachMailListLinkRel.SEND_POSTFACH_MAIL]));
+ component.pendingSendPostfachMailCommand = createStateResource(createCommandResource());
+
+ fixture.detectChanges();
+ const buttonElement = fixture.nativeElement.querySelector(sendMailButtonWithText);
+
+ expect(buttonElement).toBeInstanceOf(HTMLElement);
+ });
+ })
+
+ describe('without text', () => {
+
+ beforeEach(() => {
+ component.text = EMPTY_STRING;
+ component.toolTip = faker.word.noun();
+ fixture.detectChanges();
+ })
+
+ it('should be hidden', () => {
+ component.postfachMailListStateResource = createStateResource(createPostfachMailListResource());
+
+ fixture.detectChanges();
+ const buttonElement = fixture.nativeElement.querySelector(sendMailButtonWithoutText);
+
+ expect(buttonElement).not.toBeInstanceOf(HTMLElement);
+ });
+
+ it('should be visible', () => {
+ component.postfachMailListStateResource = createStateResource(createPostfachMailListResource([PostfachMailListLinkRel.SEND_POSTFACH_MAIL]));
+ component.pendingSendPostfachMailCommand = createStateResource(createCommandResource());
+
+ fixture.detectChanges();
+ const buttonElement = fixture.nativeElement.querySelector(sendMailButtonWithoutText);
+
+ expect(buttonElement).toBeInstanceOf(HTMLElement);
+ });
+ })
- expect(buttonElement).toBeInstanceOf(HTMLElement);
- });
})
describe('send mail icon button', () => {
diff --git a/goofy-client/libs/postfach/src/lib/postfach-mail-button-container/postfach-mail-button/postfach-mail-button.component.ts b/goofy-client/libs/postfach/src/lib/postfach-mail-button-container/postfach-mail-button/postfach-mail-button.component.ts
index 47053dbfb6eefde0079952c97a845a85502a396b..99fcf4b382754ca3e319239e426b61e22d484063 100644
--- a/goofy-client/libs/postfach/src/lib/postfach-mail-button-container/postfach-mail-button/postfach-mail-button.component.ts
+++ b/goofy-client/libs/postfach/src/lib/postfach-mail-button-container/postfach-mail-button/postfach-mail-button.component.ts
@@ -37,6 +37,8 @@ export class PostfachMailButtonComponent {
@Input() showAsIconButton: boolean;
@Input() postfachMailListStateResource: StateResource<PostfachMailListResource> = createEmptyStateResource<PostfachMailListResource>();
@Input() pendingSendPostfachMailCommand: StateResource<CommandResource> = createEmptyStateResource<CommandResource>();
+ @Input() text: string;
+ @Input() toolTip: string;
@Output() openPostfachNachrichtenDialog: EventEmitter<void> = new EventEmitter();
diff --git a/goofy-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/postfach-mail-list.component.html b/goofy-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/postfach-mail-list.component.html
index 5cb98c6e3aefc9ec8549b28643e50e18846b3728..c7a628281fefb1dcf3dff400f80d8adb00173d84 100644
--- a/goofy-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/postfach-mail-list.component.html
+++ b/goofy-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/postfach-mail-list.component.html
@@ -26,6 +26,9 @@
<div class="nachrichten-header">
<h3 class="nachrichten">Nachrichten</h3>
<goofy-client-postfach-mail-pdf-button-container [postfachMailListResource]="postfachMailListStateResource.resource"></goofy-client-postfach-mail-pdf-button-container>
+ <ng-container *ngIf="postfachMailListStateResource.resource | hasLink: postfachMailListLinkRel.SEND_POSTFACH_MAIL">
+ <goofy-client-postfach-mail-button-container toolTip="Neue Nachricht erstellen" [vorgang]="vorgang" data-test-id="postfach-mail-button-container-no-label"></goofy-client-postfach-mail-button-container>
+ </ng-container>
</div>
<goofy-client-spinner [stateResource]="postfachMailListStateResource">
@@ -38,7 +41,7 @@
</goofy-client-spinner>
<ng-container *ngIf="postfachMailListStateResource.resource | hasLink: postfachMailListLinkRel.SEND_POSTFACH_MAIL; else noPostfach">
- <goofy-client-postfach-mail-button-container [vorgang]="vorgang" data-test-id="postfach-mail-button-container"></goofy-client-postfach-mail-button-container>
+ <goofy-client-postfach-mail-button-container text="Nachricht" [vorgang]="vorgang" data-test-id="postfach-mail-button-container"></goofy-client-postfach-mail-button-container>
</ng-container>
<ng-template #noPostfach>
diff --git a/goofy-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/postfach-mail-list.component.scss b/goofy-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/postfach-mail-list.component.scss
index 0673dd871dfd3871f40a44d59b822e3ef40a6397..dca0271a7a0e32cf3049ad4e12aad58493fdbede 100644
--- a/goofy-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/postfach-mail-list.component.scss
+++ b/goofy-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/postfach-mail-list.component.scss
@@ -35,11 +35,6 @@
border-radius: 8px;
outline: 0;
- &:hover,
- &:focus-within {
- // TODO add Keyboard focus
- }
-
::ng-deep {
.message {
opacity: 0.6;
@@ -47,10 +42,6 @@
}
}
-h3 {
- font-weight: 500;
-}
-
.nachrichten-header {
border-top: 1px solid rgba(0, 0, 0, 0.08);
margin-top: 16px;
@@ -59,4 +50,13 @@ h3 {
width: 100%;
justify-content: space-between;
align-items: center;
+
+ h3 {
+ font-weight: 500;
+ flex-grow: 2;
+ }
+
+ goofy-client-postfach-mail-pdf-button-container {
+ margin: 0 0.75rem;
+ }
}
\ No newline at end of file