add CheckBoxField

resources/js/views/ToDoLists/ToDo.vue

@@ -1,6 +1,8 @@
 <template>
     <div v-if="!edit" class="flex items-center flex-1 todo">
-        <input type="checkbox" :checked="toDo.data.attributes.data.checked_at" @click="checkedIt" class="block mr-1">
+        <CheckBoxField :check-it="!!(checked)"
+                       @update:field="checked = $event"
+                       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" />
@@ -19,8 +21,13 @@
 </template>
 
 <script>
+import CheckBoxField from '../../components/CheckBoxField'
+
 export default {
     name: 'ToDo',
+    components: {
+        CheckBoxField
+    },
     props: {
         toDo: {
             type: Object,
@@ -34,6 +41,7 @@ export default {
     data () {
         return {
             edit: false,
+            checked: !!(this.toDo.data.attributes.data.checked_at),
         }
     },
     methods: {
@@ -48,17 +56,20 @@ export default {
                     console.log('Internal Error, Unable to delete list.' + errorRes)
                 })
         },
-        checkedIt: function () {
+    },
+    watch: {
+        checked: function (val) {
             // 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
+                    this.checked = val
                 })
                 .catch(errorRes => {
                     console.log('Internal Error, Unable to delete contact.' + errorRes)
                 })
-        },
+        }
     }
 }
 </script>

resources/js/views/ToDoLists/ToDoListIndex.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="p-2">
+    <div class="p-4">
         <div v-if="modal" class="modal-container" @click="modal = ! modal"></div>
         <div v-if="modal" class="modal px-2">
             <p class="m-2 text-center">Add a new to-do list ?</p>