feat(examples): add notifications to todos example

closes #65
tomastrajan · Mar 14, 2018 · 71d0f2a · 71d0f2a
1 parent 542c100
commit 71d0f2a
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 3 deletions.
diff --git a/src/app/examples/examples/examples.component.ts b/src/app/examples/examples/examples.component.ts
@@ -13,7 +13,6 @@ export class ExamplesComponent implements OnInit {
     { link: 'todos', label: 'Todos' },
     { link: 'stock-market', label: 'Stocks' },
     { link: 'theming', label: 'Theming' },
-    { link: 'notifications', label: 'Notifications' },
     { link: 'authenticated', label: 'Auth' }
   ];
 

diff --git a/src/app/examples/todos/todos.component.ts b/src/app/examples/todos/todos.component.ts
@@ -1,4 +1,9 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
+import {
+  MatSnackBar,
+  MatSnackBarRef,
+  SimpleSnackBar
+} from '@angular/material/snack-bar';
 import { Store } from '@ngrx/store';
 import { Subject } from 'rxjs/Subject';
 import { takeUntil } from 'rxjs/operators/takeUntil';
@@ -27,8 +32,9 @@ export class TodosComponent implements OnInit, OnDestroy {
   animateOnRouteEnter = ANIMATE_ON_ROUTE_ENTER;
   todos: any;
   newTodo = '';
+  notification: MatSnackBarRef<SimpleSnackBar>;
 
-  constructor(public store: Store<any>) {}
+  constructor(public store: Store<any>, public snackBar: MatSnackBar) {}
 
   ngOnInit() {
     this.store
@@ -73,18 +79,30 @@ export class TodosComponent implements OnInit, OnDestroy {
 
   onAddTodo() {
     this.store.dispatch(new ActionTodosAdd({ name: this.newTodo }));
+    this.showNotification(`Todo "${this.newTodo}" added`);
     this.newTodo = '';
   }
 
   onToggleTodo(todo: Todo) {
     this.store.dispatch(new ActionTodosToggle({ id: todo.id }));
+    this.showNotification(`Todo "${todo.name}" toggled`, 'Undo')
+      .onAction()
+      .subscribe(() => this.onToggleTodo(todo));
   }
 
   onRemoveDoneTodos() {
     this.store.dispatch(new ActionTodosRemoveDone());
+    this.showNotification('Done todos removed');
   }
 
   onFilterTodos(filter: TodosFilter) {
     this.store.dispatch(new ActionTodosFilter({ filter }));
+    this.showNotification(`Filtering todos "${filter}"`);
+  }
+
+  private showNotification(message: string, action?: string) {
+    return this.notification = this.snackBar.open(message, action, {
+      duration: 3000
+    });
   }
 }
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
@@ -16,6 +16,7 @@ import { MatCardModule } from '@angular/material/card';
 import { MatListModule } from '@angular/material/list';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 
 import { BigInputComponent } from './big-input/big-input.component';
 import { BigInputActionComponent } from './big-input/big-input-action.component';
@@ -38,7 +39,8 @@ import { BigInputActionComponent } from './big-input/big-input-action.component'
     MatListModule,
     MatMenuModule,
     MatIconModule,
-    MatTooltipModule
+    MatTooltipModule,
+    MatSnackBarModule
   ],
   declarations: [BigInputComponent, BigInputActionComponent],
   exports: [
@@ -59,6 +61,7 @@ import { BigInputActionComponent } from './big-input/big-input-action.component'
     MatToolbarModule,
     MatIconModule,
     MatTooltipModule,
+    MatSnackBarModule,
 
     BigInputComponent,
     BigInputActionComponent