From 78a403c450425ea86fad7df5737a4a53ed4c6714 Mon Sep 17 00:00:00 2001 From: donal <donalspring@gmail.com> Date: Mon, 16 Apr 2018 12:57:45 +0200 Subject: [PATCH] Template for TDD --- src/components/TodoItem.vue | 26 ++++++++++---------------- 1 files changed, 10 insertions(+), 16 deletions(-) diff --git a/src/components/TodoItem.vue b/src/components/TodoItem.vue index 70220a3..6287bee 100644 --- a/src/components/TodoItem.vue +++ b/src/components/TodoItem.vue @@ -1,19 +1,15 @@ <template> <div> <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> - <md-button class="flag" - @click="markImportant()" + <md-list-item + @click="markCompleted()" > - <!-- find a nice way to utilise svg fill property without doing it all 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> @@ -31,13 +27,11 @@ }, 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); // TODO - FILL THIS OUT IN THE LAB EXERCISE - // this.todoItem.important = !this.todoItem.important; } } }; @@ -66,7 +60,7 @@ font-style: italic; } -.flag { +.important-flag { height: 50px; margin: 0px; } -- Gitblit v1.9.3