| commit | author | age | ||
| a34f1d | 1 | <template> |
| D | 2 | <div> |
| fbee7b | 3 | <div class="itemCardAndFlag"> |
| 3f23cc | 4 | <md-list-item |
| 26aabc | 5 | @click="markCompleted()" |
| 3f23cc | 6 | > |
| A | 7 | <!-- TODO find a nice way of not calling markdone when clicking flag on card rather than calling "markDone" twice --> |
| e38844 | 8 | <checkbox v-model="todoItem.completed"/> |
| b4180d | 9 | |
| e38844 | 10 | <span class="md-list-item-text" :class="{'strike-through': todoItem.completed}">{{ todoItem.title }}</span> |
| b4180d | 11 | <md-button |
| 26aabc | 12 | @click="markCompleted(); markImportant()" |
| b4180d | 13 | > |
| 26aabc | 14 | <!-- find a nice way to utilise svg fill property without doing it inline --> |
| A | 15 | <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> |
| b4180d | 16 | </md-button> |
| a34f1d | 17 | </md-list-item> |
| fbee7b | 18 | </div> |
| a34f1d | 19 | </div> |
| D | 20 | </template> |
| 21 | <script> | |
| 8acdfc | 22 | import Vue from "vue"; |
| 1f415e | 23 | import { Checkbox, Radio } from "vue-checkbox-radio"; |
| A | 24 | Vue.component("checkbox", Checkbox); |
| 25 | Vue.component("radio", Radio); | |
| 8acdfc | 26 | |
| a34f1d | 27 | export default { |
| D | 28 | name: "TodoItem", |
| 29 | props: { | |
| 30 | // type any object ;) | |
| 31 | todoItem: {} | |
| 32 | }, | |
| acdeac | 33 | data() { |
| a34f1d | 34 | return { |
| 0f0a91 | 35 | // isActive: false, |
| A | 36 | // isImportant: false |
| acdeac | 37 | }; |
| a34f1d | 38 | }, |
| D | 39 | methods: { |
| ba91cd | 40 | markCompleted() { |
| D | 41 | this.$store.dispatch("markTodoCompleted", this.todoItem._id); |
| 9e628c | 42 | console.info("INFO - Mark todo as completed ", this.todoItem.completed); |
| b4180d | 43 | }, |
| A | 44 | markImportant() { |
| 9e628c | 45 | console.info("INFO - Mark todo as important ", this.todoItem.important); |
| 26aabc | 46 | // this.todoItem.important = !this.todoItem.important; |
| ba91cd | 47 | // TODO - FILL THIS OUT IN THE LAB EXERCISE |
| 26aabc | 48 | // this.todoItem.important = !this.todoItem.important; |
| a34f1d | 49 | } |
| D | 50 | } |
| 51 | }; | |
| 52 | </script> | |
| 53 | ||
| 54 | <!-- Add "scoped" attribute to limit CSS to this component only --> | |
| 55 | <style scoped lang="scss"> | |
| 56 | .md-list { | |
| acdeac | 57 | width: 320px; |
| A | 58 | max-width: 100%; |
| 59 | height: 400px; | |
| 60 | display: inline-block; | |
| 61 | overflow: auto; | |
| 62 | border: 1px solid rgba(#000, 0.12); | |
| 63 | vertical-align: top; | |
| 991fff | 64 | } |
| A | 65 | |
| 8acdfc | 66 | .md-list-item-text { |
| A | 67 | padding-left: 0.5em; |
| 68 | } | |
| 69 | ||
| a34f1d | 70 | .strike-through { |
| D | 71 | text-decoration: line-through; |
| b4180d | 72 | font-style: italic; |
| A | 73 | } |
| 74 | ||
| 75 | .red-flag { | |
| 76 | fill: #cc0000; | |
| a34f1d | 77 | } |
| D | 78 | </style> |
