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

Merge pull request #1118 from Safelite/feature/CSR-886

Browse source 
CSR-886: tech review cleanup
This commit is contained in:
AdamCaouetteSafelite 2023-05-24 14:49:07 -04:00 committed by GitHub
commit b178536d49
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 45 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

90
src/digital-components/date-picker/date-picker.vue
View file

@ -22,7 +22,6 @@
<div class="separator-line"></div> <div class="separator-line"></div>
<div class="nav-back ps-3"><button></button></div> <div class="nav-back ps-3"><button></button></div>
<div class="nav-forward pe-3"><button></button></div> <div class="nav-forward pe-3"><button></button></div>
<!-- TODO Accessibility: Do the days of the week need to be read? -->
<div class="grid-item caption"><span class="sr-only">Sunday</span>S</div> <div class="grid-item caption"><span class="sr-only">Sunday</span>S</div>
<div class="grid-item caption"><span class="sr-only">Monday</span>M</div> <div class="grid-item caption"><span class="sr-only">Monday</span>M</div>
<div class="grid-item caption"><span class="sr-only">Tuesday</span>T</div> <div class="grid-item caption"><span class="sr-only">Tuesday</span>T</div>
@ -84,7 +83,6 @@ export default {
months: null, months: null,
disableViewMoreDatesButton: false, disableViewMoreDatesButton: false,
selectableDatesData: [], // NOTE: uses monthNum (1-based), NOT monthIndex (0-based) selectableDatesData: [], // NOTE: uses monthNum (1-based), NOT monthIndex (0-based)
today: null,
hideSomeDaysForInitialView: null, hideSomeDaysForInitialView: null,
}; };
}, },
@ -112,6 +110,12 @@ export default {
}, },
}, },
computed: { computed: {
today() {
if (this.todayOverrideDateString) {
return new Date(this.todayOverrideDateString);
}
return new Date();
},
todayMonthIndex() { todayMonthIndex() {
return this.today.getMonth() + 1; return this.today.getMonth() + 1;
}, },
@ -151,39 +155,31 @@ export default {
this.$emit("date-clicked"); this.$emit("date-clicked");
}, },
getWeekStartDate(date) { getWeekStartDate(date) {
// Get the day of the week for date const dayOfWeek = date.getDay();
let dayOfWeek = date.getDay();
// Subtract the day of the week from date to get the date of Sunday // Subtract the day of the week from date to get the date of Sunday
let sunday = new Date(date); const sunday = new Date(date);
sunday.setDate(sunday.getDate() - dayOfWeek); sunday.setDate(sunday.getDate() - dayOfWeek);
// Return the date of Sunday
return sunday; return sunday;
}, },
getWeekEndDate(date) { getWeekEndDate(date) {
const currentDay = date.getDay(); // Get the day of the week (0 = Sunday, 1 = Monday, etc.) const dayOfWeek = date.getDay();
const daysUntilSaturday = 6 - currentDay; // Calculate the number of days until Saturday const daysUntilSaturday = 6 - dayOfWeek; // Calculate the number of days until Saturday
// Clone the given date and add the remaining days until Saturday // Clone the given date and add the remaining days until Saturday
const saturday = new Date(date); const saturday = new Date(date);
saturday.setDate(date.getDate() + daysUntilSaturday); saturday.setDate(date.getDate() + daysUntilSaturday);
return saturday; return saturday;
}, },
getNextWeekSunday(date) { getNextWeekSunday(date) {
const currentDay = date.getDay(); // Get the day of the week (0 = Sunday, 1 = Monday, etc.) const dayOfWeek = date.getDay();
const daysUntilNextSunday = currentDay === 0 ? 7 : 7 - currentDay; // Calculate the number of days until the next Sunday const daysUntilNextSunday = 7 - dayOfWeek; // Calculate the number of days until the next Sunday
// Clone the given date and add the remaining days until Sunday // Clone the given date and add the remaining days until Sunday
const nextSunday = new Date(date); const nextSunday = new Date(date);
nextSunday.setDate(date.getDate() + daysUntilNextSunday); nextSunday.setDate(date.getDate() + daysUntilNextSunday);
return nextSunday; return nextSunday;
}, },
getInitialViewWeeks(today, initialViewRowsToShow) { getInitialViewWeeks(today, initialViewRowsToShow) {
// TODO: this only is for future direction; create logic for past direction // TODO: this only is for future direction; need to create logic for past direction
let weeks = []; const weeks = [];
let weekStartDate = this.getWeekStartDate(today); let weekStartDate = this.getWeekStartDate(today);
let weekEndDate = this.getWeekEndDate(today); let weekEndDate = this.getWeekEndDate(today);
for (let i = 0; i < initialViewRowsToShow; i++) { for (let i = 0; i < initialViewRowsToShow; i++) {
@ -200,14 +196,19 @@ export default {
return weeks; return weeks;
}, },
async loadInitialData(config) { async loadInitialData(config) {
// CALLED FROM CONSUMING COMPONENT BEFORE DATE-PICKER APPEARS let todayDate;
const todayDate = config.todayOverrideDateString if (this.today) {
? new Date(config.todayOverrideDateString) todayDate = this.today;
: new Date(); } else if (config.todayOverrideDateString) {
todayDate = new Date(config.todayOverrideDateString);
} else {
todayDate = new Date();
}
let todayMonthIndex = todayDate.getMonth() + 1; const todayMonthIndex = todayDate.getMonth() + 1;
let todayYearNum = todayDate.getFullYear(); const todayYearNum = todayDate.getFullYear();
let currentMonthStart = new Date(todayYearNum, todayMonthIndex - 1, 1); // TODO - set up currentMonthStart if direction is PAST:
// let currentMonthStart = new Date(todayYearNum, todayMonthIndex - 1, 1);
let currentMonthEnd = new Date(todayYearNum, todayMonthIndex, 0); let currentMonthEnd = new Date(todayYearNum, todayMonthIndex, 0);
let calendarViewDirection = "none"; let calendarViewDirection = "none";
@ -219,10 +220,10 @@ export default {
config.initialViewRowsToShow config.initialViewRowsToShow
); );
let initialViewStartDate = todayDate; const initialViewStartDate = todayDate;
let initialViewEndDate = initialViewWeeks[initialViewWeeks.length - 1].weekEndDate; const initialViewEndDate = initialViewWeeks[initialViewWeeks.length - 1].weekEndDate;
let saturday1month = initialViewWeeks[0].weekEndDate.getMonth(); const saturday1month = initialViewWeeks[0].weekEndDate.getMonth();
let sunday5month = const sunday5month =
initialViewWeeks[initialViewWeeks.length - 1].weekStartDate.getMonth(); initialViewWeeks[initialViewWeeks.length - 1].weekStartDate.getMonth();
let hideSomeDaysForInitialView = false; let hideSomeDaysForInitialView = false;
@ -284,9 +285,9 @@ export default {
// Growing from 0 to 1 // Growing from 0 to 1
time = Math.min(1, (timestamp - start) / duration); time = Math.min(1, (timestamp - start) / duration);
let percentageNew = timingFunc(time); const percentageNew = timingFunc(time);
let distanceToGo = targetY; const distanceToGo = targetY;
let thisDistance = percentageNew * distanceToGo; const thisDistance = percentageNew * distanceToGo;
wrapper.scrollTo(0, initY + thisDistance); wrapper.scrollTo(0, initY + thisDistance);
@ -305,13 +306,12 @@ export default {
}, },
async setCalendarData(config = {}) { async setCalendarData(config = {}) {
this.today = config.todayDate;
this.hideSomeDaysForInitialView = config.hideSomeDaysForInitialView; this.hideSomeDaysForInitialView = config.hideSomeDaysForInitialView;
let hideSecondMonth = config.hideSecondMonth; const hideSecondMonth = config.hideSecondMonth;
const direction = config.calendarViewDirection; const direction = config.calendarViewDirection;
const monthsAfterToLoadOffset = 12; // TO BE MADE "CONSTANTS" const monthsAfterToLoadOffset = 12;
const monthsBeforeToLoadOffset = 36; // TO BE MADE "CONSTANTS" const monthsBeforeToLoadOffset = 36;
config.initialShopTimeSlotsResponse.days.forEach((selectableDate) => { config.initialShopTimeSlotsResponse.days.forEach((selectableDate) => {
this.selectableDatesData.push(selectableDate); this.selectableDatesData.push(selectableDate);
}); });
@ -382,25 +382,25 @@ export default {
} }
} }
const monthEndDate = new Date(yearNum, monthIndex, 0); // BOTH const monthEndDate = new Date(yearNum, monthIndex, 0);
let monthEndDateNum = monthEndDate.getDate(); // BOTH let monthEndDateNum = monthEndDate.getDate();
if ( if (
offset === 0 && offset === 0 &&
calendarViewDirection === "past" && calendarViewDirection === "past" &&
monthEndDateNum > this.currentWeekEndDateNum monthEndDateNum > this.currentWeekEndDateNum
) { ) {
monthEndDateNum = this.currentWeekEndDateNum; // PAST monthEndDateNum = this.currentWeekEndDateNum;
} }
const monthStartDateNum = const monthStartDateNum =
offset === 0 && calendarViewDirection === "future" offset === 0 && calendarViewDirection === "future"
? this.currentWeekStartDateNum ? this.currentWeekStartDateNum
: 1; // FUTURE : 1;
const monthStartDate = new Date(yearNum, monthIndex - 1, monthStartDateNum); // BOTH const monthStartDate = new Date(yearNum, monthIndex - 1, monthStartDateNum);
const startDateDayIndex = monthStartDate.getDay(); // FUTURE const startDateDayIndex = monthStartDate.getDay();
const endDateDayIndex = monthEndDate.getDay(); // PAST const endDateDayIndex = monthEndDate.getDay();
if (Math.abs(offset) === 1 && hideSecondMonth) { if (Math.abs(offset) === 1 && hideSecondMonth) {
monthClass = monthClass + " month-hidden"; monthClass = monthClass + " month-hidden";
@ -424,7 +424,7 @@ export default {
// populate dates array // populate dates array
for (let i = monthStartDateNum; i <= monthEndDateNum; i++) { for (let i = monthStartDateNum; i <= monthEndDateNum; i++) {
let dayClasses = ""; let dayClasses = "";
let dateString = const dateString =
yearNum.toString() + yearNum.toString() +
"-" + "-" +
forceTwoDigitString(monthIndex) + forceTwoDigitString(monthIndex) +
@ -514,7 +514,7 @@ export default {
monthToShow.dates[monthToShow.dates.length - 1].inputValue.dateString monthToShow.dates[monthToShow.dates.length - 1].inputValue.dateString
); );
this.isLoading = false; this.isLoading = false;
this.hideSomeDaysForInitialView = false; // if hid days on initial partial view, this removes hidden styling on days this.hideSomeDaysForInitialView = false; // if hid days on initial partial view, this will reveal those days
monthToShow.monthClass = monthToShow.monthClass.replace(" month-hidden", ""); monthToShow.monthClass = monthToShow.monthClass.replace(" month-hidden", "");
this.scrollToElement(monthToShow.monthString); this.scrollToElement(monthToShow.monthString);

17
src/layouts/schedule/schedule.vue
View file

@ -25,7 +25,6 @@
v-model="selectedDate" v-model="selectedDate"
:customSelectableDatesCallback="getAvailableDatesMethod" :customSelectableDatesCallback="getAvailableDatesMethod"
@date-clicked="openInshopTimeSlotsModal" /> @date-clicked="openInshopTimeSlotsModal" />
<!-- todayOverrideDateString="2023-08-06T03:00:00" -->
<time-slot-modal-question <time-slot-modal-question
ref="timeSlotModalQuestion" ref="timeSlotModalQuestion"
cmsWidgetName="TimeSlotModalQuestion" cmsWidgetName="TimeSlotModalQuestion"
@ -125,22 +124,6 @@ export default {
selectableDatesSetting: "custom", selectableDatesSetting: "custom",
initialViewRowsToShow: 5, initialViewRowsToShow: 5,
customSelectableDatesCallback: getAvailableDates, customSelectableDatesCallback: getAvailableDates,
/* vvvvv SAVE THESE FOR TESTING PURPOSES FOR NOW vvvvv
// todayOverrideDateString: "2023-04-29T03:00:00", // show partial
// todayOverrideDateString: "2023-04-30T03:00:00", //
// todayOverrideDateString: "2023-05-02T03:00:00", // ONE MONTH ONLY
// todayOverrideDateString: "2023-05-06T03:00:00", // ONE MONTH ONLY
// todayOverrideDateString: "2023-05-07T03:00:00", // show partial
// todayOverrideDateString: "2023-05-30T03:00:00", //
// todayOverrideDateString: "2023-06-30T03:00:00", //
// todayOverrideDateString: "2023-07-01T03:00:00", // show partial && ONE MONTH ONLY
// todayOverrideDateString: "2023-07-02T03:00:00", // ONE MONTH ONLY
// todayOverrideDateString: "2023-07-12T03:00:00", // show partial
// todayOverrideDateString: "2023-08-31T03:00:00",
// todayOverrideDateString: "2023-09-30T03:00:00", // show partial
*/
}); });
// Price EARLY BIRD pre-emptively to allow for asynchronous call to pricing // Price EARLY BIRD pre-emptively to allow for asynchronous call to pricing