Remove hard-coded margin-bottom from vehicleBanner and replace it at the component level. "Recalibration" link at bottom of page is for testing only and will be removed when textLink functionality is added to the CMS.
90 lines
2.4 KiB
Vue
90 lines
2.4 KiB
Vue
<template>
|
|
<Form
|
|
@submit="onSubmit"
|
|
@invalidSubmit="onInvalidSubmit"
|
|
v-slot="{ meta }"
|
|
>
|
|
<div class="page-container-grouped-styles overflow-auto">
|
|
<siteHeader
|
|
cmsWidgetName="SiteHeaderWidget"
|
|
/>
|
|
<vehicleBanner
|
|
cmsWidgetName="VehicleBannerWidget"
|
|
:displayGenericVehicleImage="false"
|
|
class="mb-3"
|
|
/>
|
|
<siteSubHeader
|
|
cmsWidgetName="SiteSubHeaderWidget"
|
|
/>
|
|
<div class="fade-on-route-transition sub-container make-tall mt-5">
|
|
<p>Placeholder for capability-questions page</p>
|
|
|
|
<siteFooter
|
|
cmsWidgetName="SiteFooterWidget"
|
|
:isForwardActionDisabled="!meta.valid"
|
|
@backClicked="backButtonAction"
|
|
@forwardClicked="forwardButtonAction"
|
|
ref="siteFooter"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Form>
|
|
</template>
|
|
<script>
|
|
// Import Supporting Files
|
|
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
|
|
import { settleAllPromises } from '@/helpers/layout-helper';
|
|
|
|
// Import Component
|
|
import baseFormMixin from '@/mixins/base-form-mixin';
|
|
import { Form } from 'vee-validate';
|
|
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
|
|
import siteHeader from '@/iss-components/site-header/site-header.vue';
|
|
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
|
|
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
|
|
|
|
export default {
|
|
name: 'capability-questions',
|
|
mixins: [baseFormMixin],
|
|
components: {
|
|
siteFooter,
|
|
siteHeader,
|
|
siteSubHeader,
|
|
Form,
|
|
vehicleBanner,
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
async beforeRouteEnter(to, from, next) {
|
|
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
|
|
|
// Settle promises and get results
|
|
const promiseResultMap = [
|
|
{
|
|
resultKey: 'cmsContent',
|
|
promise: cmsContentPromise,
|
|
},
|
|
];
|
|
|
|
const resultMap = await settleAllPromises(promiseResultMap);
|
|
|
|
next((vm) => {
|
|
vm.setCmsContent(resultMap.cmsContent);
|
|
});
|
|
},
|
|
methods: {
|
|
arePagePrerequisiteValid() {
|
|
return true;
|
|
},
|
|
backButtonAction() {
|
|
/**
|
|
* this.navigationScenarios comes from base-mixin
|
|
*/
|
|
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
|
|
},
|
|
async forwardButtonAction() {},
|
|
resetDependentState() {},
|
|
},
|
|
};
|
|
</script>
|