todo & memo style

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>

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>
 

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="memo-style p-4 pb-3 -mb-1 bg-white" v-html="memoMarkdown"></div>
-                <div class="bg-orange-400 rounded mt-2 px-2 py-1 flex justify-end">@last update {{ memo.last_updated }}</div>
+                <div class="bg-orange-400 px-2 py-1 flex justify-end">@last update {{ memo.last_updated }}</div>
             </div>
         </div>
     </div>

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>

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>

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";
 //

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;
+    }
+}