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

Spinners working, needs styling detail

Browse source
This commit is contained in:
Leah Schumann 2023-05-24 10:53:20 -04:00
parent 9a353913da
commit 4dadb01fe8
3 changed files with 71 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

101
src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
View file

@ -16,17 +16,22 @@
}}</span> }}</span>
<div <div
class="availability-indicator rounded-pill" class="availability-indicator rounded-pill"
:class="availabilityRating === 'Good' ? 'green' : 'red'"> :class="availabilityRatingClass">
<div class="availability-badge"></div> <div v-if="!isLoaderDisplayed" class="availability-badge"></div>
<span class="m-0 button-auxillary-copy">{{ availabilityRating == 'Good' ? "Appts available" : "Appts low" }}</span> <span v-if="!isLoaderDisplayed" class="m-0 button-auxillary-copy">{{
<loader v-if="isLoaderDisplayed" :class="[this.loaderColor, this.loaderPosition]" /> availabilityRating == "Good" ? "Appts available" : "Appts low"
}}</span>
<loader
v-if="isLoaderDisplayed"
:class="[this.loaderColor, this.loaderPosition]" />
</div> </div>
</div> </div>
<span <div class="row-two">
<span
v-if="buttonBodyCopy" v-if="buttonBodyCopy"
class="m-0 button-label-sub-copy small" class="m-0 button-label-sub-copy small"
:class="textPosition"
v-html="buttonBodyCopy"></span> v-html="buttonBodyCopy"></span>
</div>
<span v-if="screenReaderOnlyText" class="sr-only"> <span v-if="screenReaderOnlyText" class="sr-only">
{{ screenReaderOnlyText }} {{ screenReaderOnlyText }}
</span> </span>
@ -46,24 +51,23 @@ export default {
mixins: [inputButtonWrapperMixin], mixins: [inputButtonWrapperMixin],
props: { props: {
loaderColor: String, loaderColor: String,
loaderPosition: {
type: String,
default: "right",
},
}, },
mounted() { mounted() {
this.displayLoader(); this.displayLoader();
this.additionalButtonData.availabilityRatingCallback(this.modelValue) this.additionalButtonData.availabilityRatingCallback(this.modelValue).then((data) => {
.then((data) => { this.availabilityRating = data;
this.availabilityRating = data; this.isLoaderDisplayed = false;
//this.isLoaderDisplayed = false; });
})
}, },
data() { data() {
return { return {
isLoaderDisplayed: false, isLoaderDisplayed: false,
badgeText: "", badgeText: "",
availabilityRating: "" availabilityRating: "None",
availabilityRatingClass: "",
loaderPosition: "left"
}; };
}, },
methods: { methods: {
@ -76,6 +80,18 @@ export default {
} }
}, },
}, },
watch: {
availabilityRating: {
handler(newValue) {
if (newValue == "None") {
this.availabilityRatingClass = "gray"
} else {
this.availabilityRatingClass = newValue == "Good" ? "green" : "red";
}
},
immediate: true
}
},
components: { components: {
loader, loader,
baseInputButton, baseInputButton,
@ -84,7 +100,6 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.list-button { .list-button {
outline: none; outline: none;
input[type="radio"], input[type="radio"],
@ -134,12 +149,15 @@ export default {
} }
} }
.button-content { .button-content {
row-gap: 0.25rem;
.row-one { .row-one {
display: flex; display: flex;
align-items: center; align-items: center;
line-height: 1.5rem;
.button-label-copy { .button-label-copy {
font-weight: 500; font-weight: 500;
} }
.availability-indicator { .availability-indicator {
@ -147,7 +165,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: auto; margin-left: auto;
padding: .125rem .5rem; padding: 0.125rem 0.5rem;
.availability-badge { .availability-badge {
display: inline; display: inline;
@ -159,8 +177,6 @@ export default {
margin: 0 0.25rem 0 0; margin: 0 0.25rem 0 0;
} }
.button-auxillary-copy { .button-auxillary-copy {
box-sizing: border-box; box-sizing: border-box;
justify-content: right; justify-content: right;
@ -168,32 +184,20 @@ export default {
font-weight: 500; font-weight: 500;
font-size: 0.75rem; font-size: 0.75rem;
align-items: center; align-items: center;
//padding-right: 0.5rem;
// background-image: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 12C3.19159 12 0.5 9.30841 0.5 6C0.5 2.69159 3.19159 0 6.5 0C9.80841 0 12.5 2.69159 12.5 6C12.5 9.30841 9.80841 12 6.5 12ZM6.5 0.785047C3.62449 0.785047 1.28505 3.12449 1.28505 6C1.28505 8.87551 3.62449 11.215 6.5 11.215C9.37551 11.215 11.715 8.87551 11.715 6C11.715 3.12449 9.37551 0.785047 6.5 0.785047Z' fill='%23006A36'/%3E%3Cpath d='M5.697 7.95252C5.5927 7.95252 5.49289 7.91102 5.41999 7.837L3.90597 6.32299C3.75233 6.16934 3.75233 5.92149 3.90597 5.76785C4.05962 5.6142 4.30747 5.6142 4.46111 5.76785L5.69812 7.00373L8.53999 4.16186C8.69364 4.00822 8.94149 4.00822 9.09513 4.16186C9.24878 4.31551 9.24878 4.56336 9.09513 4.717L5.97626 7.83588C5.90224 7.9099 5.80242 7.9514 5.69925 7.9514L5.697 7.95252Z' fill='%23006A36'/%3E%3C/svg%3E%0A");
// background-repeat: no-repeat;
// background-size: 0.75rem;
// background-position: left;
} }
// .button-auxillary-copy::before {
// display: inline-flex;
// //content: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 12C3.19159 12 0.5 9.30841 0.5 6C0.5 2.69159 3.19159 0 6.5 0C9.80841 0 12.5 2.69159 12.5 6C12.5 9.30841 9.80841 12 6.5 12ZM6.5 0.785047C3.62449 0.785047 1.28505 3.12449 1.28505 6C1.28505 8.87551 3.62449 11.215 6.5 11.215C9.37551 11.215 11.715 8.87551 11.715 6C11.715 3.12449 9.37551 0.785047 6.5 0.785047Z' fill='%23006A36'/%3E%3Cpath d='M5.697 7.95252C5.5927 7.95252 5.49289 7.91102 5.41999 7.837L3.90597 6.32299C3.75233 6.16934 3.75233 5.92149 3.90597 5.76785C4.05962 5.6142 4.30747 5.6142 4.46111 5.76785L5.69812 7.00373L8.53999 4.16186C8.69364 4.00822 8.94149 4.00822 9.09513 4.16186C9.24878 4.31551 9.24878 4.56336 9.09513 4.717L5.97626 7.83588C5.90224 7.9099 5.80242 7.9514 5.69925 7.9514L5.697 7.95252Z' fill='%23006A36'/%3E%3C/svg%3E%0A");
// height: 1.25rem;
// padding: 4px;
// width: 1.25rem;
// background-image: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 12C3.19159 12 0.5 9.30841 0.5 6C0.5 2.69159 3.19159 0 6.5 0C9.80841 0 12.5 2.69159 12.5 6C12.5 9.30841 9.80841 12 6.5 12ZM6.5 0.785047C3.62449 0.785047 1.28505 3.12449 1.28505 6C1.28505 8.87551 3.62449 11.215 6.5 11.215C9.37551 11.215 11.715 8.87551 11.715 6C11.715 3.12449 9.37551 0.785047 6.5 0.785047Z' fill='%23006A36'/%3E%3Cpath d='M5.697 7.95252C5.5927 7.95252 5.49289 7.91102 5.41999 7.837L3.90597 6.32299C3.75233 6.16934 3.75233 5.92149 3.90597 5.76785C4.05962 5.6142 4.30747 5.6142 4.46111 5.76785L5.69812 7.00373L8.53999 4.16186C8.69364 4.00822 8.94149 4.00822 9.09513 4.16186C9.24878 4.31551 9.24878 4.56336 9.09513 4.717L5.97626 7.83588C5.90224 7.9099 5.80242 7.9514 5.69925 7.9514L5.697 7.95252Z' fill='%23006A36'/%3E%3C/svg%3E%0A");
// background-repeat: no-repeat;
// background-size: 0.75rem;
// background-position: left;
// }
.loader { .loader {
display: none; padding: 0 0.25rem 0 0.25rem;
padding: 0.25rem 0.5rem;
//position: absolute; //position: absolute;
} }
.loader:after {
background-color: $gray-300 !important;
height: 1rem;
width: 1rem;
}
&.green { &.green {
color: $green-700; color: $green-700;
background-color: $green-100; background-color: $green-100;
@ -203,7 +207,20 @@ export default {
color: $red-600; color: $red-600;
background-color: $red-100; background-color: $red-100;
} }
&.gray {
color: $gray-600 !important;
background-color: $gray-100;
}
} }
} }
.row-two {
text-align: left;
}
.row-three {
text-align: left;
}
} }
</style> </style>

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

@ -19,8 +19,8 @@
textPosition="text-start" textPosition="text-start"
v-model="selectedProviderNumber" v-model="selectedProviderNumber"
isRequired isRequired
validationRules="option-required" validationRules="option-required"
:additionalButtonData="additionalButtonData"/> :additionalButtonData="additionalButtonData" />
<textLink <textLink
v-show="displaySeeMoreLocationsLink" v-show="displaySeeMoreLocationsLink"
ref="showMoreShopsLink" ref="showMoreShopsLink"
@ -107,9 +107,9 @@ export default {
}, },
additionalButtonData() { additionalButtonData() {
return { return {
availabilityRatingCallback: getAvailabilityRating availabilityRatingCallback: getAvailabilityRating,
} };
} },
}, },
methods: { methods: {
loadInitialData(serviceZipCode) { loadInitialData(serviceZipCode) {
@ -166,16 +166,7 @@ export default {
}); });
} }
// for (let i = 0; i < this.answers.length; i++) { await nextTick();
// const availabilityRating = await this.answers[i].getAvailabilityRating(
// this.answers[i].value
// );
// this.answers[i].buttonAuxillaryCopy = availabilityRating ? "Appts available" : "Appts low";
// }
await this.$nextTick();
if (this.shopIndex == this.shopProviders.length) { if (this.shopIndex == this.shopProviders.length) {
this.displaySeeMoreLocationsLink = false; this.displaySeeMoreLocationsLink = false;
@ -183,7 +174,7 @@ export default {
this.displaySeeMoreLocationsLink = true; this.displaySeeMoreLocationsLink = true;
} }
await this.$nextTick(); await nextTick();
this.scrollToPageBottom(); this.scrollToPageBottom();
}, },
@ -220,13 +211,13 @@ export default {
async handler(newValue) { async handler(newValue) {
this.resetAnswers(); this.resetAnswers();
await this.$nextTick(); await nextTick();
this.selectedProviderNumber = null; this.selectedProviderNumber = null;
this.$refs.buttonQuestion?.resetField(); this.$refs.buttonQuestion?.resetField();
await this.$nextTick(); await nextTick();
if (newValue !== "Mobile") { if (newValue !== "Mobile") {
await this.getNextShopsFromList(); await this.getNextShopsFromList();
@ -235,7 +226,7 @@ export default {
}, },
shopProviders: { shopProviders: {
async handler(newValue) { async handler(newValue) {
await this.$nextTick(); await nextTick();
if (this.selectedAppointmentType) { if (this.selectedAppointmentType) {
const selectedShopIndex = this.getSelectedProviderIndex( const selectedShopIndex = this.getSelectedProviderIndex(
@ -247,7 +238,7 @@ export default {
await this.getNextShopsFromList(selectedShopIndex + 1); await this.getNextShopsFromList(selectedShopIndex + 1);
} else { } else {
await this.getNextShopsFromList(); await this.getNextShopsFromList();
await this.$nextTick(); await nextTick();
} }
} }
}, },

2
src/store/index.js
View file

@ -1139,7 +1139,7 @@ export const actions = {
getShopTimeSlots( getShopTimeSlots(
context, context,
{ {
providerNumber, providerNumber = null,
startDate = "2023-01-01", startDate = "2023-01-01",
endDate = "2023-05-01", endDate = "2023-05-01",
shopAppointmentType = "", shopAppointmentType = "",