OZG-130 tooltip datePipe

goofy-client/libs/tech-shared/src/lib/pipes/format-list-date.pipe.spec.ts

 import { FormatListDatePipe } from './format-list-date.pipe';
+import { registerLocaleData } from '@angular/common';
+import localeDe from '@angular/common/locales/de';
+import localeDeExtra from '@angular/common/locales/extra/de';
+
+registerLocaleData(localeDe, 'de', localeDeExtra);
 
 describe('FormatListDatePipe', () => {
-  it('create an instance', () => {
-    const pipe = new FormatListDatePipe();
+	let pipe: FormatListDatePipe = new FormatListDatePipe();
+
+  it('should create', () => {
 	  expect(pipe).toBeTruthy();
 	});
+	
+	it('should return "Heute"', () => {
+		const date: Date = new Date();
+
+		const result: string = pipe.transform(date);
+
+		expect(result).toBe('Heute');
+	})
+
+		describe('format date in the past', () => {
+
+			it('should return "Gestern"', () => {
+				const date: Date = new Date();
+				date.setDate(date.getDate() - 1);
+
+				const result: string = pipe.transform(date);
+
+				expect(result).toBe('Gestern');
+			})
+			it('should return "Vorgestern"', () => {
+				const date: Date = new Date();
+				date.setDate(date.getDate() - 2);
+
+				const result: string = pipe.transform(date);
+
+				expect(result).toBe('Vorgestern');
+			})
+		})
+
+		describe('format date in the future', () => {
+			it('should return "Morgen"', () => {
+				const date: Date = new Date();
+				date.setDate(date.getDate() + 1);
+
+				const result: string = pipe.transform(date);
+
+				expect(result).toBe('Morgen');
+			})
+
+			it('should return "Übermorgen"', () => {
+				const date: Date = new Date();
+				date.setDate(date.getDate() + 2);
+
+				const result: string = pipe.transform(date);
+
+				expect(result).toBe('Übermorgen');
+			})
+		})
+
+		it('should return formatted for this year', () => {
+			const date: Date = new Date();
+			date.setFullYear(date.getFullYear(), 4, 10);
+
+			const result: string = pipe.transform(date);
+
+			expect(result).toBe('10.Mai');
+		})
+
+		it('should format in "dd.MM.yyyy"', () => {
+			const date: Date = new Date();
+			date.setFullYear(2050, 4, 10);
+
+			const result: string = pipe.transform(date);
+
+			expect(result).toBe('10.05.2050');
+		})	
 });
\ No newline at end of file

goofy-client/libs/tech-shared/src/lib/pipes/format-list-date.pipe.ts

@@ -4,31 +4,43 @@ import * as moment from 'moment';
 
 @Pipe({ name: 'formatListDate' })
 export class FormatListDatePipe implements PipeTransform {
-	dateFormat: string = 'dd.MM.yyyy';
+	readonly dateFormat: string = 'dd.MM.yyyy';
 
 	transform(date: Date) {
-		const isToday = moment().isSame(date, 'day')
-		const isYesterday = moment().subtract(1,'days').isSame(date, 'day')
-		const isDayBeforeYesterday = moment().subtract(2,'days').isSame(date, 'day')
-		const isTomorrow = moment().add(1,'days').isSame(date, 'day')
-		const isDayAfterTomorrow = moment().add(2,'days').isSame(date, 'day')
-		const isThisYear = moment().isSame(date, 'year')
-
-		if (isToday) {
-			return 'Heute';
-		} else if (isYesterday) {
-			return 'Gestern'
-		} else if (isDayBeforeYesterday) {
-			return 'Vorgestern'
-		} else if (isTomorrow) {
-			return 'Morgen'
-		} else if (isDayAfterTomorrow) {
-			return 'Übermorgen'
-		} else if (isThisYear) {
-			this.dateFormat = 'd. MMM';
-		}
-
-		return formatDate(<Date>date, this.dateFormat, 'de');
+		if (this.isToday(date)) return 'Heute';
+		if (this.isYesterday(date)) return 'Gestern';
+		if (this.isDayBeforeYesterday(date)) return 'Vorgestern';
+		if (this.isTomorrow(date)) return 'Morgen';
+		if (this.isDayAfterTomorrow(date)) return 'Übermorgen';
+
+		if (this.isThisYear(date)) {
+			return formatDate(date, 'd.MMM', 'de');
+		}
+		
+		return formatDate(date, this.dateFormat, 'de');
+	}
+
+	private isToday(date: Date): boolean {
+		return moment().isSame(date, 'day');
+	}
+
+	private isYesterday(date: Date): boolean {
+		return moment().subtract(1,'days').isSame(date, 'day')
 	}
 
+	private isDayBeforeYesterday(date: Date): boolean {
+		return moment().subtract(2,'days').isSame(date, 'day')
+	}
+
+	private isTomorrow(date: Date): boolean {
+		return moment().add(1,'days').isSame(date, 'day')
+	}
+	 
+	private isDayAfterTomorrow(date: Date): boolean {
+		return moment().add(2,'days').isSame(date, 'day')
+	}
+
+	private isThisYear(date: Date): boolean {
+		return moment().isSame(date, 'year')
+	}
 }

goofy-client/libs/tech-shared/src/lib/pipes/format-tooltip-list-date.spec.ts

+import { FormatTooltipListDatePipe } from './format-tooltip-list-date';
+import { registerLocaleData } from '@angular/common';
+import localeDe from '@angular/common/locales/de';
+import localeDeExtra from '@angular/common/locales/extra/de';
+
+registerLocaleData(localeDe, 'de', localeDeExtra);
+
+describe('FormatTooltipListDate', () => {
+	let pipe: FormatTooltipListDatePipe = new FormatTooltipListDatePipe();
+
+	it('should create', () => {
+		expect(pipe).toBeTruthy();
+	  });
+
+	it('should return in date in format', () => {
+		const date: Date = new Date('01.01.2021');
+
+		const result: string = pipe.transform(date);
+
+		expect(result).toBe('Freitag, 01.01.2021, 0:00:00');
+	})
+})
\ No newline at end of file

goofy-client/libs/tech-shared/src/lib/pipes/format-tooltip-list-date.ts

+import { formatDate } from '@angular/common';
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'formatTooltipListDate' })
+export class FormatTooltipListDatePipe implements PipeTransform {
+	dateFormat: string = 'EEEE, dd.MM.y, H:mm:ss';
+
+	transform(date: Date) {
+		return formatDate(date, this.dateFormat, 'de');
+	}
+}

