From 62eea7ede3722ea7439288f29bb2f9722814a769 Mon Sep 17 00:00:00 2001 From: Bill Richardson Date: Fri, 20 Oct 2023 10:04:43 -0400 Subject: [PATCH 1/4] schedule clean up add service location / schedule resets similar to FMG fix weird loader scroll bar thing on datepicker --- .../date-picker/date-picker.vue | 6 ++++- .../site-sub-header/site-sub-header.vue | 2 +- src/store/index.js | 27 ++++++++++++++++++- src/ux-components/alert/alert.vue | 1 + src/ux-components/loader/loader.vue | 2 +- 5 files changed, 34 insertions(+), 4 deletions(-) diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue index f30f9b7d..feaa430d 100644 --- a/src/digital-components/date-picker/date-picker.vue +++ b/src/digital-components/date-picker/date-picker.vue @@ -734,7 +734,11 @@ export default { } .loader { height: 2rem; - width: calc(100% - 1.5rem); + width: 100%; + display: flex; + justify-content: center; + transform: unset; + right: unset; &::after { width: 1.5rem; diff --git a/src/iss-components/site-sub-header/site-sub-header.vue b/src/iss-components/site-sub-header/site-sub-header.vue index 2c998fb3..a26ea95f 100644 --- a/src/iss-components/site-sub-header/site-sub-header.vue +++ b/src/iss-components/site-sub-header/site-sub-header.vue @@ -36,7 +36,7 @@ import { getRouterLinkHtmlStringFromCopy } from '@/helpers/cms-content-helper'; -import stripRteStyle from '@/helpers/text-helper'; +import { stripRteStyle } from '@/helpers/text-helper'; export default { name: 'site-sub-header', diff --git a/src/store/index.js b/src/store/index.js index 28363b8e..dc485fa3 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -11,6 +11,7 @@ import applicationConfig from '@/constants/application-config'; import issPageValues from '@/router/router-constants/issPage-values'; import damageLocationsSelected from '@/constants/damage-locations-selected'; import coverageStatuses from '@/constants/coverage-statuses'; +import { deepEqual } from '@/helpers/object-helper'; import { AppointmentTypeStrings, PREMIUM_FEE_PART_TYPE } from '@/constants/schedule-constants'; import getDateDifferenceInDays from '@/helpers/date-helper'; @@ -1259,10 +1260,18 @@ export const useMainStore = defineStore({ this.order.vehicle.registration.firstName = null; this.order.vehicle.registration.lastName = null; }, + resetServiceLocationAndDependencies(context) { + console.log('Reset service location and dependencies...'); + this.resetServiceLocationAppointmentType(); + this.resetServiceLocationProvider(); + this.resetSchedule(); + }, resetServiceLocationAppointmentType() { + console.log('Reset service location appointment type...'); this.order.serviceLocation.appointmentType = null; }, resetServiceLocationProvider() { + console.log('Reset service location provider...'); this.order.serviceLocation.provider = { providerNumber: null, address: { @@ -1275,6 +1284,7 @@ export const useMainStore = defineStore({ }; }, resetServiceLocationMobileAddress() { + console.log('Reset service location mobile address...'); this.order.serviceLocation.address = null; this.order.serviceLocation.address2 = null; this.order.serviceLocation.city = null; @@ -1349,6 +1359,7 @@ export const useMainStore = defineStore({ this.applicationUser.pageData[issPageValues.CAPABILITY_QUESTIONS] = null; }, resetSchedule() { + console.log('Reset Schedule...'); this.order.schedule.date = null; this.order.schedule.startTime = null; this.order.schedule.endTime = null; @@ -1510,6 +1521,8 @@ export const useMainStore = defineStore({ || !sortedPreviousResultsArray?.every((x, i) => x.result === sortedPartQuestionAnswersArray[i].result); if (havePartQuestionAnswersChanged) { + this.resetServiceLocationAndDependencies(); + this.updateGlassParts(null); this.updateMoldingQuestionAnswers(null); this.updateCapabilityQuestionAnswers(null); @@ -1531,6 +1544,8 @@ export const useMainStore = defineStore({ || !sortedPreviousResultsArray?.every((x, i) => x.result === sortedMoldingQuestionAnswersArray[i].result); if (haveMoldingQuestionAnswersChanged) { + this.resetServiceLocationAndDependencies(); + this.updateGlassParts(null); this.updateSupportingItems(null); this.updateCapabilityQuestionAnswers(null); @@ -1548,6 +1563,8 @@ export const useMainStore = defineStore({ || !sortedPreviousResultsArray?.every((x, i) => x.result === sortedCapabilityQuestionAnswersArray[i].result); if (haveCapabilityQuestionAnswersChanged) { + this.resetServiceLocationAndDependencies(); + this.updateGlassParts(null); this.updateSupportingItems(null); } @@ -1556,10 +1573,16 @@ export const useMainStore = defineStore({ this.updateCapabilityQuestionAnswers(capabilityQuestionAnswersArray); }, saveGlassParts(glassParts) { + if (!deepEqual(glassParts, this.order.lineItems.glassParts)) { + this.resetServiceLocationAndDependencies(); + } this.order.lineItems.glassParts = glassParts; }, saveSupportingItems(supportingItems) { - // TODO: RESET_SERVICE_LOCATION_STATE_AND_DEPENDENCIES + if (!deepEqual(supportingItems, this.order.lineItems.supportingItems)) { + this.resetServiceLocationAndDependencies(); + } + this.order.lineItems.supportingItems = supportingItems; }, saveSupportingItemsSuppressingStateResetting(supportingItems) { @@ -1930,6 +1953,8 @@ export const useMainStore = defineStore({ this.resetGlassPartsState(); this.resetSupportingItemsState(); this.resetVapsState(); + + this.resetServiceLocationAndDependencies(); }, resetPageFields() { diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue index 143a421a..4837a939 100644 --- a/src/ux-components/alert/alert.vue +++ b/src/ux-components/alert/alert.vue @@ -76,6 +76,7 @@ import textBlock from '@/digital-components/text-block/text-block.vue'; import textLink from '@/ux-components/text-link/text-link.vue'; export default { + // eslint-disable-next-line vue/multi-word-component-names name: 'alert', components: { textBlock, diff --git a/src/ux-components/loader/loader.vue b/src/ux-components/loader/loader.vue index be644850..f11f7b80 100644 --- a/src/ux-components/loader/loader.vue +++ b/src/ux-components/loader/loader.vue @@ -28,7 +28,7 @@ export default { display: flex; //Open an overlay to prevent page interaction - &:before { + &:before:not(.date-picker-hidden) { content: ""; position: fixed; top: 0; From 33108d1b460a6c19376faec3c831f4b5ad906bba Mon Sep 17 00:00:00 2001 From: Bill Richardson Date: Fri, 20 Oct 2023 10:10:32 -0400 Subject: [PATCH 2/4] bootstrap importants update match fmg styling on page that was a little off after importants --- src/layouts/vehicle-damage/vehicle-damage.vue | 9 ++++ src/styles/ux-variables.scss | 41 +++++++++++-------- src/ux-components/list-card/list-card.vue | 7 ++-- 3 files changed, 38 insertions(+), 19 deletions(-) diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue index 02e00a05..0b079174 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.vue +++ b/src/layouts/vehicle-damage/vehicle-damage.vue @@ -445,3 +445,12 @@ export default { } }; + + diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss index 8ec17642..e9321490 100644 --- a/src/styles/ux-variables.scss +++ b/src/styles/ux-variables.scss @@ -157,22 +157,20 @@ $spacer: 1rem; $spacers: ( 0: 0, 1: $spacer * 0.25, - /* 8px */ 2: $spacer * 0.5, - /* 12px */ 3: $spacer * 0.75, - /* 16px */ 4: $spacer * 1, - /* 24px */ 5: $spacer * 1.5, - /* 32px */ 6: $spacer * 2, - /* 40px */ 7: $spacer * 2.5, - /* 48px */ 8: $spacer * 3, -); - -//Grid breakpoints -$grid-breakpoints: ( - xs: 0, - sm: 576px, - md: 838px, - lg: 1074px, - xl: 1416px, + /* 8px */ + 2: $spacer * 0.5, + /* 12px */ + 3: $spacer * 0.75, + /* 16px */ + 4: $spacer * 1, + /* 24px */ + 5: $spacer * 1.5, + /* 32px */ + 6: $spacer * 2, + /* 40px */ + 7: $spacer * 2.5, + /* 48px */ + 8: $spacer * 3, ); //Shadow @@ -190,3 +188,14 @@ $alert-color-scale: 40%; // This affects all [Bootstrap] modals $modal-fade-transform: translate(0, 100%); $modal-backdrop-opacity: 0; + +//Disable default !important behavior +$enable-important-utilities: false; + +//Bootstrap Grid Breakpoints - Use these breakpoints only +$grid-breakpoints: ( + xs: 0, + md: 768px, + xl: 1200px, + xxl: 1440px, +); \ No newline at end of file diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue index db0b57c5..f222696b 100644 --- a/src/ux-components/list-card/list-card.vue +++ b/src/ux-components/list-card/list-card.vue @@ -93,8 +93,8 @@ export default { img { // svg's should be constructed on the same canvas size/viewbox to ensure // they occupy the same space in the DOM. This will allow easy/proper alignment of elements. See exisitng svg's for examples. - height: auto; - width: 6.5rem; + height: 2rem; + width: auto; margin-bottom: 2.2rem; max-width: 100%; } @@ -105,8 +105,9 @@ export default { + .list-card-content { outline: none; - display: block; + display: flex; position: relative; + justify-content: flex-start; p { color: $gray-600; From f337c54ea88bf5780425af8ef6e89def63bc7609 Mon Sep 17 00:00:00 2001 From: Bill Richardson Date: Fri, 20 Oct 2023 10:13:43 -0400 Subject: [PATCH 3/4] remove console logs --- src/store/index.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/store/index.js b/src/store/index.js index dc485fa3..60699f03 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1261,17 +1261,14 @@ export const useMainStore = defineStore({ this.order.vehicle.registration.lastName = null; }, resetServiceLocationAndDependencies(context) { - console.log('Reset service location and dependencies...'); this.resetServiceLocationAppointmentType(); this.resetServiceLocationProvider(); this.resetSchedule(); }, resetServiceLocationAppointmentType() { - console.log('Reset service location appointment type...'); this.order.serviceLocation.appointmentType = null; }, resetServiceLocationProvider() { - console.log('Reset service location provider...'); this.order.serviceLocation.provider = { providerNumber: null, address: { @@ -1284,7 +1281,6 @@ export const useMainStore = defineStore({ }; }, resetServiceLocationMobileAddress() { - console.log('Reset service location mobile address...'); this.order.serviceLocation.address = null; this.order.serviceLocation.address2 = null; this.order.serviceLocation.city = null; @@ -1359,7 +1355,6 @@ export const useMainStore = defineStore({ this.applicationUser.pageData[issPageValues.CAPABILITY_QUESTIONS] = null; }, resetSchedule() { - console.log('Reset Schedule...'); this.order.schedule.date = null; this.order.schedule.startTime = null; this.order.schedule.endTime = null; From dd22463f540f8d1aef10a63c78e0eb739968855e Mon Sep 17 00:00:00 2001 From: Bill Richardson Date: Fri, 20 Oct 2023 10:42:43 -0400 Subject: [PATCH 4/4] old grid-breakpoints --- src/styles/ux-variables.scss | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss index e9321490..a67e7c76 100644 --- a/src/styles/ux-variables.scss +++ b/src/styles/ux-variables.scss @@ -173,6 +173,15 @@ $spacers: ( 8: $spacer * 3, ); +//Grid breakpoints +$grid-breakpoints: ( + xs: 0, + sm: 576px, + md: 838px, + lg: 1074px, + xl: 1416px, +); + //Shadow $box-shadow: 0 0.5rem 1rem rgba($black, 0.15); $box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075); @@ -190,12 +199,4 @@ $modal-fade-transform: translate(0, 100%); $modal-backdrop-opacity: 0; //Disable default !important behavior -$enable-important-utilities: false; - -//Bootstrap Grid Breakpoints - Use these breakpoints only -$grid-breakpoints: ( - xs: 0, - md: 768px, - xl: 1200px, - xxl: 1440px, -); \ No newline at end of file +$enable-important-utilities: false; \ No newline at end of file