Skip to content

Commit

Permalink
fix: ocx-time-ago-pipe (#191)
Browse files Browse the repository at this point in the history
* fix: ocx-time-ago-pipe

* fix: remove unused imports and ngx-timeago

* fix: fix prefix and translations and lint error

* fix: translation
  • Loading branch information
anninowak authored Apr 2, 2024
1 parent 2314287 commit 27efc2f
Show file tree
Hide file tree
Showing 10 changed files with 137 additions and 93 deletions.
13 changes: 13 additions & 0 deletions libs/angular-accelerator/assets/i18n/de.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
13 changes: 13 additions & 0 deletions libs/angular-accelerator/assets/i18n/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
3 changes: 1 addition & 2 deletions libs/angular-accelerator/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
30 changes: 1 addition & 29 deletions libs/angular-accelerator/src/lib/angular-accelerator.module.ts
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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'

Expand All @@ -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'
Expand Down Expand Up @@ -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,
Expand Down
86 changes: 83 additions & 3 deletions libs/angular-accelerator/src/lib/pipes/ocxtimeago.pipe.ts
Original file line number Diff line number Diff line change
@@ -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
}
}
}
37 changes: 0 additions & 37 deletions libs/angular-accelerator/src/lib/utils/ocxtimeagointl.utils.ts

This file was deleted.

13 changes: 13 additions & 0 deletions libs/portal-integration-angular/assets/i18n/de.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
13 changes: 13 additions & 0 deletions libs/portal-integration-angular/assets/i18n/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
21 changes: 0 additions & 21 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down

0 comments on commit 27efc2f

Please sign in to comment.