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
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 17839 additions and 17556 deletions
package-lock.json
View file @ ca002138
This diff is collapsed.
package.json
View file @ ca002138
{ {
"name": "todolist", "name": "todolist",
"description": "A Vue.js project", "description": "A Vue.js project",
"version": "1.0.0", "version": "1.0.0",
"author": "Bui Duc Tuan <kiaisoft.tuan.bui@gmail.com>", "author": "Bui Duc Tuan <kiaisoft.tuan.bui@gmail.com>",
"license": "MIT", "license": "MIT",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules" "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
}, },
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.3.0", "@fortawesome/fontawesome-svg-core": "^1.3.0",
"@fortawesome/free-solid-svg-icons": "^6.0.0", "@fortawesome/free-solid-svg-icons": "^6.0.0",
"bootstrap": "^5.1.3", "bootstrap": "^5.1.3",
"vue": "^2.5.11" "vue": "^2.5.11",
}, "vue-router": "^3.0.1"
"browserslist": [ },
"> 1%", "browserslist": [
"last 2 versions", "> 1%",
"not ie <= 8" "last 2 versions",
], "not ie <= 8"
"devDependencies": { ],
"@fortawesome/fontawesome-free": "^6.0.0", "devDependencies": {
"babel-core": "^6.26.0", "@fortawesome/fontawesome-free": "^6.0.0",
"babel-loader": "^7.1.2", "babel-core": "^6.26.0",
"babel-preset-env": "^1.6.0", "babel-loader": "^7.1.2",
"babel-preset-stage-3": "^6.24.1", "babel-preset-env": "^1.6.0",
"cross-env": "^5.0.5", "babel-preset-stage-3": "^6.24.1",
"css-loader": "^0.28.7", "cross-env": "^5.0.5",
"file-loader": "^1.1.4", "css-loader": "^0.28.7",
"vue-loader": "^13.0.5", "file-loader": "^1.1.4",
"vue-template-compiler": "^2.4.4", "vue-loader": "^13.0.5",
"webpack": "^3.6.0", "vue-template-compiler": "^2.4.4",
"webpack-dev-server": "^2.9.1" "webpack": "^3.6.0",
} "webpack-dev-server": "^2.9.1"
} }
}
\ No newline at end of file
src/App.vue
View file @ ca002138
<template> <template>
<div id="app"> <div id="app">
<todo-list></todo-list> <router-view></router-view>
</div> </div>
</template> </template>
<script> <script>
import todoList from './components/todoList.vue';
export default { export default {
components : {
'todo-list' : todoList,
}
} }
</script> </script>
......
src/components/todoList.vue → src/components/Task.vue
View file @ ca002138
<template> <template>
<div class="container text-center mt-5"> <div class="container mt-5">
<div class="row tex-center"> <div class="row">
<h3 class="mb-5">Todo app using Vue</h3> <h3 class="mb-5 text-center">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> </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"> <div class="row">
<table class="table table-bordered"> <table class="table table-bordered">
<thead> <thead>
...@@ -39,15 +19,19 @@ ...@@ -39,15 +19,19 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="(item, index) in tasks"> <tr v-for="(item, index) in tasks" :key="index">
<th>{{ index + 1 }}</th> <th>{{ index + 1 }}</th>
<td>{{ item.name }}</td> <td>{{ item.name }}</td>
<td>{{ item.status }}</td> <td>{{ item.status }}</td>
<td> <td>
<span class="icon_action icon_edit" @click="editTask(index)" <router-link
><ion-icon name="create-outline"></ion-icon tag="span"
></span> class="icon_action icon_edit"
<span class="icon_action icon_del" @click="delTask(index)" :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 ><ion-icon name="trash-outline"></ion-icon
></span> ></span>
</td> </td>
...@@ -62,56 +46,22 @@ ...@@ -62,56 +46,22 @@
export default { export default {
data: function () { data: function () {
return { return {
task: null, tasks: [],
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",
},
],
}; };
}, },
methods: {
submit() {
if (this.task.length === 0) {
return;
}
if (this.editStatus === null) { created: function () {
this.tasks.push({ if (localStorage.getItem("tasks")) {
name: this.task, this.tasks = JSON.parse(localStorage.getItem("tasks"));
status: "to-do", }
}); },
} else {
this.tasks[this.editStatus].name = this.task;
this.tasks[this.editStatus].status = this.selected;
}
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: {
this.tasks.splice(index, 1); 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 Vue from 'vue'
import App from './App.vue' import App from './App.vue'
import VueRouter from 'vue-router'
import { routes } from './routes'
import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/css/bootstrap.min.css'
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes
});
new Vue({ new Vue({
el: '#app', el: '#app',
router,
render: h => h(App) 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