UX: make placeholder in template notes sortable

Author: rainu

README.md

@@ -65,6 +65,7 @@ For detailed explanation on how things work, check out [Nuxt.js docs](https://nu
 ## Changelog
 
 ### 0.9.17
+* UX: make placeholder in template notes sortable
 * abort creation/edit of note while typing [ESC]
 * autofocus the first text element on copy dialog for template notes
 * fix crash when try to create new placeholder

components/note/form/Template.vue

@@ -9,22 +9,28 @@
 
       <v-list dense v-if="note.placeholder.length > 0">
         <v-subheader class="pa-0">{{$t('note.template.placeholder.title')}}</v-subheader>
-        <v-list-item v-for="placeholder of note.placeholder" :key="placeholder.id" class="pa-0">
-          <v-list-item-content>
-            <v-list-item-title>
-              <v-btn block @click="insertPlaceholder(placeholder.name)" >{{placeholder.name}}</v-btn>
-            </v-list-item-title>
-          </v-list-item-content>
+        <draggable v-model="note.placeholder" handle=".handle">
+          <v-list-item v-for="placeholder of note.placeholder" :key="placeholder.id" class="pa-0">
+            <v-list-item-content>
+              <v-list-item-title>
+                <v-btn block @click="insertPlaceholder(placeholder.name)">{{placeholder.name}}
+                </v-btn>
+              </v-list-item-title>
+            </v-list-item-content>
 
-          <v-list-item-icon>
-            <v-btn icon class="error mr-2" @click="deletePlaceholder(placeholder.id)">
-              <v-icon>delete</v-icon>
-            </v-btn>
-            <v-btn icon class="primary" @click="editPlaceholder(placeholder)">
-              <v-icon>edit</v-icon>
-            </v-btn>
-          </v-list-item-icon>
-        </v-list-item>
+            <v-list-item-icon>
+              <v-btn icon class="handle mr-2">
+                <v-icon>drag_indicator</v-icon>
+              </v-btn>
+              <v-btn icon class="error mr-2" @click="deletePlaceholder(placeholder.id)">
+                <v-icon>delete</v-icon>
+              </v-btn>
+              <v-btn icon class="primary" @click="editPlaceholder(placeholder)">
+                <v-icon>edit</v-icon>
+              </v-btn>
+            </v-list-item-icon>
+          </v-list-item>
+        </draggable>
       </v-list>
 
       <v-row>
@@ -411,4 +417,7 @@
 </script>
 
 <style scoped>
+  .handle {
+    cursor: grab;
+  }
 </style>

nuxt.config.js

@@ -80,7 +80,7 @@ export default {
   plugins: [
     '~/plugins/localStore',
     '~/plugins/i18n',
-    '~/plugins/shortkey',
+    '~/plugins/globalComponents',
     '~/plugins/init',
     '~/plugins/style',
     '~/plugins/notification',

plugins/shortkey.js renamed to plugins/globalComponents.js

@@ -1,9 +1,6 @@
 import Vue from 'vue'
-
 import shortkey from 'vue-shortkey'
+import draggable from 'vuedraggable'
 
 Vue.use(shortkey)
-
-export default ({ app, store }) => {
-
-}
+Vue.component('draggable', draggable)