Methods
|
handleDeleteNotification
|
handleDeleteNotification()
|
|
|
|
|
|
updateReadStatus
|
updateReadStatus(newStatus: boolean)
|
|
|
Parameters :
| Name |
Type |
Optional |
| newStatus |
boolean
|
No
|
|
|
Protected
Readonly
closeOnlySubmenu
|
Type : unknown
|
Default value : closeOnlySubmenu
|
|
|
import {
Component,
ChangeDetectionStrategy,
input,
output,
} from "@angular/core";
import { MatBadgeModule } from "@angular/material/badge";
import { CommonModule } from "@angular/common";
import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
import { MatMenu, MatMenuItem, MatMenuTrigger } from "@angular/material/menu";
import { MatButtonModule } from "@angular/material/button";
import { FormsModule } from "@angular/forms";
import { MatTooltipModule } from "@angular/material/tooltip";
import { MatTabsModule } from "@angular/material/tabs";
import { NotificationEvent } from "../model/notification-event";
import { NotificationTimePipe } from "../notification-time.pipe";
import { closeOnlySubmenu } from "../close-only-submenu";
import { EntityBlockComponent } from "../../../core/basic-datatypes/entity/entity-block/entity-block.component";
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: "app-notification-item",
standalone: true,
imports: [
MatBadgeModule,
FontAwesomeModule,
MatMenu,
MatButtonModule,
MatMenuTrigger,
MatMenuItem,
FormsModule,
MatTooltipModule,
MatTabsModule,
CommonModule,
NotificationTimePipe,
EntityBlockComponent,
],
templateUrl: "./notification-item.component.html",
styleUrl: "./notification-item.component.scss",
})
export class NotificationItemComponent {
notification = input.required<NotificationEvent>();
readStatusChange = output<boolean>();
deleteClick = output<void>();
notificationClick = output<NotificationEvent>();
protected readonly closeOnlySubmenu = closeOnlySubmenu;
updateReadStatus(newStatus: boolean) {
this.readStatusChange.emit(newStatus);
}
handleDeleteNotification() {
this.deleteClick.emit();
}
onNotificationClick(notification: NotificationEvent) {
this.notificationClick.emit(notification);
}
}
<div
class="flex-row justify-space-between align-center notification-item-wrapper"
[class.read-notification]="notification().readStatus"
>
<div
class="notification-details"
(click)="onNotificationClick(notification())"
>
<div class="notification-title">{{ notification().title }}</div>
<div class="notification-body">
@if (notification().body) {
{{ notification().body }}
} @else if (notification().context?.entityId) {
→
<app-entity-block
[entityId]="notification().context.entityId"
></app-entity-block>
}
</div>
<div
class="notification-time"
[matTooltip]="notification().created?.at | date: 'short'"
>
{{ notification().created?.at | notificationTime | async }}
</div>
</div>
<!-- Blue indicator for unread/read notifications -->
<span [matMenuTriggerFor]="actionsMenu" #actionsMenuTrigger="matMenuTrigger">
@if (notification().readStatus) {
<span
class="read-indicator"
matTooltip="Read notification"
i18n-matTooltip
></span>
} @else {
<span
class="unread-indicator"
matTooltip="Unread notification"
i18n-matTooltip
></span>
}
</span>
<mat-menu #actionsMenu="matMenu">
<div (click)="closeOnlySubmenu(actionsMenuTrigger, $event)">
@if (!notification().readStatus) {
<button mat-menu-item (click)="updateReadStatus(true)">
<fa-icon icon="check"></fa-icon>
<span class="menu-option" i18n>Mark as read</span>
</button>
} @else {
<button mat-menu-item (click)="updateReadStatus(false)">
<fa-icon icon="eye-slash"></fa-icon>
<span class="menu-option" i18n>Mark as unread</span>
</button>
}
<button mat-menu-item (click)="handleDeleteNotification()">
<fa-icon icon="trash"></fa-icon>
<span class="menu-option" i18n>Delete notification</span>
</button>
</div>
</mat-menu>
</div>
@use "variables/colors";
.notification-item-wrapper {
padding: 8px 10px 0px;
}
.notification-details {
flex: 1;
text-align: left;
cursor: pointer;
}
.notification-details:hover {
background-color: transparent;
cursor: pointer;
}
.notification-title {
font-weight: bold;
}
.notification-body {
font-size: 0.85em;
}
.notification-time {
color: colors.$inactive;
font-size: 12px;
}
.indicator {
height: 12px;
width: 12px;
border-radius: 50%;
box-sizing: border-box;
display: inline-block;
margin-right: 8px;
cursor: pointer;
}
.unread-indicator {
@extend .indicator;
background-color: blue;
}
.read-indicator {
@extend .indicator;
background-color: transparent;
border: 2px solid colors.$inactive;
}
.menu-option {
margin-left: 12px;
}
.read-notification {
color: colors.$inactive;
}
Legend
Html element with directive