├── .github
    └── workflows
    │   └── azure-static-web-apps-happy-pond-0cae77510.yml
├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
└── src
    ├── App.vue
    ├── assets
        └── logo.png
    ├── components
        ├── HelloWorld.vue
        ├── Search.vue
        ├── TodoAdd.vue
        ├── TodoItem.vue
        └── Todos.vue
    └── main.js


/.github/workflows/azure-static-web-apps-happy-pond-0cae77510.yml:
--------------------------------------------------------------------------------
 1 | name: Azure Static Web Apps CI/CD
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |     - master
 7 |   pull_request:
 8 |     types: [opened, synchronize, reopened, closed]
 9 |     branches:
10 |     - master
11 | 
12 | jobs:
13 |   build_and_deploy_job:
14 |     if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
15 |     runs-on: ubuntu-latest
16 |     name: Build and Deploy Job
17 |     steps:
18 |     - uses: actions/checkout@v2
19 |     - name: Build And Deploy
20 |       id: builddeploy
21 |       uses: Azure/static-web-apps-deploy@v0.0.1-preview
22 |       with:
23 |         azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_HAPPY_POND_0CAE77510 }}
24 |         repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
25 |         action: 'upload'
26 |         ###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
27 |         # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig 
28 |         app_location: '/' # App source code path
29 |         api_location: 'api' # Api source code path - optional
30 |         app_artifact_location: '' # Built app content directory - optional
31 |         ###### End of Repository/Build Configurations ######
32 | 
33 |   close_pull_request_job:
34 |     if: github.event_name == 'pull_request' && github.event.action == 'closed'
35 |     runs-on: ubuntu-latest
36 |     name: Close Pull Request Job
37 |     steps:
38 |     - name: Close Pull Request
39 |       id: closepullrequest
40 |       uses: Azure/static-web-apps-deploy@v0.0.1-preview
41 |       with:
42 |         azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_HAPPY_POND_0CAE77510 }}
43 |         action: 'close'
44 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-todos
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-todos",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.4",
12 |     "vue": "^2.6.11",
13 |     "vue-uuid": "^1.1.1"
14 |   },
15 |   "devDependencies": {
16 |     "@vue/cli-plugin-babel": "~4.3.0",
17 |     "@vue/cli-plugin-eslint": "~4.3.0",
18 |     "@vue/cli-service": "~4.3.0",
19 |     "babel-eslint": "^10.1.0",
20 |     "eslint": "^6.7.2",
21 |     "eslint-plugin-vue": "^6.2.2",
22 |     "vue-template-compiler": "^2.6.11"
23 |   },
24 |   "eslintConfig": {
25 |     "root": true,
26 |     "env": {
27 |       "node": true
28 |     },
29 |     "extends": [
30 |       "plugin:vue/essential",
31 |       "eslint:recommended"
32 |     ],
33 |     "parserOptions": {
34 |       "parser": "babel-eslint"
35 |     },
36 |     "rules": {}
37 |   },
38 |   "browserslist": [
39 |     "> 1%",
40 |     "last 2 versions",
41 |     "not dead"
42 |   ]
43 | }
44 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/marcosrivasr/todo-app-vuejs/f9388db43723a5312e4be652f67b7a15773deaa0/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div id="header">
  4 |       <Search v-on:query-change="querySearch" />
  5 |     </div>
  6 | 
  7 |     <div id="main-container">
  8 |       <h2>Todos</h2>
  9 |       <TodoAdd v-on:add-todo="addTodo"/>
 10 |       <Todos v-bind:todoslist="copyTodos" v-on:delete-todo="deleteTodo" />
 11 |     </div>
 12 |   </div>
 13 | </template>
 14 | 
 15 | <script>
 16 | //import HelloWorld from './components/HelloWorld.vue'
 17 | import Search from './components/Search';
 18 | import Todos from './components/Todos';
 19 | import TodoAdd from './components/TodoAdd';
 20 | 
 21 | export default {
 22 |   name: 'App',
 23 |   components: {
 24 |     Todos, TodoAdd, Search
 25 |   },
 26 |   methods: {
 27 |     deleteTodo(id){
 28 |       this.todos = this.todos.filter(todo => todo.id != id);
 29 |       this.copyTodos = [...this.todos];
 30 |     },
 31 |     addTodo(todo){
 32 |       this.todos.push(todo);
 33 |       this.copyTodos = [...this.todos];
 34 |     },
 35 |     querySearch(query){
 36 |       if(query.trim() === ''){
 37 |         this.copyTodos = [...this.todos];
 38 |       }else{
 39 |         const temp = this.todos.filter(todo =>{
 40 |           return todo.title.includes(query)
 41 |         });
 42 | 
 43 |         this.copyTodos = [...temp];
 44 |       }
 45 |     }
 46 |   },
 47 |   data(){
 48 |     return {
 49 |       todos: [
 50 |         {
 51 |           id: 0,
 52 |           title:  'comprar la cena',
 53 |           completed: false
 54 |         },
 55 |         {
 56 |          id: 1,
 57 |          title: 'Sacar a pasear al perro',
 58 |          completed: true
 59 |        },
 60 |        {
 61 |          id: 2,
 62 |          title: 'jugar Xbox',
 63 |          completed: false
 64 |        },
 65 |        {
 66 |          id: 3,
 67 |          title: 'Terminar tutorial',
 68 |          completed: true
 69 |        }
 70 |       ],
 71 |       copyTodos: []
 72 |     }
 73 |   },
 74 |   created(){
 75 |     this.copyTodos = [...this.todos];
 76 |   }
 77 | }
 78 | </script>
 79 | 
 80 | <style>
 81 |   *{
 82 |     box-sizing: border-box;
 83 |   }
 84 | 
 85 |   body{
 86 |     font-family: Arial, Helvetica, sans-serif;
 87 |     font-size: 1.5em;
 88 |     padding: 0;
 89 |     margin: 0;
 90 |   }
 91 | 
 92 |   #main-container{
 93 |     border: solid 1px #ccc;
 94 |     width: 600px;
 95 |     margin: 100px auto;
 96 |   }
 97 | 
 98 |   #header{
 99 |     background: black;
