From 97b3aed79e9e344eb6fc04e7f4f9cbfcf3c2a8be Mon Sep 17 00:00:00 2001 From: Antonino Bonanno Date: Sun, 14 Jan 2024 00:02:10 +0100 Subject: [PATCH] feat(pipes): added date-ago pipe Indicates in a textual way how much time has passed since the indicated date --- .../design-angular-kit/assets/i18n/en.json | 17 ++++++ .../design-angular-kit/assets/i18n/it.json | 17 ++++++ .../src/lib/design-angular-kit-config.ts | 4 +- .../src/lib/pipes/date-ago.pipe.ts | 58 +++++++++++++++++++ projects/design-angular-kit/src/public_api.ts | 1 + 5 files changed, 95 insertions(+), 2 deletions(-) create mode 100644 projects/design-angular-kit/src/lib/pipes/date-ago.pipe.ts diff --git a/projects/design-angular-kit/assets/i18n/en.json b/projects/design-angular-kit/assets/i18n/en.json index 3b91818d..8033c055 100644 --- a/projects/design-angular-kit/assets/i18n/en.json +++ b/projects/design-angular-kit/assets/i18n/en.json @@ -117,6 +117,23 @@ }, "go-to-homepage": "Return to homepage" } + }, + "date-ago-pipe": { + "just-now": "Just now", + "singular-year-ago": "{{count}} year ago", + "year-ago": "{{count}} years ago", + "singular-month-ago": "{{count}} month ago", + "month-ago": "{{count}} months ago", + "singular-week-ago": "{{count}} week ago", + "week-ago": "{{count}} weeks ago", + "singular-day-ago": "{{count}} day ago", + "day-ago": "{{count}} days ago", + "singular-hour-ago": "{{count}} hour ago", + "hour-ago": "{{count}} hours ago", + "singular-minute-ago": "{{count}} minute ago", + "minute-ago": "{{count}} minutes ago", + "singular-second-ago": "{{count}} second ago", + "second-ago": "{{count}} seconds ago" } } } diff --git a/projects/design-angular-kit/assets/i18n/it.json b/projects/design-angular-kit/assets/i18n/it.json index 62837c3d..54932a2c 100644 --- a/projects/design-angular-kit/assets/i18n/it.json +++ b/projects/design-angular-kit/assets/i18n/it.json @@ -117,6 +117,23 @@ }, "go-to-homepage": "Torna alla homepage" } + }, + "date-ago-pipe": { + "just-now": "Proprio adesso", + "singular-year-ago": "{{count}} anno fa", + "year-ago": "{{count}} anni fa", + "singular-month-ago": "{{count}} mese fa", + "month-ago": "{{count}} mesi fa", + "singular-week-ago": "{{count}} settimana fa", + "week-ago": "{{count}} settimane fa", + "singular-day-ago": "{{count}} giorno fa", + "day-ago": "{{count}} giorni fa", + "singular-hour-ago": "{{count}} ora fa", + "hour-ago": "{{count}} ore fa", + "singular-minute-ago": "{{count}} minuto fa", + "minute-ago": "{{count}} minuti fa", + "singular-second-ago": "{{count}} secondo fa", + "second-ago": "{{count}} secondi fa" } } } diff --git a/projects/design-angular-kit/src/lib/design-angular-kit-config.ts b/projects/design-angular-kit/src/lib/design-angular-kit-config.ts index 932d9eca..9b1fcc3c 100644 --- a/projects/design-angular-kit/src/lib/design-angular-kit-config.ts +++ b/projects/design-angular-kit/src/lib/design-angular-kit-config.ts @@ -11,8 +11,8 @@ export class DesignAngularKitConfig { */ private readonly initConfig?: DesignAngularKitInit; - constructor(nextInit?: DesignAngularKitInit) { - this.initConfig = nextInit; + constructor(designAngularKitInit?: DesignAngularKitInit) { + this.initConfig = designAngularKitInit; } /** diff --git a/projects/design-angular-kit/src/lib/pipes/date-ago.pipe.ts b/projects/design-angular-kit/src/lib/pipes/date-ago.pipe.ts new file mode 100644 index 00000000..031fd5c6 --- /dev/null +++ b/projects/design-angular-kit/src/lib/pipes/date-ago.pipe.ts @@ -0,0 +1,58 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import { TranslatePipe } from '@ngx-translate/core'; + +type DateAgoPipeInterval = 'year' | 'month' | 'week' | 'day' | 'hour' | 'minute' | 'second'; + +/** + * Indicates in a textual way how much time has passed since the indicated date + * @example 2 hours ago + */ +@Pipe({ + name: 'itDateAgo', + pure: false, + standalone: true, +}) +export class DateAgoPipe extends TranslatePipe implements PipeTransform { + + /** + * Indicates in a textual way how much time has passed since the indicated date + * @example 2 hours ago + * @param value the Date or date string + */ + override transform(value: string | Date): string { + if (!value) { + return ''; + } + + const seconds = Math.floor((+new Date() - +new Date(value)) / 1000); + if (isNaN(seconds)) { + return ''; + } + + // less than 30 seconds ago will show as 'Just now' + if (seconds < 29) { + return super.transform('it.date-ago-pipe.just-now'); + } + + const intervals = new Map([ + ['year', 31536000], + ['month', 2592000], + ['week', 604800], + ['day', 86400], + ['hour', 3600], + ['minute', 60], + ['second', 1], + ]); + + for (const interval of intervals) { + const counter = Math.floor(seconds / interval[1]); + if (counter > 0) { + return super.transform(`it.date-ago-pipe.${counter === 1 ? 'singular-' : ''}${interval[0]}-ago`, { + count: counter, + }); + } + } + + return ''; + } +} diff --git a/projects/design-angular-kit/src/public_api.ts b/projects/design-angular-kit/src/public_api.ts index 20ee343a..0571105b 100644 --- a/projects/design-angular-kit/src/public_api.ts +++ b/projects/design-angular-kit/src/public_api.ts @@ -93,6 +93,7 @@ export * from './lib/components/utils/language-switcher/language-switcher.compon export * from './lib/services/notification/notification.service'; // Pipes +export * from './lib/pipes/date-ago.pipe'; export * from './lib/pipes/mark-matching-text.pipe'; // Interfaces