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

selection and reselection works, added empty string check to entry page to avoid and error message, fixed styling on vehicle selection

Browse source
This commit is contained in:
Jason Wheeler 2023-05-19 16:18:47 -04:00
parent 5bb51aba99
commit 863c06871a
5 changed files with 67 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/iss-components/site-sub-header/site-sub-header.vue
View file

@ -12,8 +12,8 @@
/>
</h5>
</div>
<div class="d-flex align-items-center container-fluid overflow-hidden" :class="justifySubheader">
<p class="text-center fw-normal mb-0 subheader-secondary" :class="alternateFormatting">
<div class="subheader-secondary d-flex align-items-center container-fluid overflow-hidden" :class="justifySubheader">
<p class="fw-normal mb-0" :class="alternateFormatting">
<span v-html="subText">
</span>
</p>
@ -92,4 +92,18 @@ import buttonBack from "@/iss-components/site-sub-header/button-back/button-back
line-height: 24px;
}
.subheader-secondary {
&.justify-content-center{
p {
text-align: center;
}
}
&.justify-content-left{
p {
text-align: left;
}
}
}
</style>

3
src/iss-components/vehicle-banner/vehicle-banner.vue
View file

@ -67,9 +67,6 @@ export default {
return this.carUnmatchedVehicleIcon;
}
},
forceRerender() {
this.componentKey += 1;
}
}
};
</script>

19
src/layouts/entry-page/entry-page.vue
View file

@ -88,16 +88,19 @@
try
{
const clientFlags = JSON.parse(data.clientFlags);
if ( clientFlags.TPAEnabled )
if(data.clientFlags)
{
this.mainStore.issConfig.enableTPAFlow = true;
}
const clientFlags = JSON.parse(data.clientFlags);
if ( clientFlags.ClientDisplayName != null )
{
this.mainStore.issConfig.clientDisplayName = clientFlags.ClientDisplayName;
if ( clientFlags.TPAEnabled )
{
this.mainStore.issConfig.enableTPAFlow = true;
}
if ( clientFlags.ClientDisplayName != null )
{
this.mainStore.issConfig.clientDisplayName = clientFlags.ClientDisplayName;
}
}
}
catch ( e )

13
src/layouts/vehicle-selection/vehicle-question/vehicle-question.vue
View file

@ -35,7 +35,7 @@ export default {
},
set(newValue) {
this.selectedIndex = newValue;
newValue = newValue ? this.values[newValue] : null;
newValue = newValue != null && newValue > -1 ? this.values[newValue] : null;
this.$emit("update:modelValue", newValue);
}
},
@ -43,8 +43,15 @@ export default {
methods: {
async getNewValues() {
const results = await this.updateValues();
this.values = results?.data;
this.selectedValue = null;
this.values = results?.data;
if(this.values.length == 1)
{
this.selectedValue = 0;
}
else {
this.selectedValue = null;
}
},
clearValues() {
this.values = [];

48
src/layouts/vehicle-selection/vehicle-selection.vue
View file

@ -8,11 +8,15 @@
<div class="row">
<div class="col">
<div class="select-car-form rounded">
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" class="mt-5" />
<siteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
class="siteSubHeader"
justification="left"
/>
<vehicleQuestion
ref="vehicleYearQuestion"
class="px-4 mb-2 mt-4"
class="mb-2 mt-4"
v-model="selectedYear"
cmsWidgetName="VehicleYearQuestion"
:updateValues="updateYearValues"
@ -21,7 +25,7 @@
/>
<vehicleQuestion
ref="vehicleMakeQuestion"
class="px-4 mb-2 mt-4"
class="mb-2 mt-4"
v-model="selectedMake"
cmsWidgetName="VehicleMakeQuestion"
:updateValues="updateMakeValues"
@ -30,7 +34,7 @@
/>
<vehicleQuestion
ref="vehicleModelQuestion"
class="px-4 mb-2 mt-4"
class="mb-2 mt-4"
v-model="selectedModel"
cmsWidgetName="VehicleModelQuestion"
:updateValues="updateModelValues"
@ -39,7 +43,7 @@
/>
<vehicleQuestion
ref="vehicleStyleQuestion"
class="px-4 mb-2 mt-4"
class="mb-2 mt-4"
v-model="selectedStyle"
cmsWidgetName="VehicleStyleQuestion"
:updateValues="updateStyleValues"
@ -102,23 +106,13 @@ export default {
selectedYear: null,
selectedMake: null,
selectedModel: null,
selectedStyle: null,
displayGeneric: true
selectedStyle: null,
};
},
props:{
cmsWidgetName:String,
validationRules:String,
},
setup() {
const { meta, validate, resetForm } = useForm();
return {
meta,
validate,
resetForm,
};
},
mounted(){
this.$refs["vehicleYearQuestion"].getNewValues();
},
@ -146,7 +140,6 @@ export default {
watch: {
selectedYear(value) {
this.mainStore.updateVehicleYear(value);
if(value)
{
this.$refs["vehicleMakeQuestion"].getNewValues();
@ -178,7 +171,6 @@ export default {
selectedStyle(value) {
this.mainStore.updateVehicleStyle(value);
this.mainStore.setVehicle();
this.$nextTick(() => {this.displayGeneric = false; this.$refs["banner"].forceRerender();});
},
},
methods: {
@ -213,6 +205,11 @@ export default {
return await this.mainStore.getVehicleStyles();
},
},
computed: {
displayGeneric() {
return !useMainStore().order.vehicle.imageUrl || !this.selectedStyle;
}
},
components: {
siteHeader,
siteSubHeader,
@ -223,3 +220,18 @@ export default {
},
};
</script>
<style lang="scss">
.select-car-form {
margin-left: .75rem;
margin-right: .75rem;
}
.siteSubHeader {
margin-top: 1.5rem;
}
.subheader-secondary {
margin-top: .5rem;
padding: 0px;
}
</style>