Template for TDD

donal

2018-04-16 78a403c450425ea86fad7df5737a4a53ed4c6714

 src/components/TodoItem.vue

@@ -1,20 +1,15 @@
<template>
  <div>
    <div class="itemCardAndFlag">
    <md-list-item
      @click="markCompleted()"
      >
      <!-- TODO find a nice way of not calling markdone when clicking flag on card rather than calling "markDone" twice -->
      <checkbox v-model="todoItem.completed"/> 

      <span class="md-list-item-text" :class="{'strike-through': todoItem.completed}">{{ todoItem.title }}</span>
    </md-list-item>
      <md-button class="flag"
        @click="markImportant()"
      <md-list-item
        @click="markCompleted()"
        >
        <!-- find a nice way to utilise svg fill property without doing it inline -->
        <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>
        <checkbox v-model="todoItem.completed" class="checkbox-completed"/> 

        <span class="md-list-item-text" :class="{'strike-through': todoItem.completed}">{{ todoItem.title }}</span>
      </md-list-item>
      <!-- TODO - SVG for use in Lab3 -->
      <!-- <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> -->
    </div>
  </div>
</template>
@@ -30,22 +25,13 @@
    // type any object ;)
    todoItem: {}
  },
  data() {
    return {
      // isActive: false,
      // isImportant: false
    };
  },
  methods: {
    markCompleted() {
      this.$store.dispatch("markTodoCompleted", this.todoItem._id);
      this.$store.dispatch("updateTodo", {id :this.todoItem._id});
      console.info("INFO - Mark todo as completed ", this.todoItem.completed);
    },
    markImportant() {
      console.info("INFO - Mark todo as important ", this.todoItem.important);
      // this.todoItem.important = !this.todoItem.important;
      // TODO - FILL THIS OUT IN THE LAB EXERCISE
      // this.todoItem.important = !this.todoItem.important;
    }
  }
};
@@ -74,7 +60,7 @@
  font-style: italic;
}

.flag {
.important-flag {
  height: 50px;
  margin: 0px;
}