jason/DigitalConsumer.ISS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

restructured license-plate-lookup, start of alerts

Browse source
This commit is contained in:
Kroell 2023-01-03 12:06:35 -05:00
parent 928f9fd4c1
commit 64cd3468a9
4 changed files with 146 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue Normal file
View file

@ -0,0 +1,49 @@
<template>
<div
id="vin-lookup-alerts-wrapper"
:class="wrapperCssClass"
>
<!-- <VehicleNotFoundAlert
v-if="isVehicleNotFoundVisible"
/>
<VehicleNotMatchedAlert
v-else-if="isVehicleNotMatchedVisible"
/> -->
</div>
</template>
<script>
//import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
//import VehicleNotFoundAlert from './vehicle-not-found-alert/vehicle-not-found-alert.vue';
//import VehicleNotMatchedAlert from './vehicle-not-matched-alert/vehicle-not-matched-alert.vue';
export default {
name: 'license-plate-lookup-alerts',
components: {
//VehicleNotFoundAlert,
//VehicleNotMatchedAlert,
},
props: {
activeAlertType: {
type: String,
validator(value) {
const acceptedValues = [null];
acceptedValues.push(...Object.values(vehicleLookupAlertTypes));
return acceptedValues.includes(value);
},
},
},
computed: {
isVehicleNotFoundVisible() {
return this.activeAlertType === vehicleLookupAlertTypes.NOT_FOUND;
},
isVehicleNotMatchedVisible() {
return this.activeAlertType === vehicleLookupAlertTypes.NOT_MATCHED;
},
wrapperCssClass() {
return {
'mb-5': this.activeAlertType !== null,
};
},
},
};
</script>

23
src/layouts/license-plate-lookup/license-plate-lookup.vue
View file

@ -10,23 +10,10 @@
<siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
<div class="fade-on-route-transition sub-container make-tall">
<div class="mt-5">
<textboxQuestion
inputId="license_plate"
cmsWidgetName="LicensePlateNumberQuestionWidget"
v-model="licensePlate"
isRequired
disableAutoFill
validationRules="license-plate-required" />
<license-plate-question/>
</div>
<div class="mt-4">
<textboxQuestion
inputId="zip"
cmsWidgetName="RegistrationZipQuestionWidget"
v-model="registrationZipCode"
isRequired
disableAutoFill
mask="#####"
validationRules="zip-required|zip-format"/>
<zip-question/>
</div>
<!-- <alert
cmsWidgetName="AlertVinNotFoundWidget"
@ -57,6 +44,8 @@ import textboxQuestion from '../../common-components/textbox-question/textbox-qu
import { required, regex } from '@/helpers/validation-rules';
import { defineRule } from 'vee-validate';
import { errorMessages } from '@/constants/error-messages';
import LicensePlateQuestion from './license-plate-question/license-plate-question.vue';
import ZipQuestion from './zip-question/zip-question.vue';
// Define Validation Rules
defineRule("license-plate-required", required(errorMessages.LICENSE_PLATE_REQUIRED));
@ -73,7 +62,9 @@ export default {
siteSubHeader,
vehicleBanner,
textboxQuestion,
alert,
alert,
LicensePlateQuestion,
ZipQuestion,
},
data() {
// return {

45
src/layouts/license-plate-lookup/license-plate-question/license-plate-question.vue Normal file
View file

@ -0,0 +1,45 @@
<template>
<TextboxQuestion
inputId="license_plate"
cmsWidgetName="LicensePlateNumberQuestionWidget"
v-model="licensePlate"
isRequired
disableAutoFill
validationRules="license-plate-required"
/>
</template>
<script>
// Import Other Supporting File(s)
import { defineRule } from 'vee-validate';
import { regex, required } from '@/helpers/validation-rules';
import { errorMessages } from '@/constants/error-messages';
// Import Component(s)
import TextboxQuestion from '@/common-components/textbox-question/textbox-question.vue';
defineRule("license-plate-required", required(errorMessages.LICENSE_PLATE_REQUIRED));
defineRule("zip-required", required(errorMessages.REGISTRATION_ZIP_REQUIRED));
defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
export default {
name: 'license-plate-question',
props: {
modelValue: String,
},
emits: ['update:modelValue'],
components: {
TextboxQuestion,
},
computed: {
licensePlate: {
get() {
return this.modelValue;
},
set(newValue) {
this.$emit('update:modelValue', newValue);
},
},
},
};
</script>

45
src/layouts/license-plate-lookup/zip-question/zip-question.vue Normal file
View file

@ -0,0 +1,45 @@
<template>
<TextboxQuestion
inputId="zip"
cmsWidgetName="RegistrationZipQuestionWidget"
v-model="registrationZipCode"
isRequired
disableAutoFill
validationRules="zip-required|zip-format"
mask="#####"
/>
</template>
<script>
// Import Other Supporting File(s)
import { defineRule } from 'vee-validate';
import { regex, required } from '@/helpers/validation-rules';
import { errorMessages } from '@/constants/error-messages';
// Import Component(s)
import TextboxQuestion from '@/common-components/textbox-question/textbox-question.vue';
defineRule("zip-required", required(errorMessages.REGISTRATION_ZIP_REQUIRED));
defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.ZIP_FORMAT));
export default {
name: 'zip-question',
props: {
modelValue: String,
},
emits: ['update:modelValue'],
components: {
TextboxQuestion,
},
computed: {
registrationZipCode: {
get() {
return this.modelValue;
},
set(newValue) {
this.$emit('update:modelValue', newValue);
},
},
},
};
</script>