contract template obligation modal UI

resources/js/user/langs/en.js

@@ -5,6 +5,7 @@ const En = {
 	'email': 'email',
 	'password': 'password',
 	'complete_day_range': 'complete day range',
+	'sequence': 'sequence',
 
 	
 	// Error 

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

@@ -0,0 +1,149 @@
+<template>
+  <div>
+    <b-modal :id="'contract-template-obligation-create-modal'" size="lg" scrollable @shown="getExistDataList" @hidden="resetData">
+      <template v-slot:modal-title>
+        <h4 class="modal-title">Contract Template Obligation Create</h4>
+      </template>
+
+      <contract-template-form-table
+        :selected_contract_template="[this_contract_template]"
+        :no_convert="true"
+      >
+      </contract-template-form-table>
+        <!-- ///////////////////////////////////////////////////// -->
+        <text-input
+          :input_name="'name'"
+          :form="form"
+          :label="'Name*'"
+        ></text-input>
+        <!-- ///////////////////////////////////////////////////// -->
+        <number-input
+          :input_name="'sequence'"
+          :form="form"
+          :label="'Sequence*'"
+        ></number-input>
+        <!-- ///////////////////////////////////////////////////// -->
+        <text-input
+          :input_name="'reference'"
+          :form="form"
+          :label="'Reference*'"
+        ></text-input>
+        <!-- ///////////////////////////////////////////////////// -->
+        <text-area-input
+          :input_name="'content'"
+          :form="form"
+          :label="'Content*'"
+        ></text-area-input>
+        <!-- ///////////////////////////////////////////////////// -->
+        <number-input
+          :input_name="'complete_day_range'"
+          :form="form"
+          :label="'Complete Day Range*'"
+        ></number-input>
+        <!-- ///////////////////////////////////////////////////// -->
+        <switch-input
+          :input_name="'must_complete'"
+          :form="form"
+          :label="'Must Complete'"
+        ></switch-input>
+        <!-- ///////////////////////////////////////////////////// -->
+        <switch-input
+          :input_name="'must_accept'"
+          :form="form"
+          :label="'Must Accept'"
+        ></switch-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 TextInput from '../../components/inputs/TextInput';
+  import TextAreaInput from '../../components/inputs/TextAreaInput';
+  import NumberInput from '../../components/inputs/NumberInput';
+  import SwitchInput from '../../components/inputs/SwitchInput';
+  import ContractTemplateFormTable from '../contract-templates/FormTable';
+
+  export default {
+    props: {
+      this_contract_template: Object,
+    },
+    components: {
+      TextInput,
+      TextAreaInput,
+      NumberInput,
+      SwitchInput,
+      ContractTemplateFormTable
+    },
+    data() {
+        let vm = this;
+        return {
+          form: new Form({
+            contract_template_id: [],
+            name: '',
+            sequence: '',
+            reference: '',
+            content: '',
+            must_complete: 1,
+            must_accept: 1,
+            complete_day_range: '',
+            type: ''
+          }),
+          loader: null,
+          loading: false
+        }
+    },
+    methods: {
+      getExistDataList() {
+        let vm = this;
+      },
+      resetData() {
+        let vm = this;
+        vm.form.contract_template_id = [];
+        vm.form.name = '';
+        vm.form.sequence = '';
+        vm.form.reference = '';
+        vm.form.content = '';
+        vm.form.must_complete = 1;
+        vm.form.must_accept = 1;
+        vm.form.complete_day_range = 1;
+        vm.form.type = '';
+        vm.loader = null;
+        vm.loading = false;
+      },
+      onSubmit() {
+        let vm = this;
+        vm.form.contract_template_id = [vm.this_contract_template.hash_id];
+        const l = vm.loader
+        vm[l] = !vm[l];
+        let method = 'post';
+        let url = 'contract-template-obligation/store';
+        General.onComplete(url, vm.form, method, true)
+        .then(data => {
+          vm[l] = false
+          vm.loader = null;
+          vm.$bvModal.hide('contract-template-obligation-create-modal');
+          vm.$emit('refresh');
+          General.toastedMessage('create', 'Contract Template Obligation', data.data.hash_id);
+        })
+        .catch(function (error) {
+            vm[l] = false
+            vm.loader = null;
+        });
+      },
+    }
+  }
+</script>

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

@@ -0,0 +1,169 @@
+<template>
+  <div>
+    <b-modal :id="'contract-template-obligation-form-modal'" size="lg" scrollable @shown="getExistDataList" @hidden="resetData">
+      <template v-slot:modal-title>
+        <h4 class="modal-title">Contract Template Obligation {{ mode == 'create' ? 'Create' : 'Edit' }}</h4>
+      </template>
+
+      <contract-template-form-table
+        :selected_contract_template="[this_contract_template]"
+        :no_convert="true"
+      >
+      </contract-template-form-table>
+        <!-- ///////////////////////////////////////////////////// -->
+        <text-input
+          :input_name="'name'"
+          :form="form"
+          :label="'Name*'"
+        ></text-input>
+        <!-- ///////////////////////////////////////////////////// -->
+        <number-input
+          :input_name="'sequence'"
+          :form="form"
+          :label="'Sequence*'"
+        ></number-input>
+        <!-- ///////////////////////////////////////////////////// -->
+        <text-input
+          :input_name="'reference'"
+          :form="form"
+          :label="'Reference*'"
+        ></text-input>
+        <!-- ///////////////////////////////////////////////////// -->
+        <text-area-input
+          :input_name="'content'"
+          :form="form"
+          :label="'Content*'"
+        ></text-area-input>
+        <!-- ///////////////////////////////////////////////////// -->
+        <number-input
+          :input_name="'complete_day_range'"
+          :form="form"
+          :label="'Complete Day Range*'"
+        ></number-input>
+        <!-- ///////////////////////////////////////////////////// -->
+        <switch-input
+          :input_name="'must_complete'"
+          :form="form"
+          :label="'Must Complete'"
+        ></switch-input>
+        <!-- ///////////////////////////////////////////////////// -->
+        <switch-input
+          :input_name="'must_accept'"
+          :form="form"
+          :label="'Must Accept'"
+        ></switch-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 TextInput from '../../components/inputs/TextInput';
+  import TextAreaInput from '../../components/inputs/TextAreaInput';
+  import NumberInput from '../../components/inputs/NumberInput';
+  import SwitchInput from '../../components/inputs/SwitchInput';
+  import ContractTemplateFormTable from '../contract-templates/FormTable';
+
+  export default {
+    props: {
+      this_contract_template: Object,
+      selected_contract_template_obligation: Object,
+      mode: String
+    },
+    components: {
+      TextInput,
+      TextAreaInput,
+      NumberInput,
+      SwitchInput,
+      ContractTemplateFormTable
+    },
+    data() {
+        let vm = this;
+        return {
+          form: new Form({
+            contract_template_id: [],
+            name: '',
+            sequence: '',
+            reference: '',
+            content: '',
+            must_complete: 1,
+            must_accept: 1,
+            complete_day_range: '',
+            type: ''
+          }),
+          loader: null,
+          loading: false
+        }
+    },
+    methods: {
+      getExistDataList() {
+        let vm = this;
+        if (vm.mode == 'edit') {
+          vm.loadThisContractTemplateOligation();
+        }
+      },
+      resetData() {
+        let vm = this;
+        vm.form.contract_template_id = [];
+        vm.form.name = '';
+        vm.form.sequence = '';
+        vm.form.reference = '';
+        vm.form.content = '';
+        vm.form.must_complete = 1;
+        vm.form.must_accept = 1;
+        vm.form.complete_day_range = 1;
+        vm.form.type = '';
+        vm.loader = null;
+        vm.loading = false;
+      },
+      loadThisContractTemplateOligation() {
+        let vm = this;
+        let url = 'contract-template-obligation/show/' + vm.selected_contract_template_obligation.hash_id;
+        let form = new Form({});
+        General.getCall(url, form).then(response => {
+          vm.form.name = response.data.name;
+          vm.form.sequence = response.data.sequence;
+          vm.form.reference = response.data.reference;
+          vm.form.content = response.data.content;
+          vm.form.must_complete = response.data.must_complete;
+          vm.form.must_accept = response.data.must_accept;
+          vm.form.complete_day_range = response.data.complete_day_range;
+          vm.form.type = response.data.type;
+        });
+      },
+      onSubmit() {
+        let vm = this;
+        vm.form.contract_template_id = [vm.this_contract_template.hash_id];
+        const l = vm.loader
+        vm[l] = !vm[l];
+        let method = vm.mode == 'create' ? 'post' : 'put';
+        let url = vm.mode == 'create' ? 'contract-template-obligation/store' : 'contract-template-obligation/update/' + vm.selected_contract_template_obligation.hash_id;
+        General.onComplete(url, vm.form, method, true)
+        .then(data => {
+          vm[l] = false
+          vm.loader = null;
+          vm.$bvModal.hide('contract-template-obligation-form-modal');
+          vm.$emit('refresh');
+          General.toastedMessage('create', 'Contract Template Obligation', data.data.hash_id);
+        })
+        .catch(function (error) {
+            vm[l] = false
+            vm.loader = null;
+        });
+      },
+    }
+  }
+</script>

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

@@ -0,0 +1,215 @@
+<template>
+  <div>
+      <b-modal :id="'contract-template-obligation-table-modal'" size="lg" scrollable @shown="getExistDataList" @hidden="resetData">
+        <template v-slot:modal-title>
+          <h4 class="modal-title">Contract Template Obligation 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')" class="text-right">
+            <button
+              class="btn btn-primary" 
+              tag="button"
+              @click="contractTemplateObligationCreateModalToggle()"
+            >
+              <i class="fa fa-plus"></i>
+            </button>
+          </b-col>
+        </b-row>
+
+        <table class="table table-striped">
+          <thead>
+            <paginate-nav
+              v-if="contract_template_obligation_list.page"
+              :colspan="colspan"
+              :pervious_page="contract_template_obligation_list.page.pervious_page"
+              :next_page="contract_template_obligation_list.page.next_page"
+              @clicked="dataHandler"
+            ></paginate-nav>
+            <tr>
+              <th>#</th>
+              <th style="width: 25%">Details</th>
+              <th>Contract Template</th>
+              <th>Sequence</th>
+              <th>Status</th>
+              <th>Created</th>
+              <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">
+              <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>
+              <td>
+                <button
+                  v-if="permission_list.includes('edit contract_template_obligation')"
+                  class="btn btn-xs btn-light" 
+                  tag="button"
+                  @click="contractTemplateObligationEditModalToggle(contract)"
+                >
+                  <i class="fa fa-edit"></i>
+                </button>
+              </td>
+            </tr>
+            <tr v-if="!contract_template_obligation_list.data || !contract_template_obligation_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_list.page">
+            <paginate-nav
+              :colspan="colspan"
+              :pervious_page="contract_template_obligation_list.page.pervious_page"
+              :next_page="contract_template_obligation_list.page.next_page"
+              @clicked="dataHandler"
+            >
+            </paginate-nav>
+            <tr>
+              <td class="text-right" :colspan="colspan">
+                <small>Total: {{ contract_template_obligation_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-form-modal
+        :this_contract_template="this_contract_template"
+        :selected_contract_template_obligation="selected_contract_template_obligation"
+        :mode="mode"
+        @refresh="getContractTemplateObligationList()"
+      ></contract-template-obligation-form-modal>
+  </div>
+</template>
+<script type="text/javascript">
+  import PaginateNav from '../../components/paginations/NextPerviousPagination';
+  import ContractTemplateObligationFormModal from './FormModal';
+
+  export default {
+    props: {
+      this_contract_template: Object,
+      permission_list: Array
+    },
+    components: {
+      PaginateNav,
+      ContractTemplateObligationFormModal
+    },
+    data() {
+        let vm = this;
+        return {
+          form: new Form({
+            contract_template_id: [],
+            page: ''
+          }),
+          colspan: 7,
+          loading: true,
+          contract_template_obligation_list: [],
+          selected_contract_template_obligation : {},
+          mode: ''
+        }
+    },
+    methods: {
+      contractTemplateObligationCreateModalToggle() {
+        let vm = this;
+        vm.mode = 'create';
+        vm.$bvModal.show('contract-template-obligation-form-modal');
+      },
+      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');
+      },
+      getExistDataList() {
+        let vm = this;
+        vm.getContractTemplateObligationList();
+      },
+      resetData() {
+        let vm = this;
+        vm.form.contract_template_id = [];
+        vm.form.page = '';
+        vm.contract_template_obligation_list = [];
+        vm.loader = null;
+        vm.loading = false;
+        vm.$emit('refresh');
+      },
+      getContractTemplateObligationList() {
+        let vm = this;
+        let url = 'contract-template-obligation/list';
+        vm.tableCall(url);
+      },
+      tableCall(url) {
+        let vm = this;
+        vm.loading = true;
+        vm.form.contract_template_id = [vm.this_contract_template.hash_id];
+
+        General.tableCall(url, vm.form).then(response => {
+          vm.loading = false;
+          vm.contract_template_obligation_list = response;
+          vm.convertStatus();
+        });
+      },
+      convertStatus() {
+        let vm = this;  
+        vm.contract_template_obligation_list.data.forEach(function(element, index) {
+          element.status = General.initFormArray(Constants.contract_template_obligation_status, [element.status]);
+        });
+      },
+      dataHandler(url) {
+        let vm = this;
+        vm.form.page = General.getStringParam('page', url);
+        vm.tableCall('contract-template/list');
+      },
+      onSubmit() {
+        let vm = this;
+        const l = vm.loader
+        vm[l] = !vm[l];
+        let method = 'put';
+        let url = 'seller-shop-product/featured';
+        General.onComplete(url, vm.form, method, true)
+        .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);
+        })
+        .catch(function (error) {
+            vm[l] = false
+            vm.loader = null;
+        });
+      },
+    }
+  }
+</script>

