unity/resources/js/user/pages/contracts/Table.vue

<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-filter
                :form="form"
                @clicked="filterSubmit"
                @reset="FilterReset"
              ></contract-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="contract_list.page"
            :colspan="colspan"
            :pervious_page="contract_list.page.pervious_page"
            :next_page="contract_list.page.next_page"
            @clicked="dataHandler"
          ></paginate-nav>
          <tr>
              <th>#</th>
              <th style="width: 25%">Details</th>
              <th>Obligation Template</th>
              <th>Contract Entity</th>
              <th>Status</th>
              <th>Created</th>
              <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="contract_list.data" v-for="(contract, $index) in contract_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>
            </td>
            <td>
              <div v-if="contract.contract_obligation_list" v-for="(obligation, $index) in contract.contract_obligation_list" :key="$index">
                <div>
                  -{{ obligation.name }} 
                  <small>({{ obligation.sequence }})</small> 
                  <small>({{ obligation.contract_entity_list[0] ? obligation.contract_entity_list[0].entity_list[0].name : '-' }})</small>
                </div>
              </div>
              <div v-if="!contract.contract_obligation_list[0]">
                -
              </div>
            </td>
            <td>
              <div v-if="contract.contract_entity_list" v-for="(entity, $index) in contract.contract_entity_list" :key="$index">
                <div>-{{ entity.entity_list[0].name }}</div>
              </div>
              <div v-if="!contract.contract_entity_list[0]">
                -
              </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="!contract_list.data || !contract_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_list.page">
          <paginate-nav
            :colspan="colspan"
            :pervious_page="contract_list.page.pervious_page"
            :next_page="contract_list.page.next_page"
            @clicked="dataHandler"
          >
          </paginate-nav>
          <tr>
            <td class="text-right" :colspan="colspan">
              <small>Total: {{ contract_list.total }}</small>
            </td>
          </tr>
        </tfoot>
      </table>
    </b-card>
  </div>
</template>

<script>
  import ContractFilter from "./Filter";
  import PaginateNav from '../../components/paginations/NextPerviousPagination';

  export default {
    components: {
      ContractFilter,
      PaginateNav
    },
    data() {
      return {
        form: new Form({
            name: General.getURLParam('name'),
            status: General.returnAray(General.getURLParam('status[]')),
            page: General.getURLParam('page')
        }),
        colspan: 7,
        filter_status: false,
        loading: true,
        contract_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;
        });
      },
      getContractList() {
        let vm = this;
        let url = 'contract/list';
        vm.tableCall(url);
      },
      tableCall(url) {
        let vm = this;
        vm.loading = true;
        General.tableCall(url, vm.form).then(response => {
          vm.loading = false;
          vm.contract_list = response;
          vm.form.page = General.getURLParam('page');
          vm.convertStatus();
        });
      },
      convertStatus() {
        let vm = this;  
        vm.contract_list.data.forEach(function(element, index) {
            element.status = General.initFormArray(Constants.contract_status, [element.status]);
        });
      },
      dataHandler(url) {
        let vm = this;
        vm.form.page = General.getStringParam('page', url);
        vm.tableCall('contract/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 = 'contract/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.getContractList();
    }
  }
</script>