fix: ocx-time-ago-pipe

libs/angular-accelerator/assets/i18n/de.json

@@ -126,5 +126,18 @@
         "HORIZONTAL_BAR": "Zu horizontalem Balkendiagramm wechseln",
         "VERTICAL_BAR": "Zu vertikalem Balkendiagramm wechseln"
       }
+    },
+    "OCX_TIMEAGO": {
+      "A_DAY_AGO": "vor einem Tag",
+      "A_FEW_SECONDS_AGO": "vor ein paar Sekunden",
+      "AN_HOUR_AGO": "vor einer Stunde",
+      "A_MINUTE_AGO": "vor einer Minute",
+      "A_MONAT_AGO": "vor einem Monat",
+      "A_YEAR_AGO": "vor einem Jahr",
+      "DAYS_AGO": "vor {{days}} Tagen",
+      "HOURS_AGO": "vor {{hours}} Stunden",
+      "MINUTES_AGO": "vor {{minutes}} Minuten",
+      "MONTHS_AGO": "vor {{months}} Monaten",
+      "YEARS_AGO": "vor {{years}} Jahren"
     }
   }

libs/angular-accelerator/assets/i18n/en.json

@@ -126,5 +126,18 @@
         "HORIZONTAL_BAR": "Switch to horizontal bar chart",
         "VERTICAL_BAR": "Switch to vertical bar chart"
       }
+    },
+    "OCX_TIMEAGO": {
+      "A_DAY_AGO": "a day ago",
+      "A_FEW_SECONDS_AGO": "a few seconds ago",
+      "AN_HOUR_AGO": "an hour ago",
+      "A_MINUTE_AGO": "a minute ago",
+      "A_MONTH_AGO": "a month ago",
+      "A_YEAR_AGO": "a year ago",
+      "DAYS_AGO": "{{days}} days ago",
+      "HOURS_AGO": "{{hours}} hours ago",
+      "MINUTES_AGO": "{{minutes}} minutes ago",
+      "MONTHS_AGO": "{{months}} months ago",
+      "YEARS_AGO": "{{years}} years ago"
     }
   }

libs/angular-accelerator/package.json

@@ -14,8 +14,7 @@
     "chart.js": "^4.4.0",
     "d3-scale-chromatic": "^3.0.0",
     "rxjs": "~7.8.0",
-    "primeng": "^15.2.1",
-    "ngx-timeago": "^2.0.0"
+    "primeng": "^15.2.1"
   },
   "dependencies": {},
   "exports": {

libs/angular-accelerator/src/lib/angular-accelerator.module.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common'
-import { CUSTOM_ELEMENTS_SCHEMA, LOCALE_ID, NgModule, importProvidersFrom } from '@angular/core'
+import { CUSTOM_ELEMENTS_SCHEMA, LOCALE_ID, NgModule } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { RouterModule } from '@angular/router'
 import { HttpClient } from '@angular/common/http'
@@ -9,14 +9,6 @@ import {
   TranslateLoader,
   TranslateModule,
 } from '@ngx-translate/core'
-import {
-  TimeagoClock,
-  TimeagoCustomFormatter,
-  TimeagoDefaultClock,
-  TimeagoFormatter,
-  TimeagoIntl,
-  TimeagoModule,
-} from 'ngx-timeago'
 
 import { AppStateService, UserService } from '@onecx/angular-integration-interface'
 
@@ -38,7 +30,6 @@ import { DynamicPipe } from './pipes/dynamic.pipe'
 import { IfPermissionDirective } from './directives/if-permission.directive'
 import { IfBreakpointDirective } from './directives/if-breakpoint.directive'
 import { OcxTimeAgoPipe } from './pipes/ocxtimeago.pipe'
-import { OcxTimeagoIntl } from './utils/ocxtimeagointl.utils'
 import { createTranslateLoader } from './utils/create-translate-loader.utils'
 import { TranslationCacheService } from './services/translation-cache.service'
 import { SrcDirective } from './directives/src.directive'
@@ -98,25 +89,6 @@ export class AngularAcceleratorMissingTranslationHandler implements MissingTrans
       },
       deps: [UserService],
     },
