Phase 6 - Use v-model - CLEAN UP and refactor

Author: basejump

vue-app/index.html

@@ -28,7 +28,7 @@ <h1>todos</h1>
             :key="todo.id"
             :class="{ completed: todo.completed, editing: todo == editedTodo }">
             <div class="view">
-              <input class="toggle" type="checkbox" :checked="todo.completed" @click="setCompleted(todo)" >
+              <input class="toggle" type="checkbox" :checked="todo.completed" @click="todo.$toggleCompleted()" >
               <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
               <button class="destroy" @click="removeTodo(todo)"></button>
             </div>

vue-app/src/main.js

@@ -77,8 +77,6 @@ var app = new Vue({
   // note there's no DOM manipulation here at all.
   methods: {
     addTodo: function () {
-      let self = this
-
       var value = this.newTodo && this.newTodo.trim()
       if (!value) {
         return
@@ -88,15 +86,16 @@ var app = new Vue({
         title: value
       })
 
-      newTodoObj.$promise.then(function (response) {
-        self.todos.push(newTodoObj)
+      newTodoObj.$promise.then(resp => {
+        this.todos.push(newTodoObj)
         console.log("addTodo ", newTodoObj)
-        self.newTodo = ''
+        this.newTodo = ''
       })
     },
     removeTodo: function (todo) {
-      todo.$delete()
-      this.todos.splice(this.todos.indexOf(todo), 1)
+      todo.$delete().then(resp => {
+        this.todos.splice(this.todos.indexOf(todo), 1)
+      })
     },
 
     editTodo: function (todo) {
@@ -113,9 +112,8 @@ var app = new Vue({
       if (!todo.title) {
         this.removeTodo(todo)
       } else {
-        let self = this
-        todo.$update().catch(function (ex) {
-          self.editedTodo = todo //reset it back so input doesn't go away
+        todo.$update().catch(ex => {
+          this.editedTodo = todo //reset it back so input doesn't go away
         })
       }
     },
@@ -127,11 +125,6 @@ var app = new Vue({
 
     removeCompleted: function () {
       TodoModel.archiveCompleted(this.todos)
-    },
-
-    setCompleted: function(todo) {
-      todo.completed = !todo.completed
-      todo.$update()
     }
   },
 
@@ -149,7 +142,6 @@ var app = new Vue({
   created: function() {
     console.log("Ready")
     this.todos = TodoModel.query()
-    //TodoModel.list(this.todos)
   }
 })
 

vue-app/src/todoModel.js

@@ -1,37 +1,66 @@
+import Vue from 'vue'
 import Model from 'v-model'
 import Promise from 'bluebird'
 
 // set baseURL and install plugin
 Model.http.defaults.baseURL = 'http://localhost:8080/api/';
+Vue.use(Model)
 
 const TodoModel = Model.extend('/todo/:id')
 
-TodoModel.updateAll = todos => {
-  todos.forEach(function (todo) {
-    todo.$update()
-  })
-}
+Object.assign(TodoModel, {
+  errors: {
+    message: ''
+  },
 
-TodoModel.archiveCompleted = todos => {
-  todos.filter(function (todo) {
-    return todo.completed
-  }).forEach(function (todo) {
-    todo.$delete().then(response => {
-      todos.splice(todos.indexOf(todo), 1)
-      //console.log("deleted", todo)
+  updateAll(todos) {
+    todos.forEach(function (todo) {
+      todo.$update()
     })
-  })
-}
+  },
+
+  archiveCompleted(todos) {
+    todos.filter(function (todo) {
+      return todo.completed
+    }).forEach(function (todo) {
+      todo.$delete().then(response => {
+        todos.splice(todos.indexOf(todo), 1)
+        //console.log("deleted", todo)
+      })
+    })
+  }
+
+});
 
-TodoModel.errors = { message: '' } //set to data.
+//toggles the completed and saves to server
+TodoModel.prototype.$toggleCompleted = function() {
+  console.log("$toggleCompleted", this)
+  this.completed = !this.completed
+  this.$update()
+}
 
-// Add a response interceptor for default errors from Grails rest
+// Add a default response interceptor for default errors from Grails rest
+//see https://github.com/mzabriskie/axios#handling-errors
 TodoModel.http.interceptors.response.use(function (response) {
   TodoModel.errors.message = ''
   return response
 }, function (error) {
-  console.log("error.response ", error.response)
-  TodoModel.errors.message = error.response.data.message
+  if (error.response) {
+    // The request was made and the server responded with a status code
+    // that falls out of the range of 2xx
+    TodoModel.errors.message = error.response.data.message
+    console.log('response Error ', error.response)
+  } else if (error.request) {
+    // The request was made but no response was received
+    // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
+    // http.ClientRequest in node.js
+    console.log("request error ", error.request);
+    TodoModel.errors.message = error.request
+  } else {
+    // Something happened in setting up the request that triggered an Error
+    console.log('Error ', error.message);
+    TodoModel.errors.message = error.message
+  }
   return Promise.reject(error)
 })