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

CSR-762 Some naming changes

Browse source
This commit is contained in:
Katie 2022-09-22 10:21:52 -04:00
parent b14ca820ac
commit c04b99af1b
8 changed files with 171 additions and 147 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -84,8 +84,8 @@
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<div <div
v-if=" v-if="
typeof selectedValues == 'string' && typeof primaryValue == 'string' &&
selectedValues == answer.Name primaryValue == answer.value
"> ">
<slot></slot> <slot></slot>
</div> </div>
@ -148,6 +148,11 @@ export default {
default: true, default: true,
}, },
}, },
data() {
return {
primaryValue: ""
}
},
computed: { computed: {
getFieldSetClasses() { getFieldSetClasses() {
if (this.isOverflowScrollable) { if (this.isOverflowScrollable) {
@ -260,12 +265,13 @@ export default {
// } // }
// this.$emit("isCheckedChanged", val); // this.$emit("isCheckedChanged", val);
// }, // },
handleAnswerChange(eventValue) { handleAnswerChange(primaryAnswerValue) {
console.log({ console.log({
bqEvent: eventValue bqEvent: primaryAnswerValue
}) })
this.$emit("change", eventValue); this.primaryValue = primaryAnswerValue;
this.$emit("update:modelValue", eventValue); this.$emit("change", primaryAnswerValue);
this.$emit("update:modelValue", primaryAnswerValue);
}, },
}, },
components: { components: {

2
src/common-components/question-chain/question-chain.vue
View file

@ -1,7 +1,5 @@
<template> <template>
<div v-for="(q, i) in questions" :key="i"> <div v-for="(q, i) in questions" :key="i">
q.answerSelected: {{q.answerSelected}}<br/>
currentQuestionNum: {{currentQuestionNum}}
<transition appear name="fade" mode="out-in"> <transition appear name="fade" mode="out-in">
<!-- <buttonQuestion <!-- <buttonQuestion
v-if="q.answerSelected || (q.questionSequence === currentQuestionNum)" v-if="q.answerSelected || (q.questionSequence === currentQuestionNum)"

9
src/layouts/part-questions/part-questions.vue
View file

@ -122,11 +122,10 @@ export default {
}, },
async forwardButtonAction() { async forwardButtonAction() {
const questionAnswersArray = this.partsQuestionsData.map((glass) => { const questionAnswersArray = this.partsQuestionsData.map((glass) => {
console.log(glass)
return { return {
glassLocation: glass.glassLocation, glassLocation: glass.glassLocation,
glassName: glass.glassName, glassName: glass.glassName,
result: glass.answerData.result, result: glass.answerData.answerResult,
answeredQuestions: glass.answerData.answeredQuestions, answeredQuestions: glass.answerData.answeredQuestions,
isSuppressedPart: glass.isSuppressedPart, isSuppressedPart: glass.isSuppressedPart,
}; };
@ -194,7 +193,7 @@ export default {
// only look for duplicates forward... to parts that follow after the currently being answered part // only look for duplicates forward... to parts that follow after the currently being answered part
if (gpIndex > answer.glassIndex) { if (gpIndex > answer.glassIndex) {
console.log("RESETTING ANSWERDATA")
let suppressUntil; let suppressUntil;
// reset this glass part, in case user is changing their previous answers // reset this glass part, in case user is changing their previous answers
glass.answerData = null; glass.answerData = null;
@ -298,7 +297,6 @@ export default {
return !q.suppressQuestion; return !q.suppressQuestion;
}); });
console.log("REMAINING QUESTIONS", remainingQuestions)
if (remainingQuestions.length < 1) { if (remainingQuestions.length < 1) {
// this is the final answer for this glass part // this is the final answer for this glass part
@ -315,8 +313,6 @@ export default {
answeredQuestions: [answeredQuestionObj], answeredQuestions: [answeredQuestionObj],
}; };
console.log(glass.answerData)
// suppress this glass because it has an answer // suppress this glass because it has an answer
glass.isSuppressedPart = true; glass.isSuppressedPart = true;
} }
@ -420,7 +416,6 @@ export default {
this.selectedAnswers[glass.key] = []; this.selectedAnswers[glass.key] = [];
if (!alreadyAnsweredQuestions) { if (!alreadyAnsweredQuestions) {
console.log("NULLING ANSWERDATA")
glass.answerData = null; glass.answerData = null;
} }

11
src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
View file

@ -5,6 +5,10 @@
<div class="nested-radio"> <div class="nested-radio">
<div class="row my-2"> <div class="row my-2">
<div class="col"> <div class="col">
modelValue: {{modelValue}} <br/>
selectedTint: {{selectedTint}} <br/>
selectedPartNumber: {{selectedPartNumber}} <br/>
tintSelectionOptions: {{tintSelectionOptions}}
<buttonQuestion <buttonQuestion
v-model="selectedTint" v-model="selectedTint"
:answers="tintSelectionOptions" :answers="tintSelectionOptions"
@ -13,7 +17,6 @@
altText="" altText=""
isRequired isRequired
:groupName="`${glassLocation}-${glassName}`" :groupName="`${glassLocation}-${glassName}`"
@isCheckedChanged="ResetTintAndPartSelections"
:validationRules="tintValidationRules" :validationRules="tintValidationRules"
> >
<div class="row my-2" aria-live="polite"> <div class="row my-2" aria-live="polite">
@ -198,7 +201,11 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
if (this.modelValue !== undefined) { if (this.modelValue !== undefined) {
// Populate button-question model-value if parts data already exists in VueX // Populate button-question model-value if parts data already exists in VueX
this.selectedTint = this.alreadyPopulatedPartsData?.filter(part => part.partNumber === this.selectedPartNumber)[0].color; console.log({
alreadyPopulatedPartsData: this.alreadyPopulatedPartsData,
alreadyPopulatedPartsDataType: typeof this.alreadyPopulatedPartsData
})
this.selectedTint = this.alreadyPopulatedPartsData.filter(part => part.partNumber === this.selectedPartNumber)[0]?.color;
} }
}); });
}, },

11
src/layouts/vehicle-parts/vehicle-parts.vue
View file

@ -25,6 +25,7 @@
</div> </div>
</div> </div>
</div> </div>
glassParts: {{glassParts}}
<div v-for="(item, i) in PartsOrQuestions" :key="i"> <div v-for="(item, i) in PartsOrQuestions" :key="i">
<!-- Render horizontal lines if there is multi-glass (aka if i > 0) --> <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
<hr v-if="i > 0" /> <hr v-if="i > 0" />
@ -102,7 +103,7 @@ export default {
return { return {
glassParts: {}, glassParts: {},
alertWidgetData: Object, alertWidgetData: Object,
alreadyPopulatedPartsData: {}, alreadyPopulatedPartsData: [],
}; };
}, },
computed: { computed: {
@ -196,15 +197,15 @@ export default {
LoadInitialPartsData() { LoadInitialPartsData() {
const partsData = this.PartsFromApi; const partsData = this.PartsFromApi;
const alreadyPopulatedPartsData = this.alreadyPopulatedPartsData =
this.$store.getters.lineItems.glassParts === null this.$store.getters.lineItems.glassParts === null
? {} ? []
: this.$store.getters.lineItems.glassParts; : this.$store.getters.lineItems.glassParts;
partsData.partsOrQuestions.map((g) => { partsData.partsOrQuestions.map((g) => {
// If the part is already populated, use the value from the store and populate the v-model. // If the part is already populated, use the value from the store and populate the v-model.
Object.keys(alreadyPopulatedPartsData).forEach((key) => { Object.keys(this.alreadyPopulatedPartsData).forEach((key) => {
const partNumber = alreadyPopulatedPartsData[key].partNumber; const partNumber = this.alreadyPopulatedPartsData[key].partNumber;
g.parts.forEach((p) => { g.parts.forEach((p) => {
if (p.partNumber === partNumber) { if (p.partNumber === partNumber) {
this.glassParts[g.glassLocation + "-" + g.glassName] = { this.glassParts[g.glassLocation + "-" + g.glassName] = {

2
src/router/index.js
View file

@ -239,6 +239,8 @@ function navigateToUrl(url, optionalQuery = {}) {
externalUrl.searchParams.append(queryKey, optionalQuery[queryKey]); externalUrl.searchParams.append(queryKey, optionalQuery[queryKey]);
} }
externalUrl.searchParams.append("experiments", "ConceptFunnel=ConceptFunnel_V1=ConceptFunnel_TEST=true");
window.location.assign(externalUrl); window.location.assign(externalUrl);
} }

30
src/ux-components/list-button/list-button.vue
View file

@ -141,22 +141,22 @@ export default {
// return; // Prevent arrow keys from doing anything if element is a checkbox // return; // Prevent arrow keys from doing anything if element is a checkbox
// } // }
// }, // },
triggerButton() { // triggerButton() {
if (this.selectingInitiatesLoad) { // if (this.selectingInitiatesLoad) {
this.displayLoader(); // this.displayLoader();
// this.handleCheckChange(); // // this.handleCheckChange();
} // }
// TODO KO THIS IS IMPORTANT // // TODO KO THIS IS IMPORTANT
// Move this to input-button-wrapper? // // Move this to input-button-wrapper?
// this.pushEventToGA( // // this.pushEventToGA(
// this.$route.query[queryStrings.FMG_PAGE], // // this.$route.query[queryStrings.FMG_PAGE],
// this.GaActions.CLICKED, // // this.GaActions.CLICKED,
// this.value.toString(), // // this.value.toString(),
// true, // // true,
// this.valueToLogType // // this.valueToLogType
// ); // // );
}, // },
// handleCheckChange() { // handleCheckChange() {
// const emitEvent = { // const emitEvent = {
// checkValue: this.checkValue, // only read on checkboxes, on handleCheckedChanged on button-question // checkValue: this.checkValue, // only read on checkboxes, on handleCheckedChanged on button-question

109
src/ux-components/radio/radio.vue
View file

@ -1,7 +1,15 @@
<template> <template>
<!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex --> <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
<div class="ui-radio form-check" :class="[(errors.length > 0 || hasError) ? 'has-error' : '']"> <inputButtonWrapper
<input :isMultiSelect="isMultiSelect"
:value="value"
:groupName="groupName"
buttonWrapperClasses="ui-radio form-check"
inputClasses="form-check-input"
:validationRules="validationRules"
@change="handleAnswerChange">
<!-- <div class="ui-radio form-check" :class="[(errors.length > 0 || hasError) ? 'has-error' : '']"> -->
<!-- <input
type="radio" type="radio"
class="form-check-input" class="form-check-input"
aria-checked="false" aria-checked="false"
@ -13,19 +21,21 @@
@change="handleCheckChange" @change="handleCheckChange"
:checked="checkValue" :checked="checkValue"
:validationRules="validationRules" :validationRules="validationRules"
/> /> -->
<label class="d-flex align-items-start form-check-label" :for="buttonID"> <div class="d-flex align-items-start form-check-label" :for="buttonID">
<p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p> <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
<span v-if="screenReaderOnlyText" class="sr-only">{{ <span v-if="screenReaderOnlyText" class="sr-only">{{
screenReaderOnlyText screenReaderOnlyText
}}</span> }}</span>
</label>
</div> </div>
<!-- </div> -->
</inputButtonWrapper>
</template> </template>
<script> <script>
import { useField } from "vee-validate"; import { useField } from "vee-validate";
import { queryStrings } from "@/constants/query-strings"; import { queryStrings } from "@/constants/query-strings";
import inputButtonWrapper from "@/common-components/input-button-wrapper/input-button-wrapper";
export default { export default {
name: "radio", name: "radio",
@ -46,52 +56,53 @@ export default {
}, },
data() { data() {
return { return {
checkValue: Boolean, // checkValue: Boolean,
}; };
}, },
created() { components: {
if (this.selectedValues) { inputButtonWrapper,
this.checkValue = this.selectedValues === this.value;
this.handleCheckChange();
} else{
this.checkValue = false;
}
}, },
// created() {
// if (this.selectedValues) {
// this.checkValue = this.selectedValues === this.value;
// this.handleCheckChange();
// } else{
// this.checkValue = false;
// }
// },
methods: { methods: {
handleCheckChange() { // handleCheckChange() {
this.handleChange(this.value); // this.handleChange(this.value);
const emitEvent = { // const emitEvent = {
checkValue: this.checkValue, // checkValue: this.checkValue,
value: this.value.toString(), // value: this.value.toString(),
buttonID: this.buttonID && this.buttonID.toString(), // buttonID: this.buttonID && this.buttonID.toString(),
}; // };
// this.$emit("isCheckedChanged", emitEvent);
this.$emit("isCheckedChanged", emitEvent); // this.$emit("update:modelValue", emitEvent);
this.$emit("update:modelValue", emitEvent); // this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true, this.valueToLogType);
// },
this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true, this.valueToLogType);
},
},
setup(props) {
const inputType = "radio";
const {
value: inputValue,
handleChange,
errors,
} = useField(props.groupName, props.validationRules,
{
type: inputType,
checkedValue: props.value,
});
return {
handleChange,
errors,
};
}, },
// setup(props) {
// const inputType = "radio";
// const {
// value: inputValue,
// handleChange,
// errors,
// } = useField(props.groupName, props.validationRules,
// {
// type: inputType,
// checkedValue: props.value,
// });
// return {
// handleChange,
// errors,
// };
// },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss">
.form-check { .form-check {
position: relative; position: relative;
@ -99,6 +110,9 @@ export default {
border: 1px solid $gray-500; border: 1px solid $gray-500;
border-radius: 50%; border-radius: 50%;
margin-right: 0.5rem; margin-right: 0.5rem;
opacity: 1;
height: 1em;
width: 1em;
&:checked { &:checked {
background-color: $white; background-color: $white;
@ -106,10 +120,10 @@ export default {
background-position: center; background-position: center;
border: 1px solid $blue; border: 1px solid $blue;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' xml:space='preserve'%3e%3ccircle cx='25' cy='25' r='25' fill='%231574A1'/%3e%3c/svg%3e"); background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' xml:space='preserve'%3e%3ccircle cx='25' cy='25' r='25' fill='%231574A1'/%3e%3c/svg%3e");
+ label { + .form-check-label {
p { p {
font-weight: 500; font-weight: 500;
font-size: .875rem; font-size: 0.875rem;
color: $black; color: $black;
} }
} }
@ -118,7 +132,8 @@ export default {
box-shadow: 0 0 0 2.5px $blue; box-shadow: 0 0 0 2.5px $blue;
} }
&, & + label { &,
& + .form-check-label {
margin-top: 0; margin-top: 0;
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -133,7 +148,7 @@ export default {
} }
p { p {
font-weight: 400; font-weight: 400;
font-size: .875rem; font-size: 0.875rem;
color: $gray-600; color: $gray-600;
} }
} }