contract template obligation sequence update

resources/js/user/pages/contract-template-obligations/TableModal.vue

@@ -37,8 +37,8 @@
               <th>Actions</th>
             </tr>
           </thead>
-          <tbody>
-            <tr v-if="contract_template_obligation_list.data" v-for="(contract, $index) in contract_template_obligation_list.data" :key="$index">
+          <draggable v-model="drag_drop_contract_template_obligation_list" @change="onUpdateSequence()" tag="tbody">
+            <tr class="move-cursor" v-if="drag_drop_contract_template_obligation_list" v-for="(contract, $index) in drag_drop_contract_template_obligation_list" :key="$index">
               <td>{{ $index + 1 }}</td>
               <td>
                 <div><b>Name</b>: {{ contract.name }}</div>
@@ -73,7 +73,7 @@
                 <span v-if="!loading">Empty</span>
               </td>
             </tr>
-          </tbody>
+          </draggable>
           <tfoot v-if="contract_template_obligation_list.page">
             <paginate-nav
               :colspan="colspan"
@@ -115,6 +115,7 @@
 <script type="text/javascript">
   import PaginateNav from '../../components/paginations/NextPerviousPagination';
   import ContractTemplateObligationFormModal from './FormModal';
+  import Draggable from 'vuedraggable';
 
   export default {
     props: {
@@ -123,7 +124,8 @@
     },
     components: {
       PaginateNav,
-      ContractTemplateObligationFormModal
+      ContractTemplateObligationFormModal,
+      Draggable
     },
     data() {
         let vm = this;
@@ -135,6 +137,7 @@
           colspan: 7,
           loading: true,
           contract_template_obligation_list: [],
+          drag_drop_contract_template_obligation_list: [],
           selected_contract_template_obligation : {},
           mode: ''
         }
@@ -177,7 +180,11 @@
         General.tableCall(url, vm.form).then(response => {
           vm.loading = false;
           vm.contract_template_obligation_list = response;
+          vm.drag_drop_contract_template_obligation_list = [];
           vm.convertStatus();
+          vm.contract_template_obligation_list.data.forEach(function(element, index) {
+            vm.drag_drop_contract_template_obligation_list.push(element);
+          });
         });
       },
       convertStatus() {
@@ -191,23 +198,29 @@
         vm.form.page = General.getStringParam('page', url);
         vm.tableCall('contract-template/list');
       },
-      onSubmit() {
+      onUpdateSequence() {
         let vm = this;
-        const l = vm.loader
-        vm[l] = !vm[l];
+        let form = new Form({
+          contract_template_obligation_id: []
+        });
+        vm.drag_drop_contract_template_obligation_list.forEach(function(element, index) {
+          form.contract_template_obligation_id.push(element.hash_id);
+        });
+
         let method = 'put';
-        let url = 'seller-shop-product/featured';
-        General.onComplete(url, vm.form, method, true)
+        let url = 'contract-template-obligation/update-batch-sequence';
+        General.onComplete(url, form, method)
         .then(data => {
-          vm[l] = false
-          vm.loader = null;
-          vm.$bvModal.hide('create-seller-shop-product-featured-form-modal');
-          vm.$emit('refresh');
-          General.toastedMessage('edit', 'Seller Shop Product Featured', data.data.name);
+          General.toastedMessage('edit', 'Contract Template Obligation Sequence', data.data.hash_id);
+          vm.getContractTemplateObligationList();
         })
         .catch(function (error) {
-            vm[l] = false
-            vm.loader = null;
+            let error_mesage = General.errorData(error);
+            Vue.toasted.error(error_mesage, {
+                icon : {
+                    name : 'close',
+                }
+            }).goAway(3500);
         });
       },
     }

resources/js/user/utilities/general.js

@@ -103,7 +103,7 @@ module.exports.onComplete = function(url, form, method) {
 			resolve(data);
 		})
 		.catch(error => {
-			reject(false);
+			reject(error);
 		});
 	});
 };