work on todos front

resources/js/views/ToDoLists/ToDo.vue

@@ -0,0 +1,53 @@
+<template>
+    <li class="todo flex justify-between items-center bg-white rounded mb-1 px-2 py-1"
+        >
+        <div class="flex flex-1" draggable="true">
+            <svg-vue icon="draggable" class="w-4 block mr-2 cursor-move" />
+            {{ toDo.data.attributes.data.name }}
+        </div>
+        <div class="flex">
+            <svg-vue icon="edit" @click="edit = !edit" class="edit-icon z-10 w-4 block cursor-pointer mr-1" />
+            <input type="checkbox" v-model="checked">
+            <span v-if="edit" @click="deleteToDo(toDo, position)">X</span>
+        </div>
+    </li>
+</template>
+
+<script>
+    export default {
+        name: "ToDo",
+        data: function () {
+            return {
+                name: this.toDo.data.attributes.data.name,
+                errors: null,
+                edit: false,
+                checked: false,
+            }
+        },
+        props: {
+            toDo: {
+                type: Object,
+                require: true
+            },
+            position: {
+                type: Number,
+                require: true
+            }
+        },
+        mounted() {
+            console.log(this.$key)
+        }
+    }
+</script>
+
+<style scoped>
+    .edit-icon {
+        opacity: 0;
+        transition: opacity 0.2s;
+    }
+
+    .todo:hover .edit-icon {
+        opacity: 1;
+        transition: opacity 0.2s;
+    }
+</style>

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>
+
+

resources/js/views/ToDoLists/ToDoListIndex.vue

@@ -15,11 +15,13 @@
             <a href="#" class="btn-primary" @click="modal = ! modal">Add New List</a>
         </div>
         <Loader v-if="loading" />
-        <div v-else>
+        <div v-else class="flex flex-wrap -m-2 mt-2">
             <div v-if="toDoLists.length < 1">No List Yet</div>
-            <div v-else v-for="toDoList in toDoLists">
-                <ToDoList :to-do-list="toDoList" />
-            </div>
+                <ToDoList v-else
+                          v-for="(toDoList, index) in toDoLists"
+                          :key="index"
+                          :to-do-list="toDoList"
+                          class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4" />
         </div>
     </div>
 </template>