├── .gitattributes
├── public
    ├── favicon.ico
    └── index.html
├── screenshots
    ├── ss1.png
    └── ss2.png
├── src
    ├── assets
    │   └── logo.png
    ├── router
    │   └── index.js
    ├── App.vue
    ├── main.js
    └── components
    │   └── Home.vue
├── babel.config.js
├── .gitignore
├── fakeRestApi
    └── db.json
├── server.js
├── README.md
├── LICENSE
└── package.json


/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gazi-dis/vue3-todo-withapi/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/screenshots/ss1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gazi-dis/vue3-todo-withapi/HEAD/screenshots/ss1.png


--------------------------------------------------------------------------------
/screenshots/ss2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gazi-dis/vue3-todo-withapi/HEAD/screenshots/ss2.png


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gazi-dis/vue3-todo-withapi/HEAD/src/assets/logo.png


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


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


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory } from "vue-router";
 2 | import Home from "@/components/Home.vue";
 3 | 
 4 | const routerHistory = createWebHistory();
 5 | const router = createRouter({
 6 |   history: routerHistory,
 7 |   routes: [
 8 |     {
 9 |       path: "/",
10 |       name: "Home",
11 |       component: Home,
12 |     },
13 |   ],
14 | });
15 | export default router;


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <router-view />
 3 | </template>
 4 | 
 5 | <script>
 6 | 
 7 | export default {
 8 |   name: 'App',
 9 |   components: {
10 |     
11 |   }
12 | }
13 | </script>
14 | 
15 | <style>
16 | #app {
17 |   font-family: Avenir, Helvetica, Arial, sans-serif;
18 |   -webkit-font-smoothing: antialiased;
19 |   -moz-osx-font-smoothing: grayscale;
20 |   color: #2c3e50;
21 |   margin-top: 60px;
22 | }
23 | </style>
24 | 


--------------------------------------------------------------------------------
/fakeRestApi/db.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "todos": [
 3 |     {
 4 |       "todo": "watching movie",
 5 |       "done": false,
 6 |       "id": 1
 7 |     },
 8 |     {
 9 |       "todo": "clean the house",
10 |       "done": true,
11 |       "id": 2
12 |     },
13 |     {
14 |       "todo": "ironing the clothes",
15 |       "done": false,
16 |       "id": 3
17 |     },
18 |     {
19 |       "todo": "throwing away the trash",
20 |       "done": true,
21 |       "id": 4
22 |     }
23 |   ]
24 | }


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
 1 | const express = require('express')
 2 | const serveStatic = require('serve-static')
 3 | const path = require('path')
 4 | 
 5 | const app = express()
 6 | 
 7 | //here we are configuring dist to serve app files
 8 | app.use('/', serveStatic(path.join(__dirname, '/dist')))
 9 | 