-    {
-      provide: TimeagoIntl,
-      useFactory: (userService: UserService) => {
-        return new OcxTimeagoIntl(userService)
-      },
-      deps: [UserService],
-    },
-    importProvidersFrom(TimeagoModule),
-    {
-      provide: TimeagoFormatter,
-      useFactory: (TimeagoIntl: TimeagoIntl) => {
-        return new TimeagoCustomFormatter(TimeagoIntl)
-      },
-      deps: [TimeagoIntl],
-    },
-    {
-      provide: TimeagoClock,
-      useClass: TimeagoDefaultClock,
-    },
   ],
   exports: [
     ColumnGroupSelectionComponent,

libs/angular-accelerator/src/lib/pipes/ocxtimeago.pipe.ts

@@ -1,8 +1,88 @@
-import { Pipe } from '@angular/core'
-import { TimeagoPipe } from 'ngx-timeago'
+import { ChangeDetectorRef, NgZone, OnDestroy, Pipe, PipeTransform } from '@angular/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
 
 @Pipe({
   name: 'timeago',
 })
 // eslint-disable-next-line @angular-eslint/use-pipe-transform-interface
-export class OcxTimeAgoPipe extends TimeagoPipe {}
+export class OcxTimeAgoPipe extends TranslatePipe implements OnDestroy, PipeTransform {
+  private timer: number | undefined | null
+  constructor(
+    private changeDetectorRef: ChangeDetectorRef,
+    private ngZone: NgZone,
+    private translateService: TranslateService
+  ) {
+    super(translateService, changeDetectorRef)
+  }
+  override transform(value: string) {
+    this.removeTimer()
+    const d = new Date(value)
+    const now = new Date()
+    const seconds = Math.round(Math.abs((now.getTime() - d.getTime()) / 1000))
+    const timeToUpdate = Number.isNaN(seconds) ? 1000 : this.getSecondsUntilUpdate(seconds) * 1000
+    this.timer = this.ngZone.runOutsideAngular(() => {
+      if (typeof window !== 'undefined') {
+        return window.setTimeout(() => {
+          this.ngZone.run(() => this.changeDetectorRef.markForCheck())
+        }, timeToUpdate)
+      }
+      return null
+    })
+    const minutes = Math.round(Math.abs(seconds / 60))
+    const hours = Math.round(Math.abs(minutes / 60))
+    const days = Math.round(Math.abs(hours / 24))
+    const months = Math.round(Math.abs(days / 30.416))
+    const years = Math.round(Math.abs(days / 365))
+    let translationKey = 'UNKNOWN'
+    if (Number.isNaN(seconds)) {
+      translationKey = 'NAN'
+    } else if (seconds <= 45) {
+      translationKey = 'A_FEW_SECONDS_AGO'
+    } else if (seconds <= 90) {
+      translationKey = 'A_MINUTE_AGO'
+    } else if (minutes <= 45) {
+      translationKey = 'MINUTES_AGO'
+    } else if (minutes <= 90) {
+      translationKey = 'AN_HOUR_AGO'
+    } else if (hours <= 22) {
+      translationKey = 'HOURS_AGO'
+    } else if (hours <= 36) {
+      translationKey = 'A_DAY_AGO'
+    } else if (days <= 25) {
+      translationKey = 'DAYS_AGO'
+    } else if (days <= 45) {
+      translationKey = 'A_MONTH_AGO'
+    } else if (days <= 345) {
+      translationKey = 'MONTHS_AGO'
+    } else if (days <= 545) {
+      translationKey = 'A_YEAR_AGO'
+    } else {
+      translationKey = 'YEARS_AGO'
+    }
+    return super.transform('OCX_TIMEAGO.' + translationKey, { minutes, hours, days, months, years })
+  }
+  override ngOnDestroy(): void {
+    this.removeTimer()
+    super.ngOnDestroy()
+  }
+  private removeTimer() {
+    if (this.timer) {
+      window.clearTimeout(this.timer)
+      this.timer = null
+    }
+  }
+  private getSecondsUntilUpdate(seconds: number) {
+    const min = 60
+    const hr = min * 60
+    const day = hr * 24
+    if (seconds < min) {
+      return 2
+    } else if (seconds < hr) {
+      return 30
+    } else if (seconds < day) {
+      return 300
+    } else {
+      return 3600
+    }
+  }
+}

libs/portal-integration-angular/assets/i18n/de.json

@@ -147,5 +147,18 @@
       "HORIZONTAL_BAR": "Zu horizontalem Balkendiagramm wechseln",
       "VERTICAL_BAR": "Zu vertikalem Balkendiagramm wechseln"
     }
+  },
+  "OCX_TIMEAGO": {
+    "A_DAY_AGO": "vor einem Tag",
+    "A_FEW_SECONDS_AGO": "vor ein paar Sekunden",
+    "AN_HOUR_AGO": "vor einer Stunde",
+    "A_MINUTE_AGO": "vor einer Minute",
+    "A_MONAT_AGO": "vor einem Monat",
+    "A_YEAR_AGO": "vor einem Jahr",
+    "DAYS_AGO": "vor {{days}} Tagen",
+    "HOURS_AGO": "vor {{hours}} Stunden",
+    "MINUTES_AGO": "vor {{minutes}} Minuten",
+    "MONTHS_AGO": "vor {{months}} Monaten",
+    "YEARS_AGO": "vor {{years}} Jahren"
   }
 }

libs/portal-integration-angular/assets/i18n/en.json

@@ -147,5 +147,18 @@
       "HORIZONTAL_BAR": "Switch to horizontal bar chart",
       "VERTICAL_BAR": "Switch to vertical bar chart"
     }
+  },
+  "OCX_TIMEAGO": {
+    "A_DAY_AGO": "a day ago",
+    "A_FEW_SECONDS_AGO": "a few seconds ago",
+    "AN_HOUR_AGO": "an hour ago",
+    "A_MINUTE_AGO": "a minute ago",
+    "A_MONTH_AGO": "a month ago",
+    "A_YEAR_AGO": "a year ago",
+    "DAYS_AGO": "{{days}} days ago",
+    "HOURS_AGO": "{{hours}} hours ago",
+    "MINUTES_AGO": "{{minutes}} minutes ago",
+    "MONTHS_AGO": "{{months}} months ago",
+    "YEARS_AGO": "{{years}} years ago"
   }
 }

package.json

@@ -33,7 +33,6 @@
     "keycloak-angular": "^13.0.0",
     "keycloak-js": "^18.0.0",
     "ngx-color": "^8.0.3",
-    "ngx-timeago": "^2.0.0",
     "primeflex": "^3.3.0",
     "primeicons": "^6.0.1",
     "primeng": "15.2.1",