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

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

@ -1,7 +1,5 @@
<template>
<div v-for="(q, i) in questions" :key="i">
q.answerSelected: {{q.answerSelected}}<br/>
currentQuestionNum: {{currentQuestionNum}}
<transition appear name="fade" mode="out-in">
<!-- <buttonQuestion
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() {
const questionAnswersArray = this.partsQuestionsData.map((glass) => {
console.log(glass)
return {
glassLocation: glass.glassLocation,
glassName: glass.glassName,
result: glass.answerData.result,
result: glass.answerData.answerResult,
answeredQuestions: glass.answerData.answeredQuestions,
isSuppressedPart: glass.isSuppressedPart,
};
@ -194,7 +193,7 @@ export default {
// only look for duplicates forward... to parts that follow after the currently being answered part
if (gpIndex > answer.glassIndex) {
console.log("RESETTING ANSWERDATA")
let suppressUntil;
// reset this glass part, in case user is changing their previous answers
glass.answerData = null;
@ -298,7 +297,6 @@ export default {
return !q.suppressQuestion;
});
console.log("REMAINING QUESTIONS", remainingQuestions)
if (remainingQuestions.length < 1) {
// this is the final answer for this glass part
@ -315,8 +313,6 @@ export default {
answeredQuestions: [answeredQuestionObj],
};
console.log(glass.answerData)
// suppress this glass because it has an answer
glass.isSuppressedPart = true;
}
@ -420,7 +416,6 @@ export default {
this.selectedAnswers[glass.key] = [];
if (!alreadyAnsweredQuestions) {
console.log("NULLING ANSWERDATA")
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="row my-2">
<div class="col">
modelValue: {{modelValue}} <br/>
selectedTint: {{selectedTint}} <br/>
selectedPartNumber: {{selectedPartNumber}} <br/>
tintSelectionOptions: {{tintSelectionOptions}}
<buttonQuestion
v-model="selectedTint"
:answers="tintSelectionOptions"
@ -13,7 +17,6 @@
altText=""
isRequired
:groupName="`${glassLocation}-${glassName}`"
@isCheckedChanged="ResetTintAndPartSelections"
:validationRules="tintValidationRules"
>
<div class="row my-2" aria-live="polite">
@ -198,7 +201,11 @@ export default {
this.$nextTick(() => {
if (this.modelValue !== undefined) {
// 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>
glassParts: {{glassParts}}
<div v-for="(item, i) in PartsOrQuestions" :key="i">
<!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
<hr v-if="i > 0" />
@ -102,7 +103,7 @@ export default {
return {
glassParts: {},
alertWidgetData: Object,
alreadyPopulatedPartsData: {},
alreadyPopulatedPartsData: [],
};
},
computed: {
@ -196,15 +197,15 @@ export default {
LoadInitialPartsData() {
const partsData = this.PartsFromApi;
const alreadyPopulatedPartsData =
this.alreadyPopulatedPartsData =
this.$store.getters.lineItems.glassParts === null
? {}
? []
: this.$store.getters.lineItems.glassParts;
partsData.partsOrQuestions.map((g) => {
// If the part is already populated, use the value from the store and populate the v-model.
Object.keys(alreadyPopulatedPartsData).forEach((key) => {
const partNumber = alreadyPopulatedPartsData[key].partNumber;
Object.keys(this.alreadyPopulatedPartsData).forEach((key) => {
const partNumber = this.alreadyPopulatedPartsData[key].partNumber;
g.parts.forEach((p) => {
if (p.partNumber === partNumber) {
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("experiments", "ConceptFunnel=ConceptFunnel_V1=ConceptFunnel_TEST=true");
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
// }
// },
triggerButton() {
if (this.selectingInitiatesLoad) {
this.displayLoader();
// this.handleCheckChange();
}
// triggerButton() {
// if (this.selectingInitiatesLoad) {
// this.displayLoader();
// // this.handleCheckChange();
// }
// TODO KO THIS IS IMPORTANT
// Move this to input-button-wrapper?
// this.pushEventToGA(
// this.$route.query[queryStrings.FMG_PAGE],
// this.GaActions.CLICKED,
// this.value.toString(),
// true,
// this.valueToLogType
// );
},
// // TODO KO THIS IS IMPORTANT
// // Move this to input-button-wrapper?
// // this.pushEventToGA(
// // this.$route.query[queryStrings.FMG_PAGE],
// // this.GaActions.CLICKED,
// // this.value.toString(),
// // true,
// // this.valueToLogType
// // );
// },
// handleCheckChange() {
// const emitEvent = {
// checkValue: this.checkValue, // only read on checkboxes, on handleCheckedChanged on button-question

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

@ -1,7 +1,15 @@
<template>
<!-- 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' : '']">
<input
<!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
<inputButtonWrapper
: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"
class="form-check-input"
aria-checked="false"
@ -13,128 +21,135 @@
@change="handleCheckChange"
:checked="checkValue"
:validationRules="validationRules"
/>
<label class="d-flex align-items-start form-check-label" :for="buttonID">
<p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
<span v-if="screenReaderOnlyText" class="sr-only">{{
screenReaderOnlyText
}}</span>
</label>
</div>
/> -->
<div class="d-flex align-items-start form-check-label" :for="buttonID">
<p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
<span v-if="screenReaderOnlyText" class="sr-only">{{
screenReaderOnlyText
}}</span>
</div>
<!-- </div> -->
</inputButtonWrapper>
</template>
<script>
import { useField } from "vee-validate";
import { queryStrings } from "@/constants/query-strings";
import inputButtonWrapper from "@/common-components/input-button-wrapper/input-button-wrapper";
export default {
name: "radio",
props: {
groupName: String,
buttonLabel: String,
buttonID: String,
isRequired: Boolean,
value: {
type: [String, Number],
default: "",
name: "radio",
props: {
groupName: String,
buttonLabel: String,
buttonID: String,
isRequired: Boolean,
value: {
type: [String, Number],
default: "",
},
screenReaderOnlyText: String,
selectedValues: String,
hasError: Boolean,
validationRules: String,
valueToLogType: String,
},
screenReaderOnlyText: String,
selectedValues: String,
hasError: Boolean,
validationRules: String,
valueToLogType: String,
},
data() {
return {
checkValue: Boolean,
};
},
created() {
if (this.selectedValues) {
this.checkValue = this.selectedValues === this.value;
this.handleCheckChange();
} else{
this.checkValue = false;
}
},
methods: {
handleCheckChange() {
this.handleChange(this.value);
const emitEvent = {
checkValue: this.checkValue,
value: this.value.toString(),
buttonID: this.buttonID && this.buttonID.toString(),
};
this.$emit("isCheckedChanged", emitEvent);
this.$emit("update:modelValue", emitEvent);
this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true, this.valueToLogType);
data() {
return {
// checkValue: Boolean,
};
},
},
setup(props) {
const inputType = "radio";
const {
value: inputValue,
handleChange,
errors,
} = useField(props.groupName, props.validationRules,
{
type: inputType,
checkedValue: props.value,
});
return {
handleChange,
errors,
};
},
components: {
inputButtonWrapper,
},
// created() {
// if (this.selectedValues) {
// this.checkValue = this.selectedValues === this.value;
// this.handleCheckChange();
// } else{
// this.checkValue = false;
// }
// },
methods: {
// handleCheckChange() {
// this.handleChange(this.value);
// const emitEvent = {
// checkValue: this.checkValue,
// value: this.value.toString(),
// buttonID: this.buttonID && this.buttonID.toString(),
// };
// this.$emit("isCheckedChanged", emitEvent);
// this.$emit("update:modelValue", emitEvent);
// 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,
// };
// },
};
</script>
<style lang="scss" scoped>
<style lang="scss">
.form-check {
position: relative;
position: relative;
.form-check-input {
border: 1px solid $gray-500;
border-radius: 50%;
margin-right: 0.5rem;
&:checked {
background-color: $white;
background-size: 71%;
background-position: center;
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");
+ label {
p {
font-weight: 500;
font-size: .875rem;
color: $black;
}
}
}
&:focus {
box-shadow: 0 0 0 2.5px $blue;
}
&, & + label {
margin-top: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
}
&:hover {
.form-check-input {
box-shadow: 0 0 0 4px $blue-300;
border: 1px solid $gray-500;
border-radius: 50%;
margin-right: 0.5rem;
opacity: 1;
height: 1em;
width: 1em;
&:checked {
background-color: $white;
background-size: 71%;
background-position: center;
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");
+ .form-check-label {
p {
font-weight: 500;
font-size: 0.875rem;
color: $black;
}
}
}
&:focus {
box-shadow: 0 0 0 2.5px $blue;
}
&,
& + .form-check-label {
margin-top: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
}
&:hover {
.form-check-input {
box-shadow: 0 0 0 4px $blue-300;
}
}
p {
font-weight: 400;
font-size: 0.875rem;
color: $gray-600;
}
}
p {
font-weight: 400;
font-size: .875rem;
color: $gray-600;
}
}
</style>