duplicates

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>-->

src/app/+home-page/home-page.component.ts

 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();
   }
 }

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;
+    // }
+  // }
 
 
 }

src/app/shared/notifications/notification/notification.component.html

-<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">&times;</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>
 
 

src/app/shared/notifications/notification/notification.component.scss

-.close {
-  float: right;
-  margin-right: -15px;
-  margin-top: -10px;
+//.close {
+//  float: right;
+//  margin-right: -15px;
+//  margin-top: -10px;
+//}
+
+close:active {
+  border: 0;
 }
 
 .icon {

src/app/shared/notifications/notification/notification.component.ts

 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';
+  // }
 }

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 {

src/app/shared/notifications/notifications.service.ts

 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);
   }