From 175b99d6dc3d26053d2b51dd673aaa7008df486f Mon Sep 17 00:00:00 2001
From: glovetleong <glovetleong@gmail.com>
Date: Sun, 18 Jul 2021 17:29:45 +0800
Subject: [PATCH] contract template obligation contract template dependency UI

---
 app/Http/Modules/User/ContractModule.php      |   3 -
 ...gationContractTemplateDependencyModule.php |  18 +-
 ...ractTemplateObligationDependencyModule.php |  16 +-
 .../User/ContractTemplateObligationModule.php |   6 +
 ...tractTemplateObligationDependencyCheck.php |  19 +-
 ...igationContractDependenciesTableSeeder.php |   2 +-
 .../PlumberServiceEntitiesTableSeeder.php     |   6 +-
 ...ContractTemplateObligationsTableSeeder.php |   2 +-
 resources/js/user/langs/en.js                 |   4 +-
 .../DeleteModal.vue                           |  69 +++++++
 .../FormModal.vue                             |  98 +++++++++
 .../TableModal.vue                            | 193 ++++++++++++++++++
 .../DeleteModal.vue                           |  69 +++++++
 .../FormModal.vue                             | 100 +++++++++
 .../TableModal.vue                            | 193 ++++++++++++++++++
 .../FormTable.vue                             |  61 ++++++
 .../TableModal.vue                            |  44 +++-
 resources/js/user/utilities/constants.js      |  34 +++
 resources/js/user/utilities/form.js           |   3 +
 resources/js/user/utilities/general.js        |   3 +
 20 files changed, 914 insertions(+), 29 deletions(-)
 create mode 100644 resources/js/user/pages/contract-template-obligation-contract-template-denpendencies/DeleteModal.vue
 create mode 100644 resources/js/user/pages/contract-template-obligation-contract-template-denpendencies/FormModal.vue
 create mode 100644 resources/js/user/pages/contract-template-obligation-contract-template-denpendencies/TableModal.vue
 create mode 100644 resources/js/user/pages/contract-template-obligation-denpendencies/DeleteModal.vue
 create mode 100644 resources/js/user/pages/contract-template-obligation-denpendencies/FormModal.vue
 create mode 100644 resources/js/user/pages/contract-template-obligation-denpendencies/TableModal.vue
 create mode 100644 resources/js/user/pages/contract-template-obligations/FormTable.vue

diff --git a/app/Http/Modules/User/ContractModule.php b/app/Http/Modules/User/ContractModule.php
index 3e76541..50d5865 100644
--- a/app/Http/Modules/User/ContractModule.php
+++ b/app/Http/Modules/User/ContractModule.php
@@ -178,9 +178,6 @@ class ContractModule extends BaseController
         $contract->complete_day_range = $complete_day_range ?? $contract->complete_day_range;
         $contract->update();
 
-
-
-
         // log
         ContractModule::makeLog($contract->id, 'user (' . Auth::guard('user-api')->user()->id . ') updated');
 
diff --git a/app/Http/Modules/User/ContractTemplateObligationContractTemplateDependencyModule.php b/app/Http/Modules/User/ContractTemplateObligationContractTemplateDependencyModule.php
index e0cd583..e69d5b4 100644
--- a/app/Http/Modules/User/ContractTemplateObligationContractTemplateDependencyModule.php
+++ b/app/Http/Modules/User/ContractTemplateObligationContractTemplateDependencyModule.php
@@ -11,7 +11,7 @@ use App\Http\Modules\User\ContractTemplateObligationModule;
 
 use App\Http\Rules\User\UnderCheck;
 use App\Http\Rules\User\ExistCheck;
-use App\Http\Rules\User\ContractTemplateObligationDependencyCheck;
+use App\Http\Rules\User\ContractTemplateObligationContractTemplateDependencyCheck;
 
 use App\Http\Helpers\General;
 use App\Http\Helpers\Hasher;
@@ -33,7 +33,9 @@ class ContractTemplateObligationContractTemplateDependencyModule extends BaseCon
     public static function list(Request $request)
     {
     	General::storeCachePerviousQuery($request->query(), 'contract_template_obligation_contract_template_dependency_query');
-     
+        
+        $contract_template_obligation_hash_id = $contract_template_obligation_id = $request->get('contract_template_obligation_id', []);
+
         $name = $request->get('name', null);
         $status = $request->get('status', []);
         $page = $request->get('page', null);
@@ -41,7 +43,12 @@ class ContractTemplateObligationContractTemplateDependencyModule extends BaseCon
 
         $query = ContractTemplateObligationContractTemplateDependency::query();
 
-         if (strlen($name) > 0) {
+        if (!empty($contract_template_obligation_id)) {
+            $contract_template_obligation_id = Hasher::decodeArray('contract_template_obligations', $contract_template_obligation_id);
+            $query->whereIn('contract_template_obligation_id', $contract_template_obligation_id);
+        }
+        
+        if (strlen($name) > 0) {
             $query->where('name', 'like', '%' . $name . '%');
         }
 
@@ -54,6 +61,7 @@ class ContractTemplateObligationContractTemplateDependencyModule extends BaseCon
         $query->orderBy('id', 'desc');
 
         $params = [
+            'contract_template_obligation_id' => $contract_template_obligation_hash_id,
             'name' => $name,
             'status' => $status,
             'page' => $page
@@ -155,12 +163,12 @@ class ContractTemplateObligationContractTemplateDependencyModule extends BaseCon
                     'required', 
                     new UnderCheck('contract_template_obligation'), 
                     new ExistCheck('contract_template_obligation'),
-                    // new ContractTemplateObligationDependencyCheck($data['depend_contract_template_obligation_id'] ?? [])
                 ],
                 'depend_contract_template_id' => [
                     'required', 
                     new UnderCheck('contract_template'), 
-                    new ExistCheck('contract_template')
+                    new ExistCheck('contract_template'),
+                    // new ContractTemplateObligationContractTemplateDependencyCheck($data['contract_template_obligation_id'] ?? [])
                 ],
             ];
         }
