From 5e5c4033f89a11f50d5c31f0aaf290ce4f6a202a Mon Sep 17 00:00:00 2001
From: Markus Thielen <markus.thielen@basebox.io>
Date: Wed, 1 Nov 2023 16:32:58 +0100
Subject: [PATCH] fixed delete task reloading app

---
 src/components/Todo.vue | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/Todo.vue b/src/components/Todo.vue
index d980155..2ae6138 100644
--- a/src/components/Todo.vue
+++ b/src/components/Todo.vue
@@ -37,7 +37,7 @@
     <div id="todo-container">
 
       <transition-group name="list" tag="div">
-        <div :class="todoItemClass(task)" v-for="(task, i) in filteredItems" :id="'task-' + task.id" :key="task.id">
+        <div :class="todoItemClass(task)" v-for="(task, i) in filteredItems" :id="taskElId(task)" :key="i">
           <div :class="todoCheckedClass(task)" @click="toggleCompleted(task)">
             &nbsp;
           </div>
@@ -51,7 +51,7 @@
                 <i class="bi bi-trash"></i>
               </button>
               <ul class="dropdown-menu">
-                <li><a class="dropdown-item" href="" @click="deleteTask(task)">Delete this item</a></li>
+                <li><span class="dropdown-item" @click="deleteTask(task)">Delete this item</span></li>
               </ul>
             </div>
           </div>
@@ -95,6 +95,13 @@ export default {
 
   methods: {
 
+    /**
+     * Return element ID for a task container.
+     */
+    taskElId(task) {
+      return `task-${task.id}`;
+    },
+
     /**
      * Save a task to the database.
      * @param task the task to save; this is an object as received from the broker.
@@ -157,7 +164,7 @@ export default {
      */
     deleteTask(task) {
       if (task.id !== NEW_TASK_ID) {
-        /* Task must be also deleted from the server */
+        /* Delete task from basebox */
         gqlRequest(`mutation {
           deleteTask(id: "${task.id}") {
             id