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

Pull request #300: RED-2554

Browse Source 
Merge in RED/ui from RED-2554 to master

* commit '3b64e75ae2b64c61131a8cba91b85bfa48aae99d':
  markRead method now has all notifications by default
  markRead and markAllRead in one method
  refactored view all functionality + hover change color
  added view all (UI improvements needed)
This commit is contained in:
Eduard Cziszter 2021-10-28 12:16:54 +02:00 committed by Dan Percic
commit 2ba635ea3c
3 changed files with 22 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,10 +10,14 @@
[verticalPadding]="0" [verticalPadding]="0"
></iqser-empty-state> ></iqser-empty-state>
<div *ngFor="let group of groups"> <div *ngFor="let group of groups; let first = first">
<div class="all-caps-label">{{ group.date }}</div> <div class="all-caps-label flex-align-items-center">
<div>{{ group.date }}</div>
<div *ngIf="(hasUnreadNotifications$ | async) && first" class="view-all" (click)="markRead($event)">View all</div>
</div>
<div <div
(click)="markRead(notification, $event)" (click)="markRead($event, [notification.id])"
*ngFor="let notification of group.notifications | sortBy: 'desc':'creationDate'" *ngFor="let notification of group.notifications | sortBy: 'desc':'creationDate'"
[class.unread]="!notification.readDate" [class.unread]="!notification.readDate"
class="notification" class="notification"
@ -25,7 +29,7 @@
<div class="small-label mt-2">{{ notification.time }}</div> <div class="small-label mt-2">{{ notification.time }}</div>
</div> </div>
<div <div
(click)="markRead(notification, $event, !notification.readDate)" (click)="markRead($event, [notification.id], !notification.readDate)"
class="dot" class="dot"
matTooltip="{{ 'notifications.mark-as' | translate: { type: notification.readDate ? 'unread' : 'read' } }}" matTooltip="{{ 'notifications.mark-as' | translate: { type: notification.readDate ? 'unread' : 'read' } }}"
matTooltipPosition="before" matTooltipPosition="before"

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

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

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

@ -6,8 +6,9 @@ import { UserService } from '@services/user.service';
import { DossiersService } from '@services/entity-services/dossiers.service'; import { DossiersService } from '@services/entity-services/dossiers.service';
import { NotificationsService } from '@services/notifications.service'; import { NotificationsService } from '@services/notifications.service';
import { Notification } from '@red/domain'; import { Notification } from '@red/domain';
import { distinctUntilChanged, map } from 'rxjs/operators'; import { distinctUntilChanged, map, shareReplay } from 'rxjs/operators';
import { BehaviorSubject, Observable } from 'rxjs'; import { BehaviorSubject, Observable } from 'rxjs';
import { List } from '@iqser/common-ui';
interface NotificationsGroup { interface NotificationsGroup {
date: string; date: string;
@ -39,6 +40,7 @@ export class NotificationsComponent implements OnInit {
this.hasUnreadNotifications$ = this.notifications$.pipe( this.hasUnreadNotifications$ = this.notifications$.pipe(
map(notifications => notifications.filter(n => !n.readDate).length > 0), map(notifications => notifications.filter(n => !n.readDate).length > 0),
distinctUntilChanged(), distinctUntilChanged(),
shareReplay(1),
); );
} }
@ -46,9 +48,9 @@ export class NotificationsComponent implements OnInit {
await this._loadData(); await this._loadData();
} }
async markRead(notification: Notification, $event, isRead = true): Promise<void> { async markRead($event, notifications: List<string> = this._notifications$.getValue().map(n => n.id), isRead = true): Promise<void> {
$event.stopPropagation(); $event.stopPropagation();
await this._notificationsService.toggleNotificationRead([notification.id], isRead).toPromise(); await this._notificationsService.toggleNotificationRead(notifications, isRead).toPromise();
await this._loadData(); await this._loadData();
} }