File
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Constructor
constructor(notificationService: NotificationService, notificationDelegate: LocalNotification)
|
|
|
Parameters :
| Name |
Type |
Optional |
| notificationService |
NotificationService
|
No
|
| notificationDelegate |
LocalNotification
|
No
|
|
Outputs
|
generateNotification
|
Type : EventEmitter
|
|
|
|
notificationClick
|
Type : EventEmitter
|
|
|
Methods
|
handleDeepLink
|
handleDeepLink()
|
|
|
|
|
|
toggleExpand
|
toggleExpand()
|
|
|
|
|
|
isExpanded
|
Default value : false
|
|
|
import { Component, Input, Inject, Output, EventEmitter } from '@angular/core';
import { NotificationService } from 'sunbird-sdk';
import { InteractSubtype } from '@app/services/telemetry-constants';
import {NotificationService as LocalNotification} from '@app/services';
@Component({
selector: 'app-notification-item',
templateUrl: './notification-item.component.html',
styleUrls: ['./notification-item.component.scss'],
})
export class NotificationItemComponent {
isExpanded = false;
@Output() notificationClick = new EventEmitter();
@Output() generateNotification = new EventEmitter();
@Input('itemData') itemData;
constructor(
@Inject('NOTIFICATION_SERVICE') private notificationService: NotificationService,
private notificationDelegate: LocalNotification
) {
}
toggleExpand() {
const valuesMap = new Map();
valuesMap['expandNotification'] = !this.isExpanded;
this.generateNotification.emit({ valuesMap: valuesMap, interactSubType: InteractSubtype.NOTIFICATION_DESCRIPTION_TOGGLE_EXPAND });
this.isExpanded = !this.isExpanded;
}
handleDeepLink() {
const valuesMap = new Map();
valuesMap['notificationBody'] = this.itemData.actionData;
if (this.itemData.actionData.deepLink && this.itemData.actionData.deepLink.length) {
valuesMap['notificationDeepLink'] = this.itemData.actionData.deepLink;
}
this.generateNotification.emit({ valuesMap: valuesMap, interactSubType: InteractSubtype.NOTIFICATION_READ });
this.itemData.isRead = 1;
this.notificationService.updateNotification(this.itemData).subscribe((status) => {
this.notificationClick.emit();
});
this.notificationDelegate.notificationId = this.itemData.id || '';
this.notificationDelegate.setNotificationParams(this.itemData);
this.notificationDelegate.handleNotification();
}
}
<div class="notification-item-container" (click)="!itemData?.actionData?.ctaText ? handleDeepLink() : ''">
<p class="date-time">
<img *ngIf="!itemData?.isRead" src="./assets/imgs/oval.svg" class="mr-6" alt="oval">{{ itemData?.displayTime * 1000
| date:'E, d MMMM h:mm'}}
</p>
<div class="ni-flex">
<div class="img-info ni-flex-grow" *ngIf="itemData?.actionData?.appIcon">
<img [src]="itemData?.actionData?.appIcon" alt="content_icon">
</div>
<div class="richText-info ni-flex-grow">
<div class="title"
[ngClass]="{'sb-accordian-header':itemData?.actionData?.actionType === 'updateApp' && itemData?.actionData?.richText}">
<p class="title-info" [style.color]="itemData?.isRead ? '#666666' : '#024f9d'">
{{itemData?.actionData?.title}}</p>
<div class="description" *ngIf="itemData?.actionData?.richText">
{{itemData?.actionData?.richText}}</div>
<hr *ngIf="itemData?.actionData?.ctaText">
<div *ngIf="itemData?.actionData?.ctaText" (click)="handleDeepLink()" class="update-now-btn">
{{itemData?.actionData?.ctaText}}</div>
</div>
</div>
</div>
</div>
@import "src/assets/styles/base/_variables.scss";
@import "src/assets/styles/_custom-mixins.scss";
@import "src/assets/styles/_variables.scss";
:host {
width: 100%;
.notification-item-container {
width: 100%;
.date-time {
color: $gray-200;
font-family: "Noto Sans", sans-serif;
font-size: 0.75rem;
line-height: 1.25rem;
margin-bottom: 4px;
padding: 2px;
margin-top: 10px;
}
.title {
width: 100%;
color: $blue;
font-family: "Noto Sans", sans-serif;
font-size: 0.938rem;
font-weight: bold;
letter-spacing: -0.4px;
line-height: 1.25rem;
}
.title-info{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
font-size: 1rem;
}
.description {
color: $gray-300;
font-family: "Noto Sans", sans-serif;
font-size: 0.813rem;
letter-spacing: -0.1px;
line-height: 1.25rem;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 2px;
}
.sb-accordian-arrow {
font-size: 1.5rem;
line-height: 1.25rem;
}
.arrow-up {
transform: rotate(180deg);
}
.update-container {
border-radius: 2px;
// background-color: map-get($colors, white_f1);
font-family: "Noto Sans", sans-serif;
font-size: 0.813rem;
line-height: 1.25rem;
margin-top: 2px;
color: $gray-300;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.img-info{
width: 10%;
float:left;
}
.richText-info{
width: 90%;
margin-bottom: 8px;
padding-left: 4px;
}
.expand-button {
@include rtl {
float: left !important;
}
@include ltr {
float: right !important;
}
width: 1.5rem;
text-align: center;
cursor: pointer;
}
.update-now-btn {
height: 1.25rem;
color: $blue;
font-family: "Noto Sans", sans-serif;
font-size: 0.75rem;
font-weight: bold;
letter-spacing: -0.34px;
line-height: 1.25rem;
}
.mr-6 {
@include ltr() {
margin-right: 6px;
}
@include rtl() {
margin-left: 6px;
}
}
// .pl-16 {
// @include ltr() {
// padding-left: 16px;
// }
// @include rtl() {
// padding-right: 16px;
// }
// }
}
.ni-flex{
display: flex;
flex-wrap: wrap;
}
.ni-flex-grow{
flex-grow: 1;
}
}
Legend
Html element with directive