PMCORE-3917:Custom List Re-order drag and drop

Drag

handle events

remove line

CR

resources/assets/js/admin/settings/customCaseList/CaseListSketch.vue

@@ -285,6 +285,7 @@
                                             ></i>
                                         </b-button>
                                     </div>
+                                    <div slot="sort"><i class="fa fa-align-justify handle"></i></div>
                                 </v-client-table>
                             </b-form-group>
                         </b-col>
@@ -307,13 +308,17 @@
 </template>
 <script>
 import Multiselect from "vue-multiselect";
+import draggable from "vuedraggable";
+import eventBus from "../../../home/EventBus/eventBus";
 import Api from "./Api/CaseList";
 import IconPicker from "../../../components/iconPicker/IconPicker.vue";
 import ModalPreview from "../../Modals/ModalPreview.vue";
+import _ from 'lodash';
 
 export default {
     name: "CaseListSketh",
     components: {
+        draggable,
         Multiselect,
         IconPicker,
         IconPicker,
@@ -322,6 +327,8 @@ export default {
     props: ["params", "module"],
     data() {
         return {
+            enabled: true,
+            dragging: false,
             icon: "fas fa-user-cog",
             isLoading: false,
             isButtonDisabled: false,
@@ -349,6 +356,7 @@ export default {
                 texts: {
                     count: "",
                 },
+                isDraggable: false,
             },
             dataCaseList: [],
             columnsCaseList: [
@@ -359,6 +367,7 @@ export default {
                 "typeSearch",
                 "enableFilter",
                 "action",
+                "sort",
             ],
             caseListOptions: {
                 headings: {
@@ -368,6 +377,7 @@ export default {
                     typeSearch: this.$i18n.t("ID_TYPE_OF_SEARCHING"),
                     enableFilter: this.$i18n.t("ID_ENABLE_SEARCH_FILTER"),
                     action: "",
+                    sort: "",
                 },
                 filterable: false,
                 perPage: 1000,
@@ -376,6 +386,7 @@ export default {
                 texts: {
                     count: "",
                 },
+                isDraggable: true,
             },
             defaultCaseList: [],
             isValidName: null,
@@ -390,10 +401,15 @@ export default {
         },
     },
     mounted() {
+        let that = this;
         this.getDefaultColumns(this.module.key);
         if(this.params.id) {
             this.editMode();
         }
+
+        eventBus.$on("sort-case-list", (data) => {
+            that.sortCaseList(data);
+        });
     },
     methods: {
         /**
@@ -745,6 +761,12 @@ export default {
         disabledField(field){
             const fields = [ "due_date" , "process_category" , "process_name" , "priority" ];
             return !(fields.indexOf(field) == -1);
+        },
+        sortCaseList(data) {
+            let auxList = _.cloneDeep(this.dataCaseList);
+            let aux = auxList.splice(data.oldIndex, 1);
+            auxList.splice(data.newIndex, 0, aux[0]);
+            this.dataCaseList = auxList;
         }
     },
 };

resources/assets/js/admin/settings/customCaseList/main.js

@@ -4,6 +4,7 @@ import VueSidebarMenu from "vue-sidebar-menu";
 import VueI18n from 'vue-i18n';
 import { BootstrapVue } from 'bootstrap-vue';
 import { ServerTable, Event, ClientTable} from 'vue-tables-2';
+import VtTableBody from '../../../components/vuetable/extends/VtTableBody';
 import "@fortawesome/fontawesome-free/css/all.css";
 import 'bootstrap/dist/css/bootstrap-grid.css';
 import 'bootstrap/dist/css/bootstrap.min.css'
@@ -18,7 +19,9 @@ Vue.use(VueSidebarMenu);
 Vue.use(BootstrapVue);
 Vue.use(VueI18n);
 Vue.use(ServerTable, {}, false, 'bootstrap3', {});
-Vue.use(ClientTable, {}, false, 'bootstrap3', {});
+Vue.use(ClientTable, {}, false, 'bootstrap3', {
+    tableBody: VtTableBody
+});
 window.ProcessMaker = {
     apiClient: require('axios')
 };

resources/assets/js/components/vuetable/extends/VtTableBody.vue

@@ -0,0 +1,84 @@
+<template>
+    <draggable
+        tag="tbody"
+        v-if="props.opts.isDraggable"
+        v-model="props.data"
+        handle=".handle"
+        @end="checkMove"
+        @start="dragging = true"
+    >
+        <vnodes :vnodes="props.slots.prependBody"/>
+        <vt-no-results-row v-if="props.data.length === 0"/>
+            <table-rows v-for="(row,index) in props.data"
+                :row="row"
+                :index="props.initialIndex + index + 1"
+                :renderChildRow="props.hasChildRow && props.openChildRows.includes(row[props.uniqueRowId])"
+                :key="index"
+            />
+
+        <vnodes :vnodes="props.slots.appendBody"/>
+    </draggable>
+    <tbody v-else>
+        <vnodes :vnodes="props.slots.prependBody"/>
+        <vt-no-results-row v-if="props.data.length === 0"/>
+        <table-rows v-for="(row,index) in props.data"
+            :row="row"
+            :index="props.initialIndex + index + 1"
+            :renderChildRow="props.hasChildRow && props.openChildRows.includes(row[props.uniqueRowId])"
+            :key="index"
+        />
+        <vnodes :vnodes="props.slots.appendBody"/>
+    </tbody>
+</template>
+
+<script>
+import draggable from "vuedraggable";
+import eventBus from "../../../home/EventBus/eventBus";
+import VtNoResultsRow from 'vue-tables-2/compiled/components/VtNoResultsRow'
+import VtTableRow from 'vue-tables-2/compiled/components/VtTableRow'
+import VtChildRow from 'vue-tables-2/compiled/components/VtChildRow'
+
+export default {
+    name: "MyTableBody",
+    props: ['props'],
+    components: {
+        draggable,
+        VtNoResultsRow,
+        VtTableRow,
+        VtChildRow,
+        vnodes: {
+            functional: true,
+                render: (h, ctx) => ctx.props.vnodes
+            },
+        TableRows: {
+            functional: true,
+            render(h, ctx) {
+                let props = ctx.data.attrs,
+                    data = [
+                    h('vt-table-row', {
+                        props
+                    })
+                ];
+                if (props.renderChildRow) {
+                    data.push(h('vt-child-row', {
+                        props
+                    }))
+                }
+                return data
+            }
+        }
+    },
+    data() {
+        return {
+            enabled: true,
+            dragging: false,
+        }
+    },
+    methods: {
+        checkMove (e) {
+            this.dragging = false;
+            eventBus.$emit("sort-case-list", e);
+        }
+    }
+}
+</script>