/
TodoList.vue
93 lines (88 loc) · 2.88 KB
/
TodoList.vue
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<style>
.overdue{
background-color: coral;
}
</style>
<template>
<div class="row">
<div class="col s8 offset-s2">
<table>
<thead>
<tr>
<th>Boby</th>
<td>Due Date</td>
<td>Done</td>
<td>Syncronizing</td>
</tr>
</thead>
<tbody>
<tr v-for="t in todos" :class="{overdue: t.isOverdue}">
<td>
{{t.body}}
</td>
<td>{{t.dueDate}}</td>
<td>
<span v-if="t.done">done</span>
<a v-else class="btn brown" @click="makeDone(t.id)"><i class="material-icons">done</i></a>
</td>
<td>
<div class="preloader-wrapper small active" v-if="t.isSynchronizing">
<div class="spinner-layer spinner-brown-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
<div v-if="t.isSynchronizeNeeded">
<a class="btn brown" @click="reSync(t.id)"><i class="material-icons">replay</i></a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
import {
TodoQuery,
MakeTodoDoneCommand,
ResynchronizeTodoCommand,
TodoRepositoryChanged
} from '../../../target/scala-2.12/scalajstodo-fastopt'
export default {
beforeCreate(){
this.todoQuery= new TodoQuery;
},
created(){
this.subscription = TodoRepositoryChanged.subscribe(() => {
this.todos = this.todoQuery.all();
console.log(this.todos);
});
},
beforeDestroy(){
this.subscription.unsubscribe();
},
methods:{
makeDone(id){
const command = new MakeTodoDoneCommand();
command.execute(id);
},
reSync(id){
const command = new ResynchronizeTodoCommand();
command.execute(id);
}
},
data(){
return {
todos: this.todoQuery.all()
};
}
}
</script>