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

RED-6332: cherry pick commit from master branch

Browse Source
This commit is contained in:
Dan Percic 2023-03-15 17:42:02 +02:00
parent 0723607a45
commit fb3ef83cd2
3 changed files with 21 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/red-ui/src/app/components/base-screen/base-screen.component.html
View File

@ -29,7 +29,10 @@
<iqser-help-button *deny="roles.getRss" [iqserHelpMode]="'help_mode'" id="help-mode-button"></iqser-help-button> <iqser-help-button *deny="roles.getRss" [iqserHelpMode]="'help_mode'" id="help-mode-button"></iqser-help-button>
<redaction-notifications [iqserHelpMode]="'open_notifications'"></redaction-notifications> <redaction-notifications
*ngIf="!currentUser.isAdmin && !currentUser.isUserAdmin"
[iqserHelpMode]="'open_notifications'"
></redaction-notifications>
</div> </div>
<iqser-user-button [iqserHelpMode]="'open_usermenu'" [matMenuTriggerFor]="userMenu" id="userMenu"></iqser-user-button> <iqser-user-button [iqserHelpMode]="'open_usermenu'" [matMenuTriggerFor]="userMenu" id="userMenu"></iqser-user-button>

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

@ -1,4 +1,9 @@
<iqser-circle-button [matMenuTriggerFor]="menu" [showDot]="hasUnreadNotifications$ | async" icon="red:notification"></iqser-circle-button> <iqser-circle-button
[matMenuTriggerFor]="menu"
[showDot]="hasUnreadNotifications$ | async"
buttonId="notification-button"
icon="red:notification"
></iqser-circle-button>
<mat-menu #menu="matMenu" backdropClass="notifications-backdrop" class="notifications-menu" xPosition="before"> <mat-menu #menu="matMenu" backdropClass="notifications-backdrop" class="notifications-menu" xPosition="before">
<ng-template matMenuContent> <ng-template matMenuContent>
@ -13,15 +18,21 @@
<div *ngFor="let group of groups; let first = first"> <div *ngFor="let group of groups; let first = first">
<div class="all-caps-label flex-align-items-center"> <div class="all-caps-label flex-align-items-center">
<div>{{ group.date }}</div> <div>{{ group.date }}</div>
<div (click)="markRead($event)" *ngIf="(hasUnreadNotifications$ | async) && first" class="view-all"> <div
(click)="markRead($event)"
*ngIf="(hasUnreadNotifications$ | async) && first"
class="view-all"
id="notifications-mark-all-as-read-btn"
>
{{ 'notifications.mark-all-as-read' | translate }} {{ 'notifications.mark-all-as-read' | translate }}
</div> </div>
</div> </div>
<div <div
(click)="markRead($event, [notification], true)" (click)="markRead($event, [notification], true)"
*ngFor="let notification of group.notifications" *ngFor="let notification of group.notifications; trackBy: trackBy"
[class.unread]="!notification.readDate" [class.unread]="!notification.readDate"
[id]="'notifications-mark-as-read-' + notification.id + '-btn'"
class="notification" class="notification"
mat-menu-item mat-menu-item
> >
@ -33,6 +44,7 @@
</div> </div>
<div <div
(click)="markRead($event, [notification], !notification.readDate)" (click)="markRead($event, [notification], !notification.readDate)"
[id]="'notifications-mark-' + notification.id"
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"

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

@ -4,7 +4,7 @@ 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 } from 'rxjs/operators';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { isToday, shareLast } from '@iqser/common-ui'; import { isToday, shareLast, trackByFactory } from '@iqser/common-ui';
import dayjs, { Dayjs } from 'dayjs'; import dayjs, { Dayjs } from 'dayjs';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
@ -29,6 +29,7 @@ function chronologically(first: string, second: string) {
export class NotificationsComponent { export class NotificationsComponent {
readonly hasUnreadNotifications$: Observable<boolean>; readonly hasUnreadNotifications$: Observable<boolean>;
readonly groupedNotifications$: Observable<NotificationsGroup[]>; readonly groupedNotifications$: Observable<NotificationsGroup[]>;
readonly trackBy = trackByFactory();
constructor( constructor(
private readonly _notificationsService: NotificationsService, private readonly _notificationsService: NotificationsService,