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/PA/ |
<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>
<div class="v-form-row">
<div class="v-form-col">
<input-field rules="required" :form="form"
field="license_plate"
:vName="`license_plate_${index}`"
placeholder="License plate"/>
</div>
<div class="v-form-col">
<input-field rules="required|length:8" :form="form"
field="title"
:vName="`title_number_${index}`"
placeholder="Enter First 8 Title number"/>
</div>
</div>
<div class="v-form-row">
<div class="v-form-col">
<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>
</div>
<div class="v-form-col">
<input-field rules="required" :form="form" field="license_make" :vName="`vehicle_make_${index}`"
placeholder="Vehicle make "/>
</div>
</div>
<div class="v-form-row">
<div class="v-form-col">
<input-field rules="" :form="form" field="odometer_reading" :vName="`odometer_reading_${index}`"
placeholder="Odometer reading"/>
</div>
<div class="v-form-col">
<input-field :rules="vehicleYearValidation"
type="number"
:form="form" :vName="`vehicle_year_${index}`" field="vehicle_year"
placeholder="Vehicle year "/>
</div>
</div>
<div class="v-form-row">
<div class="v-form-col">
<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"/>
</div>
<div class="v-form-col">
<input-field :rules="insuranceValidation" :form="form"
field="insurance_policy_number"
:vName="`policy_number_${index}`"
placeholder="Policy number "/>
</div>
</div>
<div class="v-form-row">
<div class="v-form-col">
<ValidationProvider v-slot="{errors}" rules="required" :name="`effective_date_${index}`">
<b-form-datepicker :id="`effective_date_${index}`"
size="sm"
placeholder="Effective date"
:max="today"
:date-format-options="{ year: 'numeric', month: 'numeric', day: 'numeric' }"
v-model="form.effective_date"
:ref="`${index}_effective_date`"
class="mb-2"></b-form-datepicker>
<span class="validation-err-msg"
v-for="err in $getFormInputErrors(errors,'effective_date',form)"
v-html="err">
</span>
</ValidationProvider>
</div>
<div class="v-form-col">
<ValidationProvider v-slot="{errors}" rules="required" :name="`expiration_date_${index}`">
<b-form-datepicker :id="`expiration_date_${index}`"
size="sm"
:min="tomorrow"
placeholder="Expiration Date"
:date-format-options="{ year: 'numeric', month: 'numeric', day: 'numeric' }"
v-model="form.expiration_date"
:ref="`${index}_expiration_date`"
class="mb-2">
</b-form-datepicker>
<span class="validation-err-msg"
v-for="err in $getFormInputErrors(errors,'expiration_date',form)"
v-html="err">
</span>
</ValidationProvider>
</div>
</div>
</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({
state_code: 'PA',
title: this.plate.title || '',
index: this.index,
vehicle_type: this.plate.vehicle_type || '',
vehicle_year: this.plate.vehicle_year || '',
license_make: this.plate.license_make || '',
odometer_reading: this.plate.odometer_reading || '',
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,
effective_date: this.plate.effective_date || null,
expiration_date: this.plate.expiration_date || 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
},
tomorrow() {
let today = new Date()
let tomorrow = new Date(today)
tomorrow.setDate(tomorrow.getDate() + 1)
return tomorrow;
},
today() {
let now = new Date(),
today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
return new Date(today);
}
},
watch: {
'form.odometer_reading'(value) {
this.form.odometer_reading = value.replace(/[\D]/g, '');
},
'form.title'(value) {
if (value) {
this.form.title = value.substr(0, 8).replace(/[\D]/g, '');
}
},
'form.license_plate'(value) {
this.form.license_plate = value.replace(/[^a-zA-Z0-9]/g, '').toUpperCase();
},
'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>
.b-form-datepicker {
height: 50px !important;
font-size: 16px;
/*font: 600 16px / 20px 'Open Sans';*/
}
.b-form-datepicker label.form-control{
padding-top: 10px !important;
}
</style>