Deleting tasks

web/main_view.js

@@ -2,16 +2,21 @@ import Task           from "./tasks/task.js"
 import TaskView       from "./tasks/view.js"
 import DetailTaskView from "./tasks/detail_view.js"
 
-class MainView {
+class MainView extends EventTarget {
   constructor(){
+    super()
     this.task_views = []
 
     this.list_element = document.querySelector("task-list")
     this.detail_view = new DetailTaskView(document.querySelector("task-detail"))
 
+    this.detail_view.addEventListener("delete_task", (event) => {
+      this.dispatchEvent(new CustomEvent("delete_task", {detail: {task: event.detail.task}}))
+    })
+
     this.addButton = document.querySelector('#add_button')
     this.addButton.addEventListener("click", () => {
-      this.addTask(new Task({done: false, description: "New Task"}))
+      this.dispatchEvent(new CustomEvent("add_task"))
     })
   }
 
@@ -21,6 +26,12 @@ class MainView {
     this.list_element.appendChild(view.element)
     this.task_views.push(view)
   }
+
+  removeTaskView(task){
+    let summary_view_for_deleted_task = this.task_views.find((summary_view) => summary_view.task === task)
+    this.task_views.remove(summary_view_for_deleted_task)
+    this.list_element.removeChild(summary_view_for_deleted_task.element)
+  }
 }
 
 export default MainView
\ No newline at end of file

web/tasks/controller.js

@@ -4,6 +4,14 @@ class TaskController {
   constructor(main_view){
     this.tasks = []
     this.view  = main_view
+
+    this.view.addEventListener("add_task", () => {
+      this.addTask(new Task({done: false, description: "New Task"}))
+    })
+
+    this.view.addEventListener("delete_task", event => {
+      this.remoteTask(event.detail.task)      
+    })
   }
 
   addTask(task){
@@ -11,6 +19,11 @@ class TaskController {
     task.addEventListener("change", () => this.save(task))
   }
 
+  remoteTask(task){
+    this.tasks.remove(task)
+    this.view.removeTaskView(task)
+  }
+
   async refresh(){
     let tasks_response = await fetch("/tasks", {method: "GET"})
     let tasks_data = await tasks_response.json()

web/tasks/detail_view.js

-class DetailTaskView {
+class DetailTaskView extends EventTarget {
   constructor(element){
+    super()
     this.element = element
     this.fields = {
       done: this.element.querySelector("[name=done]"),
@@ -17,13 +18,7 @@ class DetailTaskView {
     this.deleteButton = this.element.querySelector("#delete_button")
 
     this.deleteButton.addEventListener("click", () => {
-      let summary_view_for_deleted_task = task_views.find((summary_view) => summary_view.task === this.task)
-      
-      task_views.remove(summary_view_for_deleted_task)
-      tasks.remove(this.task)
-
-      list.removeChild(summary_view_for_deleted_task.element)
-
+      this.dispatchEvent(new CustomEvent("delete_task", {detail: {task: this.task}}))
     })
   }