From d56857bf43e76d5491f06a5f69b7ca0f08aec3ab Mon Sep 17 00:00:00 2001
From: Romulus21 <romain@delanoe.me>
Date: Thu, 30 Apr 2020 23:36:40 +0200
Subject: [PATCH] todo & memo style

---
 resources/js/views/Memo/MemoCreate.vue    |  6 +--
 resources/js/views/Memo/MemoEdit.vue      |  7 +--
 resources/js/views/Memo/MemoShow.vue      |  4 +-
 resources/js/views/ToDoLists/ToDo.vue     |  2 +-
 resources/js/views/ToDoLists/ToDoList.vue | 33 ++++++++++----
 resources/sass/app.scss                   |  2 +-
 resources/sass/pages/memos.scss           | 55 +++++++++++++++++++++++
 7 files changed, 87 insertions(+), 22 deletions(-)

diff --git a/resources/js/views/Memo/MemoCreate.vue b/resources/js/views/Memo/MemoCreate.vue
index 1d05aa4..b4016cc 100755
--- a/resources/js/views/Memo/MemoCreate.vue
+++ b/resources/js/views/Memo/MemoCreate.vue
@@ -2,15 +2,11 @@
     <div class="p-4">
         <div class="flex justify-between flex-center mb-4">
             <router-link to="/memos/" class="btn">Back</router-link>
-            <button @click="$router.back()" class="btn-alert">Cancel</button>
+            <button class="btn-primary">Add New Memo</button>
         </div>
         <form @submit.prevent="submitForm">
             <InputField name="name" label="Title" placeholder="Your Title" required @update:field="form.name = $event" :errors="errors" />
             <TextAreaField class="" name="memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" />
-
-            <div class="flex justify-end mt-2">
-                <button class="btn-primary">Add New Memo</button>
-            </div>
         </form>
     </div>
 </template>
diff --git a/resources/js/views/Memo/MemoEdit.vue b/resources/js/views/Memo/MemoEdit.vue
index b8ce944..735b641 100755
--- a/resources/js/views/Memo/MemoEdit.vue
+++ b/resources/js/views/Memo/MemoEdit.vue
@@ -14,16 +14,13 @@
                 :alt="form.name"/>
         </div>
         <div class="p-4">
+            <form @submit.prevent="submitForm">
             <div class="flex justify-between mb-4">
                 <router-link :to="'/memos/' + this.$route.params.id" class="btn">Back</router-link>
+                <button class="btn-primary">Save</button>
             </div>
-            <form @submit.prevent="submitForm">
                 <InputField name="name" :data="form.name" label="Title" placeholder="Your Title" required @update:field="form.name = $event" :errors="errors" />
                 <TextAreaField class="memo-text-area" name="memo" :data="form.memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" />
-                <div class="flex justify-end mt-2">
-                    <button class="btn-primary">Save</button>
-                </div>
-
             </form>
         </div>
 
diff --git a/resources/js/views/Memo/MemoShow.vue b/resources/js/views/Memo/MemoShow.vue
index d7fbf59..ee373f5 100755
--- a/resources/js/views/Memo/MemoShow.vue
+++ b/resources/js/views/Memo/MemoShow.vue
@@ -30,8 +30,8 @@
     <!--           <TagBox :memo="memo" />-->
             <div class="p-4">
 
-                <p class="pt-2" v-html="memoMarkdown"></p>
-                <div class="bg-orange-400 rounded mt-2 px-2 py-1 flex justify-end">@last update {{ memo.last_updated }}</div>
+                <div class="memo-style p-4 pb-3 -mb-1 bg-white" v-html="memoMarkdown"></div>
+                <div class="bg-orange-400 px-2 py-1 flex justify-end">@last update {{ memo.last_updated }}</div>
             </div>
         </div>
     </div>
diff --git a/resources/js/views/ToDoLists/ToDo.vue b/resources/js/views/ToDoLists/ToDo.vue
index a41da9f..ded8bd2 100644
--- a/resources/js/views/ToDoLists/ToDo.vue
+++ b/resources/js/views/ToDoLists/ToDo.vue
@@ -1,7 +1,7 @@
 <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">
+        <div class="flex flex-1">
             <svg-vue icon="draggable" class="w-4 block mr-2 cursor-move" />
             {{ toDo.data.attributes.data.name }}
         </div>
