feat(toast-notificatio-list): Add toast notification list

index.ts

@@ -34,6 +34,7 @@ export { FilterResultsComponent } from './src/app/filters/filter-results.compone
 
 // Notification
 export { ToastNotificationComponent } from './src/app/notification/toast-notification.component';
+export { ToastNotificationListComponent } from './src/app/notification/toast-notification-list.component';
 
 // Sort
 export { SortComponent } from './src/app/sort/sort.component';

package.json

@@ -13,7 +13,7 @@
     "clean": "npm cache clean && npm run rimraf -- node_modules doc coverage dist bundles",
     "cleanup": "rimraf dist/package.json dist/bundles dist/src dist/index.d.ts dist/index.metadata.json dist/index.js dist/index.js.map dist/LICENSE dist/README.md",
     "commitmsg": "validate-commit-msg",
-    "copy-files": "copyfiles LICENSE README.md package.json dist && copyfiles src/**/*.css && copyfiles src/**/**/*.css dist && copyfiles src/**/*.html dist && copyfiles src/**/**/*.html dist",
+    "copy-files": "copyfiles LICENSE README.md package.json dist && copyfiles src/**/*.css dist && copyfiles src/**/**/*.css dist && copyfiles src/**/*.html dist && copyfiles src/**/**/*.html dist",
     "copy-dist-files": "copyfiles LICENSE README.md package.json index.js dist",
     "minify": "uglifyjs dist/bundles/ngx-widgets.js --screw-ie8 --compress --mangle --comments --output dist/bundles/ngx-widgets.min.js",
     "prebuild:add-require": "gulp add-require-for-templates && gulp replace-html && gulp add-require-for-styles && gulp replace-scss",

src/app/config/action.ts

@@ -1,5 +1,5 @@
 /*
- * An action to display on the toolbar containing:
+ * An action for a button, dropdown, etc:
  *
  * id - Optional unique Id for the filter field, useful for comparisons
  * isDisabled - set to true to disable the action

src/app/config/actions-config.ts

@@ -1,7 +1,7 @@
 import { Action } from './action';
 
 /*
- * A filter config containing:
+ * An actions config containing:
  *
  * moreActions - Optional list of secondary actions to display on the toolbar action pulldown menu
  * primaryActions - List of primary actions to display on the toolbar

src/app/notification/examples/toast-notification-example.component.html

@@ -6,29 +6,35 @@
   </div>
   <div class="row">
     <div class="col-md-12">
-      <alm-toast-notification [config]="config"
-                              (onActionSelect)="handleAction($event)"
-                              (onCloseSelect)="handleClose($event)">
+      <alm-toast-notification
+          [header]="header"
+          [message]="message"
+          [moreActions]="moreActions"
+          [primaryAction]="primaryAction"
+          [showClose]="showClose"
+          [type]="type"
+          (onActionSelect)="handleAction($event)"
+          (onCloseSelect)="handleClose($event)">
       </alm-toast-notification>
       <form class="form-horizontal">
         <div class="form-group">
           <label class="col-sm-2 control-label" for="header">Header:</label>
           <div class="col-sm-10">
             <input id="header" name="header"
-                   type="text" class="form-control" [(ngModel)]="config.header"/>
+                   type="text" class="form-control" [(ngModel)]="header"/>
           </div>
         </div>
         <div class="form-group">
           <label class="col-sm-2 control-label" for="message">Message:</label>
           <div class="col-sm-10">
             <input id="message" name="message"
-                   type="text" class="form-control" [(ngModel)]="config.message"/>
+                   type="text" class="form-control" [(ngModel)]="message"/>
           </div>
         </div>
         <div class="form-group">
           <label class="col-sm-2 control-label" for="message">Primary Action:</label>
           <div class="col-sm-10">
-            <input id="primaryAction" name="primaryAction" [(ngModel)]="config.actionsConfig.primaryActions[0].title"
+            <input id="primaryAction" name="primaryAction" [(ngModel)]="primaryAction.title"
                    type="text" class="form-control" />
           </div>
         </div>
@@ -37,11 +43,11 @@
           <div class="col-sm-10">
             <div class="btn-group dropdown" dropdown>
               <button id="type" type="button" class="btn btn-default" dropdownToggle>
-                {{config.type}}
+                {{type}}
                 <span class="caret"></span>
               </button>
               <ul class="dropdown-menu" dropdownMenu role="menu">
-                <li role="menuitem" *ngFor="let item of types" [ngClass]="{'selected': item === config.type}">
+                <li role="menuitem" *ngFor="let item of types" [ngClass]="{'selected': item === type}">
                   <a href="javascript:void(0);" tabindex="-1" (click)="handleType(item)">
                     {{item}}
                   </a>
@@ -54,7 +60,7 @@
           <label class="col-sm-2 control-label" for="showClose">Show Close:</label>
           <div class="col-sm-3">
             <input id="showClose" name="showClose"
-                   type="checkbox" [(ngModel)]="config.showClose"/>
+                   type="checkbox" [(ngModel)]="showClose"/>
           </div>
           <label class="col-sm-2 control-label" for="showMenu">Show More Actions:</label>
           <div class="col-sm-3">

src/app/notification/examples/toast-notification-example.component.ts

@@ -7,7 +7,7 @@ import {
 import { Router } from '@angular/router';
 
 import { Action } from '../../config/action';
-import { NotificationConfig } from "../notification-config";
+import { NotificationEvent } from "../notification-event";
 
 @Component({
   encapsulation: ViewEncapsulation.None,
@@ -18,15 +18,30 @@ import { NotificationConfig } from "../notification-config";
 })
 export class ToastNotificationExampleComponent implements OnInit {
   actionText: string = '';
-  config: NotificationConfig;
+  header: string = 'Default Header.';
+  message: string = 'Default Message.';
   moreActions: Action[];
+  moreActionsDefault: Action[];
+  primaryAction: Action;
+  showClose: false;
   showMoreActions: boolean = false;
+  type: string;
   types: string[];
 
   constructor(private router: Router) {
+  }
+
+  ngOnInit(): void {
     this.types = ['success', 'info', 'danger', 'warning'];
+    this.type = this.types[0];
+
+    this.primaryAction = {
+      id: "action1",
+      name: 'Primary Action',
+      title: ''
+    } as Action;
 
-    this.moreActions = [{
+    this.moreActionsDefault = [{
       id: 'moreActions1',
       name: 'Action',
       title: 'Perform an action'
@@ -55,44 +70,27 @@ export class ToastNotificationExampleComponent implements OnInit {
       name: 'Grouped Action 2',
       title: 'Do something similar'
     }] as Action[];
-
-    this.config = {
-      actionsConfig: {
-        primaryActions: [{
-          id: "action1",
-          name: 'Primary Action',
-          title: ''
-        }]
-      },
-      header: 'Default Header.',
-      message: 'Default Message.',
-      showClose: false,
-      type: 'success'
-    } as NotificationConfig;
-  }
-
-  ngOnInit(): void {
   }
 
   ngDoCheck(): void {
     if (this.showMoreActions === true) {
-      this.config.actionsConfig.moreActions = this.moreActions;
+      this.moreActions = this.moreActionsDefault;
     } else {
-      this.config.actionsConfig.moreActions = undefined;
+      this.moreActions = undefined;
     }
   }
 
   // Action functions
 
-  handleAction($event: Action): void {
-    this.actionText = $event.name + '\n' + this.actionText;
+  handleAction($event: NotificationEvent): void {
+    this.actionText = $event.action.name + '\n' + this.actionText;
   }
 
-  handleClose($event: Action): void {
+  handleClose($event: NotificationEvent): void {
     this.actionText = "Close" + '\n' + this.actionText;
   }
 
   handleType(item: string): void {
-    this.config.type = item;
+    this.type = item;
   }
 }

src/app/notification/examples/toast-notification-list-example.component.html

@@ -1,12 +1,88 @@
 <div class="padding-15">
   <div class="row padding-bottom-15">
     <div class="col-xs-12">
-      <div><a routerLink="/home" routerLinkActive="active">Home</a> &gt; Toast List Notification</div>
+      <div><a routerLink="/home" routerLinkActive="active">Home</a> &gt; Toast Notification List</div>
     </div>
   </div>
   <div class="row">
     <div class="col-md-12">
-
+      <alm-toast-notification-list
+          [notifications]="notifications"
+          (onActionSelect)="handleAction($event)"
+          (onCloseSelect)="handleClose($event)"
+          (onViewingChange)="handleViewingChange($event)">
+      </alm-toast-notification-list>
+    </div>
+  </div>
+  <div class="row example-container">
+    <div class="col-md-12">
+      <form class="form-horizontal">
+        <div class="form-group">
+          <label class="col-sm-2 control-label" for="header">Header:</label>
+          <div class="col-sm-10">
+            <input id="header" name="header"
+                   type="text" class="form-control" [(ngModel)]="header"/>
+          </div>
+        </div>
+        <div class="form-group">
+          <label class="col-sm-2 control-label" for="message">Message:</label>
+          <div class="col-sm-10">
+            <input id="message" name="message"
+                   type="text" class="form-control" [(ngModel)]="message"/>
+          </div>
+        </div>
+        <div class="form-group">
+          <label class="col-sm-2 control-label" for="message">Primary Action:</label>
+          <div class="col-sm-10">
+            <input id="primaryAction" name="primaryAction" [(ngModel)]="primaryAction.title"
+                   type="text" class="form-control" />
+          </div>
+        </div>
+        <div class="form-group">
+          <label class="col-sm-2 control-label" for="type">Type:</label>
+          <div class="col-sm-10">
+            <div class="btn-group dropdown" dropdown>
+              <button id="type" type="button" class="btn btn-default" dropdownToggle>
+                {{type}}
+                <span class="caret"></span>
+              </button>
+              <ul class="dropdown-menu" dropdownMenu role="menu">
+                <li role="menuitem" *ngFor="let item of types" [ngClass]="{'selected': item === type}">
+                  <a href="javascript:void(0);" tabindex="-1" (click)="handleType(item)">
+                    {{item}}
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div class="form-group">
+          <label class="col-sm-2 control-label" for="showClose">Show Close:</label>
+          <div class="col-sm-2">
+            <input id="showClose" name="showClose"
+                   type="checkbox" [(ngModel)]="showClose"/>
+          </div>
+          <label class="col-sm-2 control-label" for="showMenu">Show More Actions:</label>
+          <div class="col-sm-2">
+            <input id="showMenu" name="showMenu" type="checkbox" [(ngModel)]="showMoreActions"/>
+          </div>
+          <label class="col-sm-2 control-label" for="type">Persistent:</label>
+          <div class="col-sm-2">
+            <input id="showPersistent" name="showPersistent" type="checkbox" [(ngModel)]="isPersistent"/>
+          </div>
+        </div>
+        <div class="form-group">
+          <div class="col-sm-12">
+            <button (click)="notify()">Add notification - Click me several times</button>
+          </div>
+        </div>
+      </form>
+    </div>
+    <div class="col-md-12">
+      <label class="actions-label">Actions: </label>
+    </div>
+    <div class="col-md-12">
+      <textarea rows="3" class="col-md-12">{{actionText}}</textarea>
     </div>
   </div>
 </div>

src/app/notification/examples/toast-notification-list-example.component.ts

@@ -6,8 +6,9 @@ import {
 
 import { Router } from '@angular/router';
 
-import { Action } from '../../config/action';
-import { NotificationConfig } from "../notification-config";
+import { Action } from "../../config/action";
+import { Notification } from "../notification";
+import { NotificationEvent } from "../notification-event";
 
 @Component({
   encapsulation: ViewEncapsulation.None,
@@ -17,17 +18,98 @@ import { NotificationConfig } from "../notification-config";
   templateUrl: './toast-notification-list-example.component.html'
 })
 export class ToastNotificationListExampleComponent implements OnInit {
+  actionText: string = '';
+  header: string = 'Default Header.';
+  isPersistent: boolean;
+  message: string = 'Default Message.';
+  moreActions: Action[];
+  moreActionsDefault: Action[];
+  notifications: Notification[];
+  primaryAction: Action;
+  showClose: false;
+  showMoreActions: boolean = false;
+  types: string[] = ['success', 'info', 'danger', 'warning'];
+  type: string;
 
   constructor(private router: Router) {
-
   }
 
   ngOnInit(): void {
+    this.type = this.types[0];
+
+    this.primaryAction = {
+      id: "action1",
+      name: 'Primary Action',
+      title: ''
+    } as Action;
+
+    this.moreActionsDefault = [{
+      id: 'moreActions1',
+      name: 'Action',
+      title: 'Perform an action'
+    },{
+      id: 'moreActions2',
+      name: 'Another Action',
+      title: 'Do something else'
+    },{
+      id: 'moreActions3',
+      isDisabled: true,
+      name: 'Disabled Action',
+      title: 'Unavailable action'
+    },{
+      id: 'moreActions4',
+      name: 'Something Else',
+      title: ''
+    },{
+      id: 'moreActions5',
+      isSeparator: true
+    },{
+      id: 'moreActions6',
+      name: 'Grouped Action 1',
+      title: 'Do something'
+    },{
+      id: 'moreActions7',
+      name: 'Grouped Action 2',
+      title: 'Do something similar'
+    }] as Action[];
   }
 
   ngDoCheck(): void {
+    if (this.showMoreActions === true) {
+      this.moreActions = this.moreActionsDefault;
+    } else {
+      this.moreActions = undefined;
+    }
   }
 
   // Action functions
 
+  handleAction($event: NotificationEvent): void {
+    this.actionText = $event.action.name + '\n' + this.actionText;
+  }
+
+  handleClose($event: NotificationEvent): void {
+    this.actionText = "Close" + '\n' + this.actionText;
+    this.notifications.pop();
+  }
+
+  handleType(item: string): void {
+    this.type = item;
+  }
+
+  handleViewingChange($event: NotificationEvent):void {
+    //Notifications.setViewing(data, viewing);
+  }
+
+  notify():void {
+    this.notifications = [{
+      header: this.header,
+      isPersistent: this.isPersistent,
+      message: this.message,
+      moreActions: this.moreActions,
+      primaryAction: this.primaryAction,
+      showClose: this.showClose,
+      type: this.type
+    }] as Notification[];
+  }
 }