goofy-client/libs/tech-shared/src/lib/tech-shared.module.ts

@@ -3,18 +3,21 @@ import { CommonModule } from '@angular/common';
 import { ObserveIntersectionDirective } from './directives/observe-intersection.directive';
 import { FormatListDatePipe } from './pipes/format-list-date.pipe';
 import { EnumToLabelPipe } from './pipes/enum-to-label';
+import { FormatTooltipListDatePipe } from './pipes/format-tooltip-list-date';
 
 @NgModule({
 	imports: [CommonModule],
 	declarations: [
 		ObserveIntersectionDirective,
 		FormatListDatePipe,
-		EnumToLabelPipe
+		EnumToLabelPipe,
+		FormatTooltipListDatePipe
 	],
 	exports: [
 		ObserveIntersectionDirective,
 		FormatListDatePipe,
-		EnumToLabelPipe
+		EnumToLabelPipe,
+		FormatTooltipListDatePipe
 	]
 })
 export class TechSharedModule {}

goofy-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.html

@@ -13,7 +13,7 @@
 </div>
 
 <div class="dates column">
-	<div class="row date" matTooltip="Eingang: {{vorgang.initialDate | date: 'EEEE, dd.MM.y, H:mm:ss'}}">
+	<div class="row date" matTooltip="Eingang: {{vorgang.initialDate | formatTooltipListDate }}">
 		<mat-icon svgIcon="incoming"></mat-icon>
 		<span>{{ vorgang.initialDate | formatListDate }}</span>
 	</div>