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>