refact list front

resources/js/views/ToDoLists/ToDoListIndex.vue

@@ -2,14 +2,14 @@
     <div class="p-2">
         <div v-if="modal" class="modal-container" @click="modal = ! modal"></div>
         <div v-if="modal" class="modal px-2">
-            <p class="m-1 text-center">Add a new to-do list ?</p>
+            <p class="m-2 text-center">Add a new to-do list ?</p>
             <InputField name="name" label="Title" placeholder="Your Title" required @update:field="name = $event" :errors="errors" />
-            <div class="flex-center m-1 mt-2">
+            <div class="flex justify-center mx-2 my-4">
                 <button class="btn-secondary mr-2" @click="modal = ! modal">Cancel</button>
                 <button class="btn-primary" @click="create">Create</button>
             </div>
         </div>
-        <div class="flex-between flex-center mb-1">
+        <div class="flex justify-between mb-1">
             <a href="#" class="btn" @click="$router.back()">Back</a>
 
             <a href="#" class="btn-primary" @click="modal = ! modal">Add New List</a>
@@ -23,7 +23,14 @@
                          :to="'/to-do-lists/' + toDoList.data.to_do_list_id"
                       :to-do-list="toDoList"
                       class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4" >
-                {{ toDoList.data.attributes.data.name }}
+                <div class="bg-orange-300 rounded text-black m-2 p-2">
+                    <div class="flex justify-between">
+                        {{ toDoList.data.attributes.data.name }}
+                        <span class="text-orange-900">
+                            {{ toDoList.data.attributes.data.to_dos.to_dos_count_check }} / {{ toDoList.data.attributes.data.to_dos.to_dos_count }}
+                        </span>
+                    </div>
+                </div>
             </router-link>
         </div>
     </div>