From 69d4316bf9a62896de2db70d9264acd4ef0e9659 Mon Sep 17 00:00:00 2001
From: Romulus21 <romain@delanoe.me>
Date: Sat, 2 May 2020 15:20:51 +0200
Subject: [PATCH 1/2] refact todolist input

---
 .../js/views/ToDoLists/ToDoListIndex.vue      |  2 +-
 resources/js/views/ToDoLists/ToDoListShow.vue | 63 +++++++++++++------
 resources/svg/close.svg                       |  5 ++
 3 files changed, 49 insertions(+), 21 deletions(-)
 create mode 100644 resources/svg/close.svg

diff --git a/resources/js/views/ToDoLists/ToDoListIndex.vue b/resources/js/views/ToDoLists/ToDoListIndex.vue
index 9547229..8314778 100644
--- a/resources/js/views/ToDoLists/ToDoListIndex.vue
+++ b/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"
diff --git a/resources/js/views/ToDoLists/ToDoListShow.vue b/resources/js/views/ToDoLists/ToDoListShow.vue
index 0e55f4a..89ffcbe 100644
--- a/resources/js/views/ToDoLists/ToDoListShow.vue
+++ b/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">
-                <router-link :to="'/to-do-lists/' + toDoList.data.to_do_list_id" class="btn-secondary mr-2" >Edit</router-link>
+            <div>
                 <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">
-                <InputField name="name" classes="py-1" placeholder="New To Do" required @update:field="name = $event" :errors="errors" @keyup.enter="addToDo" />
-                <button class="btn-primary ml-1 mb-2 py-1" @click="addToDo">ADD</button>
+            <div class="flex items-center m-2">
+                <input type="text" v-model="name" @keydown.enter="addToDo" class="p-1 rounded-sm -ml-1">
+                <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 () {
-            // 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 = ''
-                })
-                .catch(errorRes => {
-                    console.log('Internal Error, Unable to delete contact.' + errorRes)
-                })
+            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.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)
+                })
         }
     }
 }
diff --git a/resources/svg/close.svg b/resources/svg/close.svg
new file mode 100644
index 0000000..1c7c87d
--- /dev/null
+++ b/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>

From ea6edf688c8c2f3cbe3938d92ab6b5a0e49cd227 Mon Sep 17 00:00:00 2001
From: Romulus21 <romain@delanoe.me>
Date: Sat, 2 May 2020 16:24:24 +0200
Subject: [PATCH 2/2] refact todo display and edit option

---
 resources/js/views/ToDoLists/ToDo.vue         | 73 +++++++++++++++++++
 resources/js/views/ToDoLists/ToDoListShow.vue | 23 +++---
 2 files changed, 87 insertions(+), 9 deletions(-)
 create mode 100644 resources/js/views/ToDoLists/ToDo.vue

diff --git a/resources/js/views/ToDoLists/ToDo.vue b/resources/js/views/ToDoLists/ToDo.vue
new file mode 100644
index 0000000..d8574c7
--- /dev/null
+++ b/resources/js/views/ToDoLists/ToDo.vue
@@ -0,0 +1,73 @@
+<template>
+    <div v-if="!edit" class="flex items-center flex-1 todo">
+        <span v-bind:class="{ 'line-through' : checked }" class="border border-transparent flex-1 pl-1">{{ name }}</span>
+        <span @click="edit = !edit" >
+            <svg-vue icon="edit" class="edit-icon w-4 block cursor-pointer mx-2" />
+        </span>
+    </div>
+    <div v-else class="flex items-center flex-1">
+        <input type="text"
+               v-model="name"
+               @keypress.enter="updateToDo"
+               class="flex-1 rounded-sm border border-orange-600 pl-1">
+        <span @click="edit = !edit">
+            <svg-vue icon="close"  class="inline w-4 fill-current cursor-pointer mx-2" />
+        </span>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'ToDo',
+    props: {
+        name: {
+            type: String,
+            required: true
+        },
+        checked: {
+            type: Number,
+            default: null,
+        },
+        idList: {
+            type: Number,
+            required: true
+        },
+        idToDo: {
+            type: Number,
+            required: true
+        }
+    },
+    data () {
+        return {
+            edit: false,
+        }
+    },
+    methods: {
+        updateToDo: function () {
+            // eslint-disable-next-line no-undef
+            axios.patch('/api/to-do-lists/' + this.idList + '/to-do/' + this.idToDo, {name: this.name })
+                .then(() => {
+                    this.edit = false
+                    //this.toDoList.data.attributes.data.name = this.listName
+                })
+                .catch(errorRes => {
+                    console.log('Internal Error, Unable to delete list.' + errorRes)
+                })
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+    .edit-icon {
+        opacity: 0;
+        transition: opacity 0.2s;
+    }
+
+    .todo:hover .edit-icon {
+        opacity: 1;
+        transition: opacity 0.2s;
+    }
+
+</style>
diff --git a/resources/js/views/ToDoLists/ToDoListShow.vue b/resources/js/views/ToDoLists/ToDoListShow.vue
index 89ffcbe..4a28c8c 100644
--- a/resources/js/views/ToDoLists/ToDoListShow.vue
+++ b/resources/js/views/ToDoLists/ToDoListShow.vue
@@ -40,10 +40,11 @@
                     class='drag-el todo flex justify-between items-center bg-white rounded-sm mb-1 px-2 py-1' >
                     <div class="flex flex-1">
                         <svg-vue icon="draggable" class="w-4 block mr-2 cursor-move" />
-                        <span v-bind:class="{ 'line-through' : toDo.data.attributes.data.checked_at }">{{ toDo.data.attributes.data.name }}</span>
-                    </div>
-                    <div class="flex">
-                        <svg-vue icon="edit" @click="edit = !edit" class="edit-icon z-10 w-4 block cursor-pointer mr-1" />
+                        <ToDo :name="toDo.data.attributes.data.name"
+                              :checked="toDo.data.attributes.data.checked_at"
+                              :id-list="toDoList.data.to_do_list_id"
+                              :id-to-do="toDo.data.to_do_id"
+                              class="flex-1 bg-blue" />
                         <input type="checkbox" :checked="toDo.data.attributes.data.checked_at" @click="checked(toDo, index)">
                         <span @click="deleteToDo(toDo, index)" class="cursor-pointer ml-2 font-bold">X</span>
                     </div>
@@ -51,7 +52,7 @@
 
             </ul>
             <div class="flex items-center m-2">
-                <input type="text" v-model="name" @keydown.enter="addToDo" class="p-1 rounded-sm -ml-1">
+                <input type="text" v-model="toDoName" @keydown.enter="addToDo" class="p-1 rounded-sm -ml-1">
                 <button class="btn-primary ml-1 py-1" @click="addToDo">ADD</button>
             </div>
         </div>
@@ -59,16 +60,20 @@
 </template>
 
 <script>
+import ToDo from './ToDo'
 //https://learnvue.co/2020/01/how-to-add-drag-and-drop-to-your-vuejs-project/
 //https://jsfiddle.net/jf9nrtds/
 
 export default {
     name: 'ToDoListShow',
+    components: {
+        ToDo
+    },
     data () {
         return {
             toDoList: null,
             loading: true,
-            name: '',
+            toDoName: '',
             errors: null,
             modal: false,
             listName: '',
@@ -121,11 +126,11 @@ export default {
             })
         },
         addToDo: function () {
-            if(this.name.length >= 3) {
+            if(this.toDoName.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})
+                axios.post('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do', {name: this.toDoName})
                     .then(res => {
-                        this.name = ''
+                        this.toDoName = ''
                         this.toDoList.data.attributes.data.to_dos.data.push(res.data)
                     })
                     .catch(errorRes => {