<template>
<div class="todo">
<Luisa
:design="figmaJSON"
v-model="viewModel
"/>
</div>
</template>
<script>
import TodoService from './ToDoService'
import app from './app.json'
export default {
name: 'ToDo',
data: function () {
return {
figmaJSON: app,
viewModel: {
searchFilter: '',
todos: [],
newTodo: {
name: "",
details: ""
},
selectedTodo: {
name: "",
details: ""
}
}
},
},
methods: {
onHomeLoad () {
this.viewModel.todos =
TodoService.findAll()
},
createNewTodo (e) {
TodoService.create(
e.viewModel.newTodo.name,
e.viewModel.newTodo.details
)
// reset values
e.viewModel.newTodo.name = ''
e.viewModel.newTodo.details = ''
// set next screen to show
return 'Home'
},
updateTodo (e) {
// pass viewModel to service
TodoService.update(
e.viewModel.selectedTodo.id,
e.viewModel.selectedTodo.name,
e.viewModel.selectedTodo.details
)
// set next screen to show
return 'Home'
},
deleteTodo (e) {
TodoService.delete(
e.viewModel.selectedTodo.id
)
return 'Home'
},
filterTodo (e) {
this.viewModel.todos = TodoService
.findByFilter(
e.viewModel.searchFilter
)
}
}
}
</script>