molding question updates
This commit is contained in:
parent
2583c4f883
commit
1cbdab73b3
4 changed files with 44 additions and 12 deletions
|
|
@ -17,7 +17,7 @@
|
||||||
class="w-100"
|
class="w-100"
|
||||||
:class="questionTextClasses">{{ questionText }}</span>
|
:class="questionTextClasses">{{ questionText }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-100 d-flex justify-content-center">
|
<div class="w-100 d-flex justify-content-center fieldset-wrapper">
|
||||||
<fieldset
|
<fieldset
|
||||||
class="w-100"
|
class="w-100"
|
||||||
:aria-required="isRequired"
|
:aria-required="isRequired"
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,8 @@
|
||||||
class="mt-5" />
|
class="mt-5" />
|
||||||
<div
|
<div
|
||||||
v-for="(questionsDatum, i) in questionsData"
|
v-for="(questionsDatum, i) in questionsData"
|
||||||
:key="questionsDatum.key">
|
:key="questionsDatum.key"
|
||||||
|
class="question-chain-wrapper">
|
||||||
<questionChain
|
<questionChain
|
||||||
v-if="showThisQuestionChain(questionsDatum, i)"
|
v-if="showThisQuestionChain(questionsDatum, i)"
|
||||||
ref="questionChain"
|
ref="questionChain"
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,8 @@
|
||||||
:validationRules="rules.optionRequired"
|
:validationRules="rules.optionRequired"
|
||||||
:index="currentGlassIndex"
|
:index="currentGlassIndex"
|
||||||
@forwardButtonAction="forwardButtonAction"
|
@forwardButtonAction="forwardButtonAction"
|
||||||
@backClick="navigateBackByVehicleQuestions" />
|
@backClick="navigateBackByVehicleQuestions"
|
||||||
|
@needHelpClick="requestCallbackBailout" />
|
||||||
</Form>
|
</Form>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -28,6 +29,8 @@ import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin';
|
||||||
import { useMainStore } from '@/store';
|
import { useMainStore } from '@/store';
|
||||||
import issPageValues from '@/router/router-constants/issPage-values';
|
import issPageValues from '@/router/router-constants/issPage-values';
|
||||||
import BaseFormMixin from '@/mixins/base-form-mixin.js';
|
import BaseFormMixin from '@/mixins/base-form-mixin.js';
|
||||||
|
import bailoutMessage from '@/constants/bailoutMessage';
|
||||||
|
import navigationScenarios from '@/router/router-constants/navigation-scenarios';
|
||||||
|
|
||||||
// Import Component
|
// Import Component
|
||||||
import { Form } from 'vee-validate';
|
import { Form } from 'vee-validate';
|
||||||
|
|
@ -82,8 +85,7 @@ export default {
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
partsOrQuestionsData() {
|
partsOrQuestionsData() {
|
||||||
return useMainStore().pageData(issPageValues.MOLDING_QUESTIONS)
|
return useMainStore().pageData(issPageValues.MOLDING_QUESTIONS).partsOrQuestions;
|
||||||
.partsOrQuestions;
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
@ -101,8 +103,7 @@ export default {
|
||||||
},
|
},
|
||||||
getInitialQuestionData() {
|
getInitialQuestionData() {
|
||||||
// get any questions that were already answered
|
// get any questions that were already answered
|
||||||
const alreadyAnsweredQuestions =
|
const alreadyAnsweredQuestions = useMainStore().damage.moldingQuestionAnswers;
|
||||||
useMainStore().damage.moldingQuestionAnswers;
|
|
||||||
this.questionsData = this.partsOrQuestionsData
|
this.questionsData = this.partsOrQuestionsData
|
||||||
.filter((x) => x.parts[0].childPartQuestions.length)
|
.filter((x) => x.parts[0].childPartQuestions.length)
|
||||||
.map((glass, index) => {
|
.map((glass, index) => {
|
||||||
|
|
@ -161,17 +162,43 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
this.navigateForward(partsOrQuestions, null);
|
this.navigateForward(partsOrQuestions, null);
|
||||||
|
},
|
||||||
|
requestCallbackBailout() {
|
||||||
|
this.mainStore.setBailout(bailoutMessage.RequestCallback());
|
||||||
|
this.$router.navigate(navigationScenarios.CLICKED_NEED_HELP_WITH_BAILOUT, this.$route);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
#molding-question-wrapper p.text-body.small {
|
#molding-question-wrapper {
|
||||||
|
:deep(.subheader-secondary) {
|
||||||
|
margin-top: .625rem;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.question-chain-wrapper) {
|
||||||
|
margin-top: 1.25rem;
|
||||||
|
|
||||||
|
.button-question:has(.list-button-horizontal) .question-text {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fieldset-wrapper {
|
||||||
|
margin-top: 0.625rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p.text-body.small {
|
||||||
margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body text
|
margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body text
|
||||||
}
|
}
|
||||||
|
|
||||||
#molding-question-wrapper .form-test-error {
|
.form-test-error {
|
||||||
margin-top: 0 !important; // Overrides extra margin-top on error message text
|
margin-top: 0 !important; // Overrides extra margin-top on error message text
|
||||||
}
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -277,6 +277,10 @@ const routingTable = () => [
|
||||||
{
|
{
|
||||||
scenario: navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS,
|
scenario: navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS,
|
||||||
destinationIssPageValue: issPageValues.COVERAGE_STATEMENT
|
destinationIssPageValue: issPageValues.COVERAGE_STATEMENT
|
||||||
|
},
|
||||||
|
{
|
||||||
|
scenario: navigationScenarios.CLICKED_NEED_HELP_WITH_BAILOUT,
|
||||||
|
destinationIssPageValue: issPageValues.BAILOUT_PAGE
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue