diff --git a/src/app/+home-page/home-page.component.html b/src/app/+home-page/home-page.component.html
index 637b975ad33628bc833ce0482480a019ff069f74..d7442f6f711823f57557a750868ad055b227b677 100644
--- a/src/app/+home-page/home-page.component.html
+++ b/src/app/+home-page/home-page.component.html
@@ -9,7 +9,10 @@
<button (click)="createNotification2()">Notify!</button>
-<ng-template #example>
- <p>Simple Error example</p>
- <button [routerLink]="['/mydspace']">Go to mydspace</button>
-</ng-template>
+<button (click)="deleteHtmlNotification()">Delete Html Notification</button>
+<button (click)="deleteAllNotifications()">Delete All</button>
+
+<!--<ng-template #example>-->
+ <!--<p>Simple Error example</p>-->
+ <!--<button [routerLink]="['/mydspace']">Go to mydspace</button>-->
+<!--</ng-template>-->
diff --git a/src/app/+home-page/home-page.component.ts b/src/app/+home-page/home-page.component.ts
index 936d7cceccdd932424f1e4cc87de129b33a9eb78..927ecf2f8d1841a847b598bf65e32467ab385cf9 100644
--- a/src/app/+home-page/home-page.component.ts
+++ b/src/app/+home-page/home-page.component.ts
@@ -1,9 +1,6 @@
import { Component, TemplateRef, ViewChild } from '@angular/core';
import { NotificationsService } from '../shared/notifications/notifications.service';
-import {
- INotificationBoardOptions,
- NotificationOptions
-} from '../shared/notifications/models/notification-options.model';
+import { NotificationOptions } from '../shared/notifications/models/notification-options.model';
@Component({
selector: 'ds-home-page',
@@ -13,45 +10,31 @@ import {
export class HomePageComponent {
@ViewChild('example') example: TemplateRef<any>;
+ private htmlNotification;
+
constructor(private notificationsService: NotificationsService) {
}
createNotification() {
const n1 = this.notificationsService.success('Welcome in DSpace', 'Good choice!',
- new NotificationOptions(10000, false, 'fromLeft', ['bottom', 'left']));
- // const n2 = this.notificationsService.info('Info in DSpace', 'For your info...!');
- // const n3 = this.notificationsService.warning('Warning in DSpace', 'This is a fake alert!');
- // // const n4 = this.notificationsService.danger(this.example);
- // console.log('Notifications pushed');
- // console.log(n1);
- // console.log(n2);
- // console.log(n3);
- // // console.log(n4);
+ new NotificationOptions(10000, true, 'fromLeft', ['bottom', 'left']));
}
createNotification1() {
const n1 = this.notificationsService.warning('Welcome in DSpace', 'Good choice!',
new NotificationOptions(10000, false, 'fromLeft', ['bottom', 'left']));
- // const n2 = this.notificationsService.info('Info in DSpace', 'For your info...!');
- // const n3 = this.notificationsService.warning('Warning in DSpace', 'This is a fake alert!');
- // // const n4 = this.notificationsService.danger(this.example);
- // console.log('Notifications pushed');
- // console.log(n1);
- // console.log(n2);
- // console.log(n3);
- // // console.log(n4);
}
createNotification2() {
- // const n1 = this.notificationsService.error('Welcome in DSpace', 'Good choice!',
- // new NotificationOptions(100000, false, 'fromLeft', ['bottom', 'left']));
- // const n2 = this.notificationsService.info('Info in DSpace', 'For your info...!');
- // const n3 = this.notificationsService.warning('Warning in DSpace', 'This is a fake alert!');
- const n4 = this.notificationsService.html(this.example);
- // console.log('Notifications pushed');
- // console.log(n1);
- // console.log(n2);
- // console.log(n3);
- // // console.log(n4);
+ const html = "<h1>Html Alert</h1> <p><button [routerLink]=\"['/mydspace']\">Go to mydspace</button></p>";
+ this.htmlNotification = this.notificationsService.info('Ciao', null, null, html);
+ }
+
+ deleteHtmlNotification() {
+ this.notificationsService.remove(this.htmlNotification);
+ }
+
+ deleteAllNotifications() {
+ this.notificationsService.removeAll();
}
}
diff --git a/src/app/shared/notifications/models/notification.model.ts b/src/app/shared/notifications/models/notification.model.ts
index e5da5d1bff6bdf35f11ed53b3f2602f037d4f15c..2190272a4e6c3a4074b0ec74dcbe7718b7a1f0a1 100644
--- a/src/app/shared/notifications/models/notification.model.ts
+++ b/src/app/shared/notifications/models/notification.model.ts
@@ -21,27 +21,30 @@ export class Notification implements INotification {
public title: any;
public content: any;
public options: INotificationOptions;
+ public html: any;
constructor(id: string,
type: NotificationType,
title?: any,
content?: any,
- options?: NotificationOptions) {
+ options?: NotificationOptions,
+ html?: any) {
this.id = id;
this.type = type;
this.title = title;
this.content = content;
this.options = isEmpty(options) ? new NotificationOptions() : options;
+ this.html = html;
}
- get html() {
- if (this.title === '' && this.content === '') {
- return NotificationsService.htmlArray.get(this.id);
- } else {
- return null;
- }
- }
+ // get html() {
+ // if (this.title === '' && this.content === '') {
+ // return NotificationsService.htmlArray.get(this.id);
+ // } else {
+ // return null;
+ // }
+ // }
}
diff --git a/src/app/shared/notifications/notification/notification.component.html b/src/app/shared/notifications/notification/notification.component.html
index a50af4b51dcc0a700ae1eb2ea91c2f459ce7e424..1d35b6f931e1c795840e6d0dd53536d4b0ac824d 100644
--- a/src/app/shared/notifications/notification/notification.component.html
+++ b/src/app/shared/notifications/notification/notification.component.html
@@ -1,4 +1,4 @@
-<div class="alert {{item.type}}" role="alert"
+<div class="alert {{item.type}} alert-dismissible" role="alert"
[@enterLeave]="animate"
[ngClass]="{
'rtl-mode': rtl
@@ -12,12 +12,18 @@
'fa-info': item.type == 'alert-info'
}"></i></div>
- <div class="close" (click)="remove()"><i class="fa fa-times"></i></div>
+ <!--<div class="close" (click)="remove()">-->
+ <button *ngIf="item.options.clickToClose"
+ (click)="remove()"
+ type="button" class="close" data-dismiss="alert" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ </button>
+
- <div *ngIf="!item.html">
+ <div *ngIf="!item.html">
<div class="sn-title" *ngIf="titleIsTemplate; else regularTitle">
<ng-container *ngTemplateOutlet="title"></ng-container>
@@ -42,11 +48,11 @@
<div *ngIf="item.html">
<div class="sn-html" *ngIf="htmlIsTemplate; else regularHtml">
- <ng-container *ngTemplateOutlet="item.html"></ng-container>
+ <ng-container *ngTemplateOutlet="html"></ng-container>
</div>
<ng-template #regularHtml>
- <div class="sn-content" [innerHTML]="item.html"></div>
+ <div class="sn-content" [innerHTML]="html"></div>
</ng-template>
diff --git a/src/app/shared/notifications/notification/notification.component.scss b/src/app/shared/notifications/notification/notification.component.scss
index 9db71232cfb525a09fa97c951a93fea625beee9c..da3a6db7772bce10564774b4269325314fe6941a 100644
--- a/src/app/shared/notifications/notification/notification.component.scss
+++ b/src/app/shared/notifications/notification/notification.component.scss
@@ -1,7 +1,11 @@
-.close {
- float: right;
- margin-right: -15px;
- margin-top: -10px;
+//.close {
+// float: right;
+// margin-right: -15px;
+// margin-top: -10px;
+//}
+
+close:active {
+ border: 0;
}
.icon {
diff --git a/src/app/shared/notifications/notification/notification.component.ts b/src/app/shared/notifications/notification/notification.component.ts
index e1b97331e994393b576a6ff75f5d7dbfb4de4896..f43a2a633b809cfdb15b48e7c44c14669e80d6ea 100644
--- a/src/app/shared/notifications/notification/notification.component.ts
+++ b/src/app/shared/notifications/notification/notification.component.ts
@@ -1,5 +1,4 @@
import {
- AfterViewInit,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
@@ -11,7 +10,7 @@ import {
ViewEncapsulation
} from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { DomSanitizer } from '@angular/platform-browser';
import { NotificationsService } from '../notifications.service';
import { INotification } from '../models/notification.model';
@@ -103,7 +102,7 @@ import { INotification } from '../models/notification.model';
transition('rotate => rotateOut', [
style({opacity: 1, transform: 'rotate(0deg)'}),
animate('400ms ease-in-out')
- ])
+ ]),
])
],
templateUrl: './notification.component.html',
@@ -129,7 +128,6 @@ export class NotificationComponent implements OnInit, OnDestroy {
public title: any;
public content: any;
public html: any;
-
public titleIsTemplate = false;
public contentIsTemplate = false;
public htmlIsTemplate = false;
@@ -195,7 +193,7 @@ export class NotificationComponent implements OnInit, OnDestroy {
private remove() {
if (this.animate) {
- this.animate = this.animate + 'Out';
+ // this.animate = this.animate + 'Out';
setTimeout(() => {
this.notificationService.remove(this.item);
}, 310);
@@ -213,4 +211,8 @@ export class NotificationComponent implements OnInit, OnDestroy {
this[key + 'IsTemplate'] = item instanceof TemplateRef;
}
+
+ // setAnimationOut() {
+ // this.animate = this.animate + 'Out';
+ // }
}
diff --git a/src/app/shared/notifications/notifications-board/notifications-board.component.ts b/src/app/shared/notifications/notifications-board/notifications-board.component.ts
index 40ccf0984c81e7719935e92c19271d4b399cf796..a1033b845e88f5d9470266ca98eacc7d1903a695 100644
--- a/src/app/shared/notifications/notifications-board/notifications-board.component.ts
+++ b/src/app/shared/notifications/notifications-board/notifications-board.component.ts
@@ -73,8 +73,6 @@ export class NotificationsBoardComponent implements OnInit, OnDestroy {
});
}
-
- console.log(this.notifications);
this.cdr.markForCheck();
});
}
@@ -87,49 +85,37 @@ export class NotificationsBoardComponent implements OnInit, OnDestroy {
this.notifications.splice(this.notifications.length - 1, 1);
}
this.notifications.splice(0, 0, item);
+ } else {
+ // Remove the notification from the store
+ // This notification was in the store, but not in this.notifications
+ // because it was a blocked duplicate
+ this.service.remove(item);
}
}
- //
- // // Check if notifications should be prevented
block(item: INotification): boolean {
+ const toCheck = item.html ? this.checkHtml : this.checkStandard;
+ this.notifications.forEach((notification) => {
+ if (toCheck(notification, item)) {
+ return true;
+ }
+ });
- // const toCheck = item.html ? this.checkHtml : this.checkStandard;
- //
- // this.notifications.forEach((notification) => {
- // if (toCheck(notification, item)) {
- // return true;
- // }
- // });
- //
- // if (this.notifications.length > 0) {
- // for (let i = 0; i < this.notifications.length; i++) {
- // if (toCheck(this.notifications[i], item)) {
- // return true;
- // }
- // }
- // }
- //
- // // if (this.preventLastDuplicates) {
- //
- // let comp: Notification;
- //
- // if ( this.notifications.length > 0) {
- // // if (this.lastOnBottom) {
- // // comp = this.notifications[this.notifications.length - 1];
- // // }
- // // else {
- // comp = this.notifications[0];
- // // }
- // // } else if (this.preventLastDuplicates === 'all' && this.lastNotificationCreated) {
- // // comp = this.lastNotificationCreated;
- // } else {
- // return false;
- // }
- // return toCheck(comp, item);
- // // }
- //
- return false;
+ if (this.notifications.length > 0) {
+ this.notifications.forEach( (notification) => {
+ if (toCheck(notification, item)) {
+ return true;
+ }
+ });
+ }
+
+ let comp: INotification;
+ if (this.notifications.length > 0) {
+ comp = this.notifications[0];
+ } else {
+ return false;
+ }
+ return toCheck(comp, item);
}
checkStandard(checker: INotification, item: INotification): boolean {
diff --git a/src/app/shared/notifications/notifications.service.ts b/src/app/shared/notifications/notifications.service.ts
index 60efd32700c575e50a861e55f97b21dfd8d8603f..8cae9506e4053233d5e3c079a5b0f236cd20f7d5 100644
--- a/src/app/shared/notifications/notifications.service.ts
+++ b/src/app/shared/notifications/notifications.service.ts
@@ -1,6 +1,5 @@
import { Injectable } from '@angular/core';
import { INotification, Notification } from './models/notification.model';
-// import {Icons, defaultIcons} from './interfaces/icons';
import { NotificationType } from './models/notification-type';
import { NotificationOptions } from './models/notification-options.model';
import { uniqueId } from 'lodash';
@@ -16,13 +15,8 @@ import { DomSanitizer } from '@angular/platform-browser';
@Injectable()
export class NotificationsService {
- public static htmlArray = new Map<string, any>();
-
- // public emitter = new Subject<NotificationEvent>();
- // public icons: Icons = defaultIcons;
constructor(private store: Store<Notification>,
private domSanitizer: DomSanitizer,) {
-
}
private add(notification: Notification) {
@@ -35,47 +29,37 @@ export class NotificationsService {
this.store.dispatch(notificationAction);
}
- success(title: any = '', content: any = '', options = new NotificationOptions()): Notification {
- const notification = new Notification(uniqueId(), NotificationType.Success, title, content, options);
- this.add(notification);
- return notification;
- }
-
- error(title: any = '', content: any = '', options = new NotificationOptions()): Notification {
- const notification = new Notification(uniqueId(), NotificationType.Error, title, content, options);
+ success(title: any = '', content: any = '', options = new NotificationOptions(), html?: any): INotification {
+ const notification = new Notification(uniqueId(), NotificationType.Success, title, content, options, html);
this.add(notification);
return notification;
}
- info(title: any = '', content: any = '', options = new NotificationOptions()): Notification {
- const notification = new Notification(uniqueId(), NotificationType.Info, title, content, options);
+ error(title: any = '', content: any = '', options = new NotificationOptions(), html?: any): INotification {
+ const notification = new Notification(uniqueId(), NotificationType.Error, title, content, options, html);
this.add(notification);
return notification;
}
- warning(title: any = '', content: any = '', options = new NotificationOptions()): Notification {
- const notification = new Notification(uniqueId(), NotificationType.Warning, title, content, options);
+ info(title: any = '', content: any = '', options = new NotificationOptions(), html?: any): INotification {
+ const notification = new Notification(uniqueId(), NotificationType.Info, title, content, options, html);
this.add(notification);
return notification;
}
- html(html: any, type = NotificationType.Success, options = new NotificationOptions()): Notification {
- const notification = new Notification(uniqueId(), type, '', '', options);
- NotificationsService.htmlArray.set(notification.id, html);
- // notification.html = true;
+ warning(title: any = '', content: any = '', options = new NotificationOptions(), html?: any): INotification {
+ const notification = new Notification(uniqueId(), NotificationType.Warning, title, content, options, html);
this.add(notification);
return notification;
}
remove(notification: INotification) {
const actionRemove = new RemoveNotificationAction(notification.id);
- NotificationsService.htmlArray.delete(notification.id);
this.store.dispatch(actionRemove);
}
removeAll() {
const actionRemoveAll = new RemoveAllNotificationsAction();
- NotificationsService.htmlArray.clear();
this.store.dispatch(actionRemoveAll);
}