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

<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>
          <draggable v-model="drag_drop_contract_template_obligation_list" @change="onUpdateSequence()" tag="tbody">
            <tr class="move-cursor" v-if="drag_drop_contract_template_obligation_list" v-for="(contract, $index) in drag_drop_contract_template_obligation_list" :key="$index">
              <td>{{ $index + 1 }}</td>
              <td>
                <div><b>Name</b>: {{ contract.name }}</div>
                <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>
          </draggable>
          <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';
  import Draggable from 'vuedraggable';

  export default {
    props: {
      this_contract_template: Object,
      permission_list: Array
    },
    components: {
      PaginateNav,
      ContractTemplateObligationFormModal,
      Draggable
    },
    data() {
        let vm = this;
        return {
          form: new Form({
            contract_template_id: [],
            page: ''
          }),
          colspan: 7,
          loading: true,
          contract_template_obligation_list: [],
          drag_drop_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.drag_drop_contract_template_obligation_list = [];
          vm.convertStatus();
          vm.contract_template_obligation_list.data.forEach(function(element, index) {
            vm.drag_drop_contract_template_obligation_list.push(element);
          });
        });
      },
      convertStatus() {
        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');
      },
      onUpdateSequence() {
        let vm = this;
        let form = new Form({
          contract_template_obligation_id: []
        });
        vm.drag_drop_contract_template_obligation_list.forEach(function(element, index) {
          form.contract_template_obligation_id.push(element.hash_id);
        });

        let method = 'put';
        let url = 'contract-template-obligation/update-batch-sequence';
        General.onComplete(url, form, method)
        .then(data => {
          General.toastedMessage('edit', 'Contract Template Obligation Sequence', data.data.hash_id);
          vm.getContractTemplateObligationList();
        })
        .catch(function (error) {
            let error_mesage = General.errorData(error);
            Vue.toasted.error(error_mesage, {
                icon : {
                    name : 'close',
                }
            }).goAway(3500);
        });
      },
    }
  }
</script>