Template for TDD

donal

2018-04-16 78a403c450425ea86fad7df5737a4a53ed4c6714

 src/components/TodoItem.vue

@@ -1,30 +1,37 @@
<template>
  <div>
    <md-list-item 
      @click="markDone"
    >
      <md-checkbox :value="isActive" />
      <span class="md-list-item-text" :class="{'strike-through': isActive}">{{ todoItem.title }}</span>
    </md-list-item>
    <div class="itemCardAndFlag">
      <md-list-item
        @click="markCompleted()"
        >
        <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>
<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: {
    // type any object ;)
    todoItem: {}
  },
  data () {
    return {
      isActive: false
    }
  },
  methods: {
    markDone () {
      // set to greyed out / true false
      this.isActive = !this.isActive;
      console.info('INFO - ', this.todoItem , this.isActive)
    markCompleted() {
      this.$store.dispatch("updateTodo", {id :this.todoItem._id});
      console.info("INFO - Mark todo as completed ", this.todoItem.completed);
    },
    markImportant() {
      // TODO - FILL THIS OUT IN THE LAB EXERCISE
    }
  }
};
@@ -32,17 +39,32 @@

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.md-list {
    width: 320px;
    max-width: 100%;
    height: 400px;
    display: inline-block;
    overflow: auto;
    border: 1px solid rgba(#000, .12);
    vertical-align: top;
.md-list-item {
  width: 320px;
  max-width: 100%;
  height: 50px;
  display: inline-block;
  overflow: auto;
}

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

.itemCardandFlag {
  display: inline-block;
}

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

.important-flag {
  height: 50px;
  margin: 0px;
}
.red-flag {
  fill: #cc0000;
}
</style>