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 | 73 ++++++++++++------------------------ 1 files changed, 25 insertions(+), 48 deletions(-) diff --git a/src/components/TodoItem.vue b/src/components/TodoItem.vue index 4b082b5..6287bee 100644 --- a/src/components/TodoItem.vue +++ b/src/components/TodoItem.vue @@ -1,37 +1,23 @@ <template> <div> <div class="itemCardAndFlag"> - - <md-list-item - @click="markDone" - > - <!-- 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"/> --> - <checkbox v-model="todoItem.complete"/> - - <span class="md-list-item-text" :class="{'strike-through': todoItem.complete}">{{ todoItem.title }}</span> - <!-- find a nice way to utilise svg fill property without doing it inline --> - <md-button - @click="markImportant" + <md-list-item + @click="markCompleted()" > - <svg :class="{'red-flag': todoItem.important}" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" @click="markDone"> - <path d="M0 0h24v24H0z" fill="none"/> - <path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z"/> - </svg> - </md-button> - </md-list-item> + <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); +import { Checkbox, Radio } from "vue-checkbox-radio"; +Vue.component("checkbox", Checkbox); +Vue.component("radio", Radio); export default { name: "TodoItem", @@ -39,28 +25,13 @@ // type any object ;) todoItem: {} }, - data() { - return { - // isActive: false, - // isImportant: false - }; - }, methods: { - markDone() { - // Delete me below even if it works DEMO PURPOSE ONLY - this.todoItem.complete = !this.todoItem.complete; - this.$store.dispatch("updateTodo", this.todoItem); - // Do we need to add a new action/mutation to change todo.x? - // this.$store.dispatch("setNewTodo", this.newTodo) - - - console.info("INFO - ", this.todoItem, this.todoItem.complete); + markCompleted() { + this.$store.dispatch("updateTodo", {id :this.todoItem._id}); + console.info("INFO - Mark todo as completed ", this.todoItem.completed); }, markImportant() { - // set to greyed out / true false - this.todoItem.important = !this.todoItem.important; - this.$store.dispatch("updateTodo", this.todoItem); - console.info("INFO - ", this.todoItem, this.todoItem.important); + // TODO - FILL THIS OUT IN THE LAB EXERCISE } } }; @@ -68,18 +39,20 @@ <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped lang="scss"> -.md-list { +.md-list-item { width: 320px; max-width: 100%; - height: 400px; + height: 50px; display: inline-block; overflow: auto; - border: 1px solid rgba(#000, 0.12); - vertical-align: top; } .md-list-item-text { padding-left: 0.5em; +} + +.itemCardandFlag { + display: inline-block; } .strike-through { @@ -87,6 +60,10 @@ font-style: italic; } +.important-flag { + height: 50px; + margin: 0px; +} .red-flag { fill: #cc0000; } -- Gitblit v1.9.3