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

CSR-715 WIP

Browse source
This commit is contained in:
Katie 2022-07-01 08:16:54 -04:00
parent bf99739e98
commit 17db77bcb3
5 changed files with 70 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/common-components/button-question/button-question.vue
View file

@ -11,6 +11,8 @@
</legend>
<div :class="getComponentLoopWrapperClasses">
<div :class="getComponentWrapperClasses" v-for="answer in answers" :key="answer.Name ? answer.Name : answer">
BQ: {{ getValues(answer) }}
BQ MV: {{ modelValue }}
<component
:is="buttonType"
@isCheckedChanged="handleCheckedChanged"
@ -152,6 +154,8 @@ export default {
return this.modelValue;
},
set: function(newValue) {
console.log("selectedValues")
console.log(newValue)
this.$emit("update:modelValue", newValue);
}
},
@ -178,6 +182,10 @@ export default {
}
}
console.log("handling")
console.log(val)
console.log(this.selectedValues)
this.$emit("isCheckedChanged", val);
},
},

20
src/layouts/vehicle-damage/vehicle-damage.vue
View file

@ -5,6 +5,7 @@
ref="theForm"
v-slot="{ meta }"
>
{{ selectedDamageLocations }}
<div class="page-container-grouped-styles">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
@ -201,32 +202,32 @@ export default {
},
getWindshieldOptionsFromStore() {
var windShieldOptions = { selectedWindshieldDamageType: [], selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: []};
var windShieldOptions = { selectedWindshieldDamageType: "", selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: []};
if (store.getters.damage.isRepair === undefined) return windshieldOptions;
if (!store.getters.damage.isRepair) {
if (store.getters.damage.glassToReplace?.some(glass => { return glass.location === damageLocationsSelected.WINDSHIELD &&
glass.name === damageLocationsSelected.SINGLE })) {
windShieldOptions.selectedWindshieldDamageType.push(damageLocationsSelected.REPLACE);
windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPLACE;
windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.SINGLE);
}
if (store.getters.damage.glassToReplace?.some(glass => { return glass.location === damageLocationsSelected.WINDSHIELD &&
glass.name === damageLocationsSelected.DRIVER })) {
windShieldOptions.selectedWindshieldDamageType.push(damageLocationsSelected.REPLACE);
windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPLACE;
windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.DRIVER);
}
if (store.getters.damage.glassToReplace?.some(glass => { return glass.location === damageLocationsSelected.WINDSHIELD &&
glass.name === damageLocationsSelected.PASSENGER })) {
windShieldOptions.selectedWindshieldDamageType.push(damageLocationsSelected.REPLACE);
windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPLACE;
windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.PASSENGER);
}
}
if (store.getters.damage.isRepair) {
windShieldOptions.selectedWindshieldDamageType.push(damageLocationsSelected.REPAIR);
windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPAIR;
windShieldOptions.selectedWindshieldChipCount.push(store.getters.damage.numberOfChips);
}
@ -284,6 +285,7 @@ export default {
},
async forwardButtonAction() {
// TODO CSR-715 look here
store.commit(this.storeMutations.UPDATE_IS_REPAIR, this.isWindshieldRepair);
if (this.isWindshieldRepair){
@ -311,6 +313,7 @@ export default {
},
selectedGlassToReplace() {
// TODO CSR-715
const selectedGlassToReplace = [];
if (this.isWindshieldDamageLocation && !this.isWindshieldRepair){
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach(wsItem => {
@ -361,10 +364,7 @@ export default {
isWindshieldRepair() {
if (!this.isWindshieldDamageLocation) return false;
return this.selectedWindshieldOptions.selectedWindshieldDamageType && this.selectedWindshieldOptions.selectedWindshieldDamageType.some(selectedDamageType =>
{
return selectedDamageType.toUpperCase() === "REPAIR";
});
return this.selectedWindshieldOptions.selectedWindshieldDamageType.toUpperCase() === "REPAIR";
},
isDriverSideReplace() {
if (!this.isSideDoorDamageLocation) return false;
@ -386,7 +386,7 @@ export default {
return this.isWindshieldDamageLocation && this.selectedDamageLocations.length > 1 && this.isWindshieldRepair;
},
hasSplitSingleConflict() {
if (!this.selectedDamageLocations || !this.selectedDamageLocations.includes("Windshield") || !this.selectedWindshieldOptions.selectedWindshieldDamageType || !this.selectedWindshieldOptions.selectedWindshieldDamageType.includes("Replace") || !this.selectedWindshieldOptions.selectedWindshieldReplaceOptions) return false;
if (!this.selectedDamageLocations?.includes("Windshield") || this.selectedWindshieldOptions.selectedWindshieldDamageType?.toUpperCase() === "REPAIR" || !this.selectedWindshieldOptions.selectedWindshieldReplaceOptions) return false;
return this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.some(selectedSingleWindshield =>
{

6
src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
View file

@ -1,6 +1,7 @@
<template>
<transition name="fade" mode="out-in">
<div class="windshield-damage-type-question" v-if="isAvailable" aria-live="polite">
WDTQ: {{ modelValue }}
<buttonQuestion
:questionText="questionText"
:answers="answersFromCms"
@ -22,7 +23,7 @@ import store from "@/store";
export default ({
name: "windshieldDamageTypeQuestion",
props: {
modelValue: Array,
modelValue: String,
groupName: String,
isAvailable: Boolean,
suppressError: Boolean,
@ -41,7 +42,10 @@ export default ({
return this.modelValue;
},
set: function(newValue) {
console.log("setting")
console.log(newValue)
this.$emit("update:modelValue", newValue);
this.$nextTick();
}
},
},

36
src/layouts/vehicle-damage/windshield-options/windshield-options.vue
View file

@ -1,5 +1,6 @@
<template>
<div class="windshield-options">
{{ windshieldDamageTypeQuestionValidationRules }}
<windshieldDamageTypeQuestion cmsWidgetName="WindshieldDamageTypeQuestion"
:isAvailable=isWindshieldDamageLocation
:suppressError="hasRepairReplaceConflict || showNoReplacementAvailableError"
@ -14,6 +15,10 @@
alertClass="alert-danger"
:isDismissible="false"
/>
WO:<br>
<!-- {{ isRepairOptionSelected }}<br>
{{ isReplaceOptionSelected }}<br> -->
{{ selectedWindshieldDamageTypeValues }}<br>
<windshieldChipCountQuestion cmsWidgetName="WindshieldChipCountQuestion"
:isAvailable="isRepairOptionSelected && !hasRepairReplaceConflict"
groupName="WindshieldChipCountQuestion"
@ -21,7 +26,7 @@
validationRules="windshield-chip-count-required"
/>
<replaceOptionsQuestion ref="replaceOptionsQuestion" cmsWidgetName="WindshieldReplaceOptionsQuestion"
:isAvailable=isReplaceOptionSelected
:isAvailable="isReplaceOptionSelected"
isMultiSelect
groupName="WindshieldReplaceOptions"
v-model="selectedWindshieldReplaceOptionsValues"
@ -51,18 +56,28 @@ import { errorMessages } from "@/constants/error-messages";
import { damageLocationsSelected } from "@/constants/damage-locations-selected.js";
// DEFINE VALIDATION RULES
console.log("Defining the rules")
defineRule("windshield-damage-type-required", required(errorMessages.WINDSHIELD_DAMAGE_TYPE_REQUIRED));
defineRule("windshield-chip-count-required", required(errorMessages.WINDSHIELD_CHIP_COUNT_REQUIRED));
defineRule("windshield-replace-options-required", required(errorMessages.WINSHIELD_REPLACE_OPTIONS_REQUIRED));
defineRule("check-for-repair-and-replace", (value, [otherFieldValue]) => {
console.log(value)
console.log(otherFieldValue)
console.log(value.toString().toUpperCase().includes(damageLocationsSelected.REPAIR.toUpperCase()))
console.log(otherFieldValue.toString().toUpperCase().includes(damageLocationsSelected.WINDSHIELD.toUpperCase()))
console.log(Array.isArray(otherFieldValue))
console.log(otherFieldValue.length > 1)
// this.$nextTick();
if (value.toString().toUpperCase().includes(damageLocationsSelected.REPAIR.toUpperCase()) &&
otherFieldValue.toString().toUpperCase().includes(damageLocationsSelected.WINDSHIELD.toUpperCase()) &&
Array.isArray(otherFieldValue) &&
otherFieldValue.length > 1)
{
console.log("A")
return false;
}
console.log("B")
return true;
});
defineRule("repair-only", (value) => {
@ -91,7 +106,7 @@ export default ({
},
props: {
modelValue: Array,
modelValue: String,
selectedDamageLocations: Array,
hasRepairReplaceConflict: Boolean,
hasSplitSingleConflict: Boolean,
@ -103,6 +118,8 @@ export default ({
this.$refs.replaceOptionsQuestion.initializeComponent(windshieldAvailableReplacementOptions);
},
getWindshieldOptions(selectedWindshieldDamageType, selectedWindshieldChipCount, selectedWindshieldReplaceOptions){
console.log("getWindshieldOptions")
console.log(selectedWindshieldDamageType)
// ONLY UPDATE THE NEW VALUE IF IT IS TRUTHY (NOT NULL)
return {
selectedWindshieldDamageType: selectedWindshieldDamageType ? selectedWindshieldDamageType : this.selectedValues.selectedWindshieldDamageType,
@ -114,18 +131,27 @@ export default ({
computed: {
selectedValues: {
get: function() {
console.log("selectedValues in WO")
console.log(this.modelValue)
return this.modelValue;
},
set: function(newValue) {
console.log("setting selectedValues in WO")
console.log(newValue)
this.$emit("update:modelValue", newValue);
}
},
selectedWindshieldDamageTypeValues:{
selectedWindshieldDamageTypeValues: {
get: function() {
return this.selectedValues.selectedWindshieldDamageType;
},
set: function(newValue) {
console.log("selectedWindshieldDamageTypeValues")
console.log("I'm changing!")
console.log(newValue)
this.selectedValues = this.getWindshieldOptions(newValue, null, null);
// console.log(this.selectedValues)
console.log(this.getWindshieldOptions(newValue, null, null))
}
},
selectedWindshieldChipCountValues: {
@ -153,12 +179,12 @@ export default ({
isRepairOptionSelected(){
if (!this.selectedWindshieldDamageTypeValues) return false;
return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPAIR") && this.isWindshieldDamageLocation;
return this.selectedWindshieldDamageTypeValues.toUpperCase() === "REPAIR" && this.isWindshieldDamageLocation;
},
isReplaceOptionSelected(){
if (!this.selectedWindshieldDamageTypeValues) return false;
return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPLACE") && this.isWindshieldDamageLocation;
return this.selectedWindshieldDamageTypeValues.toUpperCase() === "REPLACE" && this.isWindshieldDamageLocation;
},
isWindshieldReplaceAvailable() {
return !(Array.isArray(this.windshieldAvailableReplacementOptions) && this.windshieldAvailableReplacementOptions.length < 1);

18
src/ux-components/list-card/list-card.vue
View file

@ -1,5 +1,7 @@
<template>
<div :class="{'h-100': !isWide}">
{{ errors }}
<br>{{ hasError }}
<div
class="list-card w-100 rounded-3 d-flex align-items-center"
:class="[
@ -133,7 +135,9 @@ export default {
},
},
methods: {
handleInputChange() {
handleInputChange(x) {
console.log("handleInputChange")
console.log(x)
if(!this.selectingInitiatesLoad) {
this.handleCheckChange();
}
@ -148,7 +152,9 @@ export default {
}
this.handleChange(this.value);
},
triggerButton() {
triggerButton(x) {
console.log("triggerButton")
console.log(x)
if(this.selectingInitiatesLoad) {
this.displayLoader();
this.handleCheckChange();
@ -157,11 +163,19 @@ export default {
this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true);
},
handleCheckChange() {
console.log("handleCheckChange")
console.log("multiselect: " + this.isMultiSelect)
const emitEvent = {
checkValue: this.checkValue, // only read on checkboxes, on handleCheckedChanged on button-question
value: this.value.toString(),
buttonId: this.buttonID && this.buttonID.toString(),
};
console.log(emitEvent)
this.$emit("isCheckedChanged", emitEvent);
this.$emit("update:modelValue", emitEvent);
},