Skip to content

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

first commit

parents
Hide whitespace changes
Inline Side-by-side
Showing with 352 additions and 0 deletions
.babelrc 0 → 100644
View file @ 45ed03a2
{
"presets": [
["env", { "modules": false }],
"stage-3"
]
}
.editorconfig 0 → 100644
View file @ 45ed03a2
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
.gitignore 0 → 100644
View file @ 45ed03a2
.DS_Store
node_modules/
dist/
npm-debug.log
yarn-error.log
# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
README.md 0 → 100644
View file @ 45ed03a2
# todolist
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
index.html 0 → 100644
View file @ 45ed03a2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>todolist</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
\ No newline at end of file
package-lock.json 0 → 100644
View file @ 45ed03a2
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
View file @ 45ed03a2
{
"name": "todolist",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "Bui Duc Tuan <kiaisoft.tuan.bui@gmail.com>",
"license": "MIT",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.3.0",
"@fortawesome/free-solid-svg-icons": "^6.0.0",
"bootstrap": "^5.1.3",
"vue": "^2.5.11"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"@fortawesome/fontawesome-free": "^6.0.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}
src/App.vue 0 → 100644
View file @ 45ed03a2
<template>
<div id="app">
<todo-list></todo-list>
</div>
</template>
<script>
import todoList from './components/todoList.vue';
export default {
components : {
'todo-list' : todoList,
}
}
</script>
<style>
</style>
src/components/todoList.vue 0 → 100644
View file @ 45ed03a2
<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>
<h5 class="mt-5">list Task</h5>
<div class="row">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col" style="width: 100px">#</th>
<th scope="col">Name</th>
<th scope="col" style="width: 300px">Status</th>
<th scope="col" style="width: 200px">Action</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in tasks">
<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)"
><ion-icon name="trash-outline"></ion-icon
></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
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",
},
],
};
},
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;
}
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) {
this.tasks.splice(index, 1);
},
},
};
</script>
<style scoped>
.input_task {
width: 250px;
padding: 4px 8px;
margin-right: 12px;
}
.select_task {
width: 100px;
display: none;
height: 100%;
}
.btn_submit {
margin-left: 12px;
}
.icon_action {
margin-right: 12px;
font-size: 16px;
cursor: pointer;
}
.icon_edit:hover {
color: rgb(255, 123, 0);
}
.icon_del:hover {
color: red;
}
.active {
display: inline-block;
}
</style>
\ No newline at end of file
src/main.js 0 → 100644
View file @ 45ed03a2
import Vue from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.min.css'
new Vue({
el: '#app',
render: h => h(App)
})
\ No newline at end of file
webpack.config.js 0 → 100644
View file @ 45ed03a2
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
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