You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
126 lines
4.3 KiB
126 lines
4.3 KiB
<template>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-8 col-md-offset-2">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">My Tasks</div>
|
|
<div class="panel-body">
|
|
<div class="input-group">
|
|
<input type="text" class="form-control"
|
|
v-model="task.name"
|
|
@keydown.enter="create">
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-success" @click="create">Add</button>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="tasks-list">
|
|
<div v-cloak class="alert alert-danger" v-if="!tasks.length" >
|
|
You have no tasks!
|
|
</div>
|
|
<ul class="list-unstyled">
|
|
<li v-for="task in tasks" :key="task.id" :class="{done: task.completed}">
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" v-model="task.completed"
|
|
@click="done(task)"> {{ task.name }}
|
|
</label>
|
|
<div class="pull-right">
|
|
<a href="#" @click.prevent="remove(task)">x</a>
|
|
</div>
|
|
</div>
|
|
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="panel-footer">
|
|
<span class="label label-default">You have {{ tasks.length }} tasks</span>
|
|
<span class="label label-warning">{{ remainingTasks() }} tasks left</span>
|
|
<span class="label label-success">{{ completedTasks() }} tasks completed</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from 'axios';
|
|
|
|
export default {
|
|
mounted() {
|
|
this.fetchData();
|
|
},
|
|
data() {
|
|
return {
|
|
tasks: [],
|
|
task: {
|
|
name: ''
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
remainingTasks(){
|
|
return this.tasks.filter((task) => { return !task.completed }).length
|
|
},
|
|
completedTasks(){
|
|
return this.tasks.filter((task) => { return task.completed }).length
|
|
},
|
|
fetchData() {
|
|
axios.get('/api/k_tasks')
|
|
.then((res) => {
|
|
this.tasks = res.data
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
})
|
|
},
|
|
create() {
|
|
axios.post('/api/k_tasks', this.task)
|
|
.then((res) => {
|
|
this.tasks.unshift(res.data);
|
|
})
|
|
.catch((err) => {
|
|
console.log(err)
|
|
})
|
|
},
|
|
|
|
done(task) {
|
|
axios.put(`/api/k_tasks/${task.id}`, {
|
|
completed: !task.completed
|
|
})
|
|
.then((res) => {
|
|
console.log('task updated')
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
},
|
|
|
|
remove(task) {
|
|
axios.delete(`/api/k_tasks/${task.id}`, {
|
|
completed: !task.completed
|
|
})
|
|
.then((res) => {
|
|
const taskIndex = this.tasks.indexOf(task);
|
|
this.tasks.splice(taskIndex, 1)
|
|
})
|
|
.catch((err) => {
|
|
console.log(err)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
body, .tasks-list {
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.done label {
|
|
text-decoration: line-through;
|
|
}
|
|
</style> |