From b574256bd0c7734f0f96885526ec576949acc258 Mon Sep 17 00:00:00 2001
From: Mehul Panchal <mehul.panchal@employinc.com>
Date: Tue, 16 Apr 2024 11:13:03 +0530
Subject: [PATCH] Created New To Do Example

---
 .gitignore                             |  1 +
 src/components/to-do/index.html        | 24 ++++++++++++++
 src/components/to-do/index.js          | 45 ++++++++++++++++++++++++++
 src/components/welcome-page/index.html |  1 +
 src/index.css                          |  4 +++
 src/index.js                           |  6 ++++
 6 files changed, 81 insertions(+)
 create mode 100644 src/components/to-do/index.html
 create mode 100644 src/components/to-do/index.js

diff --git a/.gitignore b/.gitignore
index c2658d7..ccb2c80 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
 node_modules/
+package-lock.json
\ No newline at end of file
diff --git a/src/components/to-do/index.html b/src/components/to-do/index.html
new file mode 100644
index 0000000..c562d11
--- /dev/null
+++ b/src/components/to-do/index.html
@@ -0,0 +1,24 @@
+<index:>
+  <h1>ToDo List</h1>
+  <ul>
+    <!-- Loop through tasks and display them -->
+    {{each tasks as #item, #index}}
+    <li>
+        <!-- Display task text -->
+        <span class="{{ #item.completed ? 'completed-task' : '' }}">{{#item.text}}</span>
+        
+        <!-- Button to mark task as completed -->
+        <button on-click="completeTask(#index)" if="{{!item.completed}}">{{ #item.completed ? 'Completed' : 'Complete' }}</button>
+        
+        <!-- Button to remove task -->
+        <button on-click="removeTask(#index)">Remove</button>
+      </li>
+      {{/each}}
+    </ul>
+  
+    
+  <!-- Input to add new task -->
+  <input type="text" placeholder="Add new task..." value="{{newTaskText}}">
+  <button on-click="addTask({ text: newTaskText, completed: false })">Add Task</button>
+
+
diff --git a/src/components/to-do/index.js b/src/components/to-do/index.js
new file mode 100644
index 0000000..e6b8bc1
--- /dev/null
+++ b/src/components/to-do/index.js
@@ -0,0 +1,45 @@
+_ = require('lodash')
+
+class ToDo {
+  create() {
+    this.$tasks = this.model.at('tasks')
+
+    // Initialize tasks data
+    this.$tasks.set([])
+    console.log("Tasks initialized:", this.$tasks.get())
+  }
+
+  addTask(task) {
+    console.log("Adding task:", task)
+    // Add a new task to the list
+    this.$tasks.push(task)
+    console.log("Tasks after adding:", this.$tasks.get())
+  }
+
+  removeTask(index) {
+    // Remove task at the given index
+    const tasks = this.$tasks.get()
+    tasks.splice(index, 1)
+    this.$tasks.set(tasks)
+  }
+
+  completeTask(index) {
+    const tasks = this.$tasks.get()
+    tasks[index].completed = !tasks[index].completed; // Toggle the completion state
+    this.$tasks.set(tasks)
+    console.log("Tasks after adding:", this.$tasks.get())
+
+  }
+
+  updateTask(index, updatedTask) {
+    // Update task at the given index
+    const tasks = this.$tasks.get()
+    tasks[index] = updatedTask
+    this.$tasks.set(tasks)
+  }
+}
+
+ToDo.prototype.name = 'to-list'
+ToDo.prototype.view = __dirname
+
+module.exports = ToDo
diff --git a/src/components/welcome-page/index.html b/src/components/welcome-page/index.html
index 2ba72f4..908a8fc 100644
--- a/src/components/welcome-page/index.html
+++ b/src/components/welcome-page/index.html
@@ -19,6 +19,7 @@ <h2>
     <!-- https://derbyjs.com/docs/derby-0.10/views/template-syntax/blocks#conditionals -->
     <ol>
         <li><a href="/hello-world">Hello World</a></li>
+        <li><a href="/to-do">To do</a></li>
         <li><a href="/racer-basics">Racer Basics</a></li>
         <li><a href="/components-in-action-demo">Components in Action Demo</a></li>
         <li><a href="/collaborative-note-editor">Collaborative Note Editor</a></li>
diff --git a/src/index.css b/src/index.css
index f0c07a8..402df86 100644
--- a/src/index.css
+++ b/src/index.css
@@ -7,3 +7,7 @@ body {
 .border {
   border-color: #CCC;
 }
+
+.completed-task {
+  text-decoration: line-through;
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 0629c70..4471198 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,6 +6,7 @@ const derby = require('derby')
 const CollaborativeNoteEditor = require('./components/collaborative-note-editor')
 const ComponentsInActionDemo = require('./components/components-in-action-demo')
 const HelloWorld = require('./components/hello-world')
+const ToDo = require('./components/to-do')
 const PersistenceDemo = require('./components/persistence-demo')
 const PetDisplayComponent = require('./components/components-in-action-demo/pet-display-component')
 const RacerBasics = require('./components/racer-basics')
@@ -28,6 +29,7 @@ app.use(require('derby-debug'))
 app.component(CollaborativeNoteEditor)
 app.component(ComponentsInActionDemo)
 app.component(HelloWorld)
+app.component(ToDo)
 app.component(PersistenceDemo)
 app.component(PetDisplayComponent)
 app.component(RacerBasics)
@@ -47,6 +49,10 @@ app.get('/hello-world', (page) => {
   page.render(HelloWorld.prototype.name)
 })
 
+app.get('/to-do', (page) => {
+  page.render(ToDo.prototype.name)
+})
+
 app.get('/racer-basics', (page) => {
   page.render(RacerBasics.prototype.name)
 })