Step 12.3: Implemented the events in the UI

client/imports/components/list-show.component.ts

@@ -1,43 +1,112 @@
 import {Component, OnInit} from "@angular/core";
-import {ActivatedRoute, Params} from "@angular/router";
+import {ActivatedRoute, Params, Router} from "@angular/router";
 import {MeteorObservable} from "meteor-rxjs";
 import {Lists} from "../../../imports/api/lists/lists";
+import {
+  updateName,
+  makePublic,
+  makePrivate,
+  remove,
+  insert,
+} from '../../../imports/api/todos/methods';
+import { displayError } from '../../../imports/ui/lib/errors';
+import {Observable} from "rxjs";
 
 @Component({
-    template: '<blaze-template *ngIf="templateContext" name="Lists_show_page" [context]="templateContext"></blaze-template>'
+    templateUrl: '/client/imports/components/list-show.html'
 })
 export class ListShowComponent implements OnInit {
     private list : any;
     private todosReady : boolean = false;
-    private todos : Array<any>;
+    private todos : Observable<any>;
     private editing : boolean = false;
+    private editModel : any;
+    private newItemModel : string = '';
 
-    constructor(private currentRoute: ActivatedRoute) {
-
+    constructor(private currentRoute: ActivatedRoute, private router: Router) {
+        this.editModel = {
+            name: ''
+        }
     }
 
     ngOnInit() {
         this.currentRoute.params.subscribe((params: Params) => {
             const listId = params['_id'];
-            MeteorObservable.subscribe('todos.inList', listId).subscribe();
+            MeteorObservable.subscribe('todos.inList', listId).zone().subscribe();
 
             MeteorObservable.autorun().zone().subscribe(() => {
                 if (listId && Lists.findOne(listId)) {
                     this.list = Lists.findOne(listId);
                     this.todosReady = true;
-                    this.todos = this.list.todos();
+                    this.todos = this.list.todos().zone();
                 }
             })
         });
     }
 
+    deleteList() {
+        const list = this.list;
+        const message = `Are you sure you want to delete the list?`;
+
+        if (confirm(message)) {
+            remove.call({
+                listId: list._id,
+            }, displayError);
+
+            this.router.navigate(['Home']);
+
+            return true;
+        }
+
+        return false;
+    }
+
+    editList(toggle) {
+        this.editModel.name = this.list.name;
+        this.editing = toggle;
+    }
+
+    toggleListPrivacy() {
+        const list = this.list;
+
+        if (list.userId) {
+            makePublic.call({ listId: list._id }, displayError);
+        } else {
+            makePrivate.call({ listId: list._id }, displayError);
+        }
+    }
+
+    addNew() {
+        if (this.newItemModel == '') {
+            return;
+        }
+
+        insert.call({
+            listId: this.list._id,
+            text: this.newItemModel,
+        }, displayError);
+
+        this.newItemModel = '';
+    }
+
+    saveList() {
+        if (this.editing) {
+            updateName.call({
+                listId: this.list._id,
+                newName: this.editModel.name,
+            }, displayError);
+
+            this.editing = false;
+        }
+    }
+
     getContextForItem(todo) {
         return {
-              todo: todo,
-              editing: false,
-              onEditingChange(editing) {
+            todo: todo,
+            editing: false,
+            onEditingChange(editing) {
 
-              },
+            },
         }
     }
 }

client/imports/components/list-show.ng2.html

@@ -1,9 +1,9 @@
 <div class="page lists-show">
     <nav class="js-title-nav" *ngIf="list">
-        <form *ngIf="editing" class="js-edit-form list-edit-form">
-            <input type="text" name="name" [value]="editModel.name">
+        <form *ngIf="editing" class="js-edit-form list-edit-form" (ngSubmit)="saveList()" #editForm="ngForm">
+            <input type="text" [(ngModel)]="editModel.name" (blur)="saveList()" name="editNameInput">
             <div class="nav-group right">
-                <a href="#" class="js-cancel nav-item">
+                <a href="#" class="js-cancel nav-item" (click)="editList(false)">
                     <span class="icon-close js-cancel" title="Cancel"></span>
                 </a>
             </div>
@@ -15,7 +15,7 @@
                 </a>
             </div>
 
-            <h1 class="js-edit-list title-page">
+            <h1 class="js-edit-list title-page" (click)="editList(true)">
                 <span class="title-wrapper">{{list.name}}</span>
                 <span class="count-list">{{list.incompleteCount}}</span>
             </h1>
@@ -31,19 +31,19 @@ <h1 class="js-edit-list title-page">
                     <span class="icon-cog"></span>
                 </div>
                 <div class="options-web">
-                    <a class="js-toggle-list-privacy nav-item">
+                    <a class="js-toggle-list-privacy nav-item" (click)="toggleListPrivacy()">
                         <span *ngIf="list.userId" class="icon-lock" title="Make list public"></span>
                         <span *ngIf="!list.userId" class="icon-unlock" title="Make list private"></span>
                     </a>
-                    <a class="js-delete-list nav-item">
+                    <a class="js-delete-list nav-item" (click)="deleteList()">
                         <span class="icon-trash" title="Delete list"></span>
                     </a>
                 </div>
             </div>
         </div>
 
-        <form class="js-todo-new todo-new input-symbol">
-            <input type="text" placeholder="Type to add new tasks">
+        <form class="js-todo-new todo-new input-symbol" (ngSubmit)="addNew()" #newForm="ngForm">
+            <input type="text" placeholder="Type to add new tasks" [(ngModel)]="newItemModel" name="newItemInput">
             <span class="icon-add js-todo-add"></span>
         </form>
     </nav>