Skip to content

T
To do list
Commit ca002138 authored by Bui Duc Tuan's avatar Bui Duc Tuan
Browse files
Options

use vue-router in to do list

parent 45ed03a2
Show whitespace changes
Inline Side-by-side
Showing with 17839 additions and 17556 deletions
package-lock.json
View file @ ca002138
......@@ -12,7 +12,8 @@
"@fortawesome/fontawesome-svg-core": "^1.3.0",
"@fortawesome/free-solid-svg-icons": "^6.0.0",
"bootstrap": "^5.1.3",
"vue": "^2.5.11"
"vue": "^2.5.11",
"vue-router": "^3.0.1"
},
"devDependencies": {
"@fortawesome/fontawesome-free": "^6.0.0",
......@@ -8662,6 +8663,11 @@
"node": ">=4"
}
},
"node_modules/vue-router": {
"version": "3.5.3",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz",
"integrity": "sha512-FUlILrW3DGitS2h+Xaw8aRNvGTwtuaxrRkNSHWTizOfLUie7wuYwezeZ50iflRn8YPV5kxmU2LQuu3nM/b3Zsg=="
},
"node_modules/vue-style-loader": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-3.1.2.tgz",
......@@ -16812,6 +16818,11 @@
}
}
},
"vue-router": {
"version": "3.5.3",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz",
"integrity": "sha512-FUlILrW3DGitS2h+Xaw8aRNvGTwtuaxrRkNSHWTizOfLUie7wuYwezeZ50iflRn8YPV5kxmU2LQuu3nM/b3Zsg=="
},
"vue-style-loader": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-3.1.2.tgz",
......
src/App.vue
View file @ ca002138
<template>
<div id="app">
<todo-list></todo-list>
<router-view></router-view>
</div>
</template>
<script>
import todoList from './components/todoList.vue';
export default {
components : {
'todo-list' : todoList,
}
}
</script>
......
src/components/todoList.vue → src/components/Task.vue
View file @ ca002138
<template>
<div class="container text-center mt-5">
<div class="row tex-center">
<h3 class="mb-5">Todo app using Vue</h3>
<div class="d-flex align-items-center justify-content-center">
<input
type="text"
placeholder="Enter task"
class="input_task"
v-model="task"
/>
<select
v-model="selected"
class="select_task"
:class="{ active: isActive }"
>
<option v-for="selected in statusselectedTasks">
{{ selected }}
</option>
</select>
<button
type="submit"
class="btn btn-warning btn_submit"
@click="submit()"
>
Add Task
</button>
</div>
<div class="container mt-5">
<div class="row">
<h3 class="mb-5 text-center">Todo app using Vue</h3>
</div>
<h5 class="mt-5">list Task</h5>
<router-link
class="d-inline-block btn btn-primary mb-2"
:to="{ name: 'addTask' }"
>Add Task</router-link
>
<div class="row">
<table class="table table-bordered">
<thead>
......@@ -39,15 +19,19 @@
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in tasks">
<tr v-for="(item, index) in tasks" :key="index">
<th>{{ index + 1 }}</th>
<td>{{ item.name }}</td>
<td>{{ item.status }}</td>
<td>
<span class="icon_action icon_edit" @click="editTask(index)"
><ion-icon name="create-outline"></ion-icon
></span>
<span class="icon_action icon_del" @click="delTask(index)"
<router-link
tag="span"
class="icon_action icon_edit"
:to="{ name: 'editTask', params: { id: index } }"
>
<ion-icon name="create-outline"></ion-icon>
</router-link>
<span class="icon_action icon_del" @click="removeTask(index)"
><ion-icon name="trash-outline"></ion-icon
></span>
</td>
......@@ -62,56 +46,22 @@
export default {
data: function () {
return {
task: null,
selected: "",
editStatus: null,
isActive: false,
statusselectedTasks: ["to-do", "in-progress", "finished"],
tasks: [
{
name: "ABC",
status: "to-do",
},
{
name: "ABC",
status: "in-progress",
},
{
name: "ABC",
status: "finished",
},
],
tasks: [],
};
},
methods: {
submit() {
if (this.task.length === 0) {
return;
}
if (this.editStatus === null) {
this.tasks.push({
name: this.task,
status: "to-do",
});
} else {
this.tasks[this.editStatus].name = this.task;
this.tasks[this.editStatus].status = this.selected;
created: function () {
if (localStorage.getItem("tasks")) {
this.tasks = JSON.parse(localStorage.getItem("tasks"));
}
this.isActive = false;
this.selected = "";
this.task = null;
},
editTask(index) {
(this.task = this.tasks[index].name),
(this.editStatus = index),
(this.isActive = true),
(this.selected = this.tasks[index].status);
},
delTask(index) {
methods: {
removeTask(index) {
if (confirm("Are you sure you want to delete task?")) {
this.tasks.splice(index, 1);
localStorage.setItem("tasks", JSON.stringify(this.tasks));
}
},
},
};
......
src/components/addTask.vue 0 → 100644
View file @ ca002138
<template>
<div class="container">
<div class="row">
<h3 class="mb-5 text-center mt-3">Add task</h3>
</div>
<div class="d-flex align-items-center justify-content-center">
<input
type="text"
placeholder="Enter task"
class="input_task"
v-model="task"
/>
<button
type="submit"
class="btn btn-warning btn_submit"
@click="submit()"
>
Add Task
</button>
<router-link
class="d-inline-block btn btn-primary ml-1"
:to="{ name: 'Task' }"
>back</router-link>
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
task: null,
tasks: [],
};
},
created: function () {
if (localStorage.getItem("tasks")) {
this.tasks = JSON.parse(localStorage.getItem("tasks"));
}
},
methods: {
submit() {
if (this.task == null) {
alert("Please enter the task!!");
return;
}
this.tasks.unshift({
name: this.task,
status: "to-do",
});
localStorage.setItem("tasks", JSON.stringify(this.tasks));
this.task = null;
this.$router.push("/");
},
},
};
</script>
<style scoped>
.input_task {
width: 250px;
padding: 4px 8px;
margin-right: 12px;
}
.btn_submit {
margin: 0 12px;
}
</style>
\ No newline at end of file
src/components/editTask.vue 0 → 100644
View file @ ca002138
<template>
<div class="container">
<div class="row">
<h3 class="mb-5 text-center mt-3">Edit task</h3>
</div>
<div class="d-flex align-items-center justify-content-center">
<input
type="text"
placeholder="Enter task"
class="input_task"
v-model="task"
/>
<select v-model="selected" class="select_task">
<option v-for="(selected, index) in statusselectedTasks" :key="index">
{{ selected }}
</option>
</select>
<button
type="submit"
class="btn btn-warning btn_submit"
@click="submit()"
>
Edit Task
</button>
<router-link
class="d-inline-block btn btn-primary ml-1"
:to="{ name: 'Task' }"
>back</router-link
>
</div>
</div>
</template>
<script>
export default {
created: function () {
if (localStorage.getItem("tasks")) {
this.tasks = JSON.parse(localStorage.getItem("tasks"));
this.selected = this.tasks[this.id].status;
this.task = this.tasks[this.id].name;
}
},
data: function () {
return {
id: this.$route.params.id,
task: null,
selected: "",
statusselectedTasks: ["to-do", "in-progress", "finished"],
tasks: [],
};
},
methods: {
submit() {
if (this.task == null) {
alert("Please enter the task!!");
return;
}
this.tasks[this.id].name = this.task;
this.tasks[this.id].status = this.selected;
localStorage.setItem("tasks", JSON.stringify(this.tasks));
this.task = null;
this.$router.push("/");
},
},
};
</script>
<style scoped>
.input_task {
width: 250px;
padding: 4px 8px;
margin-right: 12px;
}
.select_task {
width: 118px;
height: 37px;
display: block;
}
.btn_submit {
margin: 0 12px;
}
</style>
\ No newline at end of file
src/main.js
View file @ ca002138
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import { routes } from './routes'
import 'bootstrap/dist/css/bootstrap.min.css'
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes
});
new Vue({
el: '#app',
router,
render: h => h(App)
})
\ No newline at end of file
src/routes.js 0 → 100644
View file @ ca002138
import Task from './components/Task.vue';
import addTask from './components/addTask.vue';
import editTask from './components/editTask.vue';
export const routes = [
{ path: '/', name: 'Task', component: Task },
{ path: '/task/add', name: 'addTask', component: addTask },
{ path: '/task/edit/:id', name: 'editTask', component: editTask }
];
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment