refact todolist input

resources/js/views/ToDoLists/ToDoListIndex.vue

@@ -16,7 +16,7 @@
         </div>
         <Loader v-if="loading" />
         <div v-else class="flex flex-wrap -m-2 mt-2">
-            <div v-if="toDoLists.length < 1">No List Yet</div>
+            <div v-if="toDoLists.length < 1" class="font-bold p-2">No List Yet</div>
             <router-link v-else
                       v-for="(toDoList, index) in toDoLists"
                       :key="index"

resources/js/views/ToDoLists/ToDoListShow.vue

@@ -10,13 +10,24 @@
         </div>
         <div class="flex items-center justify-between pb-2">
             <router-link to="/memos/" class="btn-secondary">Back</router-link>
-            <div class="flex-middle">
+            <div>
-                <router-link :to="'/to-do-lists/' + toDoList.data.to_do_list_id" class="btn-secondary mr-2" >Edit</router-link>
                 <a href="#" class="btn-alert" @click="modal = ! modal">Delete</a>
             </div>
         </div>
         <div v-if="!loading" class="bg-orange-400 rounded p-1">
-            <h1 class="text-2xl font-bold mb-2 ml-2">{{ toDoList.data.attributes.data.name }}</h1>
+            <h1 class="mb-2 ml-2 todo" >
+                <span v-if="!listNameEdit" class="text-2xl font-bold flex items-center">{{ toDoList.data.attributes.data.name }}
+                    <span @click="listNameEdit = !listNameEdit">
+                        <svg-vue icon="edit"  class="edit-icon inline w-4 fill-current cursor-pointer ml-2" />
+                    </span>
+                </span>
+                <span v-else class="flex items-center">
+                    <input type="text" class="p-1 rounded-sm mt-1 -ml-1" v-model="listName" @keydown.enter="updateList">
+                    <span @click="listNameEdit = !listNameEdit">
+                        <svg-vue icon="close"  class="inline w-4 fill-current cursor-pointer ml-2" />
+                    </span>
+                </span>
+            </h1>
             <ul class='p-1'
                   v-for="(toDo, index) in toDoList.data.attributes.data.to_dos.data"
                   :key="index"
@@ -39,24 +50,20 @@
                 </li>
 
             </ul>
-            <div class="flex items-center mt-2 ml-2">
+            <div class="flex items-center m-2">
-                <InputField name="name" classes="py-1" placeholder="New To Do" required @update:field="name = $event" :errors="errors" @keyup.enter="addToDo" />
+                <input type="text" v-model="name" @keydown.enter="addToDo" class="p-1 rounded-sm -ml-1">
-                <button class="btn-primary ml-1 mb-2 py-1" @click="addToDo">ADD</button>
+                <button class="btn-primary ml-1 py-1" @click="addToDo">ADD</button>
             </div>
         </div>
     </div>
 </template>
 
 <script>
-import InputField from '../../components/InputField'
 //https://learnvue.co/2020/01/how-to-add-drag-and-drop-to-your-vuejs-project/
 //https://jsfiddle.net/jf9nrtds/
 
 export default {
     name: 'ToDoListShow',
-    components: {
-        InputField
-    },
     data () {
         return {
             toDoList: null,
@@ -64,6 +71,8 @@ export default {
             name: '',
             errors: null,
             modal: false,
+            listName: '',
+            listNameEdit: false,
         }
     },
     mounted() {
@@ -72,7 +81,7 @@ export default {
             .then(res => {
                 this.toDoList = res.data
                 this.loading = false
-
+                this.listName = res.data.data.attributes.data.name
                 this.reorderList()
             })
             .catch(errorRes => {
@@ -112,15 +121,18 @@ export default {
             })
         },
         addToDo: function () {
+            if(this.name.length >= 3) {
                 // eslint-disable-next-line no-undef
                 axios.post('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do', {name: this.name})
                     .then(res => {
-                    this.toDoList.data.attributes.data.to_dos.data.push(res.data)
                         this.name = ''
+                        this.toDoList.data.attributes.data.to_dos.data.push(res.data)
                     })
                     .catch(errorRes => {
                         console.log('Internal Error, Unable to delete contact.' + errorRes)
                     })
+            }
+
         },
         deleteToDo: function (toDo, position) {
             // eslint-disable-next-line no-undef
@@ -151,6 +163,17 @@ export default {
                 .catch(errorRes => {
                     console.log('Internal Error, Unable to delete list.' + errorRes)
                 })
+        },
+        updateList: function () {
+            // eslint-disable-next-line no-undef
+            axios.patch('/api/to-do-lists/' + this.$route.params.id, {name: this.listName })
+                .then(() => {
+                    this.listNameEdit = false
+                    this.toDoList.data.attributes.data.name = this.listName
+                })
+                .catch(errorRes => {
+                    console.log('Internal Error, Unable to delete list.' + errorRes)
+                })
         }
     }
 }

resources/svg/close.svg

@@ -0,0 +1,5 @@
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 357 357" style="enable-background:new 0 0 357 357;" xml:space="preserve">
+	 <g id="close">
+		<polygon points="357,35.7 321.3,0 178.5,142.8 35.7,0 0,35.7 142.8,178.5 0,321.3 35.7,357 178.5,214.2 321.3,357 357,321.3 214.2,178.5 "/>
+	</g>
+</svg>