feat(pipes): added date-ago pipe

Indicates in a textual way how much time has passed since the indicated date

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"
     }
   }
 }

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"
     }
   }
 }

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;
   }
 
   /**

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<DateAgoPipeInterval, number>([
+      ['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 '';
+  }
+}

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