From ec9963fb1e1ff5da2aebf8282ed5e89555d3bc2b Mon Sep 17 00:00:00 2001 From: Adam Caouette Date: Fri, 10 Feb 2023 13:15:50 -0500 Subject: [PATCH 01/22] CSR-886: add props to getMountOptions unit test helper --- src/helpers/unit-test-helper.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/helpers/unit-test-helper.js b/src/helpers/unit-test-helper.js index c54bbf01a..2e0636414 100644 --- a/src/helpers/unit-test-helper.js +++ b/src/helpers/unit-test-helper.js @@ -71,8 +71,9 @@ export function getMountOptions(mockData) { mixins: mockData.mixins, stubs: { Form }, }; + const props = mockData.propsData || {}; - return { global }; + return { global, props }; } export function setupMocksForJsFiles(mockData = {}) { From 603068f98d8221d27943ab013d2d1701a07fb419 Mon Sep 17 00:00:00 2001 From: Adam Caouette Date: Fri, 10 Feb 2023 13:18:04 -0500 Subject: [PATCH 02/22] CSR-886: set up demo date picker page and beginnings of date-picker component --- .../date-picker/date-picker.spec.js | 380 ++++++++++++++++ .../date-picker/date-picker.vue | 414 +++++++++--------- .../demo-date-picker/demo-date-picker.spec.js | 19 + .../demo-date-picker/demo-date-picker.vue | 59 +++ src/router/index.js | 6 + 5 files changed, 677 insertions(+), 201 deletions(-) create mode 100644 src/common-components/date-picker/date-picker.spec.js create mode 100644 src/layouts/demo-date-picker/demo-date-picker.spec.js create mode 100644 src/layouts/demo-date-picker/demo-date-picker.vue diff --git a/src/common-components/date-picker/date-picker.spec.js b/src/common-components/date-picker/date-picker.spec.js new file mode 100644 index 000000000..de02d2f72 --- /dev/null +++ b/src/common-components/date-picker/date-picker.spec.js @@ -0,0 +1,380 @@ +import datePicker from "./date-picker"; + +// Supporting Files +import { shallowMount } from "@vue/test-utils"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; + +describe("date-picker.vue", () => { + describe("initial setup", () => { + test("Creates a date object from today", () => { + // Arrange + const { wrapper } = setupMocks({}); + + // Act + const testResult = wrapper.vm.todayDateObj instanceof Date; + + // Assert + expect(testResult).toEqual(true); + + wrapper.unmount(); + }); + }); + describe("formatNumberToSetDigits", () => { + const testScenarios = [ + [0, 3, "000"], + [8, 2, "08"], + [345, 2, "345"], + [4567, 0, "4567"], + ]; + test.each(testScenarios)( + "when num is %s and digits is %s, formatNumberToSetDigits should return %s", + async (num, digits, expectedReturn) => { + // Arrange + const { wrapper } = setupMocks({}); + + // Act + const fnReturn = wrapper.vm.formatNumberToSetDigits(num, digits); + + // Assert + expect(fnReturn).toEqual(expectedReturn); + } + ); + }); + describe("formatDate", () => { + test("Can format a date as MM/dd/yyyy", () => { + // Arrange + const { wrapper } = setupMocks({}); + const testDate = new Date("01-26-2023"); + + // Act + const testResult = wrapper.vm.formatDate(testDate); + + // Assert + expect(testResult).toEqual("01/26/2023"); + + wrapper.unmount(); + }); + + // test("Can get correct initialFirstDate from today", () => { + // // Arrange + // const { wrapper } = setupMocks({ + // propsData: { + // todayDate: "Thu Jan 26 2023", + // }, + // }); + + // // Act + // const testResult = wrapper.vm.initialFirstDate; + // const testResultAsDateString = testResult.toDateString(); + + // // Assert + // expect(testResultAsDateString).toEqual("Sun Jan 22 2023"); + + // wrapper.unmount(); + // }); + }); + describe("calendarData", () => { + test("should return an array", async () => { + // Arrange + const { wrapper } = setupMocks({}); + + // Act + const testResult = await wrapper.vm.calendarData; + + // Assert + expect(Array.isArray(testResult)).toBe(true); + + wrapper.unmount(); + }); + describe("for each month in calendarData, each should have keys monthLabel, yearNum, dates, startDayIndex", () => { + const testScenarios = [ + ["monthLabel", true, "string"], + ["yearNum", true, "number"], + ["dates", true, "object"], + ["startDayIndex", true, "number"], + ["monthClass", true, "string"], + ]; + + test.each(testScenarios)( + "test for %s key should return %s and be type %s", + async (label, test, type) => { + // Arrange + const { wrapper } = setupMocks({}); + const containsMonthLabel = (obj) => Object.hasOwn(obj, label); + const isCorrectType = (obj) => typeof obj[label] === type; + const isTruthyOrZero = (obj) => (obj[label] || obj[label] === 0 ? true : false); + + // Act + const calendarData = await wrapper.vm.calendarData; + console.log("calendarData: ", calendarData) + + // Assert + expect(calendarData.every(containsMonthLabel)).toBe(true); + expect(calendarData.every(isCorrectType)).toBe(true); + expect(calendarData.every(isTruthyOrZero)).toBe(true); + + wrapper.unmount(); + } + ); + }); + + test("for each month in calendarData, the dates array should have the 1st of the month", async () => { + // Arrange + const { wrapper } = setupMocks({}); + const hasAFirstInDates = (obj) => obj?.dates[0].dateNum === 1; + + // Act + const calendarData = await wrapper.vm.calendarData; + + // Assert + expect(calendarData.every(hasAFirstInDates)).toBe(true); + + wrapper.unmount(); + }); + + describe("for each month in calendarData, the dates array should have correct days of month", () => { + const testScenarios = [ + ["2022-02-05T03:00:00", 28, true], + ["2024-02-05T03:00:00", 29, true], + ["2020-01-15T03:00:00", 31, true], + ]; + + test.each(testScenarios)( + "the current month including the date %s should have %s days in its dates array", + async (dateString, noOfDays) => { + // Arrange + const { wrapper } = setupMocks({ + propsData: { + todayOverrideDateString: dateString, + }, + }); + + // Act + const calendarData = await wrapper.vm.calendarData; + const currentMonthIndex = calendarData.findIndex((month) => { + return month.monthClass === "currentMonth"; + }); + + // Assert + expect(calendarData[currentMonthIndex].dates.length === noOfDays).toBe(true); + + wrapper.unmount(); + } + ); + + // test.each(testScenarios)( + // "the date %s should have %s days in dates array", + // async (dateString, noOfDays) => { + // // Arrange + // const { wrapper } = setupMocks({ + // propsData: { + // todayOverrideDateString: dateString, + // }, + // }); + // const hasCorrectNumberOfDates = (obj) => obj?.dates.length === noOfDays; + + // // Act + // const calendarData = await wrapper.vm.calendarData; + + // // Assert + // expect(calendarData.every(hasCorrectNumberOfDates)).toBe(true); + + // wrapper.unmount(); + // } + // ); + }); + + // describe("for each object in array, the dates array should have correct days of month", () => { + // const testScenarios = [ + // ["2022-02-05T03:00:00", 28, true], + // ["2024-02-05T03:00:00", 29, true], + // ["2020-01-15T03:00:00", 31, true], + // ]; + + // test.each(testScenarios)( + // "the date %s should have %s days in dates array", + // async (dateString, noOfDays) => { + // // Arrange + // const { wrapper } = setupMocks({ + // propsData: { + // todayOverrideDateString: dateString, + // }, + // }); + // const hasCorrectNumberOfDates = (obj) => obj?.dates.length === noOfDays; + + // // Act + // const calendarData = await wrapper.vm.calendarData; + + // // Assert + // expect(calendarData.every(hasCorrectNumberOfDates)).toBe(true); + + // wrapper.unmount(); + // } + // ); + // }); + + // test.only("each object in array should have a monthLabel", () => { + // // Arrange + // const { wrapper } = setupMocks({}); + // // const testTodayDate = new Date("01-26-2023"); + + // // Act + // const testResult = wrapper.vm.calendarData; + // const containsMonthLabel = (month) => Object.hasOwn(month, 'monthLabel'); + + // // Assert + // expect(testResult.every(containsMonthLabel)).toBe(true); + + // }); + + // test.only("array should have a month object with same month as today", () => { + // // Arrange + // const { wrapper } = setupMocks({}); + // // const testTodayDate = new Date("01-26-2023"); + + // // Act + // // const testResult = wrapper.vm.calendarData; + // console.log("wrapper.vm.calendarData: ", wrapper.vm.calendarData) + + // // Assert + // // expect(wrapper.vm.calendarData).toEqual("something"); + // // expect(wrapper.vm.calendarDataOld).toEqual("something"); + + // expect(wrapper.vm.calendarData[1]).toMatchObject({ + // "dates": [ + // { + // "dateNum": 1 + // }, + // { + // "dateNum": 2 + // }, + // { + // "dateNum": 3 + // }, + // { + // "dateNum": 4 + // }, + // { + // "dateNum": 5 + // }, + // { + // "dateNum": 6 + // }, + // { + // "dateNum": 7 + // }, + // { + // "dateNum": 8 + // }, + // { + // "dateNum": 9 + // }, + // { + // "dateNum": 10 + // }, + // { + // "dateNum": 11 + // }, + // { + // "dateNum": 12 + // }, + // { + // "dateNum": 13 + // }, + // { + // "dateNum": 14 + // }, + // { + // "dateNum": 15 + // }, + // { + // "dateNum": 16 + // }, + // { + // "dateNum": 17 + // }, + // { + // "dateNum": 18 + // }, + // { + // "dateNum": 19 + // }, + // { + // "dateNum": 20 + // }, + // { + // "dateNum": 21 + // }, + // { + // "dateNum": 22 + // }, + // { + // "dateNum": 23 + // }, + // { + // "dateNum": 24 + // }, + // { + // "dateNum": 25 + // }, + // { + // "dateNum": 26 + // }, + // { + // "dateNum": 27 + // }, + // { + // "dateNum": 28 + // }, + // { + // "dateNum": 29 + // }, + // { + // "dateNum": 30 + // }, + // { + // "dateNum": 31 + // } + // ], + // "monthLabel": "January", + // "yearNum": 2023 + // }); + + // wrapper.unmount(); + // }); + }); +}); + +function setupMocks(mountOptionsMockData = {}) { + const initialMountOptionsMockData = { + // router: { + // navigate: jest.fn(), + // navigateWithSaving: jest.fn(), + // navigateWithoutSaving: jest.fn(), + // }, + // actionList: [ + // // { + // // actionName: storeActions.SAVE_PART_QUESTION_ANSWERS, + // // data: {}, + // // }, + // // { + // // actionName: storeActions.GET_PARTS, + // // data: {}, + // // }, + // ], + // store: { + // // getters: store.getters, + // // commit: store.commit, + // }, + }; + + const mountOptions = getMountOptions( + Object.assign(initialMountOptionsMockData, mountOptionsMockData) + ); + + // console.log("mountOptions: ", mountOptions) + + const wrapper = shallowMount(datePicker, mountOptions); + + return { wrapper }; +} diff --git a/src/common-components/date-picker/date-picker.vue b/src/common-components/date-picker/date-picker.vue index 1c83c0a4e..95e89c005 100644 --- a/src/common-components/date-picker/date-picker.vue +++ b/src/common-components/date-picker/date-picker.vue @@ -1,205 +1,50 @@ @@ -209,16 +54,160 @@ export default { name: "datePicker", data() { return { - currentMonth: "October", - currentYear: "2022", + currentMonth: "February", + currentYear: "2023", isFirstDayOfMonth: true, isCurrentDay: true, + // calendarData: [], + monthsBeforeToLoadOffset: -1, + monthsAfterToLoadOffset: 1, }; }, + props: { + todayOverrideDateString: { // only used for unit tests to override today's date + type: String, + default: null, + }, + }, + computed: { + todayDateObj() { + return this.todayOverrideDateString ? new Date(this.todayOverrideDateString) : new Date(); + }, + calendarData() { + return this.setCalendarData(); + }, + // initialFirstDate() { + // return startOfWeek(this.todayDateObj); + // }, + }, + // mounted() { + // this.setCalendarData(); + // }, + methods: { + formatDate(date) { + // return format(date, "MM/dd/yyyy"); + // console.log("date: ", date) + const dateArr = date.toDateString().split(" "); + // console.log("dateArr: ", dateArr) + const dayIndex = date.getDay(); + // console.log("dayIndex: ", dayIndex) + const dateIndex = date.getDate(); + // console.log("dateIndex: ", dateIndex) + const yearIndex = date.getFullYear(); + // console.log("yearIndex: ", yearIndex) + const monthIndex = date.getMonth(); + // console.log("monthIndex: ", monthIndex) + const monthIndexStr = this.formatNumberToSetDigits(monthIndex + 1, 2); + const dateIndexStr = this.formatNumberToSetDigits(dateIndex, 2); + + return monthIndexStr + "/" + dateIndexStr + "/" + yearIndex.toString(); + }, + formatNumberToSetDigits(num, digits) { + let numStr = num.toString(); + // const strLength = numStr.length; + while (numStr.length < digits) { + numStr = "0" + numStr; + } + return numStr; + }, + setCalendarData() { + const monthsOfYear = [ // TODO: MOVE THIS TO A CONSTANT + "January", // 0 // -12 // 12 + "February", // 1 // -11 // 13 + "March", // 2 // -10 // 14 + "April", // 3 // -9 // 15 + "May", // 4 // -8 // 16 + "June", // 5 // -7 // 17 + "July", // 6 // -6 // 18 + "August", // 7 // -5 // 19 + "September", // 8 // -4 // 20 + "October", // 9 // -3 // 21 + "November", // 10 // -2 // 22 + "December", // 11 // -1 // 23 + ]; + const todayDateObj = this.todayDateObj; + const todayMonth = todayDateObj.getMonth(); // returns zero index of months + const todayYear = todayDateObj.getFullYear(); // returns # of year + + // const todayDate = todayDateObj.getDate(); // returns # of date + // const todayMonthFirstDate = new Date(todayYear, todayMonth, 1); // returns date object + // const todayMonthLastDate = new Date(todayYear, todayMonth + 1, 0); // returns date object + // const todayMonthLastDateNum = todayMonthLastDate.getDate(); // returns # of date + // const todayStartDayIndex = todayMonthFirstDate.getDay(); // returns zero index of weekdays + + function getMonthData(offset) { + let monthClass = ""; + let yearNum = todayYear; + let adjustedMonthIndex = todayMonth + offset; + + // console.log("111... todayMonth: ", todayMonth, " / yearNum: ", yearNum, " / offset: ", offset); + + if (offset === 0) { + monthClass = "currentMonth"; + } else if (offset > 0) { + monthClass = "futureMonth"; + while (adjustedMonthIndex > 11) { + adjustedMonthIndex = adjustedMonthIndex - 12; + yearNum++; + } + } else { + monthClass = "pastMonth"; + while (adjustedMonthIndex < 0) { + adjustedMonthIndex = 12 + adjustedMonthIndex; + yearNum--; + } + } + + // console.log("adjustedMonthIndex: ", adjustedMonthIndex, " / yearNum: ", yearNum); + + const monthEndDate = new Date(yearNum, adjustedMonthIndex + 1, 0); + const datesArray = []; + for (let i = 1; i <= monthEndDate.getDate(); i++) { + datesArray.push({ dateNum: i }); + } + const monthFirstDate = new Date(yearNum, adjustedMonthIndex, 1); // returns date object + const startDayIndex = monthFirstDate.getDay(); + console.log("startDayIndex: ", startDayIndex) + + const monthToAdd = { + monthLabel: monthsOfYear[adjustedMonthIndex], + yearNum: yearNum, + dates: datesArray, + startDayIndex: startDayIndex, + monthClass: monthClass, + }; + // console.log("monthToAdd: ", monthToAdd) + return monthToAdd; + } + + // this.monthsBeforeToLoadOffset, this.monthsAfterToLoadOffset (DATA VARS) + const months = []; + for (let i = this.monthsBeforeToLoadOffset; i <= this.monthsAfterToLoadOffset; i++) { + months.push(getMonthData(i)); + } + return months; + }, + + + + + + + + + + getTodayDate() { + const todayDate = new Date(); + return todayDate; + }, + }, }; - diff --git a/src/constants/scheduling.js b/src/constants/scheduling.js new file mode 100644 index 000000000..5e819a7a4 --- /dev/null +++ b/src/constants/scheduling.js @@ -0,0 +1,16 @@ +const monthsOfYear = [ + "January", + "February", + "March", + "April", + "May", + "June", + "July", + "August", + "September", + "October", + "November", + "December", +]; + +export { monthsOfYear }; \ No newline at end of file diff --git a/src/layouts/demo-date-picker/demo-date-picker.vue b/src/layouts/demo-date-picker/demo-date-picker.vue index dead25731..8799d012a 100644 --- a/src/layouts/demo-date-picker/demo-date-picker.vue +++ b/src/layouts/demo-date-picker/demo-date-picker.vue @@ -3,11 +3,17 @@
- -
- - + +
@@ -33,11 +39,27 @@ import baseMixin from "@/mixins/base-mixin"; export default { name: "demo-date-picker", - // data() { - // return { - // todayDate: new Date(), - // }; - // }, + data() { + return { + selectedDate: null, + // selectedDate: { // USE THIS FORMAT FOR A PRE-SELECTED DATE ON LOAD + // year: 2023, + // month: 3, // use 1-based index for months + // date: 21, + // }, + mockSelectableDatesData: [ + { year: 2023, month: 3, date: 4 }, + { year: 2023, month: 3, date: 5 }, + { year: 2023, month: 3, date: 22 }, + { year: 2023, month: 4, date: 13 }, + { year: 2023, month: 4, date: 14 }, + { year: 2023, month: 4, date: 26 }, + { year: 2023, month: 5, date: 21 }, + { year: 2023, month: 5, date: 23 }, + { year: 2023, month: 5, date: 25 }, + ], + }; + }, computed: { todayDate() { const today = new Date(); @@ -48,12 +70,16 @@ export default { arePagePrerequisitesValid() { return true; }, + getAvailableDates(startDate, endDate) { + this.mockSelectableDatesData.push(endDate); + // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + // temporary test method that adds endDate to list of selectable dates + return this.mockSelectableDatesData; + }, }, components: { datePicker, funnelHeader, - vehicleBanner, - funnelSubHeader, }, }; From 2ddd4dc416975731af366e3532cd7a7fa447dea2 Mon Sep 17 00:00:00 2001 From: Adam Caouette Date: Wed, 15 Mar 2023 09:59:20 -0400 Subject: [PATCH 07/22] CSR-886: format changes and update dependencies --- src/constants/scheduling.js | 2 +- .../date-picker/date-picker.vue | 102 +++++++++++------- .../demo-date-picker/demo-date-picker.vue | 6 +- 3 files changed, 68 insertions(+), 42 deletions(-) diff --git a/src/constants/scheduling.js b/src/constants/scheduling.js index 5e819a7a4..c656ac60a 100644 --- a/src/constants/scheduling.js +++ b/src/constants/scheduling.js @@ -13,4 +13,4 @@ const monthsOfYear = [ "December", ]; -export { monthsOfYear }; \ No newline at end of file +export { monthsOfYear }; diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue index 9ff0f5cf7..27426cde0 100644 --- a/src/digital-components/date-picker/date-picker.vue +++ b/src/digital-components/date-picker/date-picker.vue @@ -11,7 +11,9 @@
{{ month.monthLabel }} {{ month.yearNum.toString() }}
-
+
= Available
@@ -46,7 +48,13 @@
- + @@ -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 { + \ No newline at end of file From 24aecae149d5029d90f61b48fa06c482ca23d5d6 Mon Sep 17 00:00:00 2001 From: Adam Caouette Date: Wed, 15 Mar 2023 10:22:01 -0400 Subject: [PATCH 10/22] CSR-886: release first unit test --- .../date-picker/date-picker.spec.js | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/digital-components/date-picker/date-picker.spec.js b/src/digital-components/date-picker/date-picker.spec.js index 96e1b6a61..f140e9adb 100644 --- a/src/digital-components/date-picker/date-picker.spec.js +++ b/src/digital-components/date-picker/date-picker.spec.js @@ -5,20 +5,20 @@ import { shallowMount } from "@vue/test-utils"; import { getMountOptions } from "@/helpers/unit-test-helper.js"; describe("date-picker.vue", () => { - // describe("initial setup", () => { - // test("Creates a date object from today", () => { - // // Arrange - // const { wrapper } = setupMocks({}); + describe("initial setup", () => { + test("Creates a date object from today", () => { + // Arrange + const { wrapper } = setupMocks({}); - // // Act - // const testResult = wrapper.vm.todayDateObj instanceof Date; + // Act + const testResult = wrapper.vm.todayDate instanceof Date; - // // Assert - // expect(testResult).toEqual(true); + // Assert + expect(testResult).toEqual(true); - // wrapper.unmount(); - // }); - // }); + wrapper.unmount(); + }); + }); // describe("formatNumberToSetDigits", () => { // const testScenarios = [ // [0, 3, "000"], From 45208ccf1fdfc8d7aa7d8a58af6dbe706cfd5aff Mon Sep 17 00:00:00 2001 From: Scott Kiener Date: Wed, 15 Mar 2023 11:40:50 -0400 Subject: [PATCH 11/22] CSR-1229 | Repairs save after pricing, move getSupporting to Veh-Damage --- src/layouts/estimate/estimate.vue | 21 +------------------ src/layouts/vehicle-damage/vehicle-damage.vue | 11 ++++++++++ 2 files changed, 12 insertions(+), 20 deletions(-) diff --git a/src/layouts/estimate/estimate.vue b/src/layouts/estimate/estimate.vue index 15a9749e7..239bb0f26 100644 --- a/src/layouts/estimate/estimate.vue +++ b/src/layouts/estimate/estimate.vue @@ -252,28 +252,9 @@ export default { } else if (this.$store.getters.order.referralNumber?.length === 6) { await this.navigateForwardWithSingleCarMatch(); } else if (this.isRepair) { - const supportingItemsPromise = await this.dispatchStoreAction( - storeActions.GET_SUPPORTING_ITEMS - ); - - const promiseResultMap = [ - { - resultKey: "supportingItems", - promise: supportingItemsPromise, - }, - ]; - - const resultMap = await settleAllPromises(promiseResultMap); - - this.dispatchStoreAction( - this.storeActions.SAVE_SUPPORTING_ITEMS, - resultMap.supportingItems, - false - ); - // call saveSession here - navigateWithSaving saves too late in the flow await saveSession({}); - return this.$router.navigateWithoutSaving( + return this.$router.navigateWithSaving( this.navigationScenarios.CLICKED_FORWARD_WITH_NO_QUESTIONS, this.$route ); diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue index 7446d4cd0..349c10fb2 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.vue +++ b/src/layouts/vehicle-damage/vehicle-damage.vue @@ -324,6 +324,17 @@ export default { false ); + if (this.isWindshieldRepair) { + const supportingItems = await this.dispatchStoreAction( + storeActions.GET_SUPPORTING_ITEMS + ); + this.dispatchStoreAction( + this.storeActions.SAVE_SUPPORTING_ITEMS, + supportingItems.data, + false + ); + } + return this.navigateForward(); }, From 324257ac960701f3c1bfa4bc6326833ca8c8a530 Mon Sep 17 00:00:00 2001 From: Scott Kiener Date: Wed, 15 Mar 2023 11:54:33 -0400 Subject: [PATCH 12/22] CSR-1229 | Fix formatting --- src/layouts/vehicle-damage/vehicle-damage.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue index 349c10fb2..dc1393be8 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.vue +++ b/src/layouts/vehicle-damage/vehicle-damage.vue @@ -334,7 +334,7 @@ export default { false ); } - + return this.navigateForward(); }, From 0186e25db469275c6d5bdd94feaa656880467012 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Wed, 15 Mar 2023 13:06:32 -0400 Subject: [PATCH 13/22] Just a few more tech review tweaks --- .../mobile-location-modal-questions.vue | 4 +--- src/layouts/service-location/service-location.vue | 14 +++----------- .../service-zip-modal-question.vue | 2 +- 3 files changed, 5 insertions(+), 15 deletions(-) diff --git a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue index b4da4ddfa..31eb359b2 100644 --- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue +++ b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue @@ -89,8 +89,6 @@ export default { type: Object, default: () => ({}), }, - isZipServiceableMobile: Boolean, - isZipServiceableInShop: Boolean, linkWidgetName: String, modalWidgetName: String, alertNonServiceableZipWidgetName: String, @@ -184,7 +182,7 @@ export default { const mobileFeePart = await getPricedMobileFeePart(serviceZipCode); // emit it to parent - this.$emit("set-mobile-fee-part", mobileFeePart); + this.$emit("updated-mobile-fee-part", mobileFeePart); // Update the page level model this.$emit("update:modelValue", this.internalModel); diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index e458b112b..58f440708 100644 --- a/src/layouts/service-location/service-location.vue +++ b/src/layouts/service-location/service-location.vue @@ -8,7 +8,7 @@ v-model="serviceZipCodeQuestion" ref="serviceZipCodeQuestion" :mobileFeePart="mobileFeePart" - @set-mobile-fee-part="setMobileFeePart" + @updated-mobile-fee-part="setMobileFeePart" linkWidgetName="ServiceZipLinkWidget" modalWidgetName="ServiceZipModalWidget" /> @@ -72,16 +72,8 @@ export default { // Call APIs const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage); const serviceZipCode = store.getters.order.serviceLocation.zipCode; - const serviceType = store.getters.damage.isRepair ? "Repair" : "Replace"; - const parentAccountNumber = store.getters.payment.parentAccountNumber; - const billToAccountNumber = 1; - const mobileFeePartPromise = getPricedMobileFeePart( - serviceZipCode, - serviceType, - parentAccountNumber, - billToAccountNumber - ); + const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode); // Settle promises and get results const promiseResultMap = [ diff --git a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue index 2c1e0e588..6594061cd 100644 --- a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue +++ b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue @@ -156,7 +156,7 @@ export default { const mobileFeePart = await getPricedMobileFeePart(serviceZipCode); // emit it to parent - this.$emit("set-mobile-fee-part", mobileFeePart); + this.$emit("updated-mobile-fee-part", mobileFeePart); // Update the page level model this.$emit("update:modelValue", this.internalModel); From b1713d9a36323d262a883101865c992b67d57769 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Wed, 15 Mar 2023 13:25:08 -0400 Subject: [PATCH 14/22] Quick change to logic for displaying the Mobile Location address --- .../mobile-location-modal-questions.vue | 5 +++-- .../service-zip-modal-question.vue | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue index 31eb359b2..586e1c6de 100644 --- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue +++ b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue @@ -64,7 +64,7 @@ import { getPricedMobileFeePart } from "@/layouts/service-location/helpers/servi export default { name: "mobile-location-modal-questions", - emits: ["update:modelValue", "set-mobile-fee-part"], + emits: ["update:modelValue", "updated-mobile-fee-part"], data() { return { internalModel: deepClone(this.modelValue), @@ -107,7 +107,8 @@ export default { this.addressModel.state && this.addressModel.state !== "" && this.addressModel.zipCode && - this.addressModel.zipCode !== "" + this.addressModel.zipCode !== "" && + this.internalModel.isVehicleProtected !== null ) { return `${this.addressModel.streetAddress}\n${this.addressModel.city}, ${this.addressModel.state} ${this.addressModel.zipCode}`; } diff --git a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue index 6594061cd..0d2c35000 100644 --- a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue +++ b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue @@ -43,7 +43,7 @@ import { getPricedMobileFeePart } from "@/layouts/service-location/helpers/servi export default { name: "service-zip-modal-question", - emits: ["update:modelValue", "set-mobile-fee-part"], + emits: ["update:modelValue", "updated-mobile-fee-part"], data() { return { internalModel: this.copyModel(this.modelValue), From e97e82c7a70d2e6e6593c154f72326455ec57605 Mon Sep 17 00:00:00 2001 From: Adam Caouette Date: Wed, 15 Mar 2023 14:07:23 -0400 Subject: [PATCH 15/22] CSR-886: update span to div --- src/digital-components/date-picker/date-picker.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue index 27426cde0..e3b5ff5d1 100644 --- a/src/digital-components/date-picker/date-picker.vue +++ b/src/digital-components/date-picker/date-picker.vue @@ -2,7 +2,7 @@
Date Picker -
- +