trying to make progress whilst still messing with the vuex store is not goi...

acammies

2018-04-03 0f0a91ece445146f0940789e74b48f713ff470ac

trying to make progress whilst still messing with the vuex store is not going well

 src/components/ListOfTodos.vue

@@ -6,8 +6,8 @@
        :todoItem=item
      ></TodoItem>
    </div>
    Should be here <XofYitems/>Should be here
    <!-- <span>x out of {{todos.length}} done</span> -->
    <XofYitems />
    <span> {{sumDoneTodoItems(todos)}}out of {{this.todos.length}} done</span>
  </md-list>
</template>

@@ -21,7 +21,8 @@
  name: "ListOfTodos",
  props: {},
  components: {
    TodoItem
    TodoItem,
    XofYitems
  },
  computed: {
    ...mapGetters(
@@ -53,8 +54,11 @@
    // });
  },
  methods: {
    updateTodoList(todo) {
      this.todos.push(todo);
    // updateTodoList(todo) {
    //   this.todos.push(todo);
    // },
    sumDoneTodoItems(todos) {
      return todos.reduce((result, tdItem) => tdItem.complete ? result + 1 : result, 0);
    }
  }
};

 src/components/TodoItem.vue

@@ -15,7 +15,7 @@
      <md-button 
        @click="markImportant"
        >
        <svg :class="{'red-flag': isImportant}" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" @click="markDone">
        <svg :class="{'red-flag': todoItem.important}" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" @click="markDone">
          <path d="M0 0h24v24H0z" fill="none"/>
          <path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z"/>
        </svg>
@@ -38,20 +38,20 @@
  },
  data() {
    return {
      isActive: false,
      isImportant: false
      // isActive: false,
      // isImportant: false
    };
  },
  methods: {
    markDone() {
      // set to greyed out / true false
      this.isActive = !this.isActive;
      console.info("INFO - ", this.todoItem, this.isActive);
      // Delete me below even if it works
      this.todoItem.complete = !this.todoItem.complete;
      console.info("INFO - ", this.todoItem, this.todoItem.complete);
    },
    markImportant() {
      // set to greyed out / true false
      this.isImportant = !this.isImportant;
      console.info("INFO - ", this.todoItem, this.isImportant);
      this.todoItem.important = !this.todoItem.important;
      console.info("INFO - ", this.todoItem, this.todoItem.important);
    }
  }
};

 src/components/XofYitems.vue

@@ -1,5 +1,6 @@
<template>
  <div>
    <label>TestXofY</label>
    <span>x out of {{todos.length}} done</span>
  </div>
</template>

 src/store/actions.js

@@ -18,7 +18,8 @@
    }
    const todo = {
      title: state.newTodo,
      completed: false
      completed: false,
      important: false
    };
    axios.post(config.todoEndpoint, todo).then(mongoTodo => {
      // debugger

 src/store/index.js

@@ -12,7 +12,8 @@
      {
        title: "Have a poop",
        id: "123",
        complete: true
        complete: true,
        important: false
      }
    ],
    newTodo: ""