From e3884467d3cf833d690ad22dd05b9133fcb4091f Mon Sep 17 00:00:00 2001
From: donal <donalspring@gmail.com>
Date: Wed, 04 Apr 2018 16:51:23 +0200
Subject: [PATCH] FIX broken vuex stuff
---
src/components/ListOfTodos.vue | 23 +------
src/store/mutations.js | 21 +++---
src/store/index.js | 27 --------
src/store/actions.js | 48 +++++++++++----
src/components/TodoItem.vue | 8 +-
5 files changed, 55 insertions(+), 72 deletions(-)
diff --git a/src/components/ListOfTodos.vue b/src/components/ListOfTodos.vue
index 0d2d9a6..d915377 100644
--- a/src/components/ListOfTodos.vue
+++ b/src/components/ListOfTodos.vue
@@ -34,25 +34,10 @@
computed: {
...mapGetters(["todos"])
},
- // data () {
- // return {
- // todos: [{
- // title: 'Have a poop',
- // id: '123',
- // complete: true
- // },{
- // title: 'Learn Vue JS',
- // id: '132',
- // complete: true
- // },{
- // title: 'Love DevOps',
- // id: '321',
- // complete: false
- // }]
- // }
- // },
created() {
- const self = this;
+ // const self = this;
+ this.$store.dispatch("loadTodos");
+
// EventBus.$on("NEWTODOADDED", function(todo) {
// console.info("INFO - NEWTODOADDED received ", todo);
// self.todos.push(todo);
@@ -64,7 +49,7 @@
// },
sumDoneTodoItems(todos) {
return todos.reduce(
- (result, tdItem) => (tdItem.complete ? result + 1 : result),
+ (result, tdItem) => (tdItem.completed ? result + 1 : result),
0
);
},
diff --git a/src/components/TodoItem.vue b/src/components/TodoItem.vue
index 39ebafd..a49a024 100644
--- a/src/components/TodoItem.vue
+++ b/src/components/TodoItem.vue
@@ -10,9 +10,9 @@
<!-- Material design checkbox not displaying, EDIT: Still can't figure out why it's not displaying -->
<!-- <md-checkbox :v-model="isActive">x</md-checkbox> -->
<!-- <input type="checkbox" v-model="todoItem.complete"/> -->
- <checkbox v-model="todoItem.complete"/>
+ <checkbox v-model="todoItem.completed"/>
- <span class="md-list-item-text" :class="{'strike-through': todoItem.complete}">{{ todoItem.title }}</span>
+ <span class="md-list-item-text" :class="{'strike-through': todoItem.completed}">{{ todoItem.title }}</span>
<!-- find a nice way to utilise svg fill property without doing it inline -->
<md-button
@click="markImportant"
@@ -47,7 +47,7 @@
methods: {
markDone() {
// Delete me below even if it works DEMO PURPOSE ONLY
- this.todoItem.complete = !this.todoItem.complete;
+ this.todoItem.completed = !this.todoItem.completed;
// debugger;
// this.$store.dispatch("setNewTodo", this.todoItem);
// this.$store.dispatch("updateTodo", this.todoItem);
@@ -55,7 +55,7 @@
// Do we need to add a new action/mutation to change todo.x?
// this.$store.dispatch("setNewTodo", this.newTodo)
- console.info("INFO - ", this.todoItem, this.todoItem.complete);
+ console.info("INFO - ", this.todoItem, this.todoItem.completed);
},
markImportant() {
this.todoItem.important = !this.todoItem.important;
diff --git a/src/store/actions.js b/src/store/actions.js
index deaf05d..844a6b8 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -1,6 +1,23 @@
import axios from "axios";
import config from "@/config";
+const dummyData = [
+ {
+ title: "Learn awesome things about Labs",
+ completed: false,
+ important: false
+ },
+ {
+ title: "Learn about my friend Jenkins",
+ completed: true,
+ important: false
+ },
+ {
+ title: "Have a poop",
+ completed: false,
+ important: true
+ }
+];
export default {
loadTodos({ commit }) {
axios
@@ -9,6 +26,12 @@
.then(todos => {
commit("SET_TODOS", todos);
commit("SET_LOADING", false);
+ }).catch(err => {
+ if (err) {
+ console.info("INFO - setting dummy data because of ", err)
+ commit("SET_TODOS", dummyData);
+ commit("SET_LOADING", false);
+ }
});
},
addTodo({ commit, state }) {
@@ -16,36 +39,35 @@
// do not add empty todos
return;
}
- debugger
+ // debugger
const todo = {
title: state.newTodo,
- complete: false,
- important: false,
- id: Math.floor(1 + (9999 - 1) * Math.random())
+ completed: false,
+ important: false
};
axios.post(config.todoEndpoint, todo).then(mongoTodo => {
commit("ADD_TODO", mongoTodo.data);
});
},
- setNewTodo ({ commit }, todo) {
+ setNewTodo({ commit }, todo) {
// debugger
- commit('SET_NEW_TODO', todo)
+ commit("SET_NEW_TODO", todo);
},
- updateTodo({ commit,state }, todo) {
+ updateTodo({ commit, state }, todo) {
// const todo = state.newTodo
- debugger
+ // debugger;
const foundIndex = state.todos.findIndex(obj => obj.id === todo.id);
state.todos[foundIndex] = todo;
- const newUpdatedArray = state.todos
- commit("UPDATE_TODO", newUpdatedArray)
+ const newUpdatedArray = state.todos;
+ commit("UPDATE_TODO", newUpdatedArray);
},
clearNewTodo({ commit }) {
commit("CLEAR_NEW_TODO");
},
clearAllTodos({ commit }) {
- commit("CLEAR_ALL_TODOS")
+ commit("CLEAR_ALL_TODOS");
},
clearAllDoneTodos({ commit }) {
- commit("CLEAR_ALL_DONE_TODOS")
- },
+ commit("CLEAR_ALL_DONE_TODOS");
+ }
};
diff --git a/src/store/index.js b/src/store/index.js
index cd15de5..5cb1735 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -8,32 +8,7 @@
export default new Vuex.Store({
state: {
loading: true,
- todos: [
- {
- title: "Have a sandwich",
- id: "123",
- complete: true,
- important: true
- },
- {
- title: "Learn VueJS",
- id: "1234",
- complete: true,
- important: false
- },
- {
- title: "EnableEnablement",
- id: "1235",
- complete: false,
- important: true
- },
- {
- title: "Have a poop",
- id: "1236",
- complete: false,
- important: false
- }
- ],
+ todos: [],
newTodo: ""
},
getters: {
diff --git a/src/store/mutations.js b/src/store/mutations.js
index 59d2f3a..b4e286f 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -1,37 +1,39 @@
export default {
SET_LOADING(state, bool) {
+ console.log('INFO - Setting loading wheel');
state.loading = bool;
},
SET_TODOS(state, todos) {
+ console.log('INFO - Setting todos');
state.todos = todos;
},
SET_NEW_TODO(state, todo) {
- // debugger
+ console.log('INFO - Setting new todo');
state.newTodo = todo;
},
ADD_TODO(state, todo) {
- console.log('INFO - add todo', todo);
+ console.log('INFO - Add todo', todo);
state.todos.push(todo);
},
REMOVE_TODO(state, todo) {
+ console.log('INFO - Removing todo');
var todos = state.todos;
todos.splice(todos.indexOf(todo), 1);
},
CLEAR_NEW_TODO(state) {
+ console.log('INFO - Clearing new todo');
state.newTodo = '';
- console.log('INFO - clearing new todo');
},
CLEAR_ALL_DONE_TODOS(state) {
- state.todos = state.todos.filter(obj => obj.complete === false);
+ console.log('INFO - Clearing all done todos');
+ state.todos = state.todos.filter(obj => obj.completed === false);
},
CLEAR_ALL_TODOS(state) {
- state.todos = [
- // { title: "", id: "0", complete: false, important: false }
- ];
- console.log('INFO - clearing all todos');
+ console.log('INFO - Clearing all todos');
+ state.todos = [];
},
UPDATE_TODO(state, updatedTodos) {
- debugger
+ console.log('INFO - Update a todo');
// state.todos.map((obj => ((obj.id !== todo.id )|| todo)));
// const foundIndex = state.todos.findIndex(obj => (obj.id === todo.id ));
// state.todos[foundIndex] = todo;
@@ -39,7 +41,6 @@
// don't do this, maybe google instead
- console.log('INFO - update a todo');
// state.todos.find(eachTodo => eachTodo.id === todo.id)
// arr1.map(obj => arr2.find(o => o.id === obj.id) || obj);
--
Gitblit v1.9.3