10 | // this * route is to serve project on different page routes except root `/`
11 | app.get(/.*/, function (req, res) {
12 | 	res.sendFile(path.join(__dirname, '/dist/index.html'))
13 | })
14 | 
15 | const port = process.env.PORT || 8080
16 | app.listen(port)
17 | console.log(`app is listening on port: ${port}`)


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import App from './App.vue'
 3 | import VueRouter from './router';
 4 | import axios from "axios";
 5 | import "bootstrap/dist/css/bootstrap.min.css"
 6 | import "bootstrap"
 7 | import Notifications from '@kyvg/vue3-notification'
 8 | 
 9 | const axiosInstance = axios.create({
10 |     baseURL: "http://localhost:3000"
11 | });
12 | 
13 | const app =  createApp(App);
14 | app.config.globalProperties.$axios = axiosInstance;
15 | app.config.globalProperties.mode = 'production';
16 | app.use(VueRouter);
17 | app.use(Notifications);
18 | 
19 | app.mount('#app');
20 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 |  ## Description
 2 |  VUE 3 ToDo App With Rest API
 3 |  ## Screenshot
 4 |  ![alt text](https://raw.githubusercontent.com/gazi-dis/vue3-todo-withapi/master/screenshots/ss1.png)
 5 |  ## Installation Prerequisites
 6 |  ### Fake REST API - JSON SERVER
 7 |  #### Json Server Installation
 8 |  ```sh
 9 | npm install -g json-server
10 | ```
11 |  #### Serve REST Service
12 |  ```sh
13 | cd fakeRestApi
14 | json-server --watch db.json
15 | ```
16 | #### API Test
17 | ![alt text](https://raw.githubusercontent.com/gazi-dis/vue3-todo-withapi/master/screenshots/ss2.png)
18 | 
19 | ## Project Installation
20 | ```sh
21 | npm install
22 | npm run serve
23 | ```
24 | ### For production environments...
25 | 
26 | ```sh
27 | npm install --production
28 | NODE_ENV=production node app
29 | ```
30 | 
31 | Verify the deployment by navigating to your server address in your preferred browser.
32 | 
33 | ```sh
34 | localhost:8080
35 | ```
36 | 
37 | ## License
38 | 
39 | MIT
40 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Abdurrahman Gazi DİŞ
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "todo-app",
 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 |     "fakeRest":"cd fakeRestApi && npm install -g json-server && json-server --watch db.json",
10 |     "start": "node server.js"
11 |   },
12 |   "dependencies": {
13 |     "@kyvg/vue3-notification": "^2.3.4",
14 |     "@popperjs/core": "^2.11.0",
15 |     "axios": "^0.24.0",
16 |     "bootstrap": "^5.1.3",
17 |     "core-js": "^3.6.5",
18 |     "express": "^4.17.2",
19 |     "serve-static": "^1.14.2",
20 |     "vue": "^3.0.0",
21 |     "vue-notification": "^1.3.20",
22 |     "vue-router": "^4.0.12"
23 |   },
24 |   "devDependencies": {
25 |     "@vue/cli-plugin-babel": "~4.5.0",
26 |     "@vue/cli-plugin-eslint": "~4.5.0",
27 |     "@vue/cli-service": "~4.5.0",
28 |     "@vue/compiler-sfc": "^3.0.0",
29 |     "babel-eslint": "^10.1.0",
30 |     "eslint": "^6.7.2",
31 |     "eslint-plugin-vue": "^7.0.0"
32 |   },
33 |   "eslintConfig": {
34 |     "root": true,
35 |     "env": {
36 |       "node": true
37 |     },
38 |     "extends": [
39 |       "plugin:vue/vue3-essential",
40 |       "eslint:recommended"
41 |     ],
42 |     "parserOptions": {
43 |       "parser": "babel-eslint"
44 |     },
45 |     "rules": {}
46 |   },
47 |   "browserslist": [
48 |     "> 1%",
49 |     "last 2 versions",
50 |     "not dead"
51 |   ]
52 | }
53 | 


