Merge remote-tracking branch 'origin/feature/CSR-886' into feature/CSR-1137

src/digital-components/date-picker/date-picker.vue

@@ -2,6 +2,7 @@
     <div v-if="months" class="date-picker text-center" :class="calendarViewDirection">
         <!-- <p style="text-align: left">selectableDatesData: {{ selectableDatesData }}</p> -->
         <!-- <p style="text-align: left">months: {{ months }}</p> -->
+        <!-- <p style="text-align: left">hasPartialMonthInitialView: {{ hasPartialMonthInitialView }}</p> -->
         <fieldset id="date-picker-fieldset" ref="datePickerFieldset">
             <legend class="sr-only">Date Picker</legend>
             <!-- <h4 id="tracker" ref="tracker">currentScrollTop: {{ currentScrollTop }}</h4> -->
@@ -11,9 +12,8 @@
                 :id="`${month.monthLabel}-${month.yearNum?.toString()}`"
                 class="calendar-grid-container position-relative"
                 :class="[
-                    isInitialView === true ? 'initial-view' : '',
+                    hasPartialMonthInitialView === true ? 'partial-month-initial-view' : '',
                     month.monthClass,
-                    isAddingNewMonth === true ? 'is-adding-new-month' : '',
                 ]">
                 <div class="month-year body-small d-flex align-items-center small">
                     {{ month.monthLabel }} {{ month.yearNum?.toString() }}
@@ -74,6 +74,21 @@ const SelectableDaysOptions = Object.freeze({
     PAST: "past",
 });
 
