From 6410c55099bf8a3fd55ba82988c3e08bc1fa7217 Mon Sep 17 00:00:00 2001
From: robtweed <rtweed@mgateway.com>
Date: Mon, 7 Aug 2023 15:24:55 +0100
Subject: [PATCH] Enhancements to todo app

---
 examples/todo/js/app.js                       |  2 +-
 .../todo/js/components/todo/todo-footer.js    |  6 ++---
 .../todo/js/components/todo/todo-header.js    | 11 +++++----
 examples/todo/js/components/todo/todo-item.js | 23 ++++++++++++++++---
 package.json                                  |  2 +-
 5 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/examples/todo/js/app.js b/examples/todo/js/app.js
index 51a71de..f9098ec 100644
--- a/examples/todo/js/app.js
+++ b/examples/todo/js/app.js
@@ -177,7 +177,7 @@
     }
   };
 
-  golgi.logging = true;
+  //golgi.logging = true;
 
   await golgi.renderAssembly('root', 'body', context);
 
diff --git a/examples/todo/js/components/todo/todo-footer.js b/examples/todo/js/components/todo/todo-footer.js
index e7223bd..b202148 100644
--- a/examples/todo/js/components/todo/todo-footer.js
+++ b/examples/todo/js/components/todo/todo-footer.js
@@ -125,13 +125,13 @@ button {
 
   <ul class="filters">
     <li>
-      <a href="#/all" golgi:prop="allSelector" class="selected" golgi:on_click="showAll">All</a>
+      <a href="#" golgi:prop="allSelector" class="selected" golgi:on_click="showAll">All</a>
     </li>
     <li>
-      <a href="#/active" golgi:prop="activeSelector" golgi:on_click="showActive">Active</a>
+      <a href="#" golgi:prop="activeSelector" golgi:on_click="showActive">Active</a>
     </li> 
     <li>
-      <a href="#/completed" golgi:prop="completedSelector" golgi:on_click="showCompleted">Completed</a>
+      <a href="#" golgi:prop="completedSelector" golgi:on_click="showCompleted">Completed</a>
     </li>
   </ul> 
 
diff --git a/examples/todo/js/components/todo/todo-header.js b/examples/todo/js/components/todo/todo-header.js
index afc71cf..0364348 100644
--- a/examples/todo/js/components/todo/todo-header.js
+++ b/examples/todo/js/components/todo/todo-header.js
@@ -51,10 +51,13 @@ input:placeholder-shown {
     }
 
     async addTodo() {
-      let id = this.context.createTodo(this.input.value);
-      let itemComponent = await this.context.mainComponent.addItem(id, this.input.value, false);
-      this.context.registerItemComponent(id, itemComponent);
-      this.input.value = '';
+      let value = this.input.value.trim();
+      if (value !== '') {
+        let id = this.context.createTodo(value);
+        let itemComponent = await this.context.mainComponent.addItem(id, value, false);
+        this.context.registerItemComponent(id, itemComponent);
+        this.input.value = '';
+      }
     }
 
   });
diff --git a/examples/todo/js/components/todo/todo-item.js b/examples/todo/js/components/todo/todo-item.js
index 5ab6ff8..9830739 100644
--- a/examples/todo/js/components/todo/todo-item.js
+++ b/examples/todo/js/components/todo/todo-item.js
@@ -171,7 +171,7 @@ input[type='text']:not(.edit) {
     <label golgi:on_dblclick="editingOn">golgi:bind=value</label>
     <button class="destroy" golgi:on_click="destroy"></button>
   </div> 
-  <input type="text" class="edit hidden" golgi:prop="editField" value="golgi:bind=value" golgi:on_blur="editingOff" golgi:on_change="editingOff" />
+  <input type="text" class="edit hidden" golgi:prop="editField" value="golgi:bind=value" golgi:on_blur="editingOff" golgi:on_keydown="testForEnd" />
 </li>
 
       `;
@@ -252,6 +252,8 @@ input[type='text']:not(.edit) {
 
     editingOn() {
 
+      this.originalValue = this.editField.value;
+
       // turn on the edit field
 
       this.viewDiv.classList.add('hidden');
@@ -259,16 +261,31 @@ input[type='text']:not(.edit) {
       this.editField.focus();
     }
 
+    testForEnd(e) {
+      if (e.key === 'Escape') {
+        this.editField.value = this.originalValue;
+      }
+      if (e.key === 'Escape' || e.key === 'Enter') {
+        this.editingOff();
+      }
+    }
+
     editingOff() {
 
       // turn off the edit field and transfer the new value to the UI and todos object
 
+      let text = this.editField.value.trim();
+      if (text === '') {
+        this.destroy();
+        return;
+      }
+
       this.viewDiv.classList.remove('hidden');
       this.editField.classList.add('hidden');
       this.modifyState({
-        value: this.editField.value
+        value: text
       });
-      this.context.editTodo(this.todoId, this.editField.value);
+      this.context.editTodo(this.todoId, text);
     }
 
     destroy() {
diff --git a/package.json b/package.json
index 3aa148f..7b84f81 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "golgi",
-  "version": "1.4.4",
+  "version": "1.4.6",
   "description": "Dynamically-loading WebComponent Assembly Framework",
   "main": "/src/golgi.mjs",
   "browser": "/src/golgi.min.js",