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