+const requiredParameter = () => { throw new Error('parameter is required'); };
+
+function forceTwoDigitString(monthNum) { // TODO : MOVE THIS SOMEWHERE ELSE; A UTILITIES MIXIN?
+    let newString = monthNum.toString();
+    return newString.length === 1 ? "0" + newString : newString;
+}
+
+const TIMINGFUNC_MAP = { // TODO : MOVE THIS SOMEWHERE ELSE; A CONSTANT?
+    linear: (t) => t,
+    "ease-in": (t) => t * t,
+    "ease-out": (t) => t * (2 - t),
+    "ease-in-out": (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),
+};
+const BUFFER_OFFSET = 10;
+
 export default {
     name: "datePicker",
     data() {
@@ -81,7 +96,7 @@ export default {
             monthsBeforeToLoadOffset: 0,
             monthsAfterToLoadOffset: 12,
             selectableDatesData: [], // NOTE: uses monthNum (1-based), NOT monthIndex (0-based)
-            isInitialView: true,
+            hasPartialMonthInitialView: true,
             initialViewRowsToShow: 5,
             initialViewRowsTally: 0,
             isAddingNewMonth: false,
@@ -145,13 +160,7 @@ export default {
         //     }, 250);
         // },
         scrollToElement(elementId, speed, easing) {
-            const TIMINGFUNC_MAP = {
+
-                linear: (t) => t,
-                "ease-in": (t) => t * t,
-                "ease-out": (t) => t * (2 - t),
-                "ease-in-out": (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),
-            };
-            const BUFFER_OFFSET = 10;
             function scrollTopSmooth(wrapper, target, duration = 300, timingName = "linear") {
                 const initY = wrapper.scrollTop;
                 const wrapperRect = wrapper.getBoundingClientRect();
@@ -204,26 +213,24 @@ export default {
         goForward() {
             const fieldset = document.querySelector("#date-picker-fieldset");
 
-            if (this.isInitialView) {
+            if (this.hasPartialMonthInitialView) {
+
                 const monthToScrollTo = document.querySelector(
-                    ".initial-view:not(.current-month):not(.month-hidden)"
+                    ".partial-month-initial-view:not(.current-month):not(.month-hidden)"
                 );
-                // console.log(" monthToScrollTo.id ", monthToScrollTo.id)
 
                 this.$nextTick(() => {
                     setTimeout(() => {
                         this.scrollToElement(monthToScrollTo.id);
                     }, 0.01);
                 });
-                this.isInitialView = false; // 1st click removes hidden styling
+                this.hasPartialMonthInitialView = false; // 1st click removes hidden styling
             } else {
                 this.showAnotherMonth(); // 2nd click adds 1 month data
             }
+
         },
         async setCalendarData() {
-            // console.log(" running setCalendarData.")
-            // this.selectableDatesData = this.selectableDates; // POPULATE DATA FROM PROP
-
             // GENERATE MONTHS AND PUSH THEM INTO ARRAY
             const months = [];
             if (this.calendarViewDirection === "future") {
@@ -242,11 +249,9 @@ export default {
                 //     months.push(this.getMonthDataPAST(i));
                 // }
             }
-            // this.calendarData = months;
             this.months = months;
-            // console.log("    MONTHS are done    ")
         },
-        async getMonthData(offset) {
+        async getMonthData(offset = requiredParameter()) {
             const direction = this.calendarViewDirection; // "past" or "future"
             let yearNum;
             let monthIndex;
@@ -259,55 +264,24 @@ export default {
             const datesArray = [];
             const todayDateNum = this.todayDate.getDate();
 
-            if (typeof offset !== "undefined") {
+            yearNum = this.todayDate.getFullYear();
-                // offset only passed during initial setup with setCalendarData
+            monthIndex = this.todayDate.getMonth() + offset;
-                yearNum = this.todayDate.getFullYear();
-                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) {
-                    while (monthIndex < 0) {
-                        monthIndex = 12 + monthIndex;
-                        yearNum--;
-                    }
                 }
-            } else {
+            } else if (direction === "past" && offset < 0) {
-                // TODO ? I THINK THIS IS NEVER USED NOW
+                while (monthIndex < 0) {
-                // used only when adding an additional month
+                    monthIndex = 12 + monthIndex;
-
+                    yearNum--;
-                if (direction === "future") {
-                    // get last day of current calendar data
-                    const lastMonthInCalendarData = this.months[this.months.length - 1];
-
-                    if (lastMonthInCalendarData.monthIndex === 11) {
-                        monthIndex = 0;
-                        yearNum = lastMonthInCalendarData.yearNum + 1;
-                    } else {
-                        monthIndex = lastMonthInCalendarData.monthIndex + 1;
-                        yearNum = lastMonthInCalendarData.yearNum;
-                    }
-                }
-                if (direction === "past") {
-                    // get last day of current calendar data
-                    const firstMonthInCalendarData = this.months[0];
-
-                    if (firstMonthInCalendarData.monthIndex === 0) {
-                        monthIndex = 11;
-                        yearNum = firstMonthInCalendarData.yearNum - 1;
-                    } else {
-                        monthIndex = firstMonthInCalendarData.monthIndex - 1;
-                        yearNum = firstMonthInCalendarData.yearNum;
-                    }
                 }
             }
 
             const todayDayIndex = this.todayDate.getDay(); // get day of week index of today (0-6)
             currentWeekStartDateNum =
-                todayDayIndex > todayDateNum ? 1 : todayDateNum - todayDayIndex; // FUTURE
+                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?)
@@ -320,58 +294,57 @@ export default {
             const startDateDayIndex = monthStartDate.getDay(); // FUTURE
             const endDateDayIndex = monthEndDate.getDay(); // PAST
 
-            if (typeof offset !== "undefined") {
+            if (offset === 0 && direction === "future") {
-                if (offset === 0 && direction === "future") {
+                firstMonthDayTally = monthStartDateNum - startDateDayIndex; // FUTURE (starts low, counts up)
-                    firstMonthDayTally = monthStartDateNum - startDateDayIndex; // FUTURE (starts low, counts up)
+                monthClass = monthClass + " current-month";
-                    monthClass = monthClass + " current-month";
-                }
-                if (offset === 0 && direction === "past") {
-                    firstMonthDayTally = currentWeekEndDateNum; // PAST (starts high, counts down)
-                    monthClass = monthClass + " current-month";
-                }
-
-                while (
-                    direction === "future" &&
-                    offset === 0 &&
-                    firstMonthDayTally <= monthEndDateNum
-                ) {
-                    // FUTURE
-                    firstMonthDayTally = firstMonthDayTally + 7;
-                    this.initialViewRowsTally++;
-                }
-
-                while (
-                    direction === "past" &&
-                    offset === 0 &&
-                    firstMonthDayTally >= monthStartDateNum
-                ) {
-                    // PAST
-                    firstMonthDayTally = firstMonthDayTally - 7;
-                    this.initialViewRowsTally++;
-                }
-
-                if (Math.abs(offset) === 1) {
-                    if (this.initialViewRowsTally < this.initialViewRowsToShow) {
-                        initialViewEndDate = 6 - startDateDayIndex + monthStartDateNum; // FUTURE
-                        initialViewStartDate = monthEndDateNum - endDateDayIndex; // PAST
-                        this.initialViewRowsTally++;
-                    } else {
-                        monthClass = monthClass + " initial-month-hidden";
-                    }
-
-                    while (this.initialViewRowsTally < this.initialViewRowsToShow) {
-                        initialViewEndDate = initialViewEndDate + 7;
-                        initialViewStartDate = initialViewStartDate - 7;
-                        this.initialViewRowsTally++;
-                    }
-                }
-                if (Math.abs(offset) > 1) {
-                    monthClass = monthClass + " month-hidden";
-                }
-            } else {
-                // TODO REMOVE THIS BLOCK? NO LONGER NEEDED?
-                monthClass = monthClass + " new-month";
             }
+            if (offset === 0 && direction === "past") {
+                firstMonthDayTally = currentWeekEndDateNum; // PAST (starts high, counts down)
+                monthClass = monthClass + " current-month";
+            }
+
+            while (
+                direction === "future" &&
+                offset === 0 &&
+                firstMonthDayTally <= monthEndDateNum
+            ) {
+                // FUTURE
+                firstMonthDayTally = firstMonthDayTally + 7;
+                this.initialViewRowsTally++;
+            }
+
+            while (
+                direction === "past" &&
+                offset === 0 &&
+                firstMonthDayTally >= monthStartDateNum
+            ) {
+                // PAST
+                firstMonthDayTally = firstMonthDayTally - 7;
+                this.initialViewRowsTally++;
+            }
+
+            if (Math.abs(offset) === 1) {
+                if (this.initialViewRowsTally < this.initialViewRowsToShow) { // INDICATES A SPLIT-MONTH INITIAL VIEW
+                    initialViewEndDate = 6 - startDateDayIndex + monthStartDateNum; // FUTURE
+                    initialViewStartDate = monthEndDateNum - endDateDayIndex; // PAST
+                    this.initialViewRowsTally++;
+                } else { // INDICATES AN INITIAL VIEW SHOWING ONLY ONE MONTH
+                    // monthClass = monthClass + " initial-month-hidden";
+                    monthClass = monthClass + " month-hidden";
+                    this.hasPartialMonthInitialView = false;
+                }
+
+                while (this.initialViewRowsTally < this.initialViewRowsToShow) {
+                    initialViewEndDate = initialViewEndDate + 7;
+                    initialViewStartDate = initialViewStartDate - 7;
+                    this.initialViewRowsTally++;
+                }
+            }
+
+            if (Math.abs(offset) > 1) {
+                monthClass = monthClass + " month-hidden";
+            }
+            
 
             if (this.selectableDatesSetting === "custom") {
                 const monthStart = {
@@ -389,11 +362,6 @@ export default {
                 // MAKE API CALL, ADDS NEW DATES TO this.selectableDatesData
             }
 
-            function forceTwoDigitString(monthNum) {
-                let newString = monthNum.toString();
-                return newString.length === 1 ? "0" + newString : newString;
-            }
-
             // populate datesArray
             for (let i = monthStartDateNum; i <= monthEndDateNum; i++) {
                 let dayClasses = "";
@@ -427,7 +395,6 @@ export default {
                     dayClasses += "day-hidden";
                 }
                 if (this.selectableDatesSetting === "custom" && isSelectableDate) {
-                    // console.log("  ! ! ! FOUND ONE! A SELECTABLE DATE  ! ! ! ! ")
                     dayClasses += " selectable-day";
                 }
 
@@ -436,6 +403,7 @@ export default {
                     dayClasses: dayClasses,
                     inputValue: thisDate,
                 };
+                // console.log("dateObject: ", dateObject)
                 datesArray.push(dateObject);
             }
 
@@ -466,6 +434,7 @@ export default {
                     month.monthClass.includes("month-hidden")
                 );
             }
+            // console.log("monthToShow: ", monthToShow);
 
             // make new API call with this month's start and end dates
             await this.updateSelectableDates(
@@ -532,9 +501,7 @@ export default {
 }
 
 .date-picker {
-    // == ATTEMPT 3
     overflow: hidden;
-    //max-height: 60vh; // IS THIS NEEDED EVEN?
     position: relative;
     height: 100%;
 
@@ -545,9 +512,6 @@ export default {
     .calendar-grid-container {
         margin: 0 auto 2rem auto;
         max-width: 414px;
-        //max-height: 500px;
-        //overflow: hidden;
-        // transition: all ease 1s;
         transition: height ease 2s, opacity ease 2s;
         display: grid;
         grid-template-columns: repeat(7, 1fr);
@@ -751,25 +715,14 @@ export default {
             }
         }
 
-        &.initial-view {
+        &.partial-month-initial-view {
-            &.initial-month-hidden {
-                visibility: hidden;
-                max-height: 0;
-            }
             .day-hidden {
                 opacity: 0;
-                // height: 0;
                 overflow: hidden;
                 display: flex;
                 margin: 0;
             }
         }
-        &.is-adding-new-month {
-            &.new-month {
-                // max-height: 0;
-                opacity: 0;
-            }
-        }
         &.month-hidden {
             opacity: 0;
             max-height: 0;
@@ -844,9 +797,6 @@ export default {
             }
         }
     }
-    .new-month {
-        opacity: 1;
-    }
 }
 .btn-link {
     display: block;