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

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