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

CASH-1077

Browse source 
CASH-1077 added loader to popup
This commit is contained in:
Johnny shultz 2025-07-18 11:46:14 -04:00
parent 7341f0a88e
commit caf67637b3
1 changed files with 62 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
src/layouts/service-location/shop-question/shop-question-popup.vue
View file

@ -31,43 +31,48 @@
:isRequired="false"
:validationRules="''" />
</form>
<alert
ref="alertInvalidZip"
v-if="displayInvalidZipAlert"
class="mb-4"
cmsWidgetName="AlertInvalidZipWidget"
alertClass="alert-danger"
v-bind:isDismissible="false" />
<alert
ref="alertNoShops"
class="my-5"
cmsWidgetName="AlertNoShopsWidget"
v-if="displayNoShopsAlert"
alertClass="alert-warning" />
<div v-if="!displayInvalidZipAlert">
<buttonQuestion
ref="buttonQuestion"
buttonTypeString="shopListButton"
:buttonTypeObject="shopListButton"
class="radioQuestion"
:questionText="questionText"
:answers="answers"
groupName="chooseShop"
textPosition="text-start"
v-model="localSelectedProviderNumber"
isRequired
:validationRules="this.localSelectedProviderNumber ? '' : 'option-required'" />
<div class="show-more-shops-link">
<textLink
v-if="displaySeeMoreLocationsLink"
ref="showMoreShopsLink"
id="showMoreShopsId2"
cmsWidgetName="ShowMoreShopsLinkWidget"
linkType="text"
:text="showMoreShopsLinkText"
href="#!"
@click-event="updateShopListWithNextShops()"
:aria-label="showMoreShopsLinkText" />
<div v-show="isLoading" class="loader-wrapper">
<loader loaderColor="blue" loaderPosition="center" />
</div>
<div v-show="!isLoading">
<alert
ref="alertInvalidZip"
v-if="displayInvalidZipAlert"
class="mb-4"
cmsWidgetName="AlertInvalidZipWidget"
alertClass="alert-danger"
v-bind:isDismissible="false" />
<alert
ref="alertNoShops"
class="my-5"
cmsWidgetName="AlertNoShopsWidget"
v-if="displayNoShopsAlert"
alertClass="alert-warning" />
<div v-if="!displayInvalidZipAlert">
<buttonQuestion
ref="buttonQuestion"
buttonTypeString="shopListButton"
:buttonTypeObject="shopListButton"
class="radioQuestion"
:questionText="questionText"
:answers="answers"
groupName="chooseShop"
textPosition="text-start"
v-model="localSelectedProviderNumber"
isRequired
:validationRules="this.localSelectedProviderNumber ? '' : 'option-required'" />
<div class="show-more-shops-link">
<textLink
v-if="displaySeeMoreLocationsLink"
ref="showMoreShopsLink"
id="showMoreShopsId2"
cmsWidgetName="ShowMoreShopsLinkWidget"
linkType="text"
:text="showMoreShopsLinkText"
href="#!"
@click-event="updateShopListWithNextShops()"
:aria-label="showMoreShopsLinkText" />
</div>
</div>
</div>
</modal>
@ -87,6 +92,7 @@ import { defineRule } from "vee-validate";
import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import baseMixin from "@/mixins/base-mixin.js";
import loader from "@/ux-components/loader/loader";
import { AppointmentTypeStrings } from "@/constants/schedule-constants";
@ -109,6 +115,7 @@ export default {
localShopProviderData: this.shopProviderDataFromParent,
localSelectedProviderNumber: null,
zipCodeData: null,
isLoading: false,
};
},
props: {
@ -160,6 +167,7 @@ export default {
},
isModalFooterButtonDisabled() {
return (
this.isLoading ||
this.displayInvalidZipAlert ||
this.displayNoShopsAlert ||
!this.localSelectedProviderNumber
@ -248,8 +256,14 @@ export default {
this.modal.closeModal();
},
async onSearchZip(event) {
this.isLoading = true;
event.preventDefault();
this.zipCodeData = await this.getZipCodeData(this.localZipCode, "service-location");
if (this.localZipCode) {
this.zipCodeData = await this.getZipCodeData(this.localZipCode, "service-location");
} else {
this.zipCodeData = { containsMilitaryBase: false, isServiceable: false, isValid: false, state: "", zipCode: this.localZipCode, zipCodeCtu: "" };
this.isLoading = false;
}
// Add zipCode to zipCodeData as it does not come back from endpoint
this.zipCodeData.zipCode = this.localZipCode;
if (this.zipCodeData.isValid) {
@ -270,8 +284,11 @@ export default {
this.localShopProviderData = result.data;
this.numberOfShopsToDisplay = 3;
this.updateShopsForZip();
this.isLoading = false;
});
}
} else {
this.isLoading = false;
}
},
updateShopsForZip() {
@ -317,6 +334,7 @@ export default {
serviceZipQuestion,
buttonQuestion,
alert,
loader,
},
};
</script>
@ -444,4 +462,10 @@ export default {
display: block;
width: 100%;
}
.loader-wrapper {
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
}
</style>