Merge pull request #2849 from brkcvn/drag

Sortable development for items in Document pages

package-lock.json

@@ -43,7 +43,8 @@
                 "vue-flatpickr-component": "^8.1.3",
                 "vue-router": "^3.1.3",
                 "vue2-editor": "^2.10.3",
-                "vue2-transitions": "^0.3.0"
+                "vue2-transitions": "^0.3.0",
+                "vuedraggable": "^2.24.3"
             },
             "devDependencies": {
                 "@babel/core": "^7.15.5",
@@ -23415,6 +23416,11 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/sortablejs": {
+            "version": "1.10.2",
+            "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
+            "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
+        },
         "node_modules/source-list-map": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -25861,6 +25867,14 @@
             "resolved": "https://registry.npmjs.org/vue2-transitions/-/vue2-transitions-0.3.0.tgz",
             "integrity": "sha512-m1ad8K8kufqiEhj5gXHkkqOioI5sW0FaMbRiO0Tv2WFfGbO2eIKrfkFiO3HPQtMJboimaLCN4p/zL81clLbG4w=="
         },
+        "node_modules/vuedraggable": {
+            "version": "2.24.3",
+            "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
+            "integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
+            "dependencies": {
+                "sortablejs": "1.10.2"
+            }
+        },
         "node_modules/watchpack": {
             "version": "2.4.0",
             "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -46042,6 +46056,11 @@
                 "is-plain-obj": "^1.0.0"
             }
         },
+        "sortablejs": {
+            "version": "1.10.2",
+            "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
+            "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
+        },
         "source-list-map": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -47994,6 +48013,14 @@
             "resolved": "https://registry.npmjs.org/vue2-transitions/-/vue2-transitions-0.3.0.tgz",
             "integrity": "sha512-m1ad8K8kufqiEhj5gXHkkqOioI5sW0FaMbRiO0Tv2WFfGbO2eIKrfkFiO3HPQtMJboimaLCN4p/zL81clLbG4w=="
         },
+        "vuedraggable": {
+            "version": "2.24.3",
+            "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
+            "integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
+            "requires": {
+                "sortablejs": "1.10.2"
+            }
+        },
         "watchpack": {
             "version": "2.4.0",
             "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",

package.json

@@ -47,7 +47,8 @@
         "vue-flatpickr-component": "^8.1.3",
         "vue-router": "^3.1.3",
         "vue2-editor": "^2.10.3",
-        "vue2-transitions": "^0.3.0"
+        "vue2-transitions": "^0.3.0",
+        "vuedraggable": "^2.24.3"
     },
     "devDependencies": {
         "@babel/core": "^7.15.5",

resources/assets/js/views/common/documents.js

@@ -14,6 +14,7 @@ import Global from './../../mixins/global';
 
 import Form from './../../plugins/form';
 import BulkAction from './../../plugins/bulk-action';
+import draggable from 'vuedraggable';
 
 // plugin setup
 Vue.use(DashboardPlugin);
@@ -25,6 +26,10 @@ const app = new Vue({
         Global
     ],
 
+    components: {
+        draggable
+    },
+
     data: function () {
         return {
             form: new Form('document'),
@@ -77,6 +82,7 @@ const app = new Vue({
             ],
             email_template: false,
             send_to: false,
+            drag: false
         }
     },
 
@@ -111,6 +117,16 @@ const app = new Vue({
     },
 
     methods: {
+        onEnd() {
+            this.dragging = false;
+        },
+
+        onUpdate(event) {
+            let fromIndex = this.form.items.indexOf(this.form.items[event.oldIndex]);
+            let element = this.form.items.splice(fromIndex, 1)[0];
+            this.form.items.splice(event.newIndex, 0, element);  
+        },
+
         onRefFocus(ref) {
             let index = this.form.items.length - 1;
             

resources/views/components/documents/form/line-item.blade.php

@@ -1,4 +1,5 @@
-<tr v-for="(row, index) in items" :index="index">
+<tbody is="draggable" tag="tbody" handle=".handle" @start="dragging = true" @end="dragging = false" @update="onUpdate">
+    <tr v-for="(row, index) in items" :index="index">
         @stack('name_td_start')
 
         <td class="border-r-0 border-b-0 p-0"
@@ -19,7 +20,9 @@
                     <tr>
                         @stack('move_td_start')
                         <td class="align-middle border-b-0 flex items-center justify-center" style="width:24px; height:100px; color: #8898aa;">
+                            <div class="handle mt-2 hidden lg:block cursor-move">
                                 <span class="w-6 material-icons">list</span>
+                            </div>
                         </td>
                         @stack('move_td_end')
 
@@ -27,7 +30,6 @@
 
                         @if (! $hideItems || (! $hideItemName && ! $hideItemDescription))
                             @stack('name_td_start')
-
                             <td class="px-3 py-3 ltr:pl-2 rtl:pr-2 ltr:text-left rtl:text-right align-middle border-b-0 name">
                                 @if (! $hideItemName)
                                     <span class="flex items-center text-sm" tabindex="0" v-if="row.item_id">
@@ -424,4 +426,5 @@
         </td>
 
         @stack('name_td_end')
-</tr>
+    </tr>
+</tbody>