From 37da7efa416993a2b942ac7746778473e24d9ddf Mon Sep 17 00:00:00 2001 From: basejump Date: Sun, 7 May 2017 18:30:17 -0500 Subject: [PATCH] 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 | 2 +- vue-app/index.html | 2 +- vue-app/package.json | 3 +- vue-app/src/main.js | 46 ++++++++++++++-------------- vue-app/src/todoRestApi.js | 61 ++++++++++++++++++++++++++++++++++++++ 5 files changed, 88 insertions(+), 26 deletions(-) create mode 100644 vue-app/src/todoRestApi.js diff --git a/vue-app/config/index.js b/vue-app/config/index.js index 196da1f..311dcf6 100644 --- a/vue-app/config/index.js +++ b/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: '/', diff --git a/vue-app/index.html b/vue-app/index.html index cb9961c..8784587 100644 --- a/vue-app/index.html +++ b/vue-app/index.html @@ -27,7 +27,7 @@

todos

:key="todo.id" :class="{ completed: todo.completed, editing: todo == editedTodo }">
- +
diff --git a/vue-app/package.json b/vue-app/package.json index cda3563..1e37964 100644 --- a/vue-app/package.json +++ b/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", diff --git a/vue-app/src/main.js b/vue-app/src/main.js index fd85361..5494ce0 100644 --- a/vue-app/src/main.js +++ b/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) } }) diff --git a/vue-app/src/todoRestApi.js b/vue-app/src/todoRestApi.js new file mode 100644 index 0000000..095d530 --- /dev/null +++ b/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) + }) + }) + } +}