Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

RED-2465: Unread notifications dot

Browse Source
This commit is contained in:
Adina Țeudan 2021-10-21 01:26:11 +03:00
parent ab2b01ffba
commit 44fd1c5d4c
3 changed files with 39 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
apps/red-ui/src/app/components/notifications/notification.ts
View File

@ -1,20 +1,17 @@
import { INotification } from '@redaction/red-ui-http';
import { IListable } from '@iqser/common-ui';
import { BehaviorSubject, Observable } from 'rxjs';
import { shareReplay } from 'rxjs/operators';
export class Notification implements INotification, IListable {
readonly creationDate?: string;
readonly issuerId?: string;
readonly notificationDetails?: string;
readonly notificationType?: string;
readonly readDate$: Observable<string>;
readonly readDate?: string;
readonly seenDate?: string;
readonly softDeleted?: string;
readonly target?: any;
readonly userId?: string;
readonly id: string;
private readonly _readDate$: BehaviorSubject<string | null>;
constructor(notification: INotification, readonly message: string, readonly time: string) {
this.creationDate = notification.creationDate;
@ -22,23 +19,14 @@ export class Notification implements INotification, IListable {
this.notificationDetails = notification.notificationDetails;
this.notificationType = notification.notificationType;
this.seenDate = notification.seenDate;
this.readDate = notification.readDate;
this.softDeleted = notification.softDeleted;
this.target = notification.target;
this.userId = notification.userId;
this.id = notification.id;
this._readDate$ = new BehaviorSubject<string | null>(notification.readDate);
this.readDate$ = this._readDate$.asObservable().pipe(shareReplay(1));
}
get searchKey(): string {
return this.id;
}
get readDate(): string {
return this._readDate$.value;
}
setReadDate(value: string | undefined): void {
this._readDate$.next(value);
}
}

2
apps/red-ui/src/app/components/notifications/notifications.component.html
View File

@ -15,7 +15,7 @@
<div
(click)="markRead(notification, $event)"
*ngFor="let notification of group.notifications | sortBy: 'desc':'creationDate'"
[class.unread]="(notification.readDate$ | async) === null"
[class.unread]="!notification.readDate"
class="notification"
mat-menu-item
>

57
apps/red-ui/src/app/components/notifications/notifications.component.ts
View File

@ -1,5 +1,4 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import * as moment from 'moment';
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { DatePipe } from '@shared/pipes/date.pipe';
import { AppStateService } from '@state/app-state.service';
@ -7,7 +6,13 @@ import { UserService } from '@services/user.service';
import { DossiersService } from '@services/entity-services/dossiers.service';
import { NotificationsService } from '@services/notifications.service';
import { Notification } from '@components/notifications/notification';
import { distinctUntilChanged, map, shareReplay } from 'rxjs/operators';
import { distinctUntilChanged, map } from 'rxjs/operators';
import { BehaviorSubject, Observable } from 'rxjs';
interface NotificationsGroup {
date: string;
notifications: Notification[];
}
@Component({
selector: 'redaction-notifications',
@ -15,13 +20,11 @@ import { distinctUntilChanged, map, shareReplay } from 'rxjs/operators';
styleUrls: ['./notifications.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NotificationsComponent {
notifications$ = this._notificationsService.getNotifications(false).pipe(shareReplay(1));
hasUnreadNotifications$ = this.notifications$.pipe(
map(notifications => notifications.filter(n => !n.readDate).length > 0),
distinctUntilChanged(),
);
groupedNotifications$ = this.notifications$.pipe(map(notifications => this._groupNotifications(notifications)));
export class NotificationsComponent implements OnInit {
notifications$: Observable<Notification[]>;
hasUnreadNotifications$: Observable<boolean>;
groupedNotifications$: Observable<NotificationsGroup[]>;
private _notifications$ = new BehaviorSubject([]);
constructor(
private readonly _translateService: TranslateService,
@ -30,19 +33,31 @@ export class NotificationsComponent {
private readonly _appStateService: AppStateService,
private readonly _dossiersService: DossiersService,
private readonly _datePipe: DatePipe,
) {}
async markRead(notification: Notification, $event, isRead = true) {
$event.stopPropagation();
await this._notificationsService.toggleNotificationRead([notification.id], isRead).toPromise();
if (isRead) {
notification.setReadDate(moment().format('YYYY-MM-DDTHH:mm:ss Z'));
} else {
notification.setReadDate(null);
}
) {
this.notifications$ = this._notifications$.asObservable();
this.groupedNotifications$ = this.notifications$.pipe(map(notifications => this._groupNotifications(notifications)));
this.hasUnreadNotifications$ = this.notifications$.pipe(
map(notifications => notifications.filter(n => !n.readDate).length > 0),
distinctUntilChanged(),
);
}
private _groupNotifications(notifications: Notification[]): { date: string; notifications: Notification[] }[] {
async ngOnInit(): Promise<void> {
await this._loadData();
}
async markRead(notification: Notification, $event, isRead = true): Promise<void> {
$event.stopPropagation();
await this._notificationsService.toggleNotificationRead([notification.id], isRead).toPromise();
await this._loadData();
}
private async _loadData(): Promise<void> {
const notifications = await this._notificationsService.getNotifications(false).toPromise();
this._notifications$.next(notifications);
}
private _groupNotifications(notifications: Notification[]): NotificationsGroup[] {
const res = {};
for (const notification of notifications) {