OZG-1194 büroklammer bei nachrichten attachments ausrichten

goofy-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/postfach-mail/incomming-mail/incomming-mail.component.html

@@ -6,6 +6,12 @@
 		</div>
 		<goofy-client-postfach-mail-date class="date" [postfachMail]="postfachMail"></goofy-client-postfach-mail-date>
 	</div>
-
+	<div class="second-row">
 		<div class="message overflow" data-test-id="mail-text">{{ postfachMail.mailBody }}</div>
+		<mat-icon *ngIf="(postfachMail | hasLink: postfachNachrichtLinkRel.ATTACHMENTS) && !onPage" data-test-id="postfach-nachricht-attachment-icon">attach_file</mat-icon>
+	</div>
 </a>
+
+<goofy-client-postfach-nachricht-attachments *ngIf="(postfachMail | hasLink: postfachNachrichtLinkRel.ATTACHMENTS) && onPage" data-test-id="postfach-nachricht-attachments-container"
+		[postfachNachricht]="postfachMail">
+</goofy-client-postfach-nachricht-attachments>

goofy-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/postfach-mail/incomming-mail/incomming-mail.component.scss

@@ -37,3 +37,10 @@ a {
 	justify-content: space-between;
 	width: 100%;
 }
+
+.second-row {
+	display: flex;
+	white-space: nowrap;
+	justify-content: space-between;
+	width: 100%;
+}

goofy-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/postfach-mail/incomming-mail/incomming-mail.component.spec.ts

@@ -2,11 +2,14 @@ import { registerLocaleData } from '@angular/common';
 import localeDe from '@angular/common/locales/de';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatIcon } from '@angular/material/icon';
-import { FormatDateWithTimePipe } from '@goofy-client/tech-shared';
+import { FormatDateWithTimePipe, HasLinkPipe } from '@goofy-client/tech-shared';
 import { MockComponent } from 'ng-mocks';
 import { createPostfachMailResource } from '../../../../../../../postfach-shared/test/postfach';
 import { PostfachMailDateComponent } from '../postfach-mail-date/postfach-mail-date.component';
 import { IncommingMailComponent } from './incomming-mail.component';
+import { getElementFromFixture } from '@goofy-client/test-utils';
+import { ON_PAGE, PostfachMailLinkRel } from '@goofy-client/postfach-shared';
+import { PostfachNachrichtAttachmentsComponent } from '../postfach-nachricht-attachments/postfach-nachricht-attachments.component';
 
 registerLocaleData(localeDe);
 
