| 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 | > |
| 56c750 | 7 | <checkbox v-model="todoItem.completed" class="checkbox-completed"/> |
| 78a403 | 8 | |
| D | 9 | <span class="md-list-item-text" :class="{'strike-through': todoItem.completed}">{{ todoItem.title }}</span> |
| 10 | </md-list-item> | |
| 11 | <!-- TODO - SVG for use in Lab3 --> | |
| 326ccf | 12 | <!-- <svg 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> --> |
| fbee7b | 13 | </div> |
| a34f1d | 14 | </div> |
| D | 15 | </template> |
| 16 | <script> | |
| 8acdfc | 17 | import Vue from "vue"; |
| 1f415e | 18 | import { Checkbox, Radio } from "vue-checkbox-radio"; |
| A | 19 | Vue.component("checkbox", Checkbox); |
| 20 | Vue.component("radio", Radio); | |
| 56c750 | 21 | let biscuits; |
| 8acdfc | 22 | |
| a34f1d | 23 | export default { |
| D | 24 | name: "TodoItem", |
| 25 | props: { | |
| 26 | // type any object ;) | |
| 27 | todoItem: {} | |
| 28 | }, | |
| 29 | methods: { | |
| ba91cd | 30 | markCompleted() { |
| d3c92c | 31 | this.$store.dispatch("updateTodo", { id: this.todoItem._id }); |
| 9e628c | 32 | console.info("INFO - Mark todo as completed ", this.todoItem.completed); |
| b4180d | 33 | }, |
| A | 34 | markImportant() { |
| ba91cd | 35 | // TODO - FILL THIS OUT IN THE LAB EXERCISE |
| a34f1d | 36 | } |
| D | 37 | } |
| 38 | }; | |
| 39 | </script> | |
| 40 | ||
| 41 | <!-- Add "scoped" attribute to limit CSS to this component only --> | |
| 42 | <style scoped lang="scss"> | |
| 637b4a | 43 | .md-list-item { |
| acdeac | 44 | width: 320px; |
| A | 45 | max-width: 100%; |
| 637b4a | 46 | height: 50px; |
| acdeac | 47 | display: inline-block; |
| A | 48 | overflow: auto; |
| 991fff | 49 | } |
| A | 50 | |
| 8acdfc | 51 | .md-list-item-text { |
| A | 52 | padding-left: 0.5em; |
| 637b4a | 53 | } |
| A | 54 | |
| 55 | .itemCardandFlag { | |
| 56 | display: inline-block; | |
| 8acdfc | 57 | } |
| A | 58 | |
| a34f1d | 59 | .strike-through { |
| D | 60 | text-decoration: line-through; |
| b4180d | 61 | font-style: italic; |
| A | 62 | } |
| 63 | ||
| 8a2c1e | 64 | .important-flag { |
| 637b4a | 65 | height: 50px; |
| A | 66 | margin: 0px; |
| 67 | } | |
| b4180d | 68 | .red-flag { |
| A | 69 | fill: #cc0000; |
| a34f1d | 70 | } |
| D | 71 | </style> |