diff --git a/app/Http/Modules/User/ContractTemplateObligationDependencyModule.php b/app/Http/Modules/User/ContractTemplateObligationDependencyModule.php
index f7ab1f5..ce89f84 100644
--- a/app/Http/Modules/User/ContractTemplateObligationDependencyModule.php
+++ b/app/Http/Modules/User/ContractTemplateObligationDependencyModule.php
@@ -32,7 +32,9 @@ class ContractTemplateObligationDependencyModule extends BaseController
     public static function list(Request $request)
     {
     	General::storeCachePerviousQuery($request->query(), 'contract_template_obligation_dependency_query');
-     
+
+        $contract_template_obligation_hash_id = $contract_template_obligation_id = $request->get('contract_template_obligation_id', []);
+
         $name = $request->get('name', null);
         $status = $request->get('status', []);
         $page = $request->get('page', null);
@@ -40,7 +42,12 @@ class ContractTemplateObligationDependencyModule extends BaseController
 
         $query = ContractTemplateObligationDependency::query();
 
-         if (strlen($name) > 0) {
+        if (!empty($contract_template_obligation_id)) {
+            $contract_template_obligation_id = Hasher::decodeArray('contract_template_obligations', $contract_template_obligation_id);
+            $query->whereIn('contract_template_obligation_id', $contract_template_obligation_id);
+        }
+
+        if (strlen($name) > 0) {
             $query->where('name', 'like', '%' . $name . '%');
         }
 
@@ -53,6 +60,7 @@ class ContractTemplateObligationDependencyModule extends BaseController
         $query->orderBy('id', 'desc');
 
         $params = [
+            'contract_template_obligation_id' => $contract_template_obligation_hash_id,
             'name' => $name,
             'status' => $status,
             'page' => $page
@@ -154,12 +162,12 @@ class ContractTemplateObligationDependencyModule extends BaseController
                     'required', 
                     new UnderCheck('contract_template_obligation'), 
                     new ExistCheck('contract_template_obligation'),
-                    new ContractTemplateObligationDependencyCheck($data['depend_contract_template_obligation_id'] ?? [])
                 ],
                 'depend_contract_template_obligation_id' => [
                     'required', 
                     new UnderCheck('contract_template_obligation'), 
-                    new ExistCheck('contract_template_obligation')
+                    new ExistCheck('contract_template_obligation'),
+                    new ContractTemplateObligationDependencyCheck($data['contract_template_obligation_id'] ?? [])
                 ],
             ];
         }
