unity/resources/js/user/pages/contract-template-obligation-denpendencies/TableModal.vue

<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>