@@ -14,13 +17,25 @@ describe('IncommingMailComponent', () => {
 	let component: IncommingMailComponent;
 	let fixture: ComponentFixture<IncommingMailComponent>;
 
+	const attachmentContainer: string = '[data-test-id="postfach-nachricht-attachments-container"]';
+	const attachmentIcon: string = '[data-test-id="postfach-nachricht-attachment-icon"]';
+
 	beforeEach(async () => {
 		await TestBed.configureTestingModule({
 			declarations: [
 				IncommingMailComponent,
 				MatIcon,
 				FormatDateWithTimePipe,
-				MockComponent(PostfachMailDateComponent)
+				MockComponent(PostfachMailDateComponent),
+				HasLinkPipe,
+				MatIcon,
+				MockComponent(PostfachNachrichtAttachmentsComponent)
+			],
+			providers: [
+				{
+					provide: ON_PAGE,
+					useValue: undefined
+				}
 			]
 		}).compileComponents();
 	});
@@ -35,4 +50,37 @@ describe('IncommingMailComponent', () => {
 	it('should create', () => {
 		expect(component).toBeTruthy();
 	});
+
+	describe('attachments', () => {
+
+		it('should not show attachments loaded if exists', () => {
+			component.onPage = true;
+			component.postfachMail = createPostfachMailResource();
+			fixture.detectChanges();
+
+			const element = getElementFromFixture(fixture, attachmentContainer);
+
+			expect(element).not.toBeInstanceOf(HTMLElement);
+		})
+
+		it('should be loaded if exists', () => {
+			component.onPage = true;
+			component.postfachMail = createPostfachMailResource([PostfachMailLinkRel.ATTACHMENTS]);
+			fixture.detectChanges();
+
+			const element = getElementFromFixture(fixture, attachmentContainer);
+
+			expect(element).toBeInstanceOf(HTMLElement);
+		})
+
+		it('should only show attachment icon on detail', () => {
+			component.onPage = false;
+			component.postfachMail = createPostfachMailResource([PostfachMailLinkRel.ATTACHMENTS]);
+			fixture.detectChanges();
+
+			const element = getElementFromFixture(fixture, attachmentIcon);
+
+			expect(element).toBeInstanceOf(HTMLElement);
+		})
+	})
 });

goofy-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/postfach-mail/incomming-mail/incomming-mail.component.ts

-import { Component, Input } from '@angular/core';
-import { PostfachMailResource } from '@goofy-client/postfach-shared';
+import { Component, Inject, Input } from '@angular/core';
+import { ON_PAGE, PostfachMailLinkRel, PostfachMailResource } from '@goofy-client/postfach-shared';
 
 @Component({
 	selector: 'goofy-client-incomming-mail',
@@ -8,5 +8,9 @@ import { PostfachMailResource } from '@goofy-client/postfach-shared';
 })
 export class IncommingMailComponent {
 
+	readonly postfachNachrichtLinkRel = PostfachMailLinkRel;
+
+	constructor(@Inject(ON_PAGE) public onPage: boolean) {}
+
 	@Input() postfachMail: PostfachMailResource;
 }

goofy-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/postfach-mail/postfach-mail.component.html

 <goofy-client-incomming-mail *ngIf="isIncomingMail" [postfachMail]="postfachMail"></goofy-client-incomming-mail>
 <goofy-client-outgoing-mail *ngIf="!isIncomingMail" [postfachMail]="postfachMail"></goofy-client-outgoing-mail>
-
-<ng-container *ngIf="onPage; else icon">
-	<goofy-client-postfach-nachricht-attachments *ngIf="postfachMail | hasLink: postfachNachrichtLinkRel.ATTACHMENTS" data-test-id="postfach-nachricht-attachments-container"
-		[postfachNachricht]="postfachMail">
-	</goofy-client-postfach-nachricht-attachments>
-</ng-container>
-<ng-template #icon>
-	<mat-icon data-test-id="postfach-nachricht-attachment-icon">attach_file</mat-icon>
-</ng-template>
\ No newline at end of file

goofy-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/postfach-mail/postfach-mail.component.spec.ts

@@ -14,24 +14,12 @@ describe('PostfachMailComponent', () => {
 	let component: PostfachMailComponent;
 	let fixture: ComponentFixture<PostfachMailComponent>;
 
-	const attachmentContainer: string = '[data-test-id="postfach-nachricht-attachments-container"]';
-	const attachmentIcon: string = '[data-test-id="postfach-nachricht-attachment-icon"]';
-
 	beforeEach(async () => {
 		await TestBed.configureTestingModule({
 			declarations: [
 				PostfachMailComponent,
-				HasLinkPipe,
-				MatIcon,
 				MockComponent(IncommingMailComponent),
-				MockComponent(OutgoingMailComponent),
-				MockComponent(PostfachNachrichtAttachmentsComponent)
-			],
-			providers: [
-				{
-					provide: ON_PAGE,
-					useValue: undefined
-				}
+				MockComponent(OutgoingMailComponent)
 			]
 		}).compileComponents();
 	});
@@ -46,36 +34,4 @@ describe('PostfachMailComponent', () => {
 	it('should create', () => {
 		expect(component).toBeTruthy();
 	});
-
-	describe('attachments', () => {
-
-		it('should not show attachments loaded if exists', () => {
-			component.onPage = true;
-			component.postfachMail = createPostfachMailResource();
-			fixture.detectChanges();
-
-			const element = getElementFromFixture(fixture, attachmentContainer);
-
-			expect(element).not.toBeInstanceOf(HTMLElement);
-		})
-
-		it('should be loaded if exists', () => {
-			component.onPage = true;
-			component.postfachMail = createPostfachMailResource([PostfachMailLinkRel.ATTACHMENTS]);
-			fixture.detectChanges();
-
-			const element = getElementFromFixture(fixture, attachmentContainer);
-
-			expect(element).toBeInstanceOf(HTMLElement);
-		})
-
-		it('should only show attachment icon on detail', () => {
-			component.onPage = false;
-			fixture.detectChanges();
-
-			const element = getElementFromFixture(fixture, attachmentIcon);
-
-			expect(element).toBeInstanceOf(HTMLElement);
-		})
-	})
 });

goofy-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/postfach-mail/postfach-mail.component.ts

@@ -10,9 +10,7 @@ export class PostfachMailComponent {
 
 	@Input() postfachMail: PostfachMailResource;
 
-	readonly postfachNachrichtLinkRel = PostfachMailLinkRel;
-
-	constructor(@Inject(ON_PAGE) public onPage: boolean) { }
+	constructor() { }
 
 	get isIncomingMail(): boolean {
 		return isIncomingMail(this.postfachMail);