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

added view all (UI improvements needed)

Browse Source
This commit is contained in:
Edi Cziszter 2021-10-27 13:30:51 +03:00
parent 8651922429
commit ccea2bff05
3 changed files with 25 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,7 +11,11 @@
></iqser-empty-state>
<div *ngFor="let group of groups">
<div class="all-caps-label">{{ group.date }}</div>
<div class="all-caps-label flex-align-items-center">
<div>{{ group.date }}</div>
<div [hidden]="(hasUnreadNotifications$ | async) === false" (click)="markAllAsRead($event)">View all</div>
</div>
<div
(click)="markRead(notification, $event)"
*ngFor="let notification of group.notifications | sortBy: 'desc':'creationDate'"

7
apps/red-ui/src/app/components/notifications/notifications.component.scss
View File

@ -15,7 +15,12 @@
max-height: calc(100vh - 200px);
.all-caps-label {
margin: 16px 0 6px 8px;
justify-content: space-between;
margin: 16px 8px 6px;
.view-all {
cursor: pointer;
}
}
.mat-menu-item.notification {

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

@ -6,7 +6,7 @@ import { UserService } from '@services/user.service';
import { DossiersService } from '@services/entity-services/dossiers.service';
import { NotificationsService } from '@services/notifications.service';
import { Notification } from '@red/domain';
import { distinctUntilChanged, map } from 'rxjs/operators';
import { distinctUntilChanged, map, tap } from 'rxjs/operators';
import { BehaviorSubject, Observable } from 'rxjs';
interface NotificationsGroup {
@ -46,12 +46,25 @@ export class NotificationsComponent implements OnInit {
await this._loadData();
}
async markAllAsRead($event): Promise<void> {
$event.stopPropagation();
const notifications = await this._notificationsService.getNotifications(false).toPromise();
await this._readNotifications(notifications);
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 _readNotifications(notifications: Notification[]): Promise<void> {
for (const notification of notifications) {
await this._notificationsService.toggleNotificationRead([notification.id], true).toPromise();
}
}
private async _loadData(): Promise<void> {
const notifications = await this._notificationsService.getNotifications(false).toPromise();
this._notifications$.next(notifications);