Add keyboard listeners

Benjamin-Re · Apr 17, 2022 · c61fe31 · c61fe31
1 parent 3ee6129
commit c61fe31
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 39 deletions.
diff --git a/dist/main.js b/dist/main.js
diff --git a/src/modules/controller.js b/src/modules/controller.js
@@ -28,84 +28,115 @@ class Controller {
     this.todoDate = document.querySelector("#dateInput");
     this.todoPrio = document.querySelector("#prio");
   }
-  
-  initializeUI(){
+
+  initializeUI() {
     this.view.displayProjects(this.model.getProjects());
     this.listenForProjects();
     this.listenForProjectAdd();
     this.listenForTodoAdd();
     this.listenForShowPopupButton();
   }
-  
+
   listenForProjects() {
     this.allCurrentProjects = Array.from(document.querySelectorAll("li"));
     this.allCurrentProjects?.forEach((project) => {
       project.addEventListener("click", (e) => {
         this.currentProjectId = e.target.getAttribute("id");
         // Display all todos for active project
-        this.view.displayTodos(this.model.getProject(this.currentProjectId).getTodos());
+        this.view.displayTodos(
+          this.model.getProject(this.currentProjectId).getTodos()
+        );
         this.listenForTodos();
       });
     });
   }
 
   listenForProjectAdd() {
+
     this.addProjectButton.addEventListener("click", () => {
-      let projectTitle = this.projectInputField.value;
-      this.model.addProject(projectTitle);
-      this.view.displayProjects(this.model.getProjects());
-      this.listenForProjects();
-      this.listenForDescriptions();
+      this.addProjectHelper();
+    });
+    // Add keyboard listener but to the input field not to the projects themselves
+    this.projectInputField.addEventListener("keypress", (e) => {
+      if (e.key === "Enter") {
+        this.addProjectHelper();
+      }
     });
   }
 
+  addProjectHelper() {
+    let projectTitle = this.projectInputField.value;
+    this.model.addProject(projectTitle);
+    this.view.displayProjects(this.model.getProjects());
+    this.listenForProjects();
+    this.listenForDescriptions();
+  }
+
   listenForTodoAdd() {
     this.addTodoButton.addEventListener("click", () => {
-      let todoTitle = this.todoInputField.value;
-      let todoDate = this.todoDate.value;
-      let todoPrio = this.todoPrio.value;
-      console.log(todoDate);
-      console.log(todoPrio);
-      this.model.addTodoToProject(this.currentProjectId, todoTitle, todoDate, todoPrio);
-      this.view.displayTodos(
-        this.model.getProject(this.currentProjectId).getTodos()
-      );
-      this.popup.classList.remove("active");
-      this.listenForDescriptions();
-      this.listenForTodos();
+      this.addTodoHelper();
     });
+    // Listen for keypress also
+    this.todoInputField.addEventListener("keypress", (e)=>{
+      if(e.key==="Enter"){
+        this.addTodoHelper();
+      }
+    })
+  }
+
+  addTodoHelper() {
+    let todoTitle = this.todoInputField.value;
+    let todoDate = this.todoDate.value;
+    let todoPrio = this.todoPrio.value;
+    this.model.addTodoToProject(
+      this.currentProjectId,
+      todoTitle,
+      todoDate,
+      todoPrio
+    );
+    this.view.displayTodos(
+      this.model.getProject(this.currentProjectId).getTodos()
+    );
+    this.popup.classList.remove("active");
+    this.listenForDescriptions();
+    this.listenForTodos();
   }
 
-  listenForTodos(){
+  listenForTodos() {
     const todos = Array.from(document.querySelectorAll("tr[id]"));
-    todos.forEach((todo)=>{
-      todo.addEventListener("click", ()=> {
+    todos.forEach((todo) => {
+      todo.addEventListener("click", () => {
         todo.nextElementSibling.classList.toggle("popup");
         this.listenForDescriptions();
-
-      })
-    })
+      });
+    });
   }
 
   listenForShowPopupButton() {
-    this.showPopupButton.addEventListener("click", ()=>{
+    this.showPopupButton.addEventListener("click", () => {
       this.popup.classList.add("active");
-    })
+    });
   }
 
-  listenForDescriptions(){
+  listenForDescriptions() {
     const descriptions = Array.from(document.querySelectorAll("textarea"));
-    descriptions.forEach((description)=>{
-      description.addEventListener("keypress", (e)=>{
-        if(e.key==="Enter"){
+    descriptions.forEach((description) => {
+      description.addEventListener("keypress", (e) => {
+        if (e.key === "Enter") {
           // Save the description in the corresponding todo
-          let correspondingTodoId = e.target.parentNode.parentNode.previousElementSibling.getAttribute("id");
-          this.model.addDescriptionToTodo(this.currentProjectId, correspondingTodoId, e.target.value);
+          let correspondingTodoId =
+            e.target.parentNode.parentNode.previousElementSibling.getAttribute(
+              "id"
+            );
+          this.model.addDescriptionToTodo(
+            this.currentProjectId,
+            correspondingTodoId,
+            e.target.value
+          );
         }
-      })
-    })
+      });
+    });
   }
-
 }
 
 export { Controller };