refact todo display and edit option

resources/js/views/ToDoLists/ToDo.vue

@@ -0,0 +1,73 @@
+<template>
+    <div v-if="!edit" class="flex items-center flex-1 todo">
+        <span v-bind:class="{ 'line-through' : checked }" class="border border-transparent flex-1 pl-1">{{ name }}</span>
+        <span @click="edit = !edit" >
+            <svg-vue icon="edit" class="edit-icon w-4 block cursor-pointer mx-2" />
+        </span>
+    </div>
+    <div v-else class="flex items-center flex-1">
+        <input type="text"
+               v-model="name"
+               @keypress.enter="updateToDo"
+               class="flex-1 rounded-sm border border-orange-600 pl-1">
+        <span @click="edit = !edit">
+            <svg-vue icon="close"  class="inline w-4 fill-current cursor-pointer mx-2" />
+        </span>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'ToDo',
+    props: {
+        name: {
+            type: String,
+            required: true
+        },
+        checked: {
+            type: Number,
+            default: null,
+        },
+        idList: {
+            type: Number,
+            required: true
+        },
+        idToDo: {
+            type: Number,
+            required: true
+        }
+    },
+    data () {
+        return {
+            edit: false,
+        }
+    },
+    methods: {
+        updateToDo: function () {
+            // eslint-disable-next-line no-undef
+            axios.patch('/api/to-do-lists/' + this.idList + '/to-do/' + this.idToDo, {name: this.name })
+                .then(() => {
+                    this.edit = false
+                    //this.toDoList.data.attributes.data.name = this.listName
+                })
+                .catch(errorRes => {
+                    console.log('Internal Error, Unable to delete list.' + errorRes)
+                })
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+    .edit-icon {
+        opacity: 0;
+        transition: opacity 0.2s;
+    }
+
+    .todo:hover .edit-icon {
+        opacity: 1;
+        transition: opacity 0.2s;
+    }
+
+</style>

resources/js/views/ToDoLists/ToDoListShow.vue

@@ -40,10 +40,11 @@
                     class='drag-el todo flex justify-between items-center bg-white rounded-sm mb-1 px-2 py-1' >
                     <div class="flex flex-1">
                         <svg-vue icon="draggable" class="w-4 block mr-2 cursor-move" />
-                        <span v-bind:class="{ 'line-through' : toDo.data.attributes.data.checked_at }">{{ toDo.data.attributes.data.name }}</span>
+                        <ToDo :name="toDo.data.attributes.data.name"
-                    </div>
+                              :checked="toDo.data.attributes.data.checked_at"
-                    <div class="flex">
+                              :id-list="toDoList.data.to_do_list_id"
-                        <svg-vue icon="edit" @click="edit = !edit" class="edit-icon z-10 w-4 block cursor-pointer mr-1" />
+                              :id-to-do="toDo.data.to_do_id"
+                              class="flex-1 bg-blue" />
                         <input type="checkbox" :checked="toDo.data.attributes.data.checked_at" @click="checked(toDo, index)">
                         <span @click="deleteToDo(toDo, index)" class="cursor-pointer ml-2 font-bold">X</span>
                     </div>
@@ -51,7 +52,7 @@
 
             </ul>
             <div class="flex items-center m-2">
-                <input type="text" v-model="name" @keydown.enter="addToDo" class="p-1 rounded-sm -ml-1">
+                <input type="text" v-model="toDoName" @keydown.enter="addToDo" class="p-1 rounded-sm -ml-1">
                 <button class="btn-primary ml-1 py-1" @click="addToDo">ADD</button>
             </div>
         </div>
@@ -59,16 +60,20 @@
 </template>
 
 <script>
+import ToDo from './ToDo'
 //https://learnvue.co/2020/01/how-to-add-drag-and-drop-to-your-vuejs-project/
 //https://jsfiddle.net/jf9nrtds/
 
 export default {
     name: 'ToDoListShow',
+    components: {
+        ToDo
+    },
     data () {
         return {
             toDoList: null,
             loading: true,
-            name: '',
+            toDoName: '',
             errors: null,
             modal: false,
             listName: '',
@@ -121,11 +126,11 @@ export default {
             })
         },
         addToDo: function () {
-            if(this.name.length >= 3) {
+            if(this.toDoName.length >= 3) {
                 // eslint-disable-next-line no-undef
-                axios.post('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do', {name: this.name})
+                axios.post('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do', {name: this.toDoName})
                     .then(res => {
-                        this.name = ''
+                        this.toDoName = ''
                         this.toDoList.data.attributes.data.to_dos.data.push(res.data)
                     })
                     .catch(errorRes => {