FIX broken vuex stuff

donal

2018-04-04 e3884467d3cf833d690ad22dd05b9133fcb4091f

FIX broken vuex stuff

 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
      );
    },

 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;

 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");
  }
};

 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: {

 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);