resources/js/user/pages/contract-templates/Edit.vue

@@ -8,15 +8,15 @@
     <breadcrumb  
       :menu_item_list="menu_item_list"
     ></breadcrumb>
-    <admin-form
+    <contract-template-form
       :mode="'edit'"
-    ></admin-form>
+    ></contract-template-form>
   </div>
 </template>
 <script>
   import PageTitle from "../../components/titles/PageTitle";
   import Breadcrumb from "../../layouts/parts/Breadcrumb";
-  import AdminForm from "./Form";
+  import ContractTemplateForm from "./Form";
 
   export default {
     metaInfo() {
@@ -29,12 +29,12 @@
     components: {
       PageTitle,
       Breadcrumb,
-      AdminForm
+      ContractTemplateForm
     },
     data() {
       let vm = this;
       return {
-        heading: 'Edit Admin',
+        heading: 'Edit Contract Template',
         icon: 'fa fa-edit',
         menu_item_list: [
           {
@@ -43,14 +43,14 @@
             path: '/'
           },
           {
-            title: 'Admin List',
+            title: 'Contract Template List',
             active: false,
-            path: '/admin/list'
+            path: '/contract-template/list'
           },
           {
-            title: 'Edit Admin',
+            title: 'Edit Contract Template',
             active: true,
-            path: '/admin/edit/' + vm.$route.params.hash_id
+            path: '/contract-template/edit/' + vm.$route.params.hash_id
           },
         ]
       }

resources/js/user/pages/contract-templates/FormTable.vue

@@ -0,0 +1,62 @@
+<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>Obligation Template</th>
+          <th>Status</th>
+          <th>Created</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="selected_contract_template" v-for="(contract, $index) in selected_contract_template" :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>
+          </td>
+          <td>
+            <div v-if="contract.contract_template_obligation_list" v-for="(obligation, $index) in contract.contract_template_obligation_list" :key="$index">
+              <div>-{{ obligation.name }} <small>({{ obligation.sequence }})</small></div>
+            </div>
+            <div v-if="!contract.contract_template_obligation_list[0]">
+              -
+            </div>
+          </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: Array,
+      no_convert: Boolean
+    },
+		methods : {
+			convertStatus() {
+				let vm = this;  
+				vm.selected_contract_template.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>

resources/js/user/pages/contract-templates/Table.vue

@@ -34,12 +34,12 @@
             @clicked="dataHandler"
           ></paginate-nav>
           <tr>
-              <th>#</th>
-              <th style="width: 25%">Details</th>
-              <th>Obligation</th>
-              <th>Status</th>
-              <th>Created</th>
-              <th>Actions</th>
+            <th>#</th>
+            <th style="width: 25%">Details</th>
+            <th>Obligation Template</th>
+            <th>Status</th>
+            <th>Created</th>
+            <th>Actions</th>
           </tr>
         </thead>
         <tbody>
@@ -51,7 +51,7 @@
             </td>
             <td>
               <div v-if="contract.contract_template_obligation_list" v-for="(obligation, $index) in contract.contract_template_obligation_list" :key="$index">
-                <div>-{{ obligation.name }}</div>
+                <div>-{{ obligation.name }} <small>({{ obligation.sequence }})</small></div>
               </div>
               <div v-if="!contract.contract_template_obligation_list[0]">
                 -
@@ -64,6 +64,13 @@
               {{ contract.created_at }}
             </td>
             <td>
+              <button
+                class="btn btn-xs btn-light" 
+                tag="button"
+                @click="contractTemplateObligationTableModalToggle(contract)"
+              >
+                <i class="fa fa-palette"></i>
+              </button>
               <router-link  
                   v-if="permission_list.includes('edit contract')"
                   :to="'edit/' + contract.hash_id" 
@@ -97,17 +104,24 @@
         </tfoot>
       </table>
     </b-card>
+    <contract-template-obligation-table-modal
+      :this_contract_template="this_contract_template"
+      :permission_list="permission_list"
+      @refresh="getContractTemplateList()"
+    ></contract-template-obligation-table-modal>
   </div>
 </template>
 
 <script>
   import ContractTemplateFilter from "./Filter";
   import PaginateNav from '../../components/paginations/NextPerviousPagination';
+  import ContractTemplateObligationTableModal from '../contract-template-obligations/TableModal';
 
   export default {
     components: {
       ContractTemplateFilter,
-      PaginateNav
+      PaginateNav,
+      ContractTemplateObligationTableModal
     },
     data() {
       return {
@@ -117,14 +131,20 @@
             status: General.returnAray(General.getURLParam('status[]')),
             page: General.getURLParam('page')
         }),
-        colspan: 7,
+        colspan: 6,
         filter_status: false,
         loading: true,
         contract_template_list: [],
+        this_contract_template: {},
         permission_list: []
       }
     },
     methods: {
+      contractTemplateObligationTableModalToggle(contract_template) {
+        let vm = this;
+        vm.this_contract_template = contract_template;
+        vm.$bvModal.show('contract-template-obligation-table-modal');
+      },
       getPermissionList() {
         let vm = this;
         let url = 'user/self';

resources/js/user/pages/entities/Create.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <page-title
+      :heading="heading" 
+      :icon="icon"
+      :add="true"
+    ></page-title>
+    <breadcrumb  
+      :menu_item_list="menu_item_list"
+    ></breadcrumb>
+    <entity-form
+      :mode="'create'"
+    ></entity-form>
+  </div>
+</template>
+<script>
+  import PageTitle from "../../components/titles/PageTitle";
+  import Breadcrumb from "../../layouts/parts/Breadcrumb";
+  import EntityForm from "./Form";
+
+  export default {
+    metaInfo() {
+        let vm = this;
+        return {
+            title: Constants.site.title,
+            titleTemplate: '%s | ' + vm.$router.currentRoute.name
+        }
+    },
+    components: {
+      PageTitle,
+      Breadcrumb,
+      EntityForm
+    },
+    data() {
+      return {
+        heading: 'Create Entity',
+        icon: 'fa fa-plus',
+        menu_item_list: [
+          {
+            title: 'Dashboard',
+            active: false,
+            path: '/'
+          },
+          {
+            title: 'Entity List',
+            active: false,
+            path: '/entity/list'
+          },
+          {
+            title: 'Create Entity',
+            active: true,
+            path: '/entity/create'
+          },
+        ],
+      }
+    }
+  }
+</script>

resources/js/user/pages/entities/Edit.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <page-title
+      :heading="heading" 
+      :icon="icon"
+      :add="true"
+    ></page-title>
+    <breadcrumb  
+      :menu_item_list="menu_item_list"
+    ></breadcrumb>
+    <entity-form
+      :mode="'edit'"
+    ></entity-form>
+  </div>
+</template>
+<script>
+  import PageTitle from "../../components/titles/PageTitle";
+  import Breadcrumb from "../../layouts/parts/Breadcrumb";
+  import EntityForm from "./Form";
+
+  export default {
+    metaInfo() {
+        let vm = this;
+        return {
+            title: Constants.site.title,
+            titleTemplate: '%s | ' + vm.$router.currentRoute.name
+        }
+    },
+    components: {
+      PageTitle,
+      Breadcrumb,
+      EntityForm
+    },
+    data() {
+      let vm = this;
+      return {
+        heading: 'Edit Entity',
+        icon: 'fa fa-edit',
+        menu_item_list: [
+          {
+            title: 'Dashboard',
+            active: false,
+            path: '/'
+          },
+          {
+            title: 'Entity List',
+            active: false,
+            path: '/entity/list'
+          },
+          {
+            title: 'Edit Entity',
+            active: true,
+            path: '/entity/edit/' + vm.$route.params.hash_id
+          },
+        ]
+      }
+    }
+  }
+</script>

resources/js/user/pages/entities/Filter.vue

@@ -0,0 +1,75 @@
+<template>
+	<b-col md="12">
+        <form @submit.prevent="$emit('clicked')" @keydown="form.errors.clear($event.target.name)">
+        	<text-input
+                :input_name="'name'"
+                :form="form"
+                :label="'Name'"
+            >
+        	</text-input>
+        	<select-option-auto-complete-input
+	        	:input_name="'status'"
+	        	:form="form"
+			    :exist_data="exist_entity_status"
+	        	:placeholder="''"
+	        	:label="'Status'"
+	        	:data_set="entity_status"
+	        	:array="true"
+	        ></select-option-auto-complete-input>
+	        <v-btn
+	        	depressed
+	        	small
+				type="submit"
+				color="primary"
+				class="m-0"
+			>
+				Submit
+			</v-btn>
+			<v-btn
+	        	depressed
+	        	small
+				type="button"
+				color="warning"
+				class="m-0"
+				@click="$emit('reset')"
+			>
+				Reset
+			</v-btn>
+        </form>
+	</b-col>
+</template>
+
+<script>
+    import TextInput from '../../components/inputs/TextInput';
+    import SelectOptionAutoCompleteInput from '../../components/inputs/SelectOptionAutoCompleteInput';
+
+	export default {
+		props: {
+			form: Object
+		},
+		components: {
+			TextInput,
+			SelectOptionAutoCompleteInput
+		},
+		data() {
+            let vm = this;
+            return {
+            	exist_entity_status: [],
+            	entity_status: General.autoCompleteKeyConvert(Constants.entity_status)
+            }
+        },
+        methods: {
+			initForm() {
+            	let vm = this;
+        		if (vm.form.status[0]) {
+        			let status_list = [];
+        			vm.exist_entity_status = General.initFormArray(vm.entity_status, vm.form.status);
+        		}
+        	}
+        },
+        created() {
+        	let vm = this;
+        	vm.initForm();
+        }
+	}
+</script>

resources/js/user/pages/entities/Form.vue

@@ -0,0 +1,97 @@
+  <template>
+    <b-card class="main-card mb-3">
+      <div v-if="!this_entity.data && mode == 'edit'" class="text-center">
+        <vue-element-loading :active="true" spinner="line-scale" color="var(--primary)"></vue-element-loading>
+      </div>
+      <div v-if="this_entity.data || mode == 'create'">
+        <form-wizard 
+          @on-complete="onComplete"
+          title="" 
+          subtitle=""
+          finish-button-text="Submit"
+          @keydown="form.errors.clear($event.target.name)"
+          color="var(--primary)"
+        >
+          <tab-content 
+            title="Details"
+            :before-change="validOne"
+            ref="valid_one"
+            icon="fa fa-info-circle"
+          >
+            <!-- ///////////////////////////////////////////////////// -->
+            <text-input
+              :input_name="'name'"
+              :form="form"
+              :label="'Name*'"
+            ></text-input>
+            <!-- ///////////////////////////////////////////////////// -->
+          </tab-content>
+        </form-wizard>
+      </div>
+    </b-card>
+  </template>
+
+  <script>
+    import TextInput from '../../components/inputs/TextInput';
+
+    export default {
+      props: {
+        mode: String
+      },
+      components: {
+        TextInput
+      },
+      data() {
+        return {
+          form: new Form({
+            name: '',
+          }),
+          this_entity: [],
+        }
+      },
+      methods: {
+        validOne() {
+          let vm = this;
+          let ref_inputs = ['name'];
+          let url = vm.mode == 'create' ? 'entity/valid-check' : 'entity/valid-check/' + vm.this_entity.data.hash_id;
+          return General.validCheck(url, vm.form, ref_inputs);
+        },
+        onComplete() {
+          let vm = this;
+          let method = vm.mode == 'create' ? 'post' : 'put';
+          let url = vm.mode == 'create' ? 'entity/store' : 'entity/update/' + vm.this_entity.data.hash_id;
+
+          return General.onComplete(url, vm.form, method)
+            .then(data => {
+              if (vm.mode != 'profile') {
+                  let pervious_query = data.pervious_query ? '?' + data.pervious_query : '';
+                  vm.$router.push('/entity/list' + pervious_query);
+              }
+            
+              if (vm.mode == 'create') {
+                General.toastedMessage('create', 'Entity', data.data.hash_id);
+              }
+              else {
+                General.toastedMessage('edit', 'Entity', data.data.hash_id);
+              }
+            });
+        },
+        loadThisContractTemplate() {
+          let vm = this;
+          let url = vm.mode == 'edit' ? 'entity/show/' + vm.$route.params.hash_id : 'entity/self';
+          let form = new Form({});
+          General.getCall(url, form).then(data => {
+            vm.this_entity = data;
+            vm.form.name = vm.this_entity.data.name;
+            vm.form.status = vm.this_entity.data.status;
+          });
+        }
+      },
+      created() {
+        let vm = this;
+        if (vm.mode == 'edit' || vm.mode == 'profile') {
+          vm.loadThisContractTemplate();
+        }
+      }
+    }
+</script>

resources/js/user/pages/entities/List.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <page-title
+      :heading="heading" 
+      :icon="icon"
+      :add="true"
+    ></page-title>
+    <breadcrumb  
+      :menu_item_list=menu_item_list
+    ></breadcrumb>
+    <entity-table></entity-table>
+  </div>
+</template>
+<script>
+  import PageTitle from "../../components/titles/PageTitle";
+  import Breadcrumb from "../../layouts/parts/Breadcrumb";
+  import EntityTable from "./Table";
+
+  export default {
+    metaInfo() {
+        let vm = this;
+        return {
+          title: Constants.site.title,
+          titleTemplate: '%s | ' + vm.$router.currentRoute.name
+        }
+    },
+    components: {
+      PageTitle,
+      Breadcrumb,
+      EntityTable
+    },
+    data() {
+      return {
+        heading: 'Entity List',
+        icon: 'fa fa-list',
+        menu_item_list: [
+          {
+            title: 'Dashboard',
+            active: false,
+            path: '/'
+          },
+          {
+            title: 'Entity List',
+            active: true,
+            path: 'list'
+          },
+        ],
+      }
+    }
+  }
+</script>

resources/js/user/pages/entities/Table.vue

@@ -0,0 +1,184 @@
+<template>
+  <div>
+    <b-card class="main-card mb-4">
+      <b-row class="mb-2" no-gutters>
+        <b-col md="6">
+            <button type="button" class="btn btn-primary" @click="filterToggle">
+              <i class="fa fa-filter"></i>
+            </button>
+            <div v-if="filter_status" class="filter dropdown-menu show">
+              <contract-template-filter
+                :form="form"
+                @clicked="filterSubmit"
+                @reset="FilterReset"
+              ></contract-template-filter>
+            </div>
+        </b-col>
+        <b-col md="6"  v-if="permission_list.includes('add contract')" class="text-right">
+          <router-link 
+            class="btn btn-primary" 
+            to="create" 
+            tag="button"
+          >
+            <i class="fa fa-plus"></i>
+          </router-link>
+        </b-col>
+      </b-row>
+      <table class="table table-striped">
+        <thead>
+          <paginate-nav
+            v-if="entity_list.page"
+            :colspan="colspan"
+            :pervious_page="entity_list.page.pervious_page"
+            :next_page="entity_list.page.next_page"
+            @clicked="dataHandler"
+          ></paginate-nav>
+          <tr>
+              <th>#</th>
+              <th style="width: 25%">Details</th>
+              <th>Status</th>
+              <th>Created</th>
+              <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-if="entity_list.data" v-for="(contract, $index) in entity_list.data" :key="$index">
+            <td>{{ $index + 1 }}</td>
+            <td>
+              <div><b>Name</b>: {{ contract.name }}</div>
+            </td>
+            <td>
+                <span :class="'badge badge-' + contract.status[0].color">{{ contract.status[0].name }}</span>
+            </td>
+            <td>
+              {{ contract.created_at }}
+            </td>
+            <td>
+              <router-link  
+                  v-if="permission_list.includes('edit contract')"
+                  :to="'edit/' + contract.hash_id" 
+                  class="btn btn-xs btn-light" 
+                  title="Edit"
+                >
+                  <i class="fa fa-edit"></i>
+              </router-link>
+            </td>
+          </tr>
+          <tr v-if="!entity_list.data || !entity_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="entity_list.page">
+          <paginate-nav
+            :colspan="colspan"
+            :pervious_page="entity_list.page.pervious_page"
+            :next_page="entity_list.page.next_page"
+            @clicked="dataHandler"
+          >
+          </paginate-nav>
+          <tr>
+            <td class="text-right" :colspan="colspan">
+              <small>Total: {{ entity_list.total }}</small>
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+    </b-card>
+  </div>
+</template>
+
+<script>
+  import ContractTemplateFilter from "./Filter";
+  import PaginateNav from '../../components/paginations/NextPerviousPagination';
+
+  export default {
+    components: {
+      ContractTemplateFilter,
+      PaginateNav
+    },
+    data() {
+      return {
+        form: new Form({
+            name: General.getURLParam('name'),
+            status: General.returnAray(General.getURLParam('status[]')),
+            page: General.getURLParam('page')
+        }),
+        colspan: 5,
+        filter_status: false,
+        loading: true,
+        entity_list: [],
+        permission_list: []
+      }
+    },
+    methods: {
+      getPermissionList() {
+        let vm = this;
+        let url = 'user/self';
+        let form = new Form({});
+        General.getCall(url, form).then(response => {
+            vm.permission_list = response.data.permission_list;
+        });
+      },
+      getContractTemplateList() {
+        let vm = this;
+        let url = 'entity/list';
+        vm.tableCall(url);
+      },
+      tableCall(url) {
+        let vm = this;
+        vm.loading = true;
+        General.tableCall(url, vm.form).then(response => {
+          vm.loading = false;
+          vm.entity_list = response;
+          vm.form.page = General.getURLParam('page');
+          vm.convertStatus();
+        });
+      },
+      convertStatus() {
+        let vm = this;  
+        vm.entity_list.data.forEach(function(element, index) {
+          element.status = General.initFormArray(Constants.entity_status, [element.status]);
+        });
+      },
+      dataHandler(url) {
+        let vm = this;
+        vm.form.page = General.getStringParam('page', url);
+        vm.tableCall('entity/list');
+      },
+      filterToggle() {
+        let vm = this;
+        vm.filter_status = !vm.filter_status;
+      },
+      filterCloseClick(e) {
+        let vm = this;
+        if (!vm.$el.contains(e.target) && !e.target.classList.contains('filter')) {
+          vm.filter_status = false;
+        }
+      },
+      filterSubmit() {
+        let vm = this;
+        let url = 'entity/list';
+        vm.form.page = '';
+        vm.tableCall(url);
+        vm.filterToggle();
+      },
+      FilterReset() {
+        let vm = this;
+        vm.form.reset();
+        vm.filterSubmit();
+      }
+    },
+    mounted() {
+      let vm = this;
+      document.addEventListener('click', vm.filterCloseClick);
+    },
+    created() {
+      let vm = this;
+      vm.getPermissionList();
+      vm.getContractTemplateList();
+    }
+  }
+</script>

resources/js/user/router.js

@@ -6,6 +6,10 @@ import Logins from './pages/logins/Index';
 import Dashboards from './pages/dashboards/Index';
 import UserProfile from './pages/users/Profile';
 
+import EntityList from './pages/entities/List';
+import EntityCreate from './pages/entities/Create';
+import EntityEdit from './pages/entities/Edit';
+
 import ContractTemplateList from './pages/contract-templates/List';
 import ContractTemplateCreate from './pages/contract-templates/Create';
 import ContractTemplateEdit from './pages/contract-templates/Edit';
@@ -45,6 +49,32 @@ let router = new Router({
             component: Dashboards
         },
         /////////////////////////////////////////////////////
+        // Entity
+        {
+            path: '/entity/list',
+            name: 'Entity List',
+            meta: {
+                auth: true
+            },
+            component: EntityList
+        },
+        {
+            path: '/entity/create',
+            name: 'Entity Create',
+            meta: {
+                auth: true
+            },
+            component: EntityCreate
+        },
+        {
+            path: '/entity/edit/:hash_id',
+            name: 'Entity Edit',
+            meta: {
+                auth: true
+            },
+            component: EntityEdit
+        },
+        /////////////////////////////////////////////////////
         // Contract Template
         {
             path: '/contract-template/list',

resources/js/user/utilities/constants.js

@@ -28,6 +28,18 @@ const Constant = {
          'color': 'danger'
       },
    ],
+   'entity_status': [
+      {
+         'id': 1,
+         'name': 'Active',
+         'color': 'primary'
+      },
+      {
+         'id': 2,
+         'name': 'De-active',
+         'color': 'danger'
+      }
+   ],
    'contract_template_status': [
       {
          'id': 1,
@@ -45,6 +57,23 @@ const Constant = {
          'color': 'warning'
       },
    ],
+   'contract_template_obligation_status': [
+      {
+         'id': 1,
+         'name': 'Active',
+         'color': 'primary'
+      },
+      {
+         'id': 2,
+         'name': 'De-active',
+         'color': 'danger'
+      },
+      {
+         'id': 9,
+         'name': 'Pending',
+         'color': 'warning'
+      },
+   ],
    'contract_status': [
       {
          'id': 1,

resources/js/user/utilities/navigationAccess.js

@@ -16,7 +16,22 @@ module.exports.menuDefine = function(permission = []) {
             },
         ]
     });
-  
+
+    /////////////////////////////////////////////////////
+    if (permission.includes('view entity')) {
+            let admin_access_menu = {};
+            admin_access_menu = {
+                title: 'Entity',
+                icon: 'fa fa-cubes',
+                child: [
+                    {
+                        href: '/entity/list',
+                        title: 'List',
+                    },
+                ]
+            };
+            menu.push(admin_access_menu);
+    }
     /////////////////////////////////////////////////////
     if (permission.includes('view contract_template')) {
             let admin_access_menu = {};