slight tidy up and prep for Aidan work

donal

2018-04-04 9e628c998951ee020076a040e9cc943f0da78962

 src/components/TodoItem.vue

@@ -1,28 +1,37 @@
<template>
  <div>
    <div class="itemCardAndFlag">

    <md-list-item
      @click="markDone"
      @click="markCompleted"
      >
      <!-- TODO find a nice way of not calling markdone when clicking flag on card rather than calling "markDone" twice -->
      
      <!-- 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"/>
      <!-- <input type="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"
        >
        <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="markCompleted">
          <path d="M0 0h24v24H0z" fill="none"/>
          <path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z"/>
        </svg>
      </md-button>
    </md-list-item>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { Checkbox, Radio } from "vue-checkbox-radio";
Vue.component("checkbox", Checkbox);
Vue.component("radio", Radio);

export default {
  name: "TodoItem",
  props: {
@@ -32,19 +41,18 @@
  data() {
    return {
      // isActive: false,
      isImportant: false
      // isImportant: false
    };
  },
  methods: {
    markDone() {
      // set to greyed out / true false
      this.isActive = !this.isActive;
      console.info("INFO - ", this.todoItem, this.isActive);
    markCompleted() {
      this.$store.dispatch("markTodoCompleted", this.todoItem._id);
      console.info("INFO - Mark todo as completed ", this.todoItem.completed);
    },
    markImportant() {
      // set to greyed out / true false
      this.isImportant = !this.isImportant;
      console.info("INFO - ", this.todoItem, this.isImportant);
      console.info("INFO - Mark todo as important ", this.todoItem.important);
      // TODO - FILL THIS OUT IN THE LAB EXERCISE

    }
  }
};
@@ -62,6 +70,10 @@
  vertical-align: top;
}

.md-list-item-text {
  padding-left: 0.5em;
}

.strike-through {
  text-decoration: line-through;
  font-style: italic;