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/FL/ |
<template>
<div :class="wrapperClass">
<div class="sub-title">
<div class="left">
<h5>
Vehicle {{ index + 1 }} of {{ offlineFormPlates.length }}
</h5>
<p class="description">If you don't know your vehicle information - <a href="look-it-up.html">look it up.</a>
</p>
</div>
<a href="#" class="btn-cancel-vehicle" @click.prevent="unselectPlate">
<span>Cancel vehicle</span>
<svg width="9" height="10" viewBox="0 0 9 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.99903 1.56965L1 8.5M8 8.43035L1.00097 1.5" stroke="#FF0000" stroke-width="1.2"
stroke-linecap="round"></path>
</svg>
</a>
</div>
<input-field rules="required" :form="form" v-if="$store.state.emptyEstimates"
field="license_plate"
:vName="`license_plate_${index}`"
placeholder="License plate"/>
<vreg-select
:form="form"
header-text="Vehicle type"
required
@value-selected="v=>form.vehicle_type=v"
:fieldValue="form.vehicle_type"
v-if="vehicleTypes"
used-value-key="code"
:vName="`vehicle_type_${index}`"
:options="vehicleTypes"
field="vehicle_type">
<div slot="extra-field">
<transition name="slide">
<div class="v-radio-wrapper" v-if="form.vehicle_type==='largesuv'">
<ValidationProvider v-slot="{errors}" rules="required" :name="`vehicle_used_interstate_commerce_${index}`">
<label>
<input type="radio" :name="`vehicle_used_interstate_commerce_${index}`" class="radio-input"
value="yes"
v-model="form.vehicle_used_interstate_commerce">
<div class="radio-box">
<div class="outer">
<div class="inner"></div>
</div>
<p>This vehicle is used for interstate commerce and I certify that this vehicle has a curently valid
certification of safety inspection.</p>
</div>
</label>
<label>
<input type="radio" :name="`vehicle_used_interstate_commerce_${index}`" class="radio-input"
value="no"
v-model="form.vehicle_used_interstate_commerce">
<div class="radio-box">
<div class="outer">
<div class="inner"></div>
</div>
<p>This vehicle is not used for interstate commerce</p>
</div>
</label>
<span class="validation-err-msg"
v-for="err in $getFormInputErrors(errors,'vehicle_used_interstate_commerce',form)"
v-html="err">
</span>
</ValidationProvider>
</div>
</transition>
</div>
</vreg-select>
<input-field rules="required" :form="form" field="license_make" :vName="`vehicle_make_${index}`"
placeholder="Vehicle make "/>
<input-field :rules="vehicleYearValidation"
type="number"
:form="form" :vName="`vehicle_year_${index}`" field="vehicle_year"
placeholder="Vehicle year "/>
<v-reg-vue-simple-suggest
mode="input"
placeholder-text="Insurance provider"
display-attribute="value"
v-model="form.insurance_provider"
:filterByQuery="true"
:field="`insurance_provider`"
:rules="insuranceValidation"
:maxSuggestions="0"
:vName="`insurance_provider_${index}`"
:list="getInsuranceProviders"/>
<input-field :rules="insuranceValidation" :form="form"
field="insurance_policy_number"
:vName="`policy_number_${index}`"
placeholder="Policy number "/>
</div>
</template>
<script>
import InputField from "@/components/Forms/InputField";
import VregSelect from "@/components/Forms/VregSelect";
import insuranceProviders from '@/data/insurance_providers.json';
import vehicleTypes from '@/pricing/vehicle_types.json'
import VRegVueSimpleSuggest from "@/components/Forms//VregSuggesstions/v-reg-vue-simple-suggest";
export default {
name: "OfflineVehicleForm",
components: {VregSelect, InputField, VRegVueSimpleSuggest},
props: {
wrapperClass: {
required: false
},
plate: {
required: false
},
index: {
required: true
}
},
data() {
return {
vehicleTypes: Object.values(vehicleTypes),
vehicleYearValidation: 'required|length:4',
insuranceValidation: 'required',
hideInsuranceFields: false,
form: this.$form({
index: this.index,
vehicle_type: this.plate.vehicle_type || '',
vehicle_year: this.plate.vehicle_year || '',
license_make: this.plate.license_make || '',
license_plate: this.plate.license_plate || '',
expires_on: this.plate.expires_on || '',
license_plate_label: this.plate.license_plate || '',
prices: this.plate.prices || [],
insurance_provider: this.plate.insurance_provider || '',
insurance_policy_number: this.plate.insurance_policy_number || '',
insurance_copy: this.plate.insurance_copy || null,
vehicle_type_object: this.plate.vehicle_type_object || null,
vehicle_used_interstate_commerce: this.plate.vehicle_used_interstate_commerce || null
})
}
},
mounted() {
if (this.plate.vehicle_type_object) {
this.handleVehicleTypeValidations(this.plate.vehicle_type_object)
}
},
methods: {
getInsuranceProviders(query) {
let providers = [];
insuranceProviders.forEach(insuranceP => {
providers.push({
label: insuranceP,
value: insuranceP
})
})
return providers;
},
handleVehicleTypeValidations(vehicleType) {
this.vehicleYearValidation = 'required|length:4';
if (!vehicleType.year_required) {
this.vehicleYearValidation = '';
}
if (vehicleType.insurance_required) {
this.insuranceValidation = 'required';
} else {
this.insuranceValidation = '';
}
if (vehicleType.code !== 'largesuv') {
this.form.vehicle_used_interstate_commerce = null;
}
this.hideInsuranceFields = vehicleType.insurance_disabled;
},
unselectPlate() {
this.$store.commit('REMOVE_OFFLINE_FORM_PLATE', this.plate);
},
storePlate() {
this.$store.commit('SET_OFFLINE_FORM_PLATE', {...this.form.data()});
}
},
computed: {
offlineFormPlates() {
return this.$store.getters.getOfflineFormPlates
}
},
watch: {
'form.vehicle_year'() {
if (this.form.vehicle_year.length > 4) {
this.form.vehicle_year = this.form.vehicle_year.substr(0, 4);
}
},
'form.vehicle_type'(vehicleTypeCode) {
if (!vehicleTypeCode) {
return;
}
let vehicleTypeObject;
for (let vType in this.vehicleTypes) {
if (this.vehicleTypes[vType].code === vehicleTypeCode) {
vehicleTypeObject = this.vehicleTypes[vType];
}
}
this.handleVehicleTypeValidations(vehicleTypeObject);
this.form.vehicle_type_object = vehicleTypeObject;
}
},
beforeMount() {
this.$eventBus.$on(`submitOfflineStep_${this.index}`, this.storePlate);
},
beforeDestroy() {
this.$eventBus.$off(`submitOfflineStep_${this.index}`);
}
}
</script>
<style scoped>
</style>