feat: logic/html rendered

todo/src/components/todo.js

@@ -53,14 +53,16 @@ class todoHandler {
 
     }
 
-    editTodo(project, title, description, dueDate, pomodors) {
+    editTodo(project, title) {
+        // TODO: implement todo method currently just a toggle for completed;
         let projectIndex = this.projects.findIndex(x => x.name === project);
         let todo = this.projects[projectIndex].todos.find(t => t.title === title)
 
         if (todo){
-            if(description) todo.description = description;
-            if(dueDate) todo.dueDate = dueDate;
-            if(pomodors) todo.pomodoros = pomodors;
+            todo.completed = !todo.completed;
+            // if(description) todo.description = description;
+            // if(dueDate) todo.dueDate = dueDate;
+            // if(pomodors) todo.pomodoros = pomodors;
         }
     }
 

todo/src/components/todoComponent.js

@@ -1,4 +1,4 @@
-import { getActiveProject, setActiveProject, updateDisplay } from "..";
+import { getActiveProject, setActiveProject, updateDisplay, getTodoHandler } from "..";
 import { save } from "./storage";
 
 function todoTableComponent(todos) {
@@ -62,6 +62,7 @@ function createTableCheckBox(content) {
     checkbox.type = 'checkbox';
     checkbox.classList.add('todo-checkbox');
     checkbox.checked = content;
+
     return checkbox;
 }
 
@@ -81,6 +82,7 @@ function createTableTodoDeleteBtn() {
 function createTableRow(_todo) {
     const tr = document.createElement('tr');
     tr.classList.add('todo-row');
+    
     tr.dataset.todoId = _todo.title;
     
     let checkbox = createTableCheckBox(_todo.completed);
@@ -88,16 +90,23 @@ function createTableRow(_todo) {
         createTableCell(checkbox),
         createTableCell(_todo.title),
         createTableCell(_todo.description),
-        createTableCell(_todo.dueDate),
+        createTableCell(_todo.dueDate.toString()),
         createTableCell(createTableTodoDeleteBtn())
         // createTableCell(_todo.pomodoros)
     ]
     
     cells.forEach(cell => tr.appendChild(cell));
 
+    if (_todo.completed) {
+        tr.classList.add('completed');
+    } else {
+        tr.classList.remove('completed');
+    }
+
     return tr;
 }
 
+
 function addTodo(todoHandler) {
     const activeProject = getActiveProject();
     const button = document.querySelector('.add-todo-btn');
@@ -118,7 +127,8 @@ function addTodo(todoHandler) {
         let newTodo = handleTodoInput(input.childNodes);
         let title = newTodo[0];
         let description = newTodo[1];
-        let date = Date(newTodo[2]);
+        let date = new Date(newTodo[2]);
+        console.log(date);
         todoHandler.addTodo(activeProject, title, description, date, 0);
         div.classList.remove('todo-add-active');
         updateDisplay();
@@ -146,6 +156,20 @@ function deleteTodo(todoHandler) {
 
 }
 
+function handleCompletedTodo(todoHandler) {
+    const activeProject = getActiveProject();
+    const checkbox = document.querySelectorAll('.todo-checkbox');
+    checkbox.forEach(c => {
+        c.addEventListener('click', e => {
+        const title = e.target.parentNode.parentNode.dataset.todoId;
+        todoHandler.editTodo(activeProject, title);
+
+        save(todoHandler.getEverything());
+        updateDisplay();
+        });
+    });
+}
+
 function projectComponent() {
     const div = document.createElement('div');
     const input = document.createElement('input');
@@ -290,6 +314,6 @@ export {
     addProject, 
     deleteProject,
     addTodo,
-    deleteTodo
-
+    deleteTodo,
+    handleCompletedTodo
 };

todo/src/index.js

@@ -7,15 +7,17 @@ import {
     todoTableComponent, 
     getTodoFromActiveProject,
     addTodoComponent,
+    handleCompletedTodo
     } from "./components/todoComponent";
 import { navbar } from "./components/navbar";
-import { todoHandler as todoManager } from "./components/todo";
 import { save, load } from "./components/storage";
 import './style.css';
-import { add } from "date-fns";
+import { todoHandler as todoManager } from "./components/todo";
+// import { add } from "date-fns";
 
 const data = load();
-let todos = data ? new todoManager(JSON.parse(data)) : new todoManager();
+let todos;
+todos = data ? new todoManager(JSON.parse(data)) : new todoManager();
 
 let activeProject = 'default';
 
@@ -67,8 +69,10 @@ function updateDisplay() {
     deleteTodo(todos);
     addProject(todos);
     deleteProject(todos);
+    handleCompletedTodo(todos);
 }
 
+
 fontAwesome();
 website();
 save(todos.getEverything());

todo/src/style.css

@@ -162,12 +162,6 @@ input[type="checkbox"] {
     width: initial;
 }
 
-/* .todo-buttons { */
-/*     display: flex; */
-/*     gap: 10px; */
-/* } */
-/**/
-/* .todo-buttons button { */
-/*     width: 100%; */
-/*     margin: 10px 0; */
-/* } */
+.completed {
+    text-decoration: line-through 3px;
+}