WIP format vehicle-parts.
This commit is contained in:
parent
015fd50202
commit
68e0929c7d
1 changed files with 43 additions and 33 deletions
|
|
@ -1,42 +1,52 @@
|
||||||
<template>
|
<template>
|
||||||
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
|
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
|
||||||
<div class="page-container-grouped-styles vehicle-parts small-question-text">
|
<div class="vehicle-parts small-question-text">
|
||||||
<loadingModal ref="loadingModal" />
|
<loadingModal ref="loadingModal" />
|
||||||
<funnelHeader ref="funnelHeader" cmsWidgetName="FunnelHeaderWidget" />
|
<div class="container-fluid">
|
||||||
<vehicleBanner
|
<div class="row">
|
||||||
ref="vehicleBanner"
|
<div class="col">
|
||||||
cmsWidgetName="VehicleBannerWidget"
|
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
|
||||||
:displayGenericVehicleImage="false" />
|
|
||||||
<funnelSubHeader ref="funnelSubHeader" cmsWidgetName="FunnelSubHeaderWidget" />
|
|
||||||
<div class="fade-on-route-transition sub-container make-tall">
|
|
||||||
<div class="prevent-squish my-5">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col pb-0">
|
|
||||||
<alert
|
|
||||||
class="rounded border-0 shadow-sm"
|
|
||||||
alertClass="alert-warning"
|
|
||||||
cmsWidgetName="AlertWidget"
|
|
||||||
:isDismissible="false" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-for="(item, i) in PartsOrQuestions" :key="i">
|
<div class="row">
|
||||||
<!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
|
<div class="col-md-2 col-lg-3"> </div>
|
||||||
<hr v-if="i > 0" />
|
<div class="col-md-8 col-lg-6">
|
||||||
<glassPartQuestion
|
<vehicleBanner
|
||||||
:ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
|
ref="vehicleBanner"
|
||||||
v-model="selectedGlassParts[item.glassLocation + '-' + item.glassName]"
|
cmsWidgetName="VehicleBannerWidget"
|
||||||
:glassLocation="item.glassLocation"
|
:displayGenericVehicleImage="false" />
|
||||||
:glassName="item.glassName"
|
<funnelSubHeader ref="funnelSubHeader" cmsWidgetName="FunnelSubHeaderWidget" />
|
||||||
:colorAnswers="item.colorAnswers"
|
<div class="prevent-squish my-5">
|
||||||
:alreadyPopulatedPartsData="alreadyPopulatedPartsData" />
|
<div class="row">
|
||||||
|
<div class="col pb-0">
|
||||||
|
<alert
|
||||||
|
class="rounded border-0 shadow-sm"
|
||||||
|
alertClass="alert-warning"
|
||||||
|
cmsWidgetName="AlertWidget"
|
||||||
|
:isDismissible="false" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<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" />
|
||||||
|
<glassPartQuestion
|
||||||
|
:ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
|
||||||
|
v-model="selectedGlassParts[item.glassLocation + '-' + item.glassName]"
|
||||||
|
:glassLocation="item.glassLocation"
|
||||||
|
:glassName="item.glassName"
|
||||||
|
:colorAnswers="item.colorAnswers"
|
||||||
|
:alreadyPopulatedPartsData="alreadyPopulatedPartsData" />
|
||||||
|
</div>
|
||||||
|
<navbar
|
||||||
|
cmsWidgetName="FunnelFooterWidget"
|
||||||
|
ref="navbar"
|
||||||
|
:isForwardActionDisabled="isForwardActionDisabled"
|
||||||
|
@back-clicked="navigateBack"
|
||||||
|
@ForwardClicked="forwardButtonAction" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<navbar
|
<div class="col-md-2 col-lg-3"> </div>
|
||||||
cmsWidgetName="FunnelFooterWidget"
|
|
||||||
ref="navbar"
|
|
||||||
:isForwardActionDisabled="isForwardActionDisabled"
|
|
||||||
@back-clicked="navigateBack"
|
|
||||||
@ForwardClicked="forwardButtonAction" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Form>
|
</Form>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue