diff --git a/src-ui/src/app/components/audit-log/audit-log.component.html b/src-ui/src/app/components/audit-log/audit-log.component.html index c1e50d136..e6789efc5 100644 --- a/src-ui/src/app/components/audit-log/audit-log.component.html +++ b/src-ui/src/app/components/audit-log/audit-log.component.html @@ -15,8 +15,12 @@
  • - {{ entry.timestamp | customDate:'longDate' }} - {{ entry.timestamp | date:'shortTime' }} + +
    + {{ entry.timestamp | customDate:'longDate' }} {{ entry.timestamp | date:'shortTime' }} +
    +
    + {{ entry.timestamp | customDate:'relative' }} @if (entry.actor) { {{ entry.actor.username }} } @else { diff --git a/src-ui/src/app/pipes/custom-date.pipe.spec.ts b/src-ui/src/app/pipes/custom-date.pipe.spec.ts index 5b9d0b176..87e99212b 100644 --- a/src-ui/src/app/pipes/custom-date.pipe.spec.ts +++ b/src-ui/src/app/pipes/custom-date.pipe.spec.ts @@ -30,4 +30,14 @@ describe('CustomDatePipe', () => { ) ).toEqual('2023-05-04') }) + + it('should support relative date formatting', () => { + const now = new Date() + const notNow = new Date(now) + notNow.setDate(now.getDate() - 1) + expect(datePipe.transform(notNow, 'relative')).toEqual('1 day ago') + notNow.setDate(now.getDate() - 2) + expect(datePipe.transform(notNow, 'relative')).toEqual('2 days ago') + expect(datePipe.transform(now, 'relative')).toEqual('Just now') + }) }) diff --git a/src-ui/src/app/pipes/custom-date.pipe.ts b/src-ui/src/app/pipes/custom-date.pipe.ts index 079091fa9..e6034c59b 100644 --- a/src-ui/src/app/pipes/custom-date.pipe.ts +++ b/src-ui/src/app/pipes/custom-date.pipe.ts @@ -34,6 +34,51 @@ export class CustomDatePipe implements PipeTransform { this.settings.get(SETTINGS_KEYS.DATE_LOCALE) || this.defaultLocale let f = format || this.settings.get(SETTINGS_KEYS.DATE_FORMAT) + if (format === 'relative') { + const seconds = Math.floor((+new Date() - +new Date(value)) / 1000) + if (seconds < 60) return $localize`Just now` + const intervals = { + year: { + label: $localize`year ago`, + labelPlural: $localize`years ago`, + interval: 31536000, + }, + month: { + label: $localize`month ago`, + labelPlural: $localize`months ago`, + interval: 2592000, + }, + week: { + label: $localize`week ago`, + labelPlural: $localize`weeks ago`, + interval: 604800, + }, + day: { + label: $localize`day ago`, + labelPlural: $localize`days ago`, + interval: 86400, + }, + hour: { + label: $localize`hour ago`, + labelPlural: $localize`hours ago`, + interval: 3600, + }, + minute: { + label: $localize`minute ago`, + labelPlural: $localize`minutes ago`, + interval: 60, + }, + } + let counter + for (const i in intervals) { + counter = Math.floor(seconds / intervals[i].interval) + if (counter > 0) { + const label = + counter > 1 ? intervals[i].labelPlural : intervals[i].label + return `${counter} ${label}` + } + } + } if (l == 'iso-8601') { return this.datePipe.transform(value, FORMAT_TO_ISO_FORMAT[f], timezone) } else {