feat(examples): enhance todo notification messages, adjust done todo …

…styles
tomastrajan · Mar 17, 2018 · 0e34d7e · 0e34d7e
1 parent 075bef9
commit 0e34d7e
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/src/app/examples/todos/todos.component.html b/src/app/examples/todos/todos.component.html
@@ -51,7 +51,11 @@ <h2>
       </h2>
       <mat-card *ngFor="let todo of filteredTodos" class="todo" [ngClass]="animateOnRouteEnter">
         <mat-checkbox class="todo-done" [checked]="todo.done" (change)="onToggleTodo(todo)"></mat-checkbox>
-        <span class="todo-label" (click)="onToggleTodo(todo)">{{todo.name}}</span>
+        <span class="todo-label"
+              [ngClass]="{ 'todo-label-done': todo.done }"
+              (click)="onToggleTodo(todo)">
+          &nbsp;{{todo.name}}&nbsp;
+        </span>
       </mat-card>
       <br>
       <br>

diff --git a/src/app/examples/todos/todos.component.scss b/src/app/examples/todos/todos.component.scss
@@ -28,5 +28,10 @@
     position: relative;
     top: 2px;
     cursor: pointer;
+
+    &.todo-label-done {
+      text-decoration: line-through;
+      opacity: 0.5;
+    }
   }
 }
diff --git a/src/app/examples/todos/todos.component.ts b/src/app/examples/todos/todos.component.ts
@@ -74,25 +74,26 @@ export class TodosComponent implements OnInit, OnDestroy {
 
   onAddTodo() {
     this.store.dispatch(new ActionTodosAdd({ name: this.newTodo }));
-    this.showNotification(`Todo "${this.newTodo}" added`);
+    this.showNotification(`"${this.newTodo}" added`);
     this.newTodo = '';
   }
 
   onToggleTodo(todo: Todo) {
+    const newStatus = todo.done ? 'active' : 'done';
     this.store.dispatch(new ActionTodosToggle({ id: todo.id }));
-    this.showNotification(`Todo "${todo.name}" toggled`, 'Undo')
+    this.showNotification(`Toggled "${todo.name}" to ${newStatus}`, 'Undo')
       .onAction()
-      .subscribe(() => this.onToggleTodo(todo));
+      .subscribe(() => this.onToggleTodo({ ...todo, done: !todo.done }));
   }
 
   onRemoveDoneTodos() {
     this.store.dispatch(new ActionTodosRemoveDone());
-    this.showNotification('Done todos removed');
+    this.showNotification('Removed done todos');
   }
 
   onFilterTodos(filter: TodosFilter) {
     this.store.dispatch(new ActionTodosFilter({ filter }));
-    this.showNotification(`Filtering todos "${filter}"`);
+    this.showNotification(`Filtered to ${filter.toLowerCase()}`);
   }
 
   private showNotification(message: string, action?: string) {