todo front in work

resources/js/components/InputField.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="relative mt-1">
+    <div class="relative mt-1" :classes="classes">
         <label :for="name" class="pb-1">{{ label }}</label>
         <input :id="name" :type="type" :placeholder="placeholder" v-model="value" @input="updateField()" :class="errorClassObject()">
         <p class="text-alert m-0" v-text="errorMessage()">Error Here</p>
@@ -27,6 +27,7 @@
             },
             errors: Object,
             data: String,
+            classes: String,
         },
         data: function () {
             return {

resources/js/components/Nav.vue

@@ -9,7 +9,7 @@
             <span v-bind:class="{ navhidden: !toggleNav }">Memos</span>
         </router-link>
         <router-link to="/to-do-lists" class="nav-item">
-            <svg-vue icon="memos" />
+            <svg-vue icon="list" />
             <span v-bind:class="{ navhidden: !toggleNav }">To Do Lists</span>
         </router-link>
         <router-link to="/jeux" class="nav-item">

resources/js/views/ToDoLists/ToDoList.vue

@@ -0,0 +1,50 @@
+<template>
+    <div>
+        <h1>{{ toDoList.data.attributes.data.name }}</h1>
+        <div v-if="toDoList.data.attributes.data.to_dos.to_dos_count < 1">
+            ------- no to Do -------
+        </div>
+        <div v-else v-for="toDo in toDoList.data.attributes.data.to_dos.data">{{ toDo.data.attributes.data.name }}</div>
+        <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";
+
+    export default {
+        name: "ToDoList",
+        components: {
+            InputField
+        },
+        data: function () {
+            return {
+                name: '',
+                errors: null,
+            }
+        },
+        props: {
+            toDoList: {
+                type: Object,
+                require: true
+            }
+        },
+        methods: {
+            addToDo: function () {
+                axios.post('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do', {name: this.name})
+                    .then(res => {
+                        console.log(res.data.data)
+                        this.modal = false
+                        this.name = ''
+                        this.toDoList.data.attributes.data.to_dos.data.push(res.data)
+                    })
+                    .catch(errorRes => {
+                        console.log('Internal Error, Unable to delete contact.' + errorRes)
+                    })
+            }
+        }
+    }
+</script>

resources/js/views/ToDoLists/ToDoListIndex.vue

@@ -15,17 +15,24 @@
             <a href="#" class="btn-primary" @click="modal = ! modal">Add New List</a>
         </div>
         <Loader v-if="loading" />
+        <div v-else>
+            <div v-if="toDoLists.length < 1">No List Yet</div>
+            <div v-else v-for="toDoList in toDoLists">
+                <ToDoList :to-do-list="toDoList" />
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
     import Loader from "../../components/Loader";
     import InputField from "../../components/InputField";
+    import ToDoList from "./ToDoList";
 
     export default {
         name: "ToDoListIndex",
         components: {
-            Loader, InputField
+            Loader, InputField, ToDoList
         },
         data: function () {
             return {
@@ -38,8 +45,8 @@
         },
         mounted() {
             axios.get('/api/to-do-lists')
-                .then(response => {
-                    this.toDoLists = response.data.data
+                .then(res => {
+                    this.toDoLists = res.data.data
                     this.loading = false
                 })
                 .catch(errorRes => {
@@ -56,7 +63,7 @@
                         console.log(res)
                         this.modal = false
                         this.name = ''
-                        // this.$router.push('/memos')
+                        this.toDoLists.push(res.data)
                     })
                     .catch(errorRes => {
                         console.log('Internal Error, Unable to delete contact.' + errorRes)

resources/svg/list.svg

@@ -0,0 +1,11 @@
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 384 384" style="enable-background:new 0 0 384 384;" xml:space="preserve">
+<g>
+	<rect x="0" y="170.667" width="42.667" height="42.667"/>
+	<rect x="0" y="85.333" width="42.667" height="42.667"/>
+	<rect x="0" y="256" width="42.667" height="42.667"/>
+	<rect x="85.333" y="85.333" width="298.667" height="42.667"/>
+	<rect x="85.333" y="170.667" width="298.667" height="42.667"/>
+	<rect x="85.333" y="256" width="298.667" height="42.667"/>
+</g>
+</svg>