Added functionality: todo list naming, create multiple lists, delete lists

.gitignore

@@ -1,2 +1,4 @@
 node_modules
-.vscode/*
+config
+.vscode/
+.env

controllers/todos.js

@@ -1,19 +1,30 @@
 const Todo = require('../models/Todo')
+const TodoList = require('../models/TodoList')
 
 module.exports = {
     getTodos: async (req,res)=>{
         console.log(req.user)
         try{
             const todoItems = await Todo.find({userId:req.user.id})
+            const todoLists = await TodoList.find({ownerId:req.user.id})
             const itemsLeft = await Todo.countDocuments({userId:req.user.id,completed: false})
-            res.render('todos.ejs', {todos: todoItems, left: itemsLeft, user: req.user})
+            res.render('todos.ejs', {todos: todoItems, left: itemsLeft, user: req.user, todoLists: todoLists})
+        }catch(err){
+            console.log(err)
+        }
+    },
+    createList: async (req, res)=>{
+        try{
+            await TodoList.create({name: req.body.todoList, ownerId: req.user.id})
+            console.log('Todo List has been created!')
+            res.redirect('/todos')
         }catch(err){
             console.log(err)
         }
     },
     createTodo: async (req, res)=>{
         try{
-            await Todo.create({todo: req.body.todoItem, completed: false, userId: req.user.id})
+            await Todo.create({todo: req.body.todoItem, completed: false, userId: req.user.id, todoListId: req.params.listId})
             console.log('Todo has been added!')
             res.redirect('/todos')
         }catch(err){
@@ -51,5 +62,22 @@ module.exports = {
         }catch(err){
             console.log(err)
         }
-    }
+    },
+    deleteList: async (req, res)=>{
+        try{
+            let list = await TodoList.findById({_id: req.params.id});
+            let todosInList = await Todo.countDocuments({todoListId: req.params.id})
+            if(todosInList > 0){
+                console.log("Can't delete List - Todos still in list")
+                res.redirect("/todos")
+            }else{
+                await TodoList.remove({_id: req.params.id});
+                console.log("List Deleted");
+                res.redirect("/todos");
+            }
+        }catch(err){
+            console.log(err)
+            res.redirect("/todos");
+        }
+    },
 }    

models/Todo.js

@@ -12,7 +12,11 @@ const TodoSchema = new mongoose.Schema({
   userId: {
     type: String,
     required: true
+  },
+  todoListId:{
+    type: mongoose.Schema.Types.ObjectId,
+    ref: "TodoList",
   }
-})
+});
 
 module.exports = mongoose.model('Todo', TodoSchema)

models/TodoList.js

@@ -0,0 +1,14 @@
+const mongoose = require('mongoose')
+
+const TodoListSchema = new mongoose.Schema({
+  name: {
+    type: String,
+    required: true,
+  },
+  ownerId: {
+    type: mongoose.Schema.Types.ObjectId,
+    ref: "User"
+  }
+})
+
+module.exports = mongoose.model('TodoList', TodoListSchema)

package.json

@@ -17,6 +17,7 @@
     "express": "^4.17.1",
     "express-flash": "^0.0.2",
     "express-session": "^1.17.1",
+    "method-override": "^3.0.0",
     "mongodb": "^3.6.5",
     "mongoose": "^5.12.3",
     "morgan": "^1.10.0",

routes/todos.js

@@ -5,12 +5,17 @@ const { ensureAuth } = require('../middleware/auth')
 
 router.get('/', ensureAuth, todosController.getTodos)
 
-router.post('/createTodo', todosController.createTodo)
+router.post('/createTodo/:listId', todosController.createTodo)
+
+router.post('/createList', todosController.createList)
 
 router.put('/markComplete', todosController.markComplete)
 
 router.put('/markIncomplete', todosController.markIncomplete)
 
 router.delete('/deleteTodo', todosController.deleteTodo)
 
+router.delete('/deleteList/:id', todosController.deleteList)
+
+
 module.exports = router

server.js

@@ -9,6 +9,7 @@ const logger = require('morgan')
 const connectDB = require('./config/database')
 const mainRoutes = require('./routes/main')
 const todoRoutes = require('./routes/todos')
+const methodOverride = require("method-override");
 
 require('dotenv').config({path: './config/.env'})
 
@@ -37,7 +38,11 @@ app.use(passport.initialize())
 app.use(passport.session())
 
 app.use(flash())
-
+
+//Use forms for put / delete
+app.use(methodOverride("_method"));
+
+//Routes
 app.use('/', mainRoutes)
 app.use('/todos', todoRoutes)
 

views/todos.ejs

@@ -9,22 +9,40 @@
 </head>
 <body>
     <h1>Todos</h1>
-    <ul>
-    <% todos.forEach( el => { %>
-            <li class='todoItem' data-id='<%=el._id%>'>
-                <span class='<%= el.completed === true ? 'completed' : 'not'%>'><%= el.todo %></span>
-                <span class='del'> Delete </span>
-            </li>
-    <% }) %>    
-    </ul>
+    <br><br>
+    <% todoLists.forEach(el => { %>
+        <h2><%= el.name %></h2>
+        <form
+          action="/todos/deleteList/<%= el.id %>?_method=DELETE"
+          method="POST"
+          class="col-3">
+          <button type="submit">Delete List</button>
+        </form>
+        <ul>
+        <% for(let i = 0; i < todos.length; i++ ) {%>
+            <% if(todos[i].todoListId.equals(el._id)) {%>
+                <li class='todoItem' data-id='<%=todos[i]._id%>'>
+                    <span class='<%= todos[i].completed === true ? 'completed' : 'not'%>'><%= todos[i].todo %></span>
+                    <span class='del'> Delete </span>
+                </li>
+            <% } %>
+        <% } %>
+        </ul>
+        <form action="/todos/createTodo/<%=el._id%>" method='POST'>
+            <input type="text" placeholder="New List Item" name='todoItem'>
+            <input type="submit">
+        </form>
+        <br><hr><br>
+    <% }) %> 
 
-    <h2><%= user.userName %> has <%= left %> things left to do.</h2>
+    <!-- <h2><%= user.userName %> has <%= left %> things left to do.</h2> -->
 
-    <form action="/todos/createTodo" method='POST'>
-        <input type="text" placeholder="Enter Todo Item" name='todoItem'>
+    <h2>Create New Todo List</h2>
+    <form action="/todos/createList/" method='POST'>
+        <input type="text" placeholder="Enter New List Name" name='todoList'>
         <input type="submit">
     </form>
-
+    <br>
     <a href="/logout">Logout</a>
 
     <script src="js/main.js"></script>