work on todos front

resources/js/views/ToDoLists/ToDoList.vue

@@ -1,37 +1,42 @@
 <template>
     <div>
-        <h1>{{ toDoList.data.attributes.data.name }}</h1>
-        <ul class="draggable-list">
-            <div v-if="toDoList.data.attributes.data.to_dos.to_dos_count < 1">
-                ------- no to Do -------
+        <div class="m-2 px-2 pt-2 bg-orange-400 rounded flex flex-col justify-between shadow">
+            <div>
+                <h1 class="text-2xl font-bold mb-2">{{ toDoList.data.attributes.data.name }}</h1>
+                <ul class="draggable-list">
+                    <div v-if="toDoList.data.attributes.data.to_dos.to_dos_count < 1">
+                        ------- no to Do -------
+                    </div>
+                    <ToDo v-else
+                          v-for="(toDo, indexToDo) in toDoList.data.attributes.data.to_dos.data"
+                          key="indexToDo"
+                          :toDo="toDo"
+                          :position="indexToDo" />
+                </ul>
+            </div>
+            <div class="flex items-center mt-2">
+                <InputField name="name" classes="py-1" placeholder="New To Do" required @update:field="name = $event" :errors="errors" />
+                <button class="btn-primary ml-1 mb-2 py-1" @click="addToDo">ADD</button>
             </div>
-            <li v-else v-for="(toDo, index) in toDoList.data.attributes.data.to_dos.data" draggable="true">
-                <span>=</span>
-                {{ toDo.data.attributes.data.name }}
-                <input type="checkbox" name="do" id="do">
-                <span @click="deleteToDo(toDo, index)">X</span>
-            </li>
-        </ul>
-        <div>
-            <InputField name="name" classes="inline" placeholder="New To Do" required @update:field="name = $event" :errors="errors" />
-            <button class="btn-primary" @click="addToDo">ADD</button>
         </div>
     </div>
 </template>
 
 <script>
     import InputField from "../../components/InputField";
+    import ToDo from "./ToDo";
 
     export default {
         name: "ToDoList",
         components: {
-            InputField
+            InputField, ToDo
         },
         data: function () {
             return {
                 name: '',
                 errors: null,
                 list: null,
+                edit: false,
             }
         },
         props: {
@@ -67,3 +72,5 @@
         }
     }
 </script>
+
+