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>