diff --git a/app/Http/Modules/User/ContractTemplateObligationModule.php b/app/Http/Modules/User/ContractTemplateObligationModule.php
index cafbbba..7cd1d6e 100644
--- a/app/Http/Modules/User/ContractTemplateObligationModule.php
+++ b/app/Http/Modules/User/ContractTemplateObligationModule.php
@@ -31,6 +31,7 @@ class ContractTemplateObligationModule extends BaseController
     {
     	General::storeCachePerviousQuery($request->query(), 'contract_template_obligation_query');
         
+        $not_hash_id = $not_id = $request->get('not_id', []);
         $contract_template_hash_id = $contract_template_id = $request->get('contract_template_id', []);
 
         $name = $request->get('name', null);
@@ -40,6 +41,11 @@ class ContractTemplateObligationModule extends BaseController
 
         $query = ContractTemplateObligation::query();
 
+        if (!empty($not_id)) {
+            $not_id = Hasher::decodeArray('contract_template_obligations', $not_id);
+            $query->whereNotIn('id', $not_id);
+        }
+
         if (!empty($contract_template_id)) {
             $contract_template_id = Hasher::decodeArray('contract_templates', $contract_template_id);
             $query->whereIn('contract_template_id', $contract_template_id);
diff --git a/app/Http/Rules/User/ContractTemplateObligationDependencyCheck.php b/app/Http/Rules/User/ContractTemplateObligationDependencyCheck.php
index 0a9df79..80a0552 100644
--- a/app/Http/Rules/User/ContractTemplateObligationDependencyCheck.php
+++ b/app/Http/Rules/User/ContractTemplateObligationDependencyCheck.php
@@ -17,11 +17,11 @@ class ContractTemplateObligationDependencyCheck implements Rule
      * @return void
      */
 
-    private $depend_template_contract_obligation_id;
+    private $contract_template_obligation_id;
 
-    public function __construct($depend_template_contract_obligation_id = '')
+    public function __construct($contract_template_obligation_id = '')
     {
-        $this->depend_template_contract_obligation_id = $depend_template_contract_obligation_id;
+        $this->contract_template_obligation_id = $contract_template_obligation_id;
     }
 
     /**
@@ -36,16 +36,17 @@ class ContractTemplateObligationDependencyCheck implements Rule
         $this->attribute = $attribute;
         $value = is_array($value) ? $value : [$value];
 
-        if ($value[0] != $this->depend_template_contract_obligation_id[0]) {
-            $contract_template_obligation_id = Hasher::decode('contract_template_obligations', $value[0]);
+        if ($value[0] != $this->contract_template_obligation_id[0]) {
+            $contract_template_obligation_id = Hasher::decode('contract_template_obligations', $this->contract_template_obligation_id[0]);
             $contract_template_obligation = ContractTemplateObligation::find($contract_template_obligation_id);
-            $depend_contract_template_obligation_id = Hasher::decode('contract_template_obligations', $this->depend_template_contract_obligation_id[0]);
+
+            $depend_contract_template_obligation_id = Hasher::decode('contract_template_obligations', $value[0]);
             $depend_contract_template_obligation = ContractTemplateObligation::find($depend_contract_template_obligation_id);
 
-            $contract_template_obligation_dependency_structure = $contract_template_obligation->getContractTemplateObligationDependencyStructure([$contract_template_obligation->hash_id]);
+            $contract_template_obligation_dependency_structure = $depend_contract_template_obligation->getContractTemplateObligationDependencyStructure([$depend_contract_template_obligation->hash_id]);
 
-            if (in_array($depend_contract_template_obligation->hash_id, $contract_template_obligation_dependency_structure)) {
-                // return false;
+            if (in_array($contract_template_obligation->hash_id, $contract_template_obligation_dependency_structure)) {
+                return false;
             }
 
             return true;
diff --git a/database/seeders/PlumberService/PlumberServiceContractTemplateObligationContractDependenciesTableSeeder.php b/database/seeders/PlumberService/PlumberServiceContractTemplateObligationContractDependenciesTableSeeder.php
index 8167217..4b6c173 100644
--- a/database/seeders/PlumberService/PlumberServiceContractTemplateObligationContractDependenciesTableSeeder.php
+++ b/database/seeders/PlumberService/PlumberServiceContractTemplateObligationContractDependenciesTableSeeder.php
@@ -18,7 +18,7 @@ class PlumberServiceContractTemplateObligationContractDependenciesTableSeeder ex
         DB::table('contract_template_obligation_contract_template_dependencies')->insert([
             [
                 'id' => 201,
-                'user_id' => 4,
+                'user_id' => 3,
                 'contract_template_obligation_id' => 202, // plumber hero company rescue princess peach
                 'depend_contract_template_id' => 202, //  Plumber Mario Service
                 'status' => 1,
diff --git a/database/seeders/PlumberService/PlumberServiceEntitiesTableSeeder.php b/database/seeders/PlumberService/PlumberServiceEntitiesTableSeeder.php
index 147e119..ebd5e91 100644
--- a/database/seeders/PlumberService/PlumberServiceEntitiesTableSeeder.php
+++ b/database/seeders/PlumberService/PlumberServiceEntitiesTableSeeder.php
@@ -18,7 +18,7 @@ class PlumberServiceEntitiesTableSeeder extends Seeder
         DB::table('entities')->insert([
             [
                 'id' => 201,
-                'user_id' => 4,
+                'user_id' => 3,
                 'name' => 'Mushroom Kingdom',
                 'status' => 1,
                 'created_at' => date('Y-m-d H:i:s'),
@@ -26,7 +26,7 @@ class PlumberServiceEntitiesTableSeeder extends Seeder
             ],
             [
                 'id' => 202,
-                'user_id' => 4,
+                'user_id' => 3,
                 'name' => 'Mario',
                 'status' => 1,
                 'created_at' => date('Y-m-d H:i:s'),
@@ -34,7 +34,7 @@ class PlumberServiceEntitiesTableSeeder extends Seeder
             ],
             [
                 'id' => 203,
-                'user_id' => 4,
+                'user_id' => 3,
                 'name' => 'Plumber Hero Company',
                 'status' => 1,
                 'created_at' => date('Y-m-d H:i:s'),
diff --git a/database/seeders/PlumberService/PlumberServiveContractTemplateObligationsTableSeeder.php b/database/seeders/PlumberService/PlumberServiveContractTemplateObligationsTableSeeder.php
index 5abd3e6..7f0acd5 100644
--- a/database/seeders/PlumberService/PlumberServiveContractTemplateObligationsTableSeeder.php
+++ b/database/seeders/PlumberService/PlumberServiveContractTemplateObligationsTableSeeder.php
@@ -49,7 +49,7 @@ class PlumberServiceContractTemplateObligationsTableSeeder extends Seeder
                 'id' => 202,
                 'user_id' => 3,
                 'contract_template_id' => 201,
-                'name' => 'plumber hero rescue princess peach',
+                'name' => 'plumber company hero rescue princess peach',
                 'sequence' => 2.0,
                 'reference' => null,
                 'content' => null,
diff --git a/resources/js/user/langs/en.js b/resources/js/user/langs/en.js
index a9d0f9c..e5b19d3 100644
--- a/resources/js/user/langs/en.js
+++ b/resources/js/user/langs/en.js
@@ -6,7 +6,7 @@ const En = {
 	'password': 'password',
 	'complete_day_range': 'complete day range',
 	'sequence': 'sequence',
-
+	'depend_contract_template_id': 'depend contract template',
 	
 	// Error 
 	'incorrect_account_or_password': 'Incorrect account or password',
@@ -22,10 +22,12 @@ const En = {
 	'the_content_must_be_at_least_10_characters': 'The %(att)s must be at least 10 characters',
 	'the_content_must_be_less_than_100': 'The %(att)s must be less than 100',
 	'status_error': 'status not allow update',
+	'obligation_depend_error': 'contract template obligation dependency error',
 
 	// toasted
 	'have_been_successfully_created': '%(value[0].att)s ( %(value[1].att)s ) have been successfully created',
 	'have_been_successfully_updated': '%(value[0].att)s ( %(value[1].att)s ) have been successfully updated',
+	'have_been_successfully_deleted': '%(value[0].att)s ( %(value[1].att)s ) have been successfully deleted',
 	'have_been_successfully_imported': '%(value[0].att)s have been successfully imported',
 	'error_mass_import': '%(value[0].att)s excel file have error when import',
 };
diff --git a/resources/js/user/pages/contract-template-obligation-contract-template-denpendencies/DeleteModal.vue b/resources/js/user/pages/contract-template-obligation-contract-template-denpendencies/DeleteModal.vue
new file mode 100644
index 0000000..530721b
--- /dev/null
+++ b/resources/js/user/pages/contract-template-obligation-contract-template-denpendencies/DeleteModal.vue
@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <b-modal :id="'contract-template-obligation-contract-template-dependency-delete-modal'" size="lg" scrollable @shown="getExistDataList" @hidden="resetData">
+      <template v-slot:modal-title>
+        <h4 class="modal-title">Contract Template Obligation Contract Template Dependency Delete</h4>
+      </template>
+      <p class="text-center">Are you sure want to delete?</p>
+      <template v-slot:modal-footer>
+        <form  @submit.prevent="onSubmit">
+          <v-btn
+          :loading="loading"
+          :disabled="loading"
+          type="submit"
+          color="primary"
+          class="white--text"
+          @click="loader = 'loading'"
+          >
+            Submit
+          </v-btn>
+        </form>     
+      </template>
+    </b-modal>
+  </div>
+</template>
+<script type="text/javascript">
+
+  export default {
+    props: {
+      this_contract_template_obligation_contract_template_dependency : Object,
+    },
+    data() {
+        let vm = this;
+        return {
+          form: new Form({}),
+          loader: null,
+          loading: false
+        }
+    },
+    methods: {
+      getExistDataList() {
+        let vm = this;
+      },
+      resetData() {
+        let vm = this;
+        vm.loader = null;
+        vm.loading = false;
+      },
+      onSubmit() {
+        let vm = this;
+        const l = vm.loader
+        vm[l] = !vm[l];
+        let method = 'delete';
+        let url = 'contract-template-obligation-contract-template-dependency/delete/' + vm.this_contract_template_obligation_contract_template_dependency .hash_id;
+        General.onComplete(url, vm.form, method, true)
+        .then(data => {
+          vm[l] = false
+          vm.loader = null;
+          vm.$bvModal.hide('contract-template-obligation-contract-template-dependency-delete-modal');
+          vm.$emit('refresh');
+          General.toastedMessage('delete', 'Contract Template Obligation Contract Template Dependency', data.data.hash_id);
+        })
+        .catch(function (error) {
+          vm[l] = false
+          vm.loader = null;
+        });
+      },
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/resources/js/user/pages/contract-template-obligation-contract-template-denpendencies/FormModal.vue b/resources/js/user/pages/contract-template-obligation-contract-template-denpendencies/FormModal.vue
new file mode 100644
index 0000000..0eb195d
--- /dev/null
+++ b/resources/js/user/pages/contract-template-obligation-contract-template-denpendencies/FormModal.vue
@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <b-modal :id="'contract-template-obligation-contract-template-dependency-form-modal'" size="lg" scrollable @shown="getExistDataList" @hidden="resetData">
+      <template v-slot:modal-title>
+        <h4 class="modal-title">Contract Template Obligation Dependency Contract Template Create</h4>
+      </template>
+      <contract-template-obligation-form-table
+        :selected_contract_template_obligation="[this_contract_template_obligation]"
+        :no_convert="true"
+      >
+      </contract-template-obligation-form-table>
+        <!-- ///////////////////////////////////////////////////// -->
+        <select-option-auto-complete-input
+          :input_name="'depend_contract_template_id'"
+          :form="form"
+          :placeholder="''"
+          :label="'Depend on Contract Template*'"
+          :endpoint="'contract-template/list'"
+          :params="{}"
+          :search_field="'name'"
+          :limit="1"
+          :return_key="'hash_id'"
+        ></select-option-auto-complete-input>
+        <!-- ///////////////////////////////////////////////////// -->
+        <template v-slot:modal-footer>
+          <form  @submit.prevent="onSubmit">
+            <v-btn
+            :loading="loading"
+            :disabled="loading"
+            type="submit"
+            color="primary"
+            class="white--text"
+            @click="loader = 'loading'"
+            >
+              Submit
+            </v-btn>
+          </form>     
+        </template>
+    </b-modal>
+  </div>
+</template>
+<script type="text/javascript">
+  import SelectOptionAutoCompleteInput from '../../components/inputs/SelectOptionAutoCompleteInput';
+  import ContractTemplateObligationFormTable from '../contract-template-obligations/FormTable';
+
+  export default {
+    props: {
+      this_contract_template_obligation: Object,
+    },
+    components: {
+      SelectOptionAutoCompleteInput,
+      ContractTemplateObligationFormTable
+    },
+    data() {
+        let vm = this;
+        return {
+          form: new Form({
+            contract_template_obligation_id: [],
+            depend_contract_template_id: []
+          }),
+          loader: null,
+          loading: false
+        }
+    },
+    methods: {
+      getExistDataList() {
+        let vm = this;
+      },
+      resetData() {
+        let vm = this;
+        vm.form.contract_template_obligation_id = [];
+        vm.form.depend_contract_template_id = [];
+        vm.loader = null;
+        vm.loading = false;
+      },
+      onSubmit() {
+        let vm = this;
+        vm.form.contract_template_obligation_id = [vm.this_contract_template_obligation.hash_id];
+        const l = vm.loader
+        vm[l] = !vm[l];
+        let method = 'post';
+        let url = 'contract-template-obligation-contract-template-dependency/store';
+        General.onComplete(url, vm.form, method, true)
+        .then(data => {
+          vm[l] = false
+          vm.loader = null;
+          vm.$bvModal.hide('contract-template-obligation-contract-template-dependency-form-modal');
+          vm.$emit('refresh');
+          General.toastedMessage('create', 'Contract Template Obligation Contract Template Dependency', data.data.hash_id);
+        })
+        .catch(function (error) {
+          vm[l] = false
+          vm.loader = null;
+        });
+      },
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/resources/js/user/pages/contract-template-obligation-contract-template-denpendencies/TableModal.vue b/resources/js/user/pages/contract-template-obligation-contract-template-denpendencies/TableModal.vue
new file mode 100644
index 0000000..b8e64f6
--- /dev/null
+++ b/resources/js/user/pages/contract-template-obligation-contract-template-denpendencies/TableModal.vue
@@ -0,0 +1,193 @@
+<template>
+  <div>
+      <b-modal :id="'contract-template-obligation-dependency-contract-template-table-modal'" size="lg" scrollable @shown="getExistDataList" @hidden="resetData">
+        <template v-slot:modal-title>
+          <h4 class="modal-title">Contract Template Obligation Conntract Template Dependency List</h4>
+        </template>
+
+        <b-row class="mb-2" no-gutters>
+          <b-col md="6"></b-col>
+          <b-col md="6"  v-if="permission_list.includes('add contract_template_obligation_dependency')" class="text-right">
+            <button
+              class="btn btn-primary" 
+              tag="button"
+              @click="contractTemplateObligationContractTemplateDependencyCreateModalToggle()"
+            >
+              <i class="fa fa-plus"></i>
+            </button>
+          </b-col>
+        </b-row>
+
+        <table class="table table-striped">
+          <thead>
+            <paginate-nav
+              v-if="contract_template_obligation_contract_template_dependency_list.page"
+              :colspan="colspan"
+              :pervious_page="contract_template_obligation_contract_template_dependency_list.page.pervious_page"
+              :next_page="contract_template_obligation_contract_template_dependency_list.page.next_page"
+              @clicked="dataHandler"
+            ></paginate-nav>
+            <tr>
+              <th>#</th>
+              <th>Contract Obligation Template</th>
+              <th>Depend On Contract Template</th>
+              <th>Status</th>
+              <th>Created</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-if="contract_template_obligation_contract_template_dependency_list.data" v-for="(contract, $index) in contract_template_obligation_contract_template_dependency_list.data" :key="$index">
+              <td>{{ $index + 1 }}</td>
+              <td>
+                {{ contract.contract_template_obligation_list[0].name }}
+              </td>
+              <td>
+                {{ contract.depend_contract_template_list[0].name }}
+              </td>
+              <td>
+                <span :class="'badge badge-' + contract.status[0].color">{{ contract.status[0].name }}</span>
+              </td>
+              <td>
+                {{ contract.created_at }}
+              </td>
+              <td>
+                <button
+                  v-if="permission_list.includes('delete contract_template_obligation_dependency')"
+                  class="btn btn-xs btn-light" 
+                  tag="button"
+                  @click="contractTemplateObligationContractTemplateDependencyDeleteModalToggle(contract)"
+                >
+                  <i class="fa fa-trash-alt"></i>
+                </button>
+              </td>
+            </tr>
+            <tr v-if="!contract_template_obligation_contract_template_dependency_list.data || !contract_template_obligation_contract_template_dependency_list.data[0]">
+              <td class="text-center" :colspan="colspan">
+                <vue-element-loading v-if="loading" :active="true" spinner="line-scale" color="var(--primary)"></vue-element-loading>
+                <span v-if="!loading">Empty</span>
+              </td>
+            </tr>
+          </tbody>
+          <tfoot v-if="contract_template_obligation_contract_template_dependency_list.page">
+            <paginate-nav
+              :colspan="colspan"
+              :pervious_page="contract_template_obligation_contract_template_dependency_list.page.pervious_page"
+              :next_page="contract_template_obligation_contract_template_dependency_list.page.next_page"
+              @clicked="dataHandler"
+            >
+            </paginate-nav>
+            <tr>
+              <td class="text-right" :colspan="colspan">
+                <small>Total: {{ contract_template_obligation_contract_template_dependency_list.total }}</small>
+              </td>
+            </tr>
+          </tfoot>
+        </table>
+        <template v-slot:modal-footer>
+          <form>
+            <v-btn
+              depressed
+              small
+              type="button"
+              color="warning"
+              class="m-0"
+              @click="$bvModal.hide('contract-template-obligation-table-modal')"
+            >
+              Close
+            </v-btn>
+          </form>     
+        </template>
+      </b-modal>
+      <contract-template-obligation-contract-template-dependency-form-modal
+        :this_contract_template_obligation="this_contract_template_obligation"
+        @refresh="getcontractTemplateObligationContractTemplateDependencyList()"
+      ></contract-template-obligation-contract-template-dependency-form-modal>
+      <contract-template-obligation-contract-template-dependency-delete-modal
+        :this_contract_template_obligation_contract_template_dependency="selected_contract_template_obligation_contract_template_dependency"
+        @refresh="getcontractTemplateObligationContractTemplateDependencyList()"
+      ></contract-template-obligation-contract-template-dependency-delete-modal>
+  </div>
+</template>
+<script type="text/javascript">
+  import PaginateNav from '../../components/paginations/NextPerviousPagination';
+  import contractTemplateObligationContractTemplateDependencyFormModal from './FormModal';
+  import ContractTemplateObligationContractTemplateDependencyDeleteModal from './DeleteModal';
+
+  export default {
+    props: {
+      this_contract_template_obligation: Object,
+      permission_list: Array
+    },
+    components: {
+      PaginateNav,
+      contractTemplateObligationContractTemplateDependencyFormModal,
+      ContractTemplateObligationContractTemplateDependencyDeleteModal
+    },
+    data() {
+        let vm = this;
+        return {
+          form: new Form({
+            contract_template_obligation_id: [],
+            page: ''
+          }),
+          colspan: 7,
+          loading: true,
+          contract_template_obligation_contract_template_dependency_list: [],
+          selected_contract_template_obligation_contract_template_dependency : {},
+          mode: ''
+        }
+    },
+    methods: {
+      contractTemplateObligationContractTemplateDependencyCreateModalToggle() {
+        let vm = this;
+        vm.$bvModal.show('contract-template-obligation-contract-template-dependency-form-modal');
+      },
+      contractTemplateObligationContractTemplateDependencyDeleteModalToggle(selected_contract_template_obligation_contract_template_dependency) {
+        let vm = this;
+        vm.selected_contract_template_obligation_contract_template_dependency = selected_contract_template_obligation_contract_template_dependency;
+        vm.$bvModal.show('contract-template-obligation-contract-template-dependency-delete-modal');
+      },
+      getExistDataList() {
+        let vm = this;
+        vm.getcontractTemplateObligationContractTemplateDependencyList();
+      },
+      resetData() {
+        let vm = this;
+        vm.form.contract_template_oblgation_id = [];
+        vm.form.page = '';
+        vm.contract_template_obligation_contract_template_dependency_list = [];
+        vm.loader = null;
+        vm.loading = false;
+        vm.$emit('refresh');
+      },
+      getcontractTemplateObligationContractTemplateDependencyList() {
+        let vm = this;
+        let url = 'contract-template-obligation-contract-template-dependency/list';
+        vm.tableCall(url);
+      },
+      tableCall(url) {
+        let vm = this;
+        vm.loading = true;
+        vm.form.contract_template_obligation_id = [vm.this_contract_template_obligation.hash_id];
+
+        General.tableCall(url, vm.form, 0, '', false).then(response => {
+          vm.loading = false;
+          vm.contract_template_obligation_contract_template_dependency_list = response;
+          vm.convertStatus();
+        });
+      },
+      convertStatus() {
+        let vm = this;  
+        vm.contract_template_obligation_contract_template_dependency_list.data.forEach(function(element, index) {
+          element.status = General.initFormArray(Constants.contract_template_obligation_dependency_status, [element.status]);
+        });
+      },
+      dataHandler(url) {
+        let vm = this;
+        vm.form.page = General.getStringParam('page', url);
+        vm.tableCall('contract-template-obligation-contract-template-dependency/list');
+      },
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/resources/js/user/pages/contract-template-obligation-denpendencies/DeleteModal.vue b/resources/js/user/pages/contract-template-obligation-denpendencies/DeleteModal.vue
new file mode 100644
index 0000000..b1e4c99
--- /dev/null
+++ b/resources/js/user/pages/contract-template-obligation-denpendencies/DeleteModal.vue
@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <b-modal :id="'contract-template-obligation-dependency-delete-modal'" size="lg" scrollable @shown="getExistDataList" @hidden="resetData">
+      <template v-slot:modal-title>
+        <h4 class="modal-title">Contract Template Obligation Dependency Delete</h4>
+      </template>
+      <p class="text-center">Are you sure want to delete?</p>
+      <template v-slot:modal-footer>
+        <form  @submit.prevent="onSubmit">
+          <v-btn
+          :loading="loading"
+          :disabled="loading"
+          type="submit"
+          color="primary"
+          class="white--text"
+          @click="loader = 'loading'"
+          >
+            Submit
+          </v-btn>
+        </form>     
+      </template>
+    </b-modal>
+  </div>
+</template>
+<script type="text/javascript">
+
+  export default {
+    props: {
+      this_contract_template_obligation_dependency: Object,
+    },
+    data() {
+        let vm = this;
+        return {
+          form: new Form({}),
+          loader: null,
+          loading: false
+        }
+    },
+    methods: {
+      getExistDataList() {
+        let vm = this;
+      },
+      resetData() {
+        let vm = this;
+        vm.loader = null;
+        vm.loading = false;
+      },
+      onSubmit() {
+        let vm = this;
+        const l = vm.loader
+        vm[l] = !vm[l];
+        let method = 'delete';
+        let url = 'contract-template-obligation-dependency/delete/' + vm.this_contract_template_obligation_dependency.hash_id;
+        General.onComplete(url, vm.form, method, true)
+        .then(data => {
+          vm[l] = false
+          vm.loader = null;
+          vm.$bvModal.hide('contract-template-obligation-dependency-delete-modal');
+          vm.$emit('refresh');
+          General.toastedMessage('delete', 'Contract Template Obligation Dependency', data.data.hash_id);
+        })
+        .catch(function (error) {
+          vm[l] = false
+          vm.loader = null;
+        });
+      },
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/resources/js/user/pages/contract-template-obligation-denpendencies/FormModal.vue b/resources/js/user/pages/contract-template-obligation-denpendencies/FormModal.vue
new file mode 100644
index 0000000..e4d8d3a
--- /dev/null
+++ b/resources/js/user/pages/contract-template-obligation-denpendencies/FormModal.vue
@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <b-modal :id="'contract-template-obligation-dependency-form-modal'" size="lg" scrollable @shown="getExistDataList" @hidden="resetData">
+      <template v-slot:modal-title>
+        <h4 class="modal-title">Contract Template Obligation Dependency Create</h4>
+      </template>
+      <contract-template-obligation-form-table
+        :selected_contract_template_obligation="[this_contract_template_obligation]"
+        :no_convert="true"
+      >
+      </contract-template-obligation-form-table>
+        <!-- ///////////////////////////////////////////////////// -->
+        <select-option-auto-complete-input
+          :input_name="'depend_contract_template_obligation_id'"
+          :form="form"
+          :placeholder="''"
+          :label="'Depend on Contract Template Obligation*'"
+          :endpoint="'contract-template-obligation/list'"
+          :params="{
+            'not_id': [this_contract_template_obligation.hash_id]
+          }"
+          :search_field="'name'"
+          :limit="1"
+          :return_key="'hash_id'"
+        ></select-option-auto-complete-input>
+        <!-- ///////////////////////////////////////////////////// -->
+        <template v-slot:modal-footer>
+          <form  @submit.prevent="onSubmit">
+            <v-btn
+            :loading="loading"
+            :disabled="loading"
+            type="submit"
+            color="primary"
+            class="white--text"
+            @click="loader = 'loading'"
+            >
+              Submit
+            </v-btn>
+          </form>     
+        </template>
+    </b-modal>
+  </div>
+</template>
+<script type="text/javascript">
+  import SelectOptionAutoCompleteInput from '../../components/inputs/SelectOptionAutoCompleteInput';
+  import ContractTemplateObligationFormTable from '../contract-template-obligations/FormTable';
+
+  export default {
+    props: {
+      this_contract_template_obligation: Object,
+    },
+    components: {
+      SelectOptionAutoCompleteInput,
+      ContractTemplateObligationFormTable
+    },
+    data() {
+        let vm = this;
+        return {
+          form: new Form({
+            contract_template_obligation_id: [],
+            depend_contract_template_obligation_id: []
+          }),
+          loader: null,
+          loading: false
+        }
+    },
+    methods: {
+      getExistDataList() {
+        let vm = this;
+      },
+      resetData() {
+        let vm = this;
+        vm.form.contract_template_obligation_id = [];
+        vm.form.depend_contract_template_obligation_id = [];
+        vm.loader = null;
+        vm.loading = false;
+      },
+      onSubmit() {
+        let vm = this;
+        vm.form.contract_template_obligation_id = [vm.this_contract_template_obligation.hash_id];
+        const l = vm.loader
+        vm[l] = !vm[l];
+        let method = 'post';
+        let url = 'contract-template-obligation-dependency/store';
+        General.onComplete(url, vm.form, method, true)
+        .then(data => {
+          vm[l] = false
+          vm.loader = null;
+          vm.$bvModal.hide('contract-template-obligation-dependency-form-modal');
+          vm.$emit('refresh');
+          General.toastedMessage('create', 'Contract Template Obligation Dependency', data.data.hash_id);
+        })
+        .catch(function (error) {
+          vm[l] = false
+          vm.loader = null;
+        });
+      },
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/resources/js/user/pages/contract-template-obligation-denpendencies/TableModal.vue b/resources/js/user/pages/contract-template-obligation-denpendencies/TableModal.vue
new file mode 100644
index 0000000..1b03df1
--- /dev/null
+++ b/resources/js/user/pages/contract-template-obligation-denpendencies/TableModal.vue
@@ -0,0 +1,193 @@
+<template>
+  <div>
+      <b-modal :id="'contract-template-obligation-dependency-table-modal'" size="lg" scrollable @shown="getExistDataList" @hidden="resetData">
+        <template v-slot:modal-title>
+          <h4 class="modal-title">Contract Template Obligation Dependency List</h4>
+        </template>
+
+        <b-row class="mb-2" no-gutters>
+          <b-col md="6"></b-col>
+          <b-col md="6"  v-if="permission_list.includes('add contract_template_obligation_dependency')" class="text-right">
+            <button
+              class="btn btn-primary" 
+              tag="button"
+              @click="contractTemplateObligationDependencyCreateModalToggle()"
+            >
+              <i class="fa fa-plus"></i>
+            </button>
+          </b-col>
+        </b-row>
+
+        <table class="table table-striped">
+          <thead>
+            <paginate-nav
+              v-if="contract_template_obligation_dependency_list.page"
+              :colspan="colspan"
+              :pervious_page="contract_template_obligation_dependency_list.page.pervious_page"
+              :next_page="contract_template_obligation_dependency_list.page.next_page"
+              @clicked="dataHandler"
+            ></paginate-nav>
+            <tr>
+              <th>#</th>
+              <th>Contract Obligation Template</th>
+              <th>Depend On Contract Obligation Template</th>
+              <th>Status</th>
+              <th>Created</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-if="contract_template_obligation_dependency_list.data" v-for="(contract, $index) in contract_template_obligation_dependency_list.data" :key="$index">
+              <td>{{ $index + 1 }}</td>
+              <td>
+                {{ contract.contract_template_obligation_list[0].name }}
+              </td>
+              <td>
+                {{ contract.depend_contract_template_obligation_list[0].name }}
+              </td>
+              <td>
+                <span :class="'badge badge-' + contract.status[0].color">{{ contract.status[0].name }}</span>
+              </td>
+              <td>
+                {{ contract.created_at }}
+              </td>
+              <td>
+                <button
+                  v-if="permission_list.includes('delete contract_template_obligation_dependency')"
+                  class="btn btn-xs btn-light" 
+                  tag="button"
+                  @click="contractTemplateObligationDependencyDeleteModalToggle(contract)"
+                >
+                  <i class="fa fa-trash-alt"></i>
+                </button>
+              </td>
+            </tr>
+            <tr v-if="!contract_template_obligation_dependency_list.data || !contract_template_obligation_dependency_list.data[0]">
+              <td class="text-center" :colspan="colspan">
+                <vue-element-loading v-if="loading" :active="true" spinner="line-scale" color="var(--primary)"></vue-element-loading>
+                <span v-if="!loading">Empty</span>
+              </td>
+            </tr>
+          </tbody>
+          <tfoot v-if="contract_template_obligation_dependency_list.page">
+            <paginate-nav
+              :colspan="colspan"
+              :pervious_page="contract_template_obligation_dependency_list.page.pervious_page"
+              :next_page="contract_template_obligation_dependency_list.page.next_page"
+              @clicked="dataHandler"
+            >
+            </paginate-nav>
+            <tr>
+              <td class="text-right" :colspan="colspan">
+                <small>Total: {{ contract_template_obligation_dependency_list.total }}</small>
+              </td>
+            </tr>
+          </tfoot>
+        </table>
+        <template v-slot:modal-footer>
+          <form>
+            <v-btn
+              depressed
+              small
+              type="button"
+              color="warning"
+              class="m-0"
+              @click="$bvModal.hide('contract-template-obligation-table-modal')"
+            >
+              Close
+            </v-btn>
+          </form>     
+        </template>
+      </b-modal>
+      <contract-template-obligation-dependency-form-modal
+        :this_contract_template_obligation="this_contract_template_obligation"
+        @refresh="getContractTemplateObligationDependencyList()"
+      ></contract-template-obligation-dependency-form-modal>
+      <contract-template-obligation-dependency-delete-modal
+        :this_contract_template_obligation_dependency="selected_contract_template_obligation_dependency"
+        @refresh="getContractTemplateObligationDependencyList()"
+      ></contract-template-obligation-dependency-delete-modal>
+  </div>
+</template>
+<script type="text/javascript">
+  import PaginateNav from '../../components/paginations/NextPerviousPagination';
+  import ContractTemplateObligationDependencyFormModal from './FormModal';
+  import ContractTemplateObligationDependencyDeleteModal from './DeleteModal';
+
+  export default {
+    props: {
+      this_contract_template_obligation: Object,
+      permission_list: Array
+    },
+    components: {
+      PaginateNav,
+      ContractTemplateObligationDependencyFormModal,
+      ContractTemplateObligationDependencyDeleteModal
+    },
+    data() {
+        let vm = this;
+        return {
+          form: new Form({
+            contract_template_obligation_id: [],
+            page: ''
+          }),
+          colspan: 7,
+          loading: true,
+          contract_template_obligation_dependency_list: [],
+          selected_contract_template_obligation_dependency : {},
+          mode: ''
+        }
+    },
+    methods: {
+      contractTemplateObligationDependencyCreateModalToggle() {
+        let vm = this;
+        vm.$bvModal.show('contract-template-obligation-dependency-form-modal');
+      },
+      contractTemplateObligationDependencyDeleteModalToggle(selected_contract_template_obligation_dependency) {
+        let vm = this;
+        vm.selected_contract_template_obligation_dependency = selected_contract_template_obligation_dependency;
+        vm.$bvModal.show('contract-template-obligation-dependency-delete-modal');
+      },
+      getExistDataList() {
+        let vm = this;
+        vm.getContractTemplateObligationDependencyList();
+      },
+      resetData() {
+        let vm = this;
+        vm.form.contract_template_oblgation_id = [];
+        vm.form.page = '';
+        vm.contract_template_obligation_dependency_list = [];
+        vm.loader = null;
+        vm.loading = false;
+        vm.$emit('refresh');
+      },
+      getContractTemplateObligationDependencyList() {
+        let vm = this;
+        let url = 'contract-template-obligation-dependency/list';
+        vm.tableCall(url);
+      },
+      tableCall(url) {
+        let vm = this;
+        vm.loading = true;
+        vm.form.contract_template_obligation_id = [vm.this_contract_template_obligation.hash_id];
+
+        General.tableCall(url, vm.form, 0, '', false).then(response => {
+          vm.loading = false;
+          vm.contract_template_obligation_dependency_list = response;
+          vm.convertStatus();
+        });
+      },
+      convertStatus() {
+        let vm = this;  
+        vm.contract_template_obligation_dependency_list.data.forEach(function(element, index) {
+          element.status = General.initFormArray(Constants.contract_template_obligation_dependency_status, [element.status]);
+        });
+      },
+      dataHandler(url) {
+        let vm = this;
+        vm.form.page = General.getStringParam('page', url);
+        vm.tableCall('contract-template/list');
+      },
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/resources/js/user/pages/contract-template-obligations/FormTable.vue b/resources/js/user/pages/contract-template-obligations/FormTable.vue
new file mode 100644
index 0000000..74d3333
--- /dev/null
+++ b/resources/js/user/pages/contract-template-obligations/FormTable.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="mb-3">
+    <div>Contract Template</div>
+    <table class="table table-striped">
+      <thead>
+        <tr>
+          <th>#</th>
+          <th style="width: 25%">Details</th>
+          <th>Contract Template</th>
+          <th>Sequence</th>
+          <th>Status</th>
+          <th>Created</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="selected_contract_template_obligation" v-for="(contract, $index) in selected_contract_template_obligation" :key="$index">
+          <td>{{ $index + 1 }}</td>
+          <td>
+            <div><b>Name</b>: {{ contract.name }}</div>
+            <div><b>Complete Day Range</b>: {{ contract.complete_day_range }}</div>
+            <div><b>Must Complete</b>: {{ contract.must_complete }}</div>
+            <div><b>Must Accept</b>: {{ contract.must_accept }}</div>
+          </td>
+          <td>
+              {{ contract.contract_template_list[0].name }}
+          </td>
+          <td>{{ contract.sequence }}</td>
+          <td>
+              <span :class="'badge badge-' + contract.status[0].color">{{ contract.status[0].name }}</span>
+          </td>
+          <td>
+            {{ contract.created_at }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+	export default {
+    props: {
+      selected_contract_template_obligation: Array,
+      no_convert: Boolean
+    },
+		methods : {
+			convertStatus() {
+				let vm = this;  
+				vm.selected_contract_template_obligation.forEach(function(element, index) {
+					element.status = General.initFormArray(Constants.contract_template_obligation_status, [element.status]);
+				});
+			},
+		},
+		created() {
+			let vm = this;
+      if (!vm.no_convert) {
+        vm.convertStatus();
+      }
+		}
+	}
+</script>
\ No newline at end of file
diff --git a/resources/js/user/pages/contract-template-obligations/TableModal.vue b/resources/js/user/pages/contract-template-obligations/TableModal.vue
index b47fe6a..60ca74f 100644
--- a/resources/js/user/pages/contract-template-obligations/TableModal.vue
+++ b/resources/js/user/pages/contract-template-obligations/TableModal.vue
@@ -57,6 +57,24 @@
                 {{ contract.created_at }}
               </td>
               <td>
+                <button
+                  v-if="permission_list.includes('view contract_template_obligation_dependency')"
+                  class="btn btn-xs btn-light" 
+                  tag="button"
+                  title="contract template obligation depedency"
+                  @click="contractTemplateObligationDependencyTableModalToggle(contract)"
+                >
+                  <i class="fa fa-directions"></i>
+                </button>
+                <button
+                  v-if="permission_list.includes('view contract_template_obligation_dependency')"
+                  class="btn btn-xs btn-light" 
+                  tag="button"
+                  title="contract template obligation contract template depedency"
+                  @click="contractTemplateObligationDependencyContractTemplateTableModalToggle(contract)"
+                >
+                  <i class="fa fa-map-signs"></i>
+                </button>
                 <button
                   v-if="permission_list.includes('edit contract_template_obligation')"
                   class="btn btn-xs btn-light" 
@@ -110,11 +128,21 @@
         :mode="mode"
         @refresh="getContractTemplateObligationList()"
       ></contract-template-obligation-form-modal>
+      <contract-template-obligation-dependency-table-modal
+        :this_contract_template_obligation="selected_contract_template_obligation"
+        :permission_list="permission_list"
+      ></contract-template-obligation-dependency-table-modal>
+      <contract-template-obligation-contract-template-dependency-table-modal
+        :this_contract_template_obligation="selected_contract_template_obligation"
+        :permission_list="permission_list"
+      ></contract-template-obligation-contract-template-dependency-table-modal>
   </div>
 </template>
 <script type="text/javascript">
   import PaginateNav from '../../components/paginations/NextPerviousPagination';
   import ContractTemplateObligationFormModal from './FormModal';
+  import ContractTemplateObligationDependencyTableModal from '../contract-template-obligation-denpendencies/TableModal';
+  import ContractTemplateObligationContractTemplateDependencyTableModal from '../contract-template-obligation-contract-template-denpendencies/TableModal';
   import Draggable from 'vuedraggable';
 
   export default {
@@ -125,6 +153,8 @@
     components: {
       PaginateNav,
       ContractTemplateObligationFormModal,
+      ContractTemplateObligationDependencyTableModal,
+      ContractTemplateObligationContractTemplateDependencyTableModal,
       Draggable
     },
     data() {
@@ -151,9 +181,18 @@
       contractTemplateObligationEditModalToggle(selected_contract_template_obligation) {
         let vm = this;
         vm.mode = 'edit';
-        vm.selected_contract_template_obligation = selected_contract_template_obligation;
         vm.$bvModal.show('contract-template-obligation-form-modal');
       },
+      contractTemplateObligationDependencyTableModalToggle(selected_contract_template_obligation) {
+        let vm = this;
+        vm.selected_contract_template_obligation = selected_contract_template_obligation;
+        vm.$bvModal.show('contract-template-obligation-dependency-table-modal');
+      },
+      contractTemplateObligationDependencyContractTemplateTableModalToggle(selected_contract_template_obligation) {
+        let vm = this;
+        vm.selected_contract_template_obligation = selected_contract_template_obligation;
+        vm.$bvModal.show('contract-template-obligation-dependency-contract-template-table-modal');
+      },
       getExistDataList() {
         let vm = this;
         vm.getContractTemplateObligationList();
@@ -163,6 +202,7 @@
         vm.form.contract_template_id = [];
         vm.form.page = '';
         vm.contract_template_obligation_list = [];
+        vm.drag_drop_contract_template_obligation_list = [];
         vm.loader = null;
         vm.loading = false;
         vm.$emit('refresh');
@@ -177,7 +217,7 @@
         vm.loading = true;
         vm.form.contract_template_id = [vm.this_contract_template.hash_id];
 
-        General.tableCall(url, vm.form).then(response => {
+        General.tableCall(url, vm.form, 0, '', false).then(response => {
           vm.loading = false;
           vm.contract_template_obligation_list = response;
           vm.drag_drop_contract_template_obligation_list = [];
diff --git a/resources/js/user/utilities/constants.js b/resources/js/user/utilities/constants.js
index 4776306..cfc6e41 100644
--- a/resources/js/user/utilities/constants.js
+++ b/resources/js/user/utilities/constants.js
@@ -74,6 +74,40 @@ const Constant = {
          'color': 'warning'
       },
    ],
+   'contract_template_obligation_dependency_status': [
+      {
+         'id': 1,
+         'name': 'Active',
+         'color': 'primary'
+      },
+      {
+         'id': 2,
+         'name': 'De-active',
+         'color': 'danger'
+      },
+      {
+         'id': 9,
+         'name': 'Pending',
+         'color': 'warning'
+      },
+   ],
+   'contract_template_obligation_contract_template_dependency_status': [
+      {
+         'id': 1,
+         'name': 'Active',
+         'color': 'primary'
+      },
+      {
+         'id': 2,
+         'name': 'De-active',
+         'color': 'danger'
+      },
+      {
+         'id': 9,
+         'name': 'Pending',
+         'color': 'warning'
+      },
+   ],
    'contract_status': [
       {
          'id': 1,
diff --git a/resources/js/user/utilities/form.js b/resources/js/user/utilities/form.js
index c9ba1ff..418db90 100644
--- a/resources/js/user/utilities/form.js
+++ b/resources/js/user/utilities/form.js
@@ -153,6 +153,9 @@ class Form {
             else if(code[i] == 'CURRENT_PASSWORD_NOT_MATCH') {
                 return_message.push(Sprintf(General.lang('current_password_not_match'), value));                
             }
+            else if(code[i] == 'OBLIGATION_DEPEND_ERROR') {
+                return_message.push(Sprintf(General.lang('obligation_depend_error'), value));                
+            }
             else {
                 return_message.push(code[i]);
             }
diff --git a/resources/js/user/utilities/general.js b/resources/js/user/utilities/general.js
index 332dd45..1633da7 100644
--- a/resources/js/user/utilities/general.js
+++ b/resources/js/user/utilities/general.js
@@ -359,6 +359,9 @@ module.exports.toastedMessage = function(type, object, key) {
 	else if(type == 'edit') {
 		message = Sprintf(module.exports.lang('have_been_successfully_updated'), {value: value});
 	}
+	else if(type == 'delete') {
+		message = Sprintf(module.exports.lang('have_been_successfully_deleted'), {value: value});
+	}
 
 	Vue.toasted.success(message, {
 		icon : {