diff --git a/resources/js/views/ToDoLists/ToDoList.vue b/resources/js/views/ToDoLists/ToDoList.vue
index 7135fcc..bfbd72e 100644
--- a/resources/js/views/ToDoLists/ToDoList.vue
+++ b/resources/js/views/ToDoLists/ToDoList.vue
@@ -3,7 +3,11 @@
         <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">
+                <ul class="draggable-list drop-zone"
+                    @drop='onDrop($event, toDoList)'
+                    @dragover.prevent
+                    @dragenter.prevent
+                >
                     <div v-if="toDoList.data.attributes.data.to_dos.to_dos_count < 1">
                         ------- no to Do -------
                     </div>
@@ -11,7 +15,11 @@
                           v-for="(toDo, indexToDo) in toDoList.data.attributes.data.to_dos.data"
                           :key="indexToDo"
                           :toDo="toDo"
-                          :position="indexToDo" />
+                          :position="indexToDo"
+                          draggable
+                          @dragstart='startDrag($event, toDo)'
+                          class='drag-el'
+                          />
                 </ul>
             </div>
             <div class="flex items-center mt-2">
@@ -25,6 +33,7 @@
 <script>
 import InputField from '../../components/InputField'
 import ToDo from './ToDo'
+//https://learnvue.co/2020/01/how-to-add-drag-and-drop-to-your-vuejs-project/
 
 export default {
     name: 'ToDoList',
@@ -35,7 +44,7 @@ export default {
         return {
             name: '',
             errors: null,
-            list: null,
+            dragStartIndex: null,
             edit: false,
         }
     },
@@ -45,10 +54,6 @@ export default {
             require: true
         }
     },
-    mounted() {
-        this.list = this.$el.querySelector('.draggable-list')
-        console.log(this.list)
-    },
     methods: {
         addToDo: function () {
             // eslint-disable-next-line no-undef
@@ -70,7 +75,19 @@ export default {
                 .catch(errorRes => {
                     console.log('Internal Error, Unable to delete contact.' + errorRes)
                 })
-        }
+        },
+        startDrag: (evt, item) => {
+            console.log('StartDrag', evt, item)
+            evt.dataTransfer.dropEffect = 'move'
+            evt.dataTransfer.effectAllowed = 'move'
+            evt.dataTransfer.setData('itemID', item.id)
+        },
+        onDrop (evt, list) {
+            console.log('onDrop', evt, list, this.toDoList)
+            const itemID = evt.dataTransfer.getData('itemID')
+            const item = this.toDoList.data.attributes.data.to_dos.data.find(item => item.id == itemID)
+            item.list = list
+        },
     }
 }
 </script>
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index e953642..95bd339 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -26,7 +26,7 @@
 //
 //@import "pages/auth";
 //@import "pages/users";
-//@import "pages/memos";
+@import "pages/memos";
 //@import "pages/meteo";
 //@import "pages/games";
 //
diff --git a/resources/sass/pages/memos.scss b/resources/sass/pages/memos.scss
index f5c9d45..539d21b 100644
--- a/resources/sass/pages/memos.scss
+++ b/resources/sass/pages/memos.scss
@@ -1,3 +1,4 @@
+/*
 .memo {
 
     &-list {
@@ -81,3 +82,57 @@
         width: 100%;
     }
 }
+
+*/
+
+.memo-style {
+
+    h1,
+    h2,
+    h3,
+    h4 {
+        @apply font-bold;
+    }
+
+    h1 {
+        @apply text-4xl;
+    }
+
+    h2 {
+        @apply text-3xl;
+    }
+
+    h3 {
+        @apply text-2xl;
+    }
+
+    h4 {
+        @apply text-xl;
+    }
+
+    p {
+        @apply mb-2 mt-1;
+        text-indent: 2rem;
+    }
+
+    pre,
+    code {
+        @apply bg-gray-700 text-white p-1;
+    }
+
+    pre {
+        @apply my-2;
+    }
+
+    blockquote {
+        @apply bg-gray-300 italic p-2 mx-4 my-2;
+    }
+
+    ul {
+        @apply list-disc ml-8;
+    }
+
+    ol {
+        @apply list-decimal ml-8;
+    }
+}