added dropdown-question component to page

This commit is contained in:
Kroell 2023-01-20 11:17:49 -05:00
parent dcbc8d08ba
commit 853a7affe7

View file

@ -33,13 +33,14 @@
disableAutoFill disableAutoFill
inputId="license-plate-question" inputId="license-plate-question"
validationRules="license-plate-required" /> validationRules="license-plate-required" />
<textboxQuestion <dropdownQuestion
cmsWidgetName="RegistrationZipQuestionWidget" cmsWidgetName="StateQuestionWidget"
v-model="registrationZipCode" v-model="licenseState"
isRequired ref="state"
inputId="8fdf9dc2e13e430eb57529499dceb3eb"
:options="stateOptions"
disableAutoFill disableAutoFill
inputId="zip" validationRules="state-required"
validationRules="zip-required|zip-format"
class="mt-4" /> class="mt-4" />
<siteFooter <siteFooter
:isForwardActionDisabled="!meta.valid" :isForwardActionDisabled="!meta.valid"
@ -57,10 +58,11 @@ import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
import { settleAllPromises } from '@/helpers/layout-helper'; import { settleAllPromises } from '@/helpers/layout-helper';
import { useMainStore } from '@/store'; import { useMainStore } from '@/store';
import { errorMessages } from "@/constants/error-messages"; import { errorMessages } from "@/constants/error-messages";
import { required, regex } from "@/helpers/validation-rules"; import { required } from "@/helpers/validation-rules";
import { defineRule } from "vee-validate"; import { defineRule } from "vee-validate";
import { getDamageString, isGlassAvailableForCarId } from '@/helpers/damage-helper.js'; import { getDamageString, isGlassAvailableForCarId } from '@/helpers/damage-helper.js';
import { routerParams } from '@/router/router-params.js' import { routerParams } from '@/router/router-params.js'
import { states } from "@/constants/states";
// Import Component // Import Component
import baseFormMixin from '@/mixins/base-form-mixin'; import baseFormMixin from '@/mixins/base-form-mixin';
@ -71,12 +73,12 @@ import siteHeader from '@/common-components/site-header/site-header.vue';
import siteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue'; import siteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue';
import vehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue'; import vehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
import textboxQuestion from '@/common-components/textbox-question/textbox-question.vue'; import textboxQuestion from '@/common-components/textbox-question/textbox-question.vue';
import dropdownQuestion from '@/common-components/dropdown-question/dropdown-question.vue';
import alert from "@/ux-components/alert/alert"; import alert from "@/ux-components/alert/alert";
// Define Validation Rules // Define Validation Rules
defineRule("license-plate-required", required(errorMessages.LICENSE_PLATE_REQUIRED)); defineRule("license-plate-required", required(errorMessages.LICENSE_PLATE_REQUIRED));
defineRule("zip-required", required(errorMessages.REGISTRATION_ZIP_REQUIRED)); defineRule("state-required", required(errorMessages.STATE_REQUIRED));
defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
export default { export default {
name: 'license-plate-lookup', name: 'license-plate-lookup',
@ -261,6 +263,11 @@ export default {
.replaceAll("{custom:vinYmmFound}", vinYmmFound) .replaceAll("{custom:vinYmmFound}", vinYmmFound)
.replaceAll("{custom:vinYmmExpected}", vinYmmExpected); .replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
}, },
stateOptions: {
get: function () {
return states;
},
},
}, },
watch: { watch: {
licensePlate() { licensePlate() {
@ -281,6 +288,7 @@ export default {
siteSubHeader, siteSubHeader,
vehicleBanner, vehicleBanner,
textboxQuestion, textboxQuestion,
dropdownQuestion,
alert alert
}, },
}; };