solution for TDD

acammies

2018-04-13 6191f070883787eb11c40294e4b9249b45355911

solution for TDD

 src/components/TodoItem.vue

@@ -9,11 +9,11 @@
      <span class="md-list-item-text" :class="{'strike-through': todoItem.completed}">{{ todoItem.title }}</span>
    </md-list-item>
      <!-- TODO - Uncomment this as part of exercise3 -->
      <!-- <md-button class="important-flag"
      <md-button class="important-flag"
        @click="markImportant()"
        >
        <svg :class="{'red-flag': todoItem.important}"  height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" ><path d="M0 0h24v24H0z" fill="none"/><path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z"/></svg>
      </md-button> -->
      </md-button>
    </div>
  </div>
</template>
@@ -31,10 +31,11 @@
  },
  methods: {
    markCompleted() {
      this.$store.dispatch("updateTodo", this.todoItem._id);
      this.$store.dispatch("updateTodo", {id :this.todoItem._id});
      console.info("INFO - Mark todo as completed ", this.todoItem.completed);
    },
    markImportant() {
      this.$store.dispatch("updateTodo", {id :this.todoItem._id, important: true} );
      console.info("INFO - Mark todo as important ", this.todoItem.important);
      // TODO - FILL THIS OUT IN THE LAB EXERCISE
    }

 src/store/actions.js

@@ -91,14 +91,17 @@
    }
    //  2 return array of promises and resolve all
  },
  updateTodo({ commit, state }, id) {
  updateTodo({ commit, state }, {id, important}) {
    let i = state.todos.findIndex(todo => todo._id === id);
    // todo - add back end
    axios
      .put(config.todoEndpoint + "/" + state.todos[i]._id, state.todos[i])
      .then(data => {
        console.info("INFO - item " + id + " updated", data);
      });
    commit("MARK_TODO_COMPLETED", i);
    if (important) {
      commit("MARK_TODO_IMPORTANT", i);
    } else {
      commit("MARK_TODO_COMPLETED", i);
    }
  }
};

 src/store/mutations.js

@@ -28,7 +28,11 @@
    state.todos = [];
  },
  MARK_TODO_COMPLETED(state, index) {
    console.log('INFO - Clearing all todos');
    console.log('INFO - MARK_TODO_COMPLETED');
    state.todos[index].completed = !state.todos[index].completed;
  },
  MARK_TODO_IMPORTANT(state, index) {
    console.log('INFO - MARK_TODO_IMPORTANT');
    state.todos[index].important = !state.todos[index].important;
  }
};