CASH-2378: refactoring date picker to move several functions into helper so they can be used elsewhere
This commit is contained in:
Adam Caouette
parent
bbfaf75c87
commit
f686b684ce
2 changed files with 138 additions and 136 deletions
|
|
@ -153,6 +153,8 @@ import {
|
||||||
convertDateToDateString,
|
convertDateToDateString,
|
||||||
convertDateStringToDate,
|
convertDateStringToDate,
|
||||||
getTodayDateString,
|
getTodayDateString,
|
||||||
|
getInitialViewWeeks,
|
||||||
|
getMonthEnd,
|
||||||
} from "@/layouts/schedule/helpers/schedule-helper";
|
} from "@/layouts/schedule/helpers/schedule-helper";
|
||||||
import { useField, ErrorMessage } from "vee-validate";
|
import { useField, ErrorMessage } from "vee-validate";
|
||||||
import { deepClone } from "@/helpers/object-helper";
|
import { deepClone } from "@/helpers/object-helper";
|
||||||
|
|
@ -291,140 +293,6 @@ export default {
|
||||||
}
|
}
|
||||||
this.$emit("date-selected", date);
|
this.$emit("date-selected", date);
|
||||||
},
|
},
|
||||||
getWeekStartDate(dateString) {
|
|
||||||
const date = convertDateStringToDate(dateString);
|
|
||||||
const dayOfWeek = date.getDay();
|
|
||||||
// Subtract the day of the week from date to get the date of Sunday
|
|
||||||
const sunday = new Date(date);
|
|
||||||
sunday.setDate(sunday.getDate() - dayOfWeek);
|
|
||||||
return convertDateToDateString(sunday);
|
|
||||||
},
|
|
||||||
getWeekEndDate(dateString) {
|
|
||||||
const date = convertDateStringToDate(dateString);
|
|
||||||
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 convertDateToDateString(saturday);
|
|
||||||
},
|
|
||||||
getNextWeekSunday(dateString) {
|
|
||||||
const date = convertDateStringToDate(dateString);
|
|
||||||
const dayOfWeek = date.getDay();
|
|
||||||
const daysUntilNextSunday = 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 convertDateToDateString(nextSunday);
|
|
||||||
},
|
|
||||||
getMonthEnd(dateStr) {
|
|
||||||
// convert string to date, do date calc, then return a string back
|
|
||||||
const date = new Date(dateStr.split("-")[0], parseInt(dateStr.split("-")[1]), 0);
|
|
||||||
return convertDateToDateString(date);
|
|
||||||
},
|
|
||||||
getInitialViewWeeks(todayString, initialViewRowsToShow, preSelectedDate) {
|
|
||||||
// TODO: this only is for future direction; need to create logic for past direction
|
|
||||||
const weeks = [];
|
|
||||||
let weekStartDate = this.getWeekStartDate(todayString);
|
|
||||||
let weekEndDate = this.getWeekEndDate(todayString);
|
|
||||||
|
|
||||||
if (preSelectedDate) {
|
|
||||||
let preSelectedDateMonthEnd = this.getMonthEnd(
|
|
||||||
preSelectedDate.replace("-mobile", "")
|
|
||||||
);
|
|
||||||
let monthEndsByThisWeek = false;
|
|
||||||
let i = 0;
|
|
||||||
while (!monthEndsByThisWeek && i < 52) {
|
|
||||||
if (i > 0) {
|
|
||||||
weekStartDate = this.getNextWeekSunday(weekEndDate);
|
|
||||||
weekEndDate = this.getWeekEndDate(weekStartDate);
|
|
||||||
|
|
||||||
if (
|
|
||||||
(preSelectedDateMonthEnd > weekStartDate &&
|
|
||||||
preSelectedDateMonthEnd < weekEndDate) ||
|
|
||||||
preSelectedDateMonthEnd === weekStartDate ||
|
|
||||||
preSelectedDateMonthEnd === weekEndDate
|
|
||||||
) {
|
|
||||||
weekEndDate = preSelectedDateMonthEnd;
|
|
||||||
monthEndsByThisWeek = true;
|
|
||||||
} else if (preSelectedDateMonthEnd < weekEndDate) {
|
|
||||||
// Additional case: if month ends before this week (but not necessarily during it),
|
|
||||||
// still cut the loop here, but don't truncate the week.
|
|
||||||
|
|
||||||
monthEndsByThisWeek = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
weeks.push({
|
|
||||||
weekNum: i + 1,
|
|
||||||
weekStartDate: weekStartDate,
|
|
||||||
weekEndDate: weekEndDate,
|
|
||||||
});
|
|
||||||
i++;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
for (let i = 0; i < initialViewRowsToShow; i++) {
|
|
||||||
if (i > 0) {
|
|
||||||
weekStartDate = this.getNextWeekSunday(weekEndDate);
|
|
||||||
weekEndDate = this.getWeekEndDate(weekStartDate);
|
|
||||||
}
|
|
||||||
weeks.push({
|
|
||||||
weekNum: i + 1,
|
|
||||||
weekStartDate: weekStartDate,
|
|
||||||
weekEndDate: weekEndDate,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
// If any of these weeks is split between two months, then make them 2 separate "weeks"
|
|
||||||
// (a week split between two months is considered 2 weeks per business requirements)
|
|
||||||
const hasSplitWeek = (week) => {
|
|
||||||
return week.weekStartDate.split("-")[1] !== week.weekEndDate.split("-")[1]
|
|
||||||
? true
|
|
||||||
: false;
|
|
||||||
};
|
|
||||||
const splitWeekIndex = weeks.findIndex(hasSplitWeek);
|
|
||||||
|
|
||||||
if (splitWeekIndex > -1) {
|
|
||||||
const week1 = [];
|
|
||||||
const week2 = [];
|
|
||||||
let switchToWeek2 = false;
|
|
||||||
|
|
||||||
for (let j = 0; j < 7; j++) {
|
|
||||||
const newDate = convertDateStringToDate(
|
|
||||||
weeks[splitWeekIndex].weekStartDate
|
|
||||||
);
|
|
||||||
newDate.setDate(newDate.getDate() + j);
|
|
||||||
if (newDate.getDate() === 1) switchToWeek2 = true;
|
|
||||||
if (switchToWeek2) {
|
|
||||||
week2.push(convertDateToDateString(newDate));
|
|
||||||
} else {
|
|
||||||
week1.push(convertDateToDateString(newDate));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const week1EndDate = week1[week1.length - 1];
|
|
||||||
const week2StartDate = week2[0];
|
|
||||||
|
|
||||||
if (week1EndDate < todayString) {
|
|
||||||
// replace week 1 with week 2
|
|
||||||
weeks[splitWeekIndex].weekStartDate = week2StartDate;
|
|
||||||
} else {
|
|
||||||
const newWeek = {
|
|
||||||
weekNum: weeks[splitWeekIndex].weekNum,
|
|
||||||
weekStartDate: week2StartDate,
|
|
||||||
weekEndDate: weeks[splitWeekIndex].weekEndDate,
|
|
||||||
};
|
|
||||||
weeks[splitWeekIndex].weekEndDate = week1EndDate;
|
|
||||||
weeks.splice(splitWeekIndex + 1, 0, newWeek);
|
|
||||||
weeks.pop();
|
|
||||||
weeks.forEach((item, index) => {
|
|
||||||
if (index > splitWeekIndex) {
|
|
||||||
item.weekNum = item.weekNum + 1;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return weeks;
|
|
||||||
},
|
|
||||||
async loadInitialData(config) {
|
async loadInitialData(config) {
|
||||||
/*
|
/*
|
||||||
** NOTE: this _could_ be called by a parent before fully loaded, so FYI component data or computeds might not be available
|
** NOTE: this _could_ be called by a parent before fully loaded, so FYI component data or computeds might not be available
|
||||||
|
|
@ -444,10 +312,10 @@ export default {
|
||||||
if (config.selectableDatesSetting === "past") calendarViewDirection = "past";
|
if (config.selectableDatesSetting === "past") calendarViewDirection = "past";
|
||||||
if (config.selectableDatesSetting === "custom") calendarViewDirection = "future";
|
if (config.selectableDatesSetting === "custom") calendarViewDirection = "future";
|
||||||
|
|
||||||
const currentMonthEnd = this.getMonthEnd(todayDateString);
|
const currentMonthEnd = getMonthEnd(todayDateString);
|
||||||
// TODO - set up currentMonthStart if direction is PAST:
|
// TODO - set up currentMonthStart if direction is PAST:
|
||||||
// let currentMonthStart = new Date(todayYearNum, todayMonthIndex - 1, 1);
|
// let currentMonthStart = new Date(todayYearNum, todayMonthIndex - 1, 1);
|
||||||
const initialViewWeeks = this.getInitialViewWeeks(
|
const initialViewWeeks = getInitialViewWeeks(
|
||||||
todayDateString,
|
todayDateString,
|
||||||
config.initialViewRowsToShow,
|
config.initialViewRowsToShow,
|
||||||
config.preSelectedDate
|
config.preSelectedDate
|
||||||
|
|
|
||||||
|
|
@ -79,3 +79,137 @@ export function getTodayDate() {
|
||||||
export function getTodayDateString() {
|
export function getTodayDateString() {
|
||||||
return convertDateToDateString(getTodayDate());
|
return convertDateToDateString(getTodayDate());
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function getMonthEnd(dateStr) {
|
||||||
|
// convert string to date, do date calc, then return a string back
|
||||||
|
const date = new Date(dateStr.split("-")[0], parseInt(dateStr.split("-")[1]), 0);
|
||||||
|
return convertDateToDateString(date);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getWeekStartDate(dateString) {
|
||||||
|
const date = convertDateStringToDate(dateString);
|
||||||
|
const dayOfWeek = date.getDay();
|
||||||
|
// Subtract the day of the week from date to get the date of Sunday
|
||||||
|
const sunday = new Date(date);
|
||||||
|
sunday.setDate(sunday.getDate() - dayOfWeek);
|
||||||
|
return convertDateToDateString(sunday);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getWeekEndDate(dateString) {
|
||||||
|
const date = convertDateStringToDate(dateString);
|
||||||
|
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 convertDateToDateString(saturday);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getNextWeekSunday(dateString) {
|
||||||
|
const date = convertDateStringToDate(dateString);
|
||||||
|
const dayOfWeek = date.getDay();
|
||||||
|
const daysUntilNextSunday = 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 convertDateToDateString(nextSunday);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getInitialViewWeeks(todayString, initialViewRowsToShow, preSelectedDate) {
|
||||||
|
const weeks = [];
|
||||||
|
let weekStartDate = getWeekStartDate(todayString);
|
||||||
|
let weekEndDate = getWeekEndDate(todayString);
|
||||||
|
|
||||||
|
if (preSelectedDate) {
|
||||||
|
let preSelectedDateMonthEnd = getMonthEnd(preSelectedDate.replace("-mobile", ""));
|
||||||
|
let monthEndsByThisWeek = false;
|
||||||
|
let i = 0;
|
||||||
|
while (!monthEndsByThisWeek && i < 52) {
|
||||||
|
if (i > 0) {
|
||||||
|
weekStartDate = getNextWeekSunday(weekEndDate);
|
||||||
|
weekEndDate = getWeekEndDate(weekStartDate);
|
||||||
|
|
||||||
|
if (
|
||||||
|
(preSelectedDateMonthEnd > weekStartDate &&
|
||||||
|
preSelectedDateMonthEnd < weekEndDate) ||
|
||||||
|
preSelectedDateMonthEnd === weekStartDate ||
|
||||||
|
preSelectedDateMonthEnd === weekEndDate
|
||||||
|
) {
|
||||||
|
weekEndDate = preSelectedDateMonthEnd;
|
||||||
|
monthEndsByThisWeek = true;
|
||||||
|
} else if (preSelectedDateMonthEnd < weekEndDate) {
|
||||||
|
// Additional case: if month ends before this week (but not necessarily during it),
|
||||||
|
// still cut the loop here, but don't truncate the week.
|
||||||
|
|
||||||
|
monthEndsByThisWeek = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
weeks.push({
|
||||||
|
weekNum: i + 1,
|
||||||
|
weekStartDate: weekStartDate,
|
||||||
|
weekEndDate: weekEndDate,
|
||||||
|
});
|
||||||
|
i++;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
for (let i = 0; i < initialViewRowsToShow; i++) {
|
||||||
|
if (i > 0) {
|
||||||
|
weekStartDate = getNextWeekSunday(weekEndDate);
|
||||||
|
weekEndDate = getWeekEndDate(weekStartDate);
|
||||||
|
}
|
||||||
|
weeks.push({
|
||||||
|
weekNum: i + 1,
|
||||||
|
weekStartDate: weekStartDate,
|
||||||
|
weekEndDate: weekEndDate,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// If any of these weeks is split between two months, then make them 2 separate "weeks"
|
||||||
|
// (a week split between two months is considered 2 weeks per business requirements)
|
||||||
|
const hasSplitWeek = (week) => {
|
||||||
|
return week.weekStartDate.split("-")[1] !== week.weekEndDate.split("-")[1]
|
||||||
|
? true
|
||||||
|
: false;
|
||||||
|
};
|
||||||
|
const splitWeekIndex = weeks.findIndex(hasSplitWeek);
|
||||||
|
|
||||||
|
if (splitWeekIndex > -1) {
|
||||||
|
const week1 = [];
|
||||||
|
const week2 = [];
|
||||||
|
let switchToWeek2 = false;
|
||||||
|
|
||||||
|
for (let j = 0; j < 7; j++) {
|
||||||
|
const newDate = convertDateStringToDate(weeks[splitWeekIndex].weekStartDate);
|
||||||
|
newDate.setDate(newDate.getDate() + j);
|
||||||
|
if (newDate.getDate() === 1) switchToWeek2 = true;
|
||||||
|
if (switchToWeek2) {
|
||||||
|
week2.push(convertDateToDateString(newDate));
|
||||||
|
} else {
|
||||||
|
week1.push(convertDateToDateString(newDate));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const week1EndDate = week1[week1.length - 1];
|
||||||
|
const week2StartDate = week2[0];
|
||||||
|
|
||||||
|
if (week1EndDate < todayString) {
|
||||||
|
// replace week 1 with week 2
|
||||||
|
weeks[splitWeekIndex].weekStartDate = week2StartDate;
|
||||||
|
} else {
|
||||||
|
const newWeek = {
|
||||||
|
weekNum: weeks[splitWeekIndex].weekNum,
|
||||||
|
weekStartDate: week2StartDate,
|
||||||
|
weekEndDate: weeks[splitWeekIndex].weekEndDate,
|
||||||
|
};
|
||||||
|
weeks[splitWeekIndex].weekEndDate = week1EndDate;
|
||||||
|
weeks.splice(splitWeekIndex + 1, 0, newWeek);
|
||||||
|
weeks.pop();
|
||||||
|
weeks.forEach((item, index) => {
|
||||||
|
if (index > splitWeekIndex) {
|
||||||
|
item.weekNum = item.weekNum + 1;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return weeks;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue