CSR-520 loading modal
This commit is contained in:
CarlNation
parent
063135966f
commit
3c06e44da5
6 changed files with 162 additions and 6 deletions
BIN
src/assets/img/loader.gif
Normal file
BIN
src/assets/img/loader.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
src/assets/img/windshield.png
Normal file
BIN
src/assets/img/windshield.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1 KiB |
126
src/common-components/loading-modal/loading-modal.vue
Normal file
126
src/common-components/loading-modal/loading-modal.vue
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
<template>
|
||||
<div v-show="isModalVisible" class="loading-modal-backdrop" v-on:click="canClose" @close="closeModal">
|
||||
<div class="loading-modal">
|
||||
<button v-if="showCloseButton" type="button" class="loading-modal-close" @click="closeModal">x</button>
|
||||
<section class="loading-modal-body">
|
||||
<div class="modal-icon-container text-center">
|
||||
<img class="loader-gif" alt="Loading" src="@/assets/img/loader.gif">
|
||||
<img class="modal-icon" alt="" src="@/assets/img/windshield.png">
|
||||
</div>
|
||||
<div class="text-center fw-bold fs-5 loading-modal-text">
|
||||
<slot name="body">
|
||||
Default text
|
||||
</slot>
|
||||
</div>
|
||||
<div class="text-center fs-5 loading-modal-text">
|
||||
<slot name="subtext">
|
||||
Default subtext
|
||||
</slot>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Modal',
|
||||
data() {
|
||||
return {
|
||||
isModalVisible: false,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
showCloseButton: {type: Boolean, default: false},
|
||||
clickOutCloses: {type: Boolean, default: false},
|
||||
},
|
||||
methods: {
|
||||
showModal() {
|
||||
this.isModalVisible = true;
|
||||
},
|
||||
closeModal() {
|
||||
this.isModalVisible = false;
|
||||
},
|
||||
canClose() {
|
||||
this.clickOutCloses ? this.closeModal() : null;
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.loading-modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #e5e5e5;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1050;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.loading-modal {
|
||||
position: absolute;
|
||||
background: #ffffff;
|
||||
padding: 0 0 32px 0;
|
||||
box-shadow: 2px 2px 20px 1px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 4px;
|
||||
top: 48px;
|
||||
height: 246px;
|
||||
width: 327px;
|
||||
}
|
||||
|
||||
.loading-modal-body {
|
||||
position: relative;
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
.loading-modal-text {
|
||||
padding: 0 24px 0 24px;
|
||||
}
|
||||
|
||||
.loading-modal-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
color: $blue;
|
||||
background: transparent;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.modal-icon-container {
|
||||
position: relative;
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
margin: 15px auto;
|
||||
padding-bottom: 26px;
|
||||
}
|
||||
|
||||
.modal-icon-container img {
|
||||
position: absolute;
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.loader-gif {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,6 +6,14 @@
|
|||
v-slot="{ meta }"
|
||||
autocomplete="off" >
|
||||
<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
|
||||
<loadingModal :showCloseButton=false :clickOutCloses=false ref="loadingModal">
|
||||
<template v-slot:body>
|
||||
Please wait...
|
||||
</template>
|
||||
<template v-slot:subtext>
|
||||
This process can take up 20 seconds.
|
||||
</template>
|
||||
</loadingModal>
|
||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
|
||||
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
|
||||
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />
|
||||
|
|
@ -68,6 +76,7 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
|
|||
import customerQuestions from "@/layouts/address-lookup/customer-questions/customer-questions";
|
||||
import alert from "@/ux-components/alert/alert";
|
||||
import textboxQuestion from "@/common-components/textbox-question/textbox-question";
|
||||
import loadingModal from '@/common-components/loading-modal/loading-modal.vue';
|
||||
|
||||
import { Form } from "vee-validate";
|
||||
import { defineRule } from "vee-validate";
|
||||
|
|
@ -251,6 +260,7 @@ export default {
|
|||
|
||||
// if the car entered is the same as the car found OR the glass options for the found car match the users damage selections
|
||||
if (carEntered.carId == carFound.carId || isGlassAvailableForCarId(carFound.carId)) {
|
||||
this.$refs.loadingModal.showModal();
|
||||
navigateAfterSaveToHeritageFunnel(this.$route);
|
||||
} else {
|
||||
// if not then navigate to the "vehicle-damage" page
|
||||
|
|
@ -260,6 +270,7 @@ export default {
|
|||
// if multiple cars were found
|
||||
if (carsFound.find(car => car.carId === carEntered.carId)) {
|
||||
// and one of them matches the car id entered
|
||||
this.$refs.loadingModal.showModal();
|
||||
navigateAfterSaveToHeritageFunnel(this.$route);
|
||||
} else {
|
||||
// and there is no match, navigate to "address-vehicle" page
|
||||
|
|
@ -359,6 +370,7 @@ export default {
|
|||
customerQuestions,
|
||||
textboxQuestion,
|
||||
alert,
|
||||
loadingModal,
|
||||
Form
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,9 +5,15 @@
|
|||
ref="theForm"
|
||||
v-slot="{ meta }"
|
||||
>
|
||||
<div
|
||||
class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5"
|
||||
>
|
||||
<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
|
||||
<loadingModal :showCloseButton=false :clickOutCloses=false ref="loadingModal">
|
||||
<template v-slot:body>
|
||||
Please wait...
|
||||
</template>
|
||||
<template v-slot:subtext>
|
||||
This process can take up 20 seconds.
|
||||
</template>
|
||||
</loadingModal>
|
||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
|
||||
<vehicleBanner
|
||||
cmsWidgetName="VehicleBannerWidget"
|
||||
|
|
@ -98,6 +104,7 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
|
|||
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
|
||||
import alert from "@/ux-components/alert/alert";
|
||||
import textboxQuestion from "@/common-components/textbox-question/textbox-question";
|
||||
import loadingModal from '@/common-components/loading-modal/loading-modal.vue';
|
||||
|
||||
// Supporting files
|
||||
import {
|
||||
|
|
@ -336,6 +343,7 @@ export default {
|
|||
);
|
||||
return;
|
||||
} else {
|
||||
this.$refs.loadingModal.showModal();
|
||||
navigateAfterSaveToHeritageFunnel(this.$route);
|
||||
return;
|
||||
}
|
||||
|
|
@ -399,6 +407,7 @@ export default {
|
|||
textboxQuestion,
|
||||
alert,
|
||||
funnelFooter,
|
||||
loadingModal,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -5,9 +5,15 @@
|
|||
ref="theForm"
|
||||
v-slot="{ meta }"
|
||||
>
|
||||
<div
|
||||
class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5"
|
||||
>
|
||||
<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
|
||||
<loadingModal :showCloseButton=false :clickOutCloses=false ref="loadingModal">
|
||||
<template v-slot:body>
|
||||
Please wait...
|
||||
</template>
|
||||
<template v-slot:subtext>
|
||||
This process can take up 20 seconds.
|
||||
</template>
|
||||
</loadingModal>
|
||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
|
||||
<vehicleBanner
|
||||
cmsWidgetName="VehicleBannerWidget"
|
||||
|
|
@ -160,6 +166,7 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
|
|||
import alert from "@/ux-components/alert/alert";
|
||||
import textboxQuestion from "@/common-components/textbox-question/textbox-question";
|
||||
import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information";
|
||||
import loadingModal from '@/common-components/loading-modal/loading-modal.vue';
|
||||
|
||||
// Supporting files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
|
|
@ -333,6 +340,7 @@ export default {
|
|||
this.$router.navigateAfterSave(this.navigationScenarios.CLICKED_FORWARD, this.$route, {}, { displayVehicleChangeAlert: true }, {});
|
||||
return;
|
||||
} else {
|
||||
this.$refs.loadingModal.showModal();
|
||||
navigateAfterSaveToHeritageFunnel(this.$route);
|
||||
return;
|
||||
}
|
||||
|
|
@ -375,6 +383,7 @@ export default {
|
|||
alert,
|
||||
funnelFooter,
|
||||
vinInformation,
|
||||
loadingModal,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue