| commit | author | age | ||
| a34f1d | 1 | <template> |
| D | 2 | <div> |
| fbee7b | 3 | <div class="itemCardAndFlag"> |
| A | 4 | |
| 3f23cc | 5 | <md-list-item |
| A | 6 | @click="markDone" |
| 7 | > | |
| 8 | <!-- TODO find a nice way of not calling markdone when clicking flag on card rather than calling "markDone" twice --> | |
| 9 | ||
| 10 | <!-- Material design checkbox not displaying, EDIT: Still can't figure out why it's not displaying --> | |
| 11 | <!-- <md-checkbox :v-model="isActive">x</md-checkbox> --> | |
| 8acdfc | 12 | <!-- <input type="checkbox" v-model="todoItem.complete"/> --> |
| A | 13 | <checkbox v-model="todoItem.complete"/> |
| b4180d | 14 | |
| 3f23cc | 15 | <span class="md-list-item-text" :class="{'strike-through': todoItem.complete}">{{ todoItem.title }}</span> |
| b4180d | 16 | <!-- find a nice way to utilise svg fill property without doing it inline --> |
| A | 17 | <md-button |
| 18 | @click="markImportant" | |
| 19 | > | |
| 0f0a91 | 20 | <svg :class="{'red-flag': todoItem.important}" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" @click="markDone"> |
| b4180d | 21 | <path d="M0 0h24v24H0z" fill="none"/> |
| A | 22 | <path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z"/> |
| 23 | </svg> | |
| 24 | </md-button> | |
| a34f1d | 25 | </md-list-item> |
| fbee7b | 26 | </div> |
| a34f1d | 27 | </div> |
| D | 28 | </template> |
| 29 | <script> | |
| 8acdfc | 30 | |
| A | 31 | import Vue from "vue"; |
| 32 | import {Checkbox, Radio} from 'vue-checkbox-radio'; | |
| 33 | Vue.component('checkbox', Checkbox); | |
| 34 | Vue.component('radio', Radio); | |
| 35 | ||
| a34f1d | 36 | export default { |
| D | 37 | name: "TodoItem", |
| 38 | props: { | |
| 39 | // type any object ;) | |
| 40 | todoItem: {} | |
| 41 | }, | |
| acdeac | 42 | data() { |
| a34f1d | 43 | return { |
| 0f0a91 | 44 | // isActive: false, |
| A | 45 | // isImportant: false |
| acdeac | 46 | }; |
| a34f1d | 47 | }, |
| D | 48 | methods: { |
| acdeac | 49 | markDone() { |
| fbee7b | 50 | // Delete me below even if it works DEMO PURPOSE ONLY |
| 0f0a91 | 51 | this.todoItem.complete = !this.todoItem.complete; |
| 08cb74 | 52 | this.$store.dispatch("updateTodo", this.todoItem); |
| fbee7b | 53 | // Do we need to add a new action/mutation to change todo.x? |
| A | 54 | // this.$store.dispatch("setNewTodo", this.newTodo) |
| 55 | ||
| 56 | ||
| 0f0a91 | 57 | console.info("INFO - ", this.todoItem, this.todoItem.complete); |
| b4180d | 58 | }, |
| A | 59 | markImportant() { |
| 60 | // set to greyed out / true false | |
| 0f0a91 | 61 | this.todoItem.important = !this.todoItem.important; |
| 08cb74 | 62 | this.$store.dispatch("updateTodo", this.todoItem); |
| 0f0a91 | 63 | console.info("INFO - ", this.todoItem, this.todoItem.important); |
| a34f1d | 64 | } |
| D | 65 | } |
| 66 | }; | |
| 67 | </script> | |
| 68 | ||
| 69 | <!-- Add "scoped" attribute to limit CSS to this component only --> | |
| 70 | <style scoped lang="scss"> | |
| 71 | .md-list { | |
| acdeac | 72 | width: 320px; |
| A | 73 | max-width: 100%; |
| 74 | height: 400px; | |
| 75 | display: inline-block; | |
| 76 | overflow: auto; | |
| 77 | border: 1px solid rgba(#000, 0.12); | |
| 78 | vertical-align: top; | |
| 991fff | 79 | } |
| A | 80 | |
| 8acdfc | 81 | .md-list-item-text { |
| A | 82 | padding-left: 0.5em; |
| 83 | } | |
| 84 | ||
| a34f1d | 85 | .strike-through { |
| D | 86 | text-decoration: line-through; |
| b4180d | 87 | font-style: italic; |
| A | 88 | } |
| 89 | ||
| 90 | .red-flag { | |
| 91 | fill: #cc0000; | |
| a34f1d | 92 | } |
| D | 93 | </style> |
