refact toDo

resources/js/views/ToDoLists/ToDo.vue

@@ -1,13 +1,15 @@
 <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>
+        <input type="checkbox" :checked="toDo.data.attributes.data.checked_at" @click="checkedIt" class="block mr-1">
+        <span v-bind:class="{ 'line-through' : toDo.data.attributes.data.checked_at }" class="border border-transparent flex-1 pl-1">{{ toDo.data.attributes.data.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="checkbox" :checked="toDo.data.attributes.data.checked_at" @click="checkedIt" class="block mr-1">
         <input type="text"
-               v-model="name"
+               v-model="toDo.data.attributes.data.name"
                @keypress.enter="updateToDo"
                class="flex-1 rounded-sm border border-orange-600 pl-1">
         <span @click="edit = !edit">
@@ -20,22 +22,14 @@
 export default {
     name: 'ToDo',
     props: {
-        name: {
-            type: String,
-            required: true
-        },
-        checked: {
-            type: Number,
-            default: null,
+        toDo: {
+            type: Object,
+            required: true,
         },
         idList: {
             type: Number,
             required: true
         },
-        idToDo: {
-            type: Number,
-            required: true
-        }
     },
     data () {
         return {
@@ -45,7 +39,7 @@ export default {
     methods: {
         updateToDo: function () {
             // eslint-disable-next-line no-undef
-            axios.patch('/api/to-do-lists/' + this.idList + '/to-do/' + this.idToDo, {name: this.name })
+            axios.patch('/api/to-do-lists/' + this.idList + '/to-do/' + this.toDo.data.to_do_id, {name: this.toDo.data.attributes.data.name })
                 .then(() => {
                     this.edit = false
                     //this.toDoList.data.attributes.data.name = this.listName
@@ -53,7 +47,18 @@ export default {
                 .catch(errorRes => {
                     console.log('Internal Error, Unable to delete list.' + errorRes)
                 })
-        }
+        },
+        checkedIt: function () {
+            // eslint-disable-next-line no-undef
+            axios.patch('/api/to-do-lists/' + this.idList + '/to-do/' + this.toDo.data.to_do_id + '/check')
+                .then(res => {
+                    // this.toDoList.data.attributes.data.to_dos.data[position].data.attributes.data.checked_at = res.data.data.attributes.data.checked_at
+                    this.toDo.data.attributes.data.checked_at = res.data.data.attributes.data.checked_at
+                })
+                .catch(errorRes => {
+                    console.log('Internal Error, Unable to delete contact.' + errorRes)
+                })
+        },
     }
 }
 </script>

resources/js/views/ToDoLists/ToDoListShow.vue

@@ -38,15 +38,14 @@
                     draggable
                     @dragstart='startDrag($event, toDo)'
                     class='drag-el todo flex justify-between items-center bg-white rounded-sm mb-1 px-2 py-1' >
-                    <div class="flex flex-1">
+                    <div class="flex items-center flex-1 todo">
                         <svg-vue icon="draggable" class="w-4 block mr-2 cursor-move" />
-                        <ToDo :name="toDo.data.attributes.data.name"
-                              :checked="toDo.data.attributes.data.checked_at"
+                        <ToDo :to-do="toDo"
                               :id-list="toDoList.data.to_do_list_id"
-                              :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>
+                        <span @click="deleteToDo(toDo, index)" class="cursor-pointer ml-2 font-bold edit-icon">
+                            <svg-vue icon="close" class="w-4" />
+                        </span>
                     </div>
                 </li>
 
@@ -149,16 +148,6 @@ export default {
                     console.log('Internal Error, Unable to delete contact.' + errorRes)
                 })
         },
-        checked: function (toDo, position) {
-            // eslint-disable-next-line no-undef
-            axios.patch('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do/' + toDo.data.to_do_id + '/check')
-                .then(res => {
-                    this.toDoList.data.attributes.data.to_dos.data[position].data.attributes.data.checked_at = res.data.data.attributes.data.checked_at
-                })
-                .catch(errorRes => {
-                    console.log('Internal Error, Unable to delete contact.' + errorRes)
-                })
-        },
         destroy: function () {
             // eslint-disable-next-line no-undef
             axios.delete('/api/to-do-lists/' + this.$route.params.id)