diff --git a/src/app/+home-page/home-page.component.html b/src/app/+home-page/home-page.component.html index 637b975ad3..d7442f6f71 100644 --- a/src/app/+home-page/home-page.component.html +++ b/src/app/+home-page/home-page.component.html @@ -9,7 +9,10 @@ - -

Simple Error example

- -
+ + + + + + + diff --git a/src/app/+home-page/home-page.component.ts b/src/app/+home-page/home-page.component.ts index 936d7ccecc..927ecf2f8d 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; + 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 = "

Html Alert

"; + 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 e5da5d1bff..2190272a4e 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 a50af4b51d..1d35b6f931 100644 --- a/src/app/shared/notifications/notification/notification.component.html +++ b/src/app/shared/notifications/notification/notification.component.html @@ -1,4 +1,4 @@ - -
+ + + +
-
@@ -42,11 +48,11 @@
- +
-
+
diff --git a/src/app/shared/notifications/notification/notification.component.scss b/src/app/shared/notifications/notification/notification.component.scss index 9db71232cf..da3a6db777 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 e1b97331e9..f43a2a633b 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 40ccf0984c..a1033b845e 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 60efd32700..8cae9506e4 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(); - - // public emitter = new Subject(); - // public icons: Icons = defaultIcons; constructor(private store: Store, 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); + 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; } - error(title: any = '', content: any = '', options = new NotificationOptions()): Notification { - const notification = new Notification(uniqueId(), NotificationType.Error, 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; } - info(title: any = '', content: any = '', options = new NotificationOptions()): Notification { - const notification = new Notification(uniqueId(), NotificationType.Info, 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; } - warning(title: any = '', content: any = '', options = new NotificationOptions()): Notification { - const notification = new Notification(uniqueId(), NotificationType.Warning, title, content, options); - 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); }