--------------------------------------------------------------------------------
/src/components/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <notifications
  3 |         class="mt-3 ms-3"
  4 |         :duration="2000"
  5 |         :width="250"
  6 |         animation-name="v-fade-left"
  7 |         position="top left"
  8 |     />
  9 |     <div class="container my-5">
 10 |         <h2 class="text-center">VUE 3 ToDo App With Rest Api</h2>
 11 |         <div class="row d-flex justify-content-center">
 12 |             <div class="col-xs-12 col-lg-6 my-3">
 13 |                 <div class="form-group mb-3">
 14 |                     <label for="todo" class="form-label">Add ToDo</label>
 15 |                     <div class="row">
 16 |                         <div class="col-10">
 17 |                             <input
 18 |                                 v-model="todo"
 19 |                                 type="text"
 20 |                                 class="form-control"
 21 |                                 name="todo"
 22 |                                 id="todo"
 23 |                                 placeholder="Enter New Todo"
 24 |                                 v-bind:class="{ 'is-invalid': input_errors.length > 0, 'is-valid': input_errors.length == 0 && todo != '' }"
 25 |                             />
 26 |                             <div class="invalid-feedback">
 27 |                                 <span :key="key" v-for="(error,key) in input_errors">{{ error }}</span>
 28 |                             </div>
 29 |                         </div>
 30 |                         <div class="col-2 d-grid gap-2">
 31 |                             <button class="btn btn-primary btn-s float-end" @click="save">Add</button>
 32 |                         </div>
 33 |                     </div>
 34 |                 </div>
 35 |                 <div class="form-group"></div>
 36 |             </div>
 37 |         </div>
 38 |         <div class="row d-flex justify-content-center mt-3" v-if="ToDos.length">
 39 |             <div class="col-md-6">
 40 |                 <h5 class="mb-3">ToDo List</h5>
 41 |                 <div style="list-style-type: none;">
 42 |                     <li
 43 |                         v-for="(todo,index) in ToDos"
 44 |                         v-bind:key="index"
 45 |                         class="row"
 46 |                         style="
 47 |                         display: flex;
 48 |                         justify-content: space-between;
 49 |                         align-items: center;
 50 |                         padding: 10px 24px;
 51 |                         border-radius: 6px;
 52 |                         margin-bottom: 12px;
 53 |                         border: 2px solid hsla(0, 0%, 0%, 0.35);
 54 |                     "
 55 |                     >
 56 |                         <div class="col-8">
 57 |                             <span
 58 |                                 v-bind:style="todo.done ? 'text-decoration:line-through;' : ''"
 59 |                             >{{ todo.todo }}</span>
 60 |                         </div>
 61 |                         <div class="col-2 d-flex justify-content-center">
 62 |                             <span
 63 |                                 class="form-check form-switch"
 64 |                                 @click="done_todo(todo)"
 65 |                                 style="margin-left:20px;"
 66 |                             >
 67 |                                 <input
 68 |                                     class="form-check-input"
 69 |                                     type="checkbox"
 70 |                                     role="switch"
 71 |                                     id="flexSwitchCheckDefault"
 72 |                                     data-onstyle="#1f2023"
 73 |                                     :checked="todo.done"
 74 |                                 />
 75 |                             </span>
 76 |                         </div>
 77 |                         <div class="col-2 d-flex justify-content-center">
 78 |                             <button class="btn btn-danger btn-sm" @click="delete_todo(todo.id)">Delete</button>
 79 |                         </div>
 80 |                     </li>
 81 |                 </div>
 82 |             </div>
 83 |         </div>
 84 |     </div>
 85 | </template>
 86 | 
 87 | <script>
 88 | export default {
 89 |     data() {
 90 |         return {
 91 |             todo: "",
 92 |             ToDos: [],
 93 |             errors: [],
 94 |             newTodo: {
 95 |                 todo: "",
 96 |                 done: false
 97 |             },
 98 |             responseData: null,
 99 |             input_errors: []
100 |         };
101 |     },
102 |     mounted() {
103 |         this.getTodos();
104 |     },
105 |     methods: {
106 |         async getTodos() {
107 |             try {
108 |                 const response = await this.$axios.get("/todos");
109 |                 this.ToDos = response.data;
110 |             } catch (error) {
111 |                 this.errors.push(error);
112 |             }
113 |         },
114 |         async save() {
115 |             if (this.input_errors.length > 0 || this.todo == '') {
116 |                 if (this.todo == '' && this.input_errors.length == 0)
117 |                     this.input_errors.push('ToDo field cannot be left blank')
118 |                 this.input_errors.forEach((value) => {
119 |                     this.$notify(value);
120 |                 });
121 |             } else {
122 |                 try {
123 |                     this.newTodo.todo = this.todo;
124 |                     const response = await this.$axios.post("/todos", this.newTodo);
125 |                     this.responseData = response.data;
126 |                 } catch (error) {
127 |                     this.errors.push(error);
128 |                 }
129 |                 this.getTodos();
130 |                 this.$notify("Added Succesfully");
131 |                 this.todo = "";
132 |             }
133 |         },
134 |         async delete_todo(index) {
135 |             try {
136 |                 const response = await this.$axios.delete("/todos/" + index);
137 |                 this.responseData = response.data;
138 |             } catch (error) {
139 |                 this.errors.push(error);
140 |             }
141 |             this.getTodos();
142 |             this.$notify("Deleted Succesfully");
143 |         },
144 |         async done_todo(todo) {
145 |             try {
146 |                 const response = await this.$axios.put("/todos/" + todo.id, { "todo": todo.todo, "done": !todo.done });
147 |                 this.responseData = response.data;
148 |             } catch (error) {
149 |                 this.errors.push(error);
150 |             }
151 |             this.getTodos();
152 |             this.$notify("Updated Succesfully");
153 |         },
154 |     },
155 |     watch: {
156 |         todo(val) {
157 |             this.input_errors = [];
158 |             if (val == '') {
159 |                 this.input_errors.push('ToDo field cannot be left blank')
160 |                 return;
161 |             }
162 |             if (val.length < 3 || val.length > 40) {
163 |                 this.input_errors.push('ToDo field be Minimum 6, Maximum 25 characters')
164 |                 return;
165 |             }
166 |         }
167 |     }
168 | };
169 | </script>


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