1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
| <template>
| <div>
| <md-card>
|
| <md-card-header class="remove-padding">
| <Header/>
| </md-card-header>
|
| <md-card-content>
| <NewTodo placeholderMsg="Add a new todos here"/>
| <ListOfTodos todos="this.todos"/>
| <XofYItems/>
| </md-card-content>
|
| <div class="image-footer">
| <img class="image-footer-logo" src="@/assets/oil-protobadge.png" alt="Open Innovation Labs logo" />
| </div>
|
| </md-card>
| </div>
| </template>
|
| <script>
| // @ is an alias to /src
| import Header from "@/components/Header.vue";
| import NewTodo from "@/components/NewTodo.vue";
| import ListOfTodos from "@/components/ListOfTodos.vue";
| import XofYItems from "@/components/XofYItems.vue";
| import { mapMutations } from 'vuex'
|
| export default {
| name: "Todo",
| components: {
| Header,
| ListOfTodos,
| NewTodo,
| XofYItems
| },
| methods: {
| ...mapMutations([
| 'editTodo',
| 'toggleTodo',
| 'deleteTodo'
| ]),
| },
| };
| </script>
|
| <style lang="scss" scoped>
| .remove-padding {
| padding: 0px;
| }
| .md-card {
| width: 480px;
| margin: 4px;
| display: inline-block;
| vertical-align: top;
| }
| .image-footer {
| border-top: solid;
| margin-top: 1px;
| }
| .image-footer-logo {
| padding: 5px 0px 5px 0px;
| height: 55px;
| }
| </style>
|
|
