RED-6170: fix notifications sorting
This commit is contained in:
parent
02466a4eb0
commit
214db2afd5
@ -29,7 +29,7 @@
|
|||||||
|
|
||||||
<div class="notification-content">
|
<div class="notification-content">
|
||||||
<div [innerHTML]="notification.message"></div>
|
<div [innerHTML]="notification.message"></div>
|
||||||
<div class="small-label mt-2">{{ notification.time }}</div>
|
<div class="small-label mt-2">{{ notification.creationDate | date : 'exactDate' }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
(click)="markRead($event, [notification], !notification.readDate)"
|
(click)="markRead($event, [notification], !notification.readDate)"
|
||||||
|
|||||||
@ -5,13 +5,18 @@ import { Notification } from '@red/domain';
|
|||||||
import { distinctUntilChanged, map } from 'rxjs/operators';
|
import { distinctUntilChanged, map } from 'rxjs/operators';
|
||||||
import { Observable } from 'rxjs';
|
import { Observable } from 'rxjs';
|
||||||
import { isToday, shareLast } from '@iqser/common-ui';
|
import { isToday, shareLast } from '@iqser/common-ui';
|
||||||
import dayjs from 'dayjs';
|
import dayjs, { Dayjs } from 'dayjs';
|
||||||
|
import { TranslateService } from '@ngx-translate/core';
|
||||||
|
|
||||||
interface NotificationsGroup {
|
interface NotificationsGroup {
|
||||||
date: string;
|
date: string;
|
||||||
notifications: Notification[];
|
notifications: Notification[];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function isOlderThan(date: string | Date | Dayjs, years: number) {
|
||||||
|
return dayjs(date).year() <= dayjs(Date.now()).subtract(years, 'year').year();
|
||||||
|
}
|
||||||
|
|
||||||
function chronologically(first: string, second: string) {
|
function chronologically(first: string, second: string) {
|
||||||
return dayjs(first).isAfter(second) ? -1 : 1;
|
return dayjs(first).isAfter(second) ? -1 : 1;
|
||||||
}
|
}
|
||||||
@ -25,7 +30,11 @@ export class NotificationsComponent {
|
|||||||
readonly hasUnreadNotifications$: Observable<boolean>;
|
readonly hasUnreadNotifications$: Observable<boolean>;
|
||||||
readonly groupedNotifications$: Observable<NotificationsGroup[]>;
|
readonly groupedNotifications$: Observable<NotificationsGroup[]>;
|
||||||
|
|
||||||
constructor(private readonly _notificationsService: NotificationsService, private readonly _datePipe: DatePipe) {
|
constructor(
|
||||||
|
private readonly _notificationsService: NotificationsService,
|
||||||
|
private readonly _datePipe: DatePipe,
|
||||||
|
private readonly _translateService: TranslateService,
|
||||||
|
) {
|
||||||
this.groupedNotifications$ = this._notificationsService.all$.pipe(map(notifications => this.#groupNotifications(notifications)));
|
this.groupedNotifications$ = this._notificationsService.all$.pipe(map(notifications => this.#groupNotifications(notifications)));
|
||||||
this.hasUnreadNotifications$ = this.#hasUnreadNotifications$;
|
this.hasUnreadNotifications$ = this.#hasUnreadNotifications$;
|
||||||
}
|
}
|
||||||
@ -51,12 +60,21 @@ export class NotificationsComponent {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#groupNotifications(notifications: Notification[]): NotificationsGroup[] {
|
#groupNotifications(notifications: Notification[]): NotificationsGroup[] {
|
||||||
const grouped = [
|
const todayTranslation = this._translateService.instant('today');
|
||||||
...notifications.groupBy(n => (isToday(n.creationDate) ? n.creationDate : n.creationDate.split('T')[0])).entries(),
|
const groupedMap = notifications.groupBy(n => {
|
||||||
];
|
if (isOlderThan(n.creationDate, 2)) {
|
||||||
|
return dayjs(n.creationDate).year().toString();
|
||||||
|
} else if (isOlderThan(n.creationDate, 1)) {
|
||||||
|
return dayjs(n.creationDate).format('YYYY-MM');
|
||||||
|
}
|
||||||
|
|
||||||
|
return n.creationDate.split('T')[0];
|
||||||
|
});
|
||||||
|
|
||||||
|
const grouped = [...groupedMap.entries()];
|
||||||
const sorted = grouped.sort(([aDate], [bDate]) => chronologically(aDate, bDate));
|
const sorted = grouped.sort(([aDate], [bDate]) => chronologically(aDate, bDate));
|
||||||
return sorted.map(([date, _notifications]) => ({
|
return sorted.map(([date, _notifications]) => ({
|
||||||
date: this._datePipe.transform(date, 'sophisticatedDate'),
|
date: isToday(date) ? todayTranslation : this._datePipe.transform(date, 'sophisticatedDate'),
|
||||||
notifications: _notifications.sort((a, b) => chronologically(a.creationDate, b.creationDate)),
|
notifications: _notifications.sort((a, b) => chronologically(a.creationDate, b.creationDate)),
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
|
|||||||
@ -7,7 +7,6 @@ import { map, switchMap, tap } from 'rxjs/operators';
|
|||||||
import { notificationsTranslations } from '@translations/notifications-translations';
|
import { notificationsTranslations } from '@translations/notifications-translations';
|
||||||
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
|
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
|
||||||
import { UserService } from '@users/user.service';
|
import { UserService } from '@users/user.service';
|
||||||
import dayjs from 'dayjs';
|
|
||||||
import { CHANGED_CHECK_INTERVAL } from '@utils/constants';
|
import { CHANGED_CHECK_INTERVAL } from '@utils/constants';
|
||||||
import { DossiersCacheService } from './dossiers/dossiers-cache.service';
|
import { DossiersCacheService } from './dossiers/dossiers-cache.service';
|
||||||
|
|
||||||
@ -71,12 +70,7 @@ export class NotificationsService extends EntitiesService<INotification, Notific
|
|||||||
|
|
||||||
private _new(notification: INotification) {
|
private _new(notification: INotification) {
|
||||||
const message = this._translate(notification, notificationsTranslations[notification.notificationType] as string);
|
const message = this._translate(notification, notificationsTranslations[notification.notificationType] as string);
|
||||||
const time = this._getTime(notification.creationDate);
|
return new Notification(notification, message);
|
||||||
return new Notification(notification, message, time);
|
|
||||||
}
|
|
||||||
|
|
||||||
private _getTime(date: string): string {
|
|
||||||
return dayjs(date).format('hh:mm A');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private _translate(notification: INotification, translation: string): string {
|
private _translate(notification: INotification, translation: string): string {
|
||||||
|
|||||||
@ -2057,6 +2057,7 @@
|
|||||||
"less-than-an-hour": "< 1 Stunde",
|
"less-than-an-hour": "< 1 Stunde",
|
||||||
"no-time-left": "Frist für Wiederherstellung verstrichen"
|
"no-time-left": "Frist für Wiederherstellung verstrichen"
|
||||||
},
|
},
|
||||||
|
"today": "",
|
||||||
"toggle-auto-analysis-message": {
|
"toggle-auto-analysis-message": {
|
||||||
"error": "",
|
"error": "",
|
||||||
"success": ""
|
"success": ""
|
||||||
|
|||||||
@ -2057,6 +2057,7 @@
|
|||||||
"less-than-an-hour": "< 1 hour",
|
"less-than-an-hour": "< 1 hour",
|
||||||
"no-time-left": "Time to restore already passed"
|
"no-time-left": "Time to restore already passed"
|
||||||
},
|
},
|
||||||
|
"today": "Today",
|
||||||
"toggle-auto-analysis-message": {
|
"toggle-auto-analysis-message": {
|
||||||
"error": "Something went wrong.",
|
"error": "Something went wrong.",
|
||||||
"success": "{toggleOperation} automatic processing."
|
"success": "{toggleOperation} automatic processing."
|
||||||
|
|||||||
@ -2057,6 +2057,7 @@
|
|||||||
"less-than-an-hour": "< 1 Stunde",
|
"less-than-an-hour": "< 1 Stunde",
|
||||||
"no-time-left": "Frist für Wiederherstellung verstrichen"
|
"no-time-left": "Frist für Wiederherstellung verstrichen"
|
||||||
},
|
},
|
||||||
|
"today": "",
|
||||||
"toggle-auto-analysis-message": {
|
"toggle-auto-analysis-message": {
|
||||||
"error": "",
|
"error": "",
|
||||||
"success": ""
|
"success": ""
|
||||||
|
|||||||
@ -2057,6 +2057,7 @@
|
|||||||
"less-than-an-hour": "< 1 hour",
|
"less-than-an-hour": "< 1 hour",
|
||||||
"no-time-left": "Time to restore already passed"
|
"no-time-left": "Time to restore already passed"
|
||||||
},
|
},
|
||||||
|
"today": "Today",
|
||||||
"toggle-auto-analysis-message": {
|
"toggle-auto-analysis-message": {
|
||||||
"error": "Something went wrong.",
|
"error": "Something went wrong.",
|
||||||
"success": "{toggleOperation} automatic processing."
|
"success": "{toggleOperation} automatic processing."
|
||||||
|
|||||||
@ -14,7 +14,7 @@ export class Notification implements INotification, IListable {
|
|||||||
readonly userId: string;
|
readonly userId: string;
|
||||||
readonly id: string;
|
readonly id: string;
|
||||||
|
|
||||||
constructor(notification: INotification, readonly message: string, readonly time: string) {
|
constructor(notification: INotification, readonly message: string) {
|
||||||
this.creationDate = notification.creationDate;
|
this.creationDate = notification.creationDate;
|
||||||
this.issuerId = notification.issuerId;
|
this.issuerId = notification.issuerId;
|
||||||
this.notificationDetails = notification.notificationDetails;
|
this.notificationDetails = notification.notificationDetails;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user