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

refactored view all functionality + hover change color

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

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

@ -13,7 +13,9 @@
<div *ngFor="let group of groups">
<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 class="view-all" [hidden]="(hasUnreadNotifications$ | async) === false" (click)="markAllAsRead($event)">
View all
</div>
</div>
<div

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

@ -20,6 +20,9 @@
.view-all {
cursor: pointer;
&:hover {
color: var(--iqser-primary);
}
}
}

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

@ -48,8 +48,13 @@ export class NotificationsComponent implements OnInit {
async markAllAsRead($event): Promise<void> {
$event.stopPropagation();
const notifications = await this._notificationsService.getNotifications(false).toPromise();
await this._readNotifications(notifications);
const notifications = this._notifications$.getValue();
await this._notificationsService
.toggleNotificationRead(
notifications.map(n => n.id),
true,
)
.toPromise();
await this._loadData();
}
@ -59,12 +64,6 @@ export class NotificationsComponent implements OnInit {
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);