Phase 5 - Vue TodoMVC modifications for rest model

1. `npm install axios --save`  modify package.json per example and run npm install
2. modify vue-app/config/index.js to change port to 8090 so it doesn't conflict with grails
3. create new src/todoRestApi.js for communication with grails. See file.
4. modify src/main.js to use the new todoModel.js instead of the local storage `todoStorage` from original example
5. Make minor tweak to the complete check box to use even for save

5. `grails run-app` under the grail-server dir. In another shell window cd to vue-app and run 'npm run dev'

vue-app/config/index.js

@@ -23,7 +23,7 @@ module.exports = {
   },
   dev: {
     env: require('./dev.env'),
-    port: 8080,
+    port: 8090,
     autoOpenBrowser: true,
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',

vue-app/index.html

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

vue-app/package.json

@@ -14,9 +14,10 @@
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
   "dependencies": {
+    "axios": "^0.16.1",
     "vue": "^2.2.6",
     "vue-router": "^2.3.1",
-    "todomvc-app-css": "2.1.0"
+    "todomvc-app-css": "2.0.6"
   },
   "devDependencies": {
     "autoprefixer": "^6.7.2",

vue-app/src/main.js

@@ -1,27 +1,12 @@
 import Vue from 'vue'
+import todoApi from './todoRestApi'
 
 import '../node_modules/todomvc-app-css/index.css'
-// import './styles/styles.scss';
+// import './styles/styles.scss'
 
 // Full spec-compliant TodoMVC with localStorage persistence
 // and hash-based routing in ~120 effective lines of JavaScript.
 
-// localStorage persistence
-var STORAGE_KEY = 'todos-vuejs-2.0'
-var todoStorage = {
-  fetch: function () {
-    var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
-    todos.forEach(function (todo, index) {
-      todo.id = index
-    })
-    todoStorage.uid = todos.length
-    return todos
-  },
-  save: function (todos) {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
-  }
-}
-
 // visibility filters
 var filters = {
   all: function (todos) {
@@ -43,7 +28,7 @@ var filters = {
 var app = new Vue({
   // app initial state
   data: {
-    todos: todoStorage.fetch(),
+    todos: [],
     newTodo: '',
     editedTodo: null,
     visibility: 'all'
@@ -53,7 +38,7 @@ var app = new Vue({
   watch: {
     todos: {
       handler: function (todos) {
-        todoStorage.save(todos)
+        console.log("changed", todos)
       },
       deep: true
     }
@@ -76,6 +61,7 @@ var app = new Vue({
         this.todos.forEach(function (todo) {
           todo.completed = value
         })
+        todoApi.updateAll(this.todos)
       }
     }
   },
@@ -94,15 +80,17 @@ var app = new Vue({
       if (!value) {
         return
       }
-      this.todos.push({
-        id: todoStorage.uid++,
+      var newTodoObj = {
         title: value,
         completed: false
-      })
+      }
+      todoApi.save(newTodoObj)
+      this.todos.push(newTodoObj)
       this.newTodo = ''
     },
 
     removeTodo: function (todo) {
+      todoApi.delete(todo)
       this.todos.splice(this.todos.indexOf(todo), 1)
     },
 
@@ -119,6 +107,8 @@ var app = new Vue({
       todo.title = todo.title.trim()
       if (!todo.title) {
         this.removeTodo(todo)
+      } else {
+        todoApi.update(todo)
       }
     },
 
@@ -128,7 +118,12 @@ var app = new Vue({
     },
 
     removeCompleted: function () {
-      this.todos = filters.active(this.todos)
+      todoApi.archiveCompleted(this.todos)
+    },
+
+    setCompleted: function(todo) {
+      todo.completed = !todo.completed
+      todoApi.update(todo)
     }
   },
 
@@ -141,6 +136,11 @@ var app = new Vue({
         el.focus()
       }
     }
+  },
+
+  created: function() {
+    console.log("Ready")
+    todoApi.list(this.todos)
   }
 })
 

vue-app/src/todoRestApi.js

@@ -0,0 +1,61 @@
+import axios from 'axios'
+//import async from 'async'
+
+const RestAx = axios.create({
+  baseURL: 'http://localhost:8080/api/'
+})
+
+export default {
+
+  list: todos => {
+    RestAx.get(`todo`).then(response => {
+      todos.push(...response.data)
+      console.log("list ", todos)
+    })
+  },
+
+  save: todo => {
+    console.log("saving", todo)
+    RestAx.post('todo', todo).then(response => {
+      console.log("Saved", response)
+      todo.id = response.data.id
+    })
+  },
+
+  update: todo => {
+    console.log("updating", todo)
+    RestAx.put('todo/' + todo.id, todo).then(response => {
+      console.log("updated", response)
+    })
+  },
+
+  delete: todo => {
+    console.log("deleting", todo)
+    RestAx.delete('todo/' + todo.id).then(response => {
+      console.log("deleted", response)
+    })
+  },
+
+  updateAll: todos => {
+    console.log("updating", todos)
+    todos.forEach(function (todo) {
+      RestAx.put('todo/' + todo.id, todo).then(response => {
+        console.log("Updated", response)
+        //callback(null, response.data)
+      })
+    })
+  },
+
+  archiveCompleted: todos => {
+    console.log("archiveCompleted", todos)
+
+    todos.filter(function (todo) {
+      return todo.completed
+    }).forEach(function (todo) {
+      RestAx.delete('todo/' + todo.id).then(response => {
+        todos.splice(todos.indexOf(todo), 1)
+        console.log("deleted", todo)
+      })
+    })
+  }
+}