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

CSR-886: format changes and update dependencies

Browse source
This commit is contained in:
Adam Caouette 2023-03-15 09:59:20 -04:00
parent 3693636924
commit 2ddd4dc416
3 changed files with 68 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/constants/scheduling.js
View file

@ -13,4 +13,4 @@ const monthsOfYear = [
"December",
];
export { monthsOfYear };
export { monthsOfYear };

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

@ -11,7 +11,9 @@
<div class="month-year body-small d-flex align-items-center ps-3 small">
{{ month.monthLabel }} {{ month.yearNum.toString() }}
</div>
<div v-if="calendarViewDirection === 'future'" class="legend caption d-flex align-items-center justify-content-end">
<div
v-if="calendarViewDirection === 'future'"
class="legend caption d-flex align-items-center justify-content-end">
<span class="legend-circle me-1"></span> &equals; Available
</div>
<div class="nav-back ps-3"><button></button></div>
@ -46,7 +48,13 @@
</div>
</span>
</fieldset>
<button v-if="calendarViewDirection === 'future'" type="button" class="btn-link" @click="goForward">View more dates</button>
<button
v-if="calendarViewDirection === 'future'"
type="button"
class="btn-link"
@click="goForward">
View more dates
</button>
</div>
</template>
@ -83,7 +91,8 @@ export default {
modelValue: {
type: Object,
},
todayOverrideDateString: { // only used for unit tests to override today's date
todayOverrideDateString: {
// only used for unit tests to override today's date
type: String,
default: null,
},
@ -125,7 +134,7 @@ export default {
if (this.isInitialView) {
this.isInitialView = false; // 1st click removes hidden styling
} else {
this.addMonthData(); // 2nd click adds 1 month data
this.addMonthData(); // 2nd click adds 1 month data
}
},
setCalendarData() {
@ -135,10 +144,10 @@ export default {
// first 0, then 1
for (let i = 0; i <= this.monthsAfterToLoadOffset; i++) {
months.push(this.getMonthData(i));
}
}
} else if (this.calendarViewDirection === "past") {
// first 0, then -1
for (let i = 0; i >= (0 - this.monthsAfterToLoadOffset); i--) {
for (let i = 0; i >= 0 - this.monthsAfterToLoadOffset; i--) {
months.unshift(this.getMonthData(i));
}
} else {
@ -162,28 +171,29 @@ export default {
const datesArray = [];
const todayDateNum = this.todayDate.getDate();
if (typeof offset !== 'undefined') { // offset only passed during initial setup with setCalendarData
if (typeof offset !== "undefined") {
// offset only passed during initial setup with setCalendarData
yearNum = this.todayDate.getFullYear();
monthIndex = this.todayDate.getMonth() + offset;
if (direction === "future" && offset > 0) {
if (direction === "future" && offset > 0) {
while (monthIndex > 11) {
monthIndex = monthIndex - 12;
yearNum++;
}
} else if (direction === "past" && offset < 0) {
} else if (direction === "past" && offset < 0) {
while (monthIndex < 0) {
monthIndex = 12 + monthIndex;
yearNum--;
}
}
} else { // used only when adding an additional month
} else {
// used only when adding an additional month
if (direction === "future") {
// get last day of current calendar data
const lastMonthInCalendarData = this.calendarData[this.calendarData.length - 1];
if (lastMonthInCalendarData.monthIndex === 11) {
monthIndex = 0;
yearNum = lastMonthInCalendarData.yearNum + 1;
@ -195,7 +205,7 @@ export default {
if (direction === "past") {
// get last day of current calendar data
const firstMonthInCalendarData = this.calendarData[0];
if (firstMonthInCalendarData.monthIndex === 0) {
monthIndex = 11;
yearNum = firstMonthInCalendarData.yearNum - 1;
@ -204,39 +214,51 @@ export default {
yearNum = firstMonthInCalendarData.yearNum;
}
}
}
const todayDayIndex = this.todayDate.getDay(); // get day of week index of today (0-6)
currentWeekStartDateNum = todayDayIndex > todayDateNum ? 1 : todayDateNum - todayDayIndex; // FUTURE
currentWeekStartDateNum =
todayDayIndex > todayDateNum ? 1 : todayDateNum - todayDayIndex; // FUTURE
const monthEndDate = new Date(yearNum, monthIndex + 1, 0); // BOTH
let monthEndDateNum = monthEndDate.getDate(); // BOTH
currentWeekEndDateNum = todayDateNum + 6 - todayDayIndex; // PAST, aka Sat. (ok if it's larger than the month end?)
if (offset === 0 && direction === "past" && monthEndDateNum > currentWeekEndDateNum) monthEndDateNum = currentWeekEndDateNum; // PAST
const monthStartDateNum = (offset === 0 && direction === "future") ? currentWeekStartDateNum : 1; // FUTURE
if (offset === 0 && direction === "past" && monthEndDateNum > currentWeekEndDateNum)
monthEndDateNum = currentWeekEndDateNum; // PAST
const monthStartDateNum =
offset === 0 && direction === "future" ? currentWeekStartDateNum : 1; // FUTURE
const monthStartDate = new Date(yearNum, monthIndex, monthStartDateNum); // BOTH
const startDateDayIndex = monthStartDate.getDay(); // FUTURE
const endDateDayIndex = monthEndDate.getDay(); // PAST
if (typeof offset !== 'undefined') {
if (typeof offset !== "undefined") {
if (offset === 0 && direction === "future")
firstMonthDayTally = monthStartDateNum - startDateDayIndex; // FUTURE (starts low, counts up)
if (offset === 0 && direction === "past")
firstMonthDayTally = currentWeekEndDateNum; // PAST (starts high, counts down)
if (offset === 0 && direction === "future") firstMonthDayTally = monthStartDateNum - startDateDayIndex; // FUTURE (starts low, counts up)
if (offset === 0 && direction === "past") firstMonthDayTally = currentWeekEndDateNum; // PAST (starts high, counts down)
while (direction === "future" && offset === 0 && firstMonthDayTally < monthEndDateNum) { // FUTURE
while (
direction === "future" &&
offset === 0 &&
firstMonthDayTally < monthEndDateNum
) {
// FUTURE
firstMonthDayTally = firstMonthDayTally + 7;
this.initialViewRowsTally++;
}
while (direction === "past" && offset === 0 && firstMonthDayTally > monthStartDateNum) { // PAST
while (
direction === "past" &&
offset === 0 &&
firstMonthDayTally > monthStartDateNum
) {
// PAST
firstMonthDayTally = firstMonthDayTally - 7;
this.initialViewRowsTally++;
}
if (Math.abs(offset) === 1) {
if (Math.abs(offset) === 1) {
if (this.initialViewRowsTally < this.initialViewRowsToShow) {
initialViewEndDate = 6 - startDateDayIndex + monthStartDateNum; // FUTURE
initialViewEndDate = 6 - startDateDayIndex + monthStartDateNum; // FUTURE
initialViewStartDate = monthEndDateNum - endDateDayIndex; // PAST
this.initialViewRowsTally++;
} else {
@ -248,15 +270,14 @@ export default {
initialViewStartDate = initialViewStartDate - 7;
this.initialViewRowsTally++;
}
}
}
}
if (this.selectableDates === "custom") {
const monthStart = {
year: yearNum,
month: monthIndex + 1,
date: (offset === 0) ? todayDateNum : monthStartDateNum,
date: offset === 0 ? todayDateNum : monthStartDateNum,
};
const monthEnd = {
year: monthEndDate.getFullYear(),
@ -270,7 +291,8 @@ export default {
// populate datesArray
for (let i = monthStartDateNum; i <= monthEndDateNum; i++) {
let dayClasses = "";
const thisDate = { // NOTE: uses monthNum (1-based), NOT monthIndex (0-based)
const thisDate = {
// NOTE: uses monthNum (1-based), NOT monthIndex (0-based)
year: yearNum,
month: monthIndex + 1,
date: i,
@ -284,10 +306,10 @@ export default {
if (offset === 0 && i > todayDateNum && direction === "past") {
dayClasses += "unavailable-day";
}
if (Math.abs(offset) === 1&& direction === "future" && i > initialViewEndDate) {
if (Math.abs(offset) === 1 && direction === "future" && i > initialViewEndDate) {
dayClasses += "day-hidden";
}
if (Math.abs(offset) === 1&& direction === "past" && i < initialViewStartDate) {
if (Math.abs(offset) === 1 && direction === "past" && i < initialViewStartDate) {
dayClasses += "day-hidden";
}
if (this.selectableDates === "custom" && this.isSelectableDate(thisDate)) {
@ -334,8 +356,13 @@ export default {
return isSelectable;
},
updateSelectableDates(monthStart, monthEnd) {
this.customSelectableDatesCallback(monthStart, monthEnd)?.forEach(newObj => {
const index = this.selectableDatesData.findIndex(obj => obj.year === newObj.year && obj.month === newObj.month && obj.date === newObj.date);
this.customSelectableDatesCallback(monthStart, monthEnd)?.forEach((newObj) => {
const index = this.selectableDatesData.findIndex(
(obj) =>
obj.year === newObj.year &&
obj.month === newObj.month &&
obj.date === newObj.date
);
if (index === -1) this.selectableDatesData.push(newObj);
});
},
@ -344,7 +371,6 @@ export default {
</script>
<style lang="scss" scoped>
.calendar-grid-container {
margin: 0 auto;
max-width: 414px;
@ -512,7 +538,9 @@ export default {
border: 1px solid $blue;
}
}
&.past-day, &.future-day, &.unavailable-day {
&.past-day,
&.future-day,
&.unavailable-day {
label {
color: $gray-500;
background-color: transparent;

6
src/layouts/demo-date-picker/demo-date-picker.vue
View file

@ -24,8 +24,8 @@
// Components
import datePicker from "@/digital-components/date-picker/date-picker";
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@ -33,8 +33,6 @@ import { settleAllPromises } from "@/helpers/layout-helper";
import { storeActions } from "@/constants/store-actions";
import store from "@/store";
import { format } from "date-fns";
import baseMixin from "@/mixins/base-mixin";
export default {