Adding CRUD

package.json

@@ -5,7 +5,8 @@
   "main": "index.js",
   "scripts": {
     "dev": "nodemon src/index.js",
-    "webpack": "webpack --mode development --watch"
+    "webpack": "webpack --mode development --watch",
+    "build": "webpack --mode production"
   },
   "keywords": [],
   "author": "Palmidia Garay",
@@ -27,4 +28,4 @@
     "webpack": "^4.10.0",
     "webpack-cli": "^3.1.2"
   }
-}
+}

src/app/components/App.vue

@@ -9,15 +9,14 @@
 
     <div class="container-fluid mt-4">
       <div class="row">
-        <div class="col-md-5">
+        <div class="col-md-3">
           <div class="card">
             <div class="card-body">
               <form @submit.prevent="addTask">
                 <div class="form-group">
                   <input
                     type="text"
-                    name=""
-                    id=""
+                    v-model="task.title"
                     placeholder="Insert a Task"
                     class="form-control"
                   >
@@ -26,34 +25,132 @@
                   <textarea
                     class="form-control"
                     placeholder="Insert Description"
+                    v-model="task.description"
                     cols="30"
                     rows="10"
                   ></textarea>
                 </div>
-                <button class="btn btn-primary btn-block">Agregar</button>
+                <template v-if="editing === false">
+                  <button class="btn btn-primary btn-block">ADD</button>
+                </template>
+                <template v-else>
+                  <button class="btn btn-primary btn-block">Update</button>
+                </template>
               </form>
             </div>
           </div>
         </div>
+        <div class="col-md-9">
+          <table class="table table-bordered">
+            <thead>
+              <tr>
+                <th>Task</th>
+                <th>Description</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="task in tasks"
+                :key="task.id"
+              >
+                <td>{{task.title}}</td>
+                <td>{{task.description}}</td>
+                <button
+                  @click.prevent="deleteTask(task._id)"
+                  class="btn btn-danger"
+                >Delete</button>
+                <button
+                  @click.prevent="updateTask(task._id)"
+                  class="btn btn-secondary"
+                >Edit</button>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 
 <script>
+class Task {
+  constructor(title, description) {
+    this.title = title;
+    this.description = description;
+  }
+}
+
 export default {
   data() {
     return {
-      task: {
-        title: "",
-        description: ""
-      }
+      task: new Task(),
+      tasks: [],
+      editing: false,
+      taskToEdit: ""
     };
   },
+  created() {
+    this.getTasks();
+  },
   methods: {
+    getTasks() {
+      fetch("/api/tasks")
+        .then(res => res.json())
+        .then(data => {
+          this.tasks = data;
+        });
+    },
     addTask() {
-      console.log(this.task);
+      if (this.editing === false) {
+        fetch("/api/tasks", {
+          method: "POST",
+          body: JSON.stringify(this.task),
+          headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json"
+          }
+        })
+          .then(res => res.json())
+          .then(data => this.getTasks());
+      } else {
+        fetch("/api/tasks/" + this.taskToEdit, {
+          method: "PUT",
+          body: JSON.stringify(this.task),
+          headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json"
+          }
+        })
+          .then(res => res.json())
+          .then(data => {
+            this.getTasks();
+            this.editing = false;
+          });
+      }
+      this.task = new Task();
+    },
+    deleteTask(ID) {
+      fetch("/api/tasks/" + ID, {
+        method: "DELETE",
+        headers: {
+          Accept: "application/json",
+          "Content-Type": "application/json"
+        }
+      })
+        .then(res => res.json())
+        .then(data => {
+          this.getTasks();
+        });
+    },
+    updateTask(ID) {
+      fetch("/api/tasks/" + ID)
+        .then(res => res.json())
+        .then(data => {
+          this.editing = true;
+          this.taskToEdit = data._id;
+          this.task = new Task(data.title, data.description);
+        });
     }
   }
 };

src/index.js

@@ -4,10 +4,10 @@ const mongoose = require('mongoose');
 
 const app = express();
 mongoose.connect('mongodb://localhost/mevn-database', {
-        useNewUrlParser: true
-    })
-    .then(db => console.log('DB is connected'))
-    .catch(err => console.log(err));
+    useNewUrlParser: true
+  })
+  .then(db => console.log('DB is connected'))
+  .catch(err => console.log(err));
 
 // Settings
 app.set('port', process.env.PORT || 3000);
@@ -19,13 +19,13 @@ app.use(express.json());
 
 
 // Routes
-app.use('/tasks', require('./routes/tasks'))
+app.use('/api/tasks', require('./routes/tasks'))
 
 
 // Static Files
 app.use(express.static(__dirname + '/public'));
 
 // Server Listening
 app.listen(app.get('port'), () => {
-    console.log('Server listening on port', app.get('port'));
+  console.log('Server listening on port', app.get('port'));
 })