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

CSR-762 Add shared props

Browse source
This commit is contained in:
Katie 2022-09-22 14:00:44 -04:00
parent 87a4389e13
commit 25a27563ab
18 changed files with 105 additions and 344 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/common-components/base-input-button/base-input-button.vue
View file

@ -3,6 +3,7 @@
:class="[buttonWrapperClasses, { 'has-error': errors.length > 0 }]"
:for="buttonId"
@mousedown.left="handleEventAction('click', $event)">
<!-- BIB props: {{$props}} -->
<input
:type="inputType"
:id="buttonId"
@ -41,21 +42,17 @@ export default {
required: true,
},
isMultiSelect: Boolean,
isWide: Boolean,
buttonImage: String,
buttonImageId: String,
buttonLabel: {
type: String,
required: true,
},
isRequired: {
type: Boolean,
required: true,
},
buttonLabelSubCopy: {
type: String,
required: true,
},
// isWide: Boolean,
// buttonImage: String,
// buttonImageId: String,
// buttonLabel: {
// type: String,
// required: true,
// },
// buttonLabelSubCopy: {
// type: String,
// required: true,
// },
groupName: {
type: String,
required: true,
@ -143,7 +140,7 @@ export default {
this.pushEventToGA(
this.$route.query[queryStrings.FMG_PAGE],
this.GaActions.CLICKED,
this.value.toString(),
this.value?.toString(),
true,
this.valueToLogType
);
@ -161,8 +158,14 @@ export default {
return this.isMultiSelect ? "checkbox" : "radio";
},
buttonId() {
return `${this.groupName}-${JSON.stringify(this.value).replace(" ", "-")}`;
return `${this.groupName}-${JSON.stringify(this.value)?.replace(
" ",
"-"
)}`;
},
// baseInputButtonProps() {
// }
},
setup(props) {
const inputType = props.isMultiSelect ? "checkbox" : "radio";
@ -173,7 +176,7 @@ export default {
validateOnMount: false,
};
const { handleChange, meta, errors, value } = useField(
const { handleChange, meta, errors } = useField(
toRef(props, "groupName"),
toRef(props, "validationRules"),
fieldOptions

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

@ -35,15 +35,15 @@
<div
:class="getComponentWrapperClasses"
v-for="answer in buttonsInfo"
:key="answer.Name ? answer.Name : answer">
:key="answer.value ? answer.value : answer">
<component
:is="buttonType"
:buttonLabel="answer.buttonLabel"
:buttonLabelSubCopy="answer.buttonLabelSubCopy"
:buttonImage="answer.buttonImage"
:buttonImageId="answer.buttonImageId"
:groupName="answer.groupName"
:isMultiSelect="isMultiSelect"
:groupName="groupName"
:value="answer.value"
:modelValue="modelValue"
:selectingInitiatesLoad="selectingInitiatesLoad"
@ -175,31 +175,27 @@ export default {
}
},
buttonsInfo() {
return (this.answers ?? [])?.map((answer) => ({
buttonLabel: answer.Text ?? answer,
altText: answer.Name ? answer.Name : answer,
buttonLabelSubCopy: answer.SubText,
buttonImage: answer.AnswerImageUrl,
buttonImageId: answer.ImageId,
groupName: this.formatString(this.groupName),
value: this.useTextForValue
? answer.Text
: answer.Name ?? answer,
}));
console.log({
answers: this.answers,
isArray: Array.isArray(this.answers),
});
// TODO KO temporary. It should always just be an array
// return (Array.isArray(this.answers) ? this.answers : [])?.map(
// (answer) => ({
// buttonLabel: answer.Text ?? answer,
// altText: answer.Name ? answer.Name : answer,
// buttonLabelSubCopy: answer.SubText,
// buttonImage: answer.AnswerImageUrl,
// buttonImageId: answer.ImageId,
// groupName: this.formatString(this.groupName),
// value: this.useTextForValue
// ? answer.Text
// : answer.Name ?? answer,
// })
// );
return (Array.isArray(this.answers) ? this.answers : [])?.map(
(answer) => ({
buttonLabel: answer.buttonLabel ?? answer.Text ?? answer,
altText:
answer.altText ?? (answer.Name ? answer.Name : answer),
buttonLabelSubCopy:
answer.buttonLabelSubCopy ?? answer.SubText,
buttonImage: answer.buttonImage ?? answer.AnswerImageUrl,
buttonImageId: answer.buttonImageId ?? answer.ImageId,
groupName: this.formatString(this.groupName),
value:
answer.value ?? (this.useTextForValue
? answer.Text
: answer.Name ?? answer),
})
);
},
},
methods: {
@ -225,9 +221,6 @@ export default {
}
},
handleAnswerChange(primaryAnswerValue) {
console.log({
bqEvent: primaryAnswerValue,
});
this.primaryValue = primaryAnswerValue;
this.$emit("change", primaryAnswerValue);
this.$emit("update:modelValue", primaryAnswerValue);

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

@ -56,13 +56,13 @@ export default {
questionSequence: q.questionSequence,
answers: q.answers.map((a) => {
return {
Text: a.answerText,
buttonLabel: a.answerText,
// Name will either be nextQuestionSequence or answerResult
// Name will be used by list-button as the input value.
// It must be a single string or number, so concatenating together a string with
// 4 pieces of data separated by pipe characters:
// question number|type of answer|answer value|answer text
Name: a.nextQuestionSequence ?
value: a.nextQuestionSequence ?
q.questionSequence + "|nextQuestion|" + a.nextQuestionSequence + "|" + a.answerText :
q.questionSequence + "|answer|" + a.answerResult + "|" + a.answerText,
nextQuestionSequence: a.nextQuestionSequence,
@ -78,10 +78,6 @@ export default {
}
});
console.log({
modelValue: this.modelValue,
questions: this.questions
})
if (!this.modelValue?.length > 0 && this.questions.length > 0) {
// set this.currentQuestionNum to first valid question
this.currentQuestionNum = this.questions[0].questionSequence;
@ -93,10 +89,6 @@ export default {
},
methods: {
handleAnswer(question, returnedAnswer) {
console.log({
returnedAnswer: returnedAnswer
})
question.answerSelected = returnedAnswer;
/*
returnedAnswer example format:
@ -108,17 +100,11 @@ export default {
*/
const isQuestionChainComplete = this.getQuestionChainAnswerIfComplete(returnedAnswer);
console.log({
isQuestionChainComplete: isQuestionChainComplete
})
if (isQuestionChainComplete) {
this.$emit("update:modelValue", isQuestionChainComplete);
}
},
getQuestionChainAnswerIfComplete(returnedAnswer) { // this method will return either a final answer or Boolean false
console.log("getQuestionChainAnswerIfComplete: ", {
returnedAnswer: returnedAnswer
})
if (!returnedAnswer) { return false }
// Example returnedAnswers:
@ -153,10 +139,6 @@ export default {
}
});
console.log({
questionType: questionType,
returnedAnswerArray: returnedAnswerArray
})
// return false if there's a nextQuestion... or return an object with final answers (truthy)
if (questionType === "nextQuestion") {

1
src/layouts/estimate/estimate.spec.js
View file

@ -168,7 +168,6 @@ describe("estimate.vue", () => {
store.commit(storeMutations.UPDATE_IS_REPAIR, null);
// Act
console.log(store.getters.damage)
let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
// Assert

91
src/layouts/test.vue
View file

@ -1,91 +0,0 @@
<template>
<div>
<h2>ListButton</h2>
selectedMultiselectValues: {{ selectedMultiselectValues }}
<button-question
questionText="This is a question?"
:answers="sampleCheckboxAnswers"
:isMultiSelect="true"
groupName="multiselect-test"
v-model="selectedMultiselectValues"
></button-question>
<br /><br /><br />
selectedRadioValue: {{ selectedRadioValue }}
<button-question
questionText="This is another question?"
:answers="sampleRadioAnswers"
:isMultiSelect="false"
groupName="radio-test"
v-model="selectedRadioValue"
></button-question>
<!-- selectedMultiselectValues: {{ selectedMultiselectValues }}
<button-question
buttonType="testButton"
:answers="sampleAnswers"
:isMultiSelect="true"
groupName="multiselect-test"
v-model="selectedMultiselectValues"
></button-question>
<br /><br /><br />
selectedRadioValue: {{ selectedRadioValue }}
<button-question
buttonType="testButton"
:answers="sampleAnswers"
:isMultiSelect="false"
groupName="radio-test"
v-model="selectedRadioValue"
></button-question> -->
</div>
</template>
<script>
import ButtonQuestion from "../common-components/button-question/button-question.vue";
export default {
name: "test",
data() {
return {
sampleCheckboxAnswers: [
{
Text: "Part 1",
Name: "PART1",
},
{
Text: "Part 2",
Name: "PART2",
},
{
Text: "Part 3",
Name: "PART3",
},
],
sampleRadioAnswers: [
{
Text: "Part 1",
Name: "PART1",
},
{
Text: "Part 2",
Name: "PART2",
},
{
Text: "Part 3",
Name: "PART3",
},
],
selectedMultiselectValues: [],
selectedRadioValue: "",
};
},
components: {
// testButton,
ButtonQuestion,
},
};
</script>

1
src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
View file

@ -77,7 +77,6 @@ export default ({
},
watch: {
selectedValue(selectedValue) {
// console.log("DLQ: ", selectedValue)
this.$emit("update:modelValue", selectedValue)
}
}

15
src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
View file

@ -47,14 +47,11 @@ export default ({
this.replaceOptions = replaceOptions;
},
updateSelectedValues() {
console.log("UPDATING FOR ", this.groupName)
// UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
// ex: BackGlass stationary
// console.log(this.answersToDisplay)
if (Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
const selectedAnswer = this.answersToDisplay[0].Name;
this.selectedValue = this.isMultiSelect ? [selectedAnswer] : selectedAnswer;
console.log("HIIIIII2", this.selectedValue)
}
},
},
@ -65,14 +62,6 @@ export default ({
answersFromCms(){
return this.getCmsContent(this.cmsWidgetName, 'Answers');
},
// selectedValues: {
// get: function() {
// return this.modelValue;
// },
// set: function(newValue) {
// this.$emit("update:modelValue", newValue);
// }
// },
answersToDisplay(){
const filteredAnswers = Array.isArray(this.answersFromCms)
? this.answersFromCms.filter(ans =>
@ -98,10 +87,6 @@ export default ({
val && this.updateSelectedValues();
},
shouldDisplayReplaceOptionsQuestion(shouldDisplayReplaceOptionsQuestion) {
console.log({
groupName: this.groupName,
shouldDisplayReplaceOptionsQuestion: shouldDisplayReplaceOptionsQuestion
})
if (!shouldDisplayReplaceOptionsQuestion) {
this.selectedValue = [];
}

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

@ -268,17 +268,6 @@ export default {
getRearReplaceOptionsFromStore(){
var rearReplaceOptions = store.getters.damage.glassToReplace?.filter(glass => glass.glassLocation === damageLocationsSelected.REAR)[0]?.glassName;
// store.getters.damage.glassToReplace?.forEach(glass => {
// if (glass.glassLocation === damageLocationsSelected.REAR){
// rearReplaceOptions.push(glass.glassName);
// }
// });
console.log({
glassToReplace: store.getters.damage.glassToReplace,
rearReplaceOptions: rearReplaceOptions
})
return rearReplaceOptions;
},
@ -290,7 +279,6 @@ export default {
selectedWindshieldChipCount: this.selectedWindshieldOptions.selectedWindshieldChipCount
}, false);
console.log(this.selectedGlassToReplace())
return this.navigateForward();
},
@ -325,9 +313,6 @@ export default {
}
if (this.isRearWindowDamageLocation) {
console.log({
selectedRearReplaceOptions: this.selectedRearReplaceOptions
})
selectedGlassToReplace.push({ glassLocation: damageLocationsSelected.REAR, glassName: this.selectedRearReplaceOptions});
}
@ -378,9 +363,6 @@ export default {
hasSplitSingleConflict() {
if (!this.selectedDamageLocations?.includes("Windshield") || this.selectedWindshieldOptions.selectedWindshieldDamageType === damageLocationsSelected.REPAIR || !this.selectedWindshieldOptions.selectedWindshieldReplaceOptions) return false;
console.log({
selectedWindshieldOptions: this.selectedWindshieldOptions
})
return this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(selectedSingleWindshield =>
{
return selectedSingleWindshield.toUpperCase() === damageLocationsSelected.SINGLE.toUpperCase();

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

@ -23,7 +23,6 @@ export default ({
name: "windshieldDamageTypeQuestion",
mixins: [buttonQuestionWrapperMixin],
props: {
// modelValue: String,
groupName: String,
isAvailable: Boolean,
suppressError: Boolean,
@ -37,29 +36,9 @@ export default ({
answersFromCms(){
return this.getCmsContent(this.cmsWidgetName, 'Answers');
},
// selectedValues: {
// get: function() {
// return this.modelValue;
// },
// set: function(newValue) {
// this.$emit("update:modelValue", newValue);
// }
// },
},
components: {
buttonQuestion,
},
// watch: {
// isAvailable(isAvailable) {
// if (!isAvailable) {
// // console.log({
// // isAvailable: isAvailable
// // })
// // console.log("updating")
// this.selectedValue = null;
// // this.$emit("update:modelValue", null);
// }
// }
// }
})
</script>

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

@ -96,9 +96,6 @@ export default ({
},
getWindshieldOptions(selectedWindshieldDamageType, selectedWindshieldChipCount, selectedWindshieldReplaceOptions){
// ONLY UPDATE THE NEW VALUE IF IT IS TRUTHY (NOT NULL)
console.log("GETWINDSHIELDOPTIONS", {
selectedValues: this.selectedValues
})
return {
selectedWindshieldDamageType: selectedWindshieldDamageType ? selectedWindshieldDamageType : this.selectedValues.selectedWindshieldDamageType,
selectedWindshieldChipCount: selectedWindshieldChipCount ? selectedWindshieldChipCount : this.selectedValues.selectedWindshieldChipCount,
@ -112,7 +109,6 @@ export default ({
return this.modelValue;
},
set: function(newValue) {
// console.log("HIIII", newValue)
this.$emit("update:modelValue", newValue);
}
},
@ -137,7 +133,6 @@ export default ({
return this.selectedValues.selectedWindshieldReplaceOptions;
},
set: function(newValue) {
console.log("HIIII", newValue)
this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValue, null, newValue);
}
},

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

@ -97,9 +97,9 @@ export default {
let tintOptions = [];
Object.keys(this.featureListData).forEach((tintOption) => {
tintOptions.push({
Name: tintOption,
Text: tintOption,
AnswerImageUrl: require(`@/assets/img/tints/${this.getTintSourceImage(
value: tintOption,
buttonLabel: tintOption,
buttonImage: require(`@/assets/img/tints/${this.getTintSourceImage(
this.glassLocation,
tintOption
)}`),
@ -201,10 +201,6 @@ export default {
this.$nextTick(() => {
if (this.modelValue !== undefined) {
// Populate button-question model-value if parts data already exists in VueX
console.log({
alreadyPopulatedPartsData: this.alreadyPopulatedPartsData,
alreadyPopulatedPartsDataType: typeof this.alreadyPopulatedPartsData
})
this.selectedTint = this.alreadyPopulatedPartsData.filter(part => part.partNumber === this.selectedPartNumber)[0]?.color;
}
});

1
src/layouts/vehicle-year/vehicle-year.vue
View file

@ -88,7 +88,6 @@ export default {
watch: {
selectedYear(year) {
console.log("selectedYear: ", year)
const parsedYear = parseInt(year);
this.dispatchStoreAction(storeActions.SAVE_VEHICLE_YEAR, parsedYear);
this.$router.navigateWithSaving(

35
src/mixins/input-button-wrapper-mixin.js Normal file
View file

@ -0,0 +1,35 @@
export default {
props: {
modelValue: [Array, String, Number],
value: [String, Number],
isMultiSelect: Boolean,
groupName: String,
buttonLabel: [Number, String],
buttonLabelSubCopy: String,
buttonImage: String,
altText: String,
textPosition: String,
screenReaderOnlyText: String,
valueToLogType: String,
validationRules: String,
isWide: Boolean
},
data() {
return {
selectedValue: null,
};
},
mounted() {
this.selectedValue = this.modelValue;
},
methods: {
handleAnswerChange(e) {
this.$emit("change", e);
},
},
watch: {
selectedValue(selectedValue) {
this.$emit("update:modelValue", selectedValue);
},
},
};

6
src/router/index.js
View file

@ -23,7 +23,6 @@ import { applicationConfig } from "../constants/application-config";
// Components
import quote from "@/layouts/quote/quote.vue";
import test from "@/layouts/test"
const routes = [
{
@ -31,11 +30,6 @@ const routes = [
name: "quote",
component: quote,
},
{
path: "/test", // This is a temporary route for testing.
name: "test",
component: test,
},
{
path: "/",
name: "root",

50
src/ux-components/list-button-horizontal/list-button-horizontal.vue
View file

@ -1,15 +1,10 @@
<template>
<baseInputButton
v-bind="$props"
:buttonWrapperClasses="[
'list-group list-button-horizontal d-flex flex-column w-100',
{ 'radio-fancy': isCashOrInsurance },
]"
:isMultiSelect="isMultiSelect"
:modelValue="modelValue"
:value="value"
:groupName="groupName"
:validationRules="validationRules"
:selectOnKeypress="selectOnKeypress"
@change="handleAnswerChange">
<div
class="list-button-horizontal-content d-flex flex-column justify-content-center p-3">
@ -25,60 +20,21 @@
<span v-if="screenReaderOnlyText" class="sr-only">
{{ screenReaderOnlyText }}
</span>
<loader
v-if="isLoaderDisplayed && selectingInitiatesLoad"
:class="[loaderColor, loaderPosition]" />
</div>
</baseInputButton>
</template>
<script>
import { useField } from "vee-validate";
import loader from "@/ux-components/loader/loader";
import { toRef } from "vue";
import { queryStrings } from "@/constants/query-strings";
import baseInputButton from "@/common-components/base-input-button/base-input-button";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
export default {
name: "listButtonHorizontal",
mixins: [inputButtonWrapperMixin],
props: {
isMultiSelect: Boolean,
selectOnKeypress: Boolean,
groupName: String,
buttonID: String,
buttonLabel: String,
buttonLabelSubCopy: String,
screenReaderOnlyText: String,
textPosition: String,
selectingInitiatesLoad: Boolean,
loaderColor: String,
loaderPosition: String,
isRequired: Boolean,
isCashOrInsurance: Boolean,
value: {
// Field initial value
type: String,
default: "",
},
validationRules: String,
hasError: Boolean,
valueToLogType: String,
},
data() {
return {
isLoaderDisplayed: false,
};
},
methods: {
displayLoader() {
this.isLoaderDisplayed = true;
},
handleAnswerChange(e) {
this.$emit("change", e);
},
},
components: {
loader,
baseInputButton,
},
};

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

@ -1,11 +1,19 @@
<template>
<baseInputButton
<!-- <baseInputButton
:isMultiSelect="isMultiSelect"
:value="value"
:modelValue="modelValue"
:groupName="groupName"
buttonWrapperClasses="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
:validationRules="validationRules"
buttonWrapperClasses="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
@change="handleAnswerChange"> -->
<baseInputButton
v-bind="$props"
buttonWrapperClasses="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
@change="handleAnswerChange">
<!-- modelValue: {{modelValue}}<br/>
value: {{value}} <br/>
buttonLabel: {{buttonLabel}} -->
<div
tabindex="-1"
:aria-label="buttonLabel"
@ -32,25 +40,18 @@
<script>
import loader from "@/ux-components/loader/loader";
import baseInputButton from "@/common-components/base-input-button/base-input-button";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
export default {
name: "listButton",
mixins: [inputButtonWrapperMixin],
props: {
groupName: String,
buttonLabel: [Number, String],
isRequired: Boolean,
textPosition: String,
buttonLabelSubCopy: String,
screenReaderOnlyText: String,
selectingInitiatesLoad: Boolean,
loaderColor: String,
loaderPosition: {
type: String,
default: "right",
},
hasError: Boolean,
valueToLogType: String,
validationRules: String,
},
data() {
return {
@ -65,7 +66,7 @@ export default {
if (this.selectingInitiatesLoad) {
this.displayLoader();
}
this.$emit("change", e);
},
},

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

@ -1,15 +1,10 @@
<template>
<baseInputButton
v-bind="$props"
:buttonWrapperClasses="[
'list-card w-100 rounded-3 d-flex align-items-center h-100',
{ horizontal: isWide },
]"
:isMultiSelect="isMultiSelect"
:modelValue="modelValue"
:value="value"
:groupName="groupName"
:validationRules="validationRules"
:selectOnKeypress="selectOnKeypress"
@change="handleAnswerChange">
<div
class="d-flex w-100 align-items-center px-2 h-100 list-card-content"
@ -41,35 +36,15 @@
</template>
<script>
import { useField } from "vee-validate";
import { toRef } from "vue";
import { queryStrings } from "@/constants/query-strings";
import baseInputButton from "@/common-components/base-input-button/base-input-button";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
export default {
name: "listCard",
mixins: [inputButtonWrapperMixin],
components: {
baseInputButton,
},
props: {
isMultiSelect: Boolean, //Defines use as checkbox
isWide: Boolean,
buttonImage: String, //Required: File name of image
buttonImageId: String,
buttonLabel: String, //Required: Label text
isRequired: Boolean, //Required: is aria-required required or not?
altText: String, //Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
groupName: String, //Rquired: Unique
buttonLabelSubCopy: String, //Optional: sub text
value: {
// Field initial value
type: String,
default: "",
},
validationRules: String,
valueToLogType: String,
selectOnKeypress: Boolean,
},
computed: {
getLabelClasses() {
if (this.isWide) {
@ -83,11 +58,6 @@ export default {
}
},
},
methods: {
handleAnswerChange(e) {
this.$emit("change", e);
},
},
};
</script>

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

@ -1,11 +1,8 @@
<template>
<baseInputButton
:isMultiSelect="isMultiSelect"
:value="value"
:groupName="groupName"
v-bind="$props"
buttonWrapperClasses="ui-radio form-check"
inputClasses="form-check-input"
:validationRules="validationRules"
@change="handleAnswerChange">
<div class="d-flex align-items-start form-check-label" :for="buttonID">
<p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
@ -18,24 +15,11 @@
<script>
import baseInputButton from "@/common-components/base-input-button/base-input-button";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
export 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,
},
mixins: [inputButtonWrapperMixin],
components: {
baseInputButton,
},