100 |     padding: 10px;
101 |   }
102 | 
103 |   h2{
104 |     padding: 0 10px;
105 |   }
106 | </style>
107 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/marcosrivasr/todo-app-vuejs/f9388db43723a5312e4be652f67b7a15773deaa0/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <p>
 5 |       For a guide and recipes on how to configure / customize this project,<br>
 6 |       check out the
 7 |       <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
 8 |     </p>
 9 |     <h3>Installed CLI Plugins</h3>
10 |     <ul>
11 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
13 |     </ul>
14 |     <h3>Essential Links</h3>
15 |     <ul>
16 |       <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
17 |       <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
18 |       <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
19 |       <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
20 |       <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
21 |     </ul>
22 |     <h3>Ecosystem</h3>
23 |     <ul>
24 |       <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
25 |       <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
26 |       <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
27 |       <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
28 |       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
29 |     </ul>
30 |   </div>
31 | </template>
32 | 
33 | <script>
34 | export default {
35 |   name: 'HelloWorld',
36 |   props: {
37 |     msg: String
38 |   }
39 | }
40 | </script>
41 | 
42 | <!-- Add "scoped" attribute to limit CSS to this component only -->
43 | <style scoped>
44 | h3 {
45 |   margin: 40px 0 0;
46 | }
47 | ul {
48 |   list-style-type: none;
49 |   padding: 0;
50 | }
51 | li {
52 |   display: inline-block;
53 |   margin: 0 10px;
54 | }
55 | a {
56 |   color: #42b983;
57 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/src/components/Search.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div id="search-container">
 3 |         <input type="text" v-model="query" v-on:input="$emit('query-change', query)">
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |     name: 'Search',
10 |     data(){
11 |         return {
12 |             query: ''
13 |         }
14 |     }
15 | }
16 | </script>
17 | 
18 | <style scoped>
19 |     #search-container{
20 |         width: 600px;
21 |         margin: 0 auto;
22 |     }
23 | 
24 |     input{
25 |         padding: 10px;
26 |         width: 100%;
27 |         outline: none;
28 |     }
29 | </style>


