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

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

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