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

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