From cd34706c67a025a34ddabc67078a23586c2f8ff2 Mon Sep 17 00:00:00 2001
From: OZGCloud <ozgcloud@mgm-tp.com>
Date: Fri, 8 Jan 2021 12:28:40 +0100
Subject: [PATCH] OZG-130 tooltip datePipe
---
.../lib/pipes/format-list-date.pipe.spec.ts | 82 +++++++++++++++++--
.../src/lib/pipes/format-list-date.pipe.ts | 54 +++++++-----
.../pipes/format-tooltip-list-date.spec.ts | 22 +++++
.../src/lib/pipes/format-tooltip-list-date.ts | 11 +++
.../tech-shared/src/lib/tech-shared.module.ts | 7 +-
.../vorgang-list-item.component.html | 2 +-
6 files changed, 149 insertions(+), 29 deletions(-)
create mode 100644 goofy-client/libs/tech-shared/src/lib/pipes/format-tooltip-list-date.spec.ts
create mode 100644 goofy-client/libs/tech-shared/src/lib/pipes/format-tooltip-list-date.ts
diff --git a/goofy-client/libs/tech-shared/src/lib/pipes/format-list-date.pipe.spec.ts b/goofy-client/libs/tech-shared/src/lib/pipes/format-list-date.pipe.spec.ts
index 351ab8fe27..2488238eb5 100644
--- a/goofy-client/libs/tech-shared/src/lib/pipes/format-list-date.pipe.spec.ts
+++ b/goofy-client/libs/tech-shared/src/lib/pipes/format-list-date.pipe.spec.ts
@@ -1,8 +1,80 @@
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();
- expect(pipe).toBeTruthy();
- });
-});
+ 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
diff --git a/goofy-client/libs/tech-shared/src/lib/pipes/format-list-date.pipe.ts b/goofy-client/libs/tech-shared/src/lib/pipes/format-list-date.pipe.ts
index 216305f3a6..141aed8bb7 100644
--- a/goofy-client/libs/tech-shared/src/lib/pipes/format-list-date.pipe.ts
+++ b/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';
+ 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')
+ }
- return formatDate(<Date>date, this.dateFormat, 'de');
+ 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')
+ }
}
diff --git a/goofy-client/libs/tech-shared/src/lib/pipes/format-tooltip-list-date.spec.ts b/goofy-client/libs/tech-shared/src/lib/pipes/format-tooltip-list-date.spec.ts
new file mode 100644
index 0000000000..c373ff7f7b
--- /dev/null
+++ b/goofy-client/libs/tech-shared/src/lib/pipes/format-tooltip-list-date.spec.ts
@@ -0,0 +1,22 @@
+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
diff --git a/goofy-client/libs/tech-shared/src/lib/pipes/format-tooltip-list-date.ts b/goofy-client/libs/tech-shared/src/lib/pipes/format-tooltip-list-date.ts
new file mode 100644
index 0000000000..b33f4a2d02
--- /dev/null
+++ b/goofy-client/libs/tech-shared/src/lib/pipes/format-tooltip-list-date.ts
@@ -0,0 +1,11 @@
+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');
+ }
+}
diff --git a/goofy-client/libs/tech-shared/src/lib/tech-shared.module.ts b/goofy-client/libs/tech-shared/src/lib/tech-shared.module.ts
index 3fdcd16cad..149461b3c0 100644
--- a/goofy-client/libs/tech-shared/src/lib/tech-shared.module.ts
+++ b/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 {}
diff --git a/goofy-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.html b/goofy-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.html
index cc22b7a111..26a7a4fed6 100644
--- a/goofy-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.html
+++ b/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>
--
GitLab