--------------------------------------------------------------------------------
/src/components/TodoAdd.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div id="add-container">
 3 |         <form @submit="addTodo">
 4 |             <input type="text" v-model="title">
 5 |         </form>
 6 |     </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import { uuid } from 'vue-uuid';
11 | 
12 | export default {
13 |     name: 'TodoAdd',
14 |     data(){
15 |         return {
16 |             title: ''
17 |         }
18 |     },
19 |     methods:{
20 |         addTodo(e){
21 |             e.preventDefault();
22 | 
23 |             const newTodo = {
24 |                 id: uuid.v4(),
25 |                 title: this.title,
26 |                 completed: false
27 |             };
28 | 
29 |             this.title = '';
30 |             this.$emit('add-todo', newTodo);
31 |         }
32 |     }
33 | }
34 | </script>
35 | 
36 | <style scoped>
37 |     #add-container{
38 |         padding: 10px;
39 |     }
40 |     input{
41 |         padding: 10px;
42 |         outline: none;
43 |         border: solid 1px #ccc;
44 |         width: 100%;
45 |     }
46 | </style>


--------------------------------------------------------------------------------
/src/components/TodoItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="todo" v-bind:class="{completed: todo.completed}">
 3 |         <div class="todo-body" >
 4 |             <input type="checkbox" 
 5 |                 v-bind:checked="todo.completed ? 'checked': ''"
 6 |                 v-on:change="checkTodo">
 7 |             {{todo.title}}
 8 |         </div>
 9 | 
10 |         <div class="todo-actions">
11 |             <button @click="$emit('delete-todo', todo.id)">Eliminar</button>
12 |         </div>
13 |     </div>
14 | </template>
15 | 
16 | <script>
17 |     export default {
18 |         name: 'TodoItem',
19 |         props: ['todo'],
20 |         methods: {
21 |             checkTodo(){
22 |                 this.todo.completed = !this.todo.completed;
23 |             }
24 |         }
25 |     }
26 | </script>
27 | 
28 | <style scoped>
29 |     .todo{
30 |         border-bottom: solid 1px #ccc;
31 |         padding: 10px;
32 |     }
33 | 
34 |     .todo:not(.completed):hover{
35 |         background-color: #eee;
36 |     }
37 | 
38 |     .completed{
39 |         color: #ccc;
40 |         text-decoration: line-through;
41 |     }
42 |     .completed .todo-body{
43 |         text-decoration: line-through;
44 |     }
45 | 
46 |     .todo-body, .todo-actions{
47 |         display: inline-block;
48 |         vertical-align: top;
49 |     }
50 | 
51 |     .todo-body{
52 |         width: 85%;
53 |     }
54 |     .todo-actions{
55 |         padding: 0 10px;
56 |         width: 10%;
57 |     }
58 | 
59 |     button{
60 |         border: none;
61 |         border-radius: 3px;
62 |         padding: 10px;
63 |         background-color: #ccc;
64 |         color: black;
65 |     }
66 |     button:hover{
67 |         background-color: #da2020;
68 |         color: white;
69 |     }
70 | </style>


--------------------------------------------------------------------------------
/src/components/Todos.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <div v-bind:key="todo.id" v-for="todo in todoslist">
 4 |             <TodoItem v-bind:todo="todo" v-on:delete-todo="$emit('delete-todo', todo.id)" />
 5 |         </div>
 6 |     </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import TodoItem from './TodoItem';
11 | 
12 |     export default {
13 |         name: 'Todos',
14 |         props: ['todoslist'],
15 |         components:{TodoItem}
16 |     }
17 | </script>
18 | 
19 | <style></style>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App),
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------