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

CSR-886: tech review cleanup

Browse source
This commit is contained in:
Adam Caouette 2023-05-24 11:50:34 -04:00
parent 5b6e68b8c5
commit a944c51327
1 changed files with 45 additions and 45 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 = dayOfWeek === 0 ? 7 : 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);