Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory :  /home/corals/vreg/components/States/AZ/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<template>
  <div :class="wrapperClass">


    <div class="row">
      <div class="col-md-12">
        <input-field rules="required" :form="form"
                     field="license_plate"
                     :vName="`license_plate_${index}`"
                     placeholder="License plate"/>
      </div>
    </div>


    <div class="row">
      <div class="col-md-6" :class="{'disabled-div':!!form.last_company_name}">
        <input-field :rules="vinValidationRules"
                     :disabled="!!form.last_company_name"
                     :form="form" field="vin" :vName="`vin_${index}`"
                     placeholder="Last 2 Digits of VIN"/>
      </div>

      <div class="col-md-6" :class="{'disabled-div':!!form.vin}">
        <input-field :rules="lastCompanyNameValidationRules"
                     :disabled="!!form.vin"
                     :form="form" field="last_company_name"
                     :vName="`last_company_name_${index}`"
                     placeholder="Last Name or Company"/>
      </div>
    </div>

  </div>
</template>

<script>

import InputField from "@/components/Forms/InputField";

export default {
  name: "OfflineVehicleForm",
  components: {InputField},
  props: {
    wrapperClass: {
      required: false
    },
    plate: {
      required: false
    },
    index: {
      required: true
    }
  },
  data() {

    return {
      form: this.$form({
        state_code: 'AZ',
        vin: this.plate.vin || '',
        license_plate: this.plate.license_plate || '',
        index: this.index,
        prices: this.plate.prices || [],
        expires_on: this.plate.expires_on || '',
        license_plate_label: this.plate.license_plate || '',
        last_company_name: this.plate.last_company_name || ''
      })
    }
  },
  methods: {

    storePlate() {
      this.$store.commit('SET_OFFLINE_FORM_PLATE', {...this.form.data()});
    }
  },
  computed: {
    offlineFormPlates() {
      return this.$store.getters.getOfflineFormPlates
    },
    vinValidationRules() {

      if (this.form.last_company_name) {
        return '';
      }

      return 'required|length:2';
    },
    lastCompanyNameValidationRules() {
      if (this.form.vin) {
        return '';
      }

      return 'required';
    }
  },
  watch: {
    'form.vin'(value) {
      if (value) {
        this.form.vin = value.substr(0, 2).replace(/[\D]/g, '');
      }
    },
    'form.license_plate'(value) {
      this.form.license_plate = value.replace(/[^a-zA-Z0-9]/g, '').toUpperCase();
    }
  },
  beforeMount() {
    this.$eventBus.$on(`submitOfflineStep_${this.index}`, this.storePlate);
  },
  beforeDestroy() {
    this.$eventBus.$off(`submitOfflineStep_${this.index}`);
  }
}
</script>

<style scoped>

</style>