From 8a472aa3353f805b88a56ea0ae7cc17a808941a3 Mon Sep 17 00:00:00 2001 From: scottkiener-at-safelite Date: Fri, 29 May 2026 10:34:45 -0400 Subject: [PATCH] CASH-2572 | Add in auto-select functionality --- .../date-picker/date-picker.spec.js | 226 +++++++++++++++++- .../scheduling/date-picker/date-picker.vue | 46 +++- 2 files changed, 269 insertions(+), 3 deletions(-) diff --git a/src/layouts/scheduling/date-picker/date-picker.spec.js b/src/layouts/scheduling/date-picker/date-picker.spec.js index 73a05ac52..d6ae3a6ae 100644 --- a/src/layouts/scheduling/date-picker/date-picker.spec.js +++ b/src/layouts/scheduling/date-picker/date-picker.spec.js @@ -133,9 +133,12 @@ describe("date-picker.vue", () => { test("does not emit when a disabled card is clicked", async () => { const wrapper = mountDesktop(); + const emissionCountBeforeClick = (wrapper.emitted("update:modelValue") ?? []).length; const disabledCard = wrapper.find(".date-picker__day-card--disabled"); await disabledCard.trigger("click"); - expect(wrapper.emitted("update:modelValue")).toBeFalsy(); + expect((wrapper.emitted("update:modelValue") ?? []).length).toBe( + emissionCountBeforeClick + ); wrapper.unmount(); }); @@ -292,4 +295,225 @@ describe("date-picker.vue", () => { wrapper.unmount(); }); }); + + describe("mounted initialization", () => { + test("emits first available date when mounted with no modelValue and dates present", () => { + const wrapper = mountDesktop(); + expect(wrapper.emitted("update:modelValue")).toBeTruthy(); + expect(wrapper.emitted("update:modelValue")[0][0]).toBe("2026-01-21"); + wrapper.unmount(); + }); + }); + + describe("goBack auto-selection", () => { + test("emits update:modelValue with first available date in the new window", async () => { + // modelValue set → mounted() uses scroll path, no emission on mount + const wrapper = mountDesktop({ + availableDates: ["2026-01-01", "2026-01-07"], + startDate: "2026-01-01", + endDate: "2026-01-10", + modelValue: "2026-01-07", + }); + // "2026-01-07" is index 6 → mounted sets windowStart = Math.floor(6/5)*5 = 5 + expect(wrapper.vm.windowStart).toBe(5); + expect(wrapper.emitted("update:modelValue")).toBeFalsy(); + await wrapper.vm.goBack(); + const emissions = wrapper.emitted("update:modelValue"); + expect(emissions).toBeTruthy(); + expect(emissions[emissions.length - 1][0]).toBe("2026-01-01"); + wrapper.unmount(); + }); + }); + + describe("goForward pending flow", () => { + test("emits requestMoreDates when at the last window", async () => { + // 5 dates, desktop window size 5 → already at end on mount + const wrapper = mountDesktop({ modelValue: "2026-01-21" }); + await wrapper.vm.goForward(); + expect(wrapper.emitted("requestMoreDates")).toBeTruthy(); + wrapper.unmount(); + }); + + test("sets pendingAutoSelect when at the last window", async () => { + const wrapper = mountDesktop({ modelValue: "2026-01-21" }); + await wrapper.vm.goForward(); + expect(wrapper.vm.pendingAutoSelect).toBe(true); + wrapper.unmount(); + }); + + test("emits update:modelValue with first available date in the new window when not at the end", async () => { + const wrapper = mountDesktop({ + availableDates: ["2026-01-01", "2026-01-07"], + startDate: "2026-01-01", + endDate: "2026-01-10", + modelValue: "2026-01-01", + }); + // windowStart = 0, not at end (0 + 5 < 10), no emission on mount + await wrapper.vm.goForward(); + const emissions = wrapper.emitted("update:modelValue"); + expect(emissions).toBeTruthy(); + expect(emissions[emissions.length - 1][0]).toBe("2026-01-07"); + wrapper.unmount(); + }); + }); + + describe("advanceWindowAndAutoSelect", () => { + test("advances windowStart by windowSize", () => { + const wrapper = mountDesktop({ + availableDates: ["2026-01-01", "2026-01-07"], + startDate: "2026-01-01", + endDate: "2026-01-10", + modelValue: "2026-01-01", + }); + expect(wrapper.vm.windowStart).toBe(0); + wrapper.vm.advanceWindowAndAutoSelect(); + expect(wrapper.vm.windowStart).toBe(5); + wrapper.unmount(); + }); + + test("caps windowStart at maxStart when already near the end", () => { + const wrapper = mountDesktop({ + availableDates: ["2026-01-01", "2026-01-07"], + startDate: "2026-01-01", + endDate: "2026-01-10", + modelValue: "2026-01-07", + }); + // mounted() sets windowStart = 5 (index 6, Math.floor(6/5)*5) + // maxStart = Math.max(0, 10 - 5) = 5 → min(5, 5+5) = 5 + wrapper.vm.advanceWindowAndAutoSelect(); + expect(wrapper.vm.windowStart).toBe(5); + wrapper.unmount(); + }); + + test("emits update:modelValue with first available date in the advanced window", () => { + const wrapper = mountDesktop({ + availableDates: ["2026-01-01", "2026-01-07"], + startDate: "2026-01-01", + endDate: "2026-01-10", + modelValue: "2026-01-01", + }); + wrapper.vm.advanceWindowAndAutoSelect(); + const emissions = wrapper.emitted("update:modelValue"); + expect(emissions).toBeTruthy(); + expect(emissions[emissions.length - 1][0]).toBe("2026-01-07"); + wrapper.unmount(); + }); + }); + + describe("autoSelectFirstAvailable", () => { + test("emits update:modelValue with the first available date in the visible window", () => { + const wrapper = mountDesktop({ modelValue: "2026-01-21" }); + wrapper.vm.autoSelectFirstAvailable(); + const emissions = wrapper.emitted("update:modelValue"); + expect(emissions[emissions.length - 1][0]).toBe("2026-01-21"); + wrapper.unmount(); + }); + + test("emits null when no available dates are visible", () => { + // availableDates outside the date range → all visible dates are unavailable + const wrapper = mountDesktop({ + availableDates: ["9999-12-31"], + startDate: "2026-01-21", + endDate: "2026-01-25", + modelValue: "2026-01-21", + }); + // modelValue set → mounted uses scroll path, no emission on mount + wrapper.vm.autoSelectFirstAvailable(); + const emissions = wrapper.emitted("update:modelValue"); + expect(emissions[emissions.length - 1][0]).toBeNull(); + wrapper.unmount(); + }); + }); + + describe("initializeWindow", () => { + test("sets the initialized flag to true", async () => { + const wrapper = mountDesktop({ availableDates: [] }); + expect(wrapper.vm.initialized).toBe(false); + await wrapper.setProps({ availableDates: AVAILABLE_DATES }); + expect(wrapper.vm.initialized).toBe(true); + wrapper.unmount(); + }); + + test("positions windowStart to the window containing the first available date", async () => { + const wrapper = mountDesktop({ + availableDates: [], + startDate: "2026-01-01", + endDate: "2026-01-10", + }); + // "2026-01-07" is index 6 → Math.floor(6/5)*5 = 5 + await wrapper.setProps({ availableDates: ["2026-01-07"] }); + expect(wrapper.vm.windowStart).toBe(5); + wrapper.unmount(); + }); + + test("emits update:modelValue with the first available date", async () => { + const wrapper = mountDesktop({ availableDates: [] }); + await wrapper.setProps({ availableDates: AVAILABLE_DATES }); + expect(wrapper.emitted("update:modelValue")[0][0]).toBe("2026-01-21"); + wrapper.unmount(); + }); + + test("positions windowStart to the last window and does not emit when no dates are available", async () => { + const wrapper = mountDesktop({ + availableDates: [], + startDate: "2026-01-01", + endDate: "2026-01-10", + }); + // Dates are present but none fall in the Jan 1–10 range + await wrapper.setProps({ availableDates: ["9999-12-31"] }); + // Math.max(0, 10 - 5) = 5 + expect(wrapper.vm.windowStart).toBe(5); + expect(wrapper.emitted("update:modelValue")).toBeFalsy(); + wrapper.unmount(); + }); + + test("does not re-run after initialized flag is set", async () => { + const wrapper = mountDesktop({ availableDates: [] }); + await wrapper.setProps({ availableDates: AVAILABLE_DATES }); + const emissionCount = wrapper.emitted("update:modelValue").length; + // Add a newly available date within the range to trigger the watcher again + await wrapper.setProps({ availableDates: [...AVAILABLE_DATES, "2026-01-24"] }); + // initialized=true and pendingAutoSelect=false → watcher takes no action + expect(wrapper.emitted("update:modelValue").length).toBe(emissionCount); + wrapper.unmount(); + }); + }); + + describe("allDates watcher", () => { + test("calls initializeWindow when dates first arrive with no modelValue set", async () => { + const wrapper = mountDesktop({ availableDates: [] }); + // No dates → mounted() does nothing; initialized stays false + expect(wrapper.vm.initialized).toBe(false); + await wrapper.setProps({ availableDates: AVAILABLE_DATES }); + expect(wrapper.vm.initialized).toBe(true); + expect(wrapper.emitted("update:modelValue")[0][0]).toBe("2026-01-21"); + wrapper.unmount(); + }); + + test("clears pendingAutoSelect and advances the window when pendingAutoSelect is true", async () => { + const wrapper = mountDesktop({ + availableDates: [], + startDate: "2026-01-01", + endDate: "2026-01-10", + }); + wrapper.vm.initialized = true; + wrapper.vm.pendingAutoSelect = true; + await wrapper.setProps({ availableDates: ["2026-01-01", "2026-01-07"] }); + expect(wrapper.vm.pendingAutoSelect).toBe(false); + expect(wrapper.vm.windowStart).toBe(5); + const emissions = wrapper.emitted("update:modelValue"); + expect(emissions[emissions.length - 1][0]).toBe("2026-01-07"); + wrapper.unmount(); + }); + + test("takes no action when allDates becomes empty", async () => { + const wrapper = mountDesktop({ availableDates: AVAILABLE_DATES }); + // mounted() calls initializeWindow() → emits; record count + const emissionCount = wrapper.emitted("update:modelValue").length; + await wrapper.setProps({ availableDates: [] }); + // watcher fires with newDates=[] → early return, nothing changes + expect(wrapper.emitted("update:modelValue").length).toBe(emissionCount); + wrapper.unmount(); + }); + }); }); diff --git a/src/layouts/scheduling/date-picker/date-picker.vue b/src/layouts/scheduling/date-picker/date-picker.vue index fa0ebc276..48c49c1ed 100644 --- a/src/layouts/scheduling/date-picker/date-picker.vue +++ b/src/layouts/scheduling/date-picker/date-picker.vue @@ -118,6 +118,8 @@ export default { window.innerWidth >= DESKTOP_BREAKPOINT_PX ? DESKTOP_WINDOW_SIZE : MOBILE_WINDOW_SIZE, + pendingAutoSelect: false, + initialized: false, }; }, computed: { @@ -157,6 +159,21 @@ export default { return true; }, }, + watch: { + allDates(newDates) { + if (!newDates.length) return; + + if (!this.initialized && !this.modelValue) { + this.initializeWindow(); + return; + } + + if (this.pendingAutoSelect) { + this.pendingAutoSelect = false; + this.advanceWindowAndAutoSelect(); + } + }, + }, mounted() { this.updateWindowSize(); window.addEventListener("resize", this.updateWindowSize); @@ -165,6 +182,8 @@ export default { if (index !== -1) { this.windowStart = Math.floor(index / this.windowSize) * this.windowSize; } + } else if (!this.modelValue && this.allDates.length) { + this.initializeWindow(); } }, beforeUnmount() { @@ -179,15 +198,38 @@ export default { }, goBack() { this.windowStart = Math.max(0, this.windowStart - this.windowSize); + this.autoSelectFirstAvailable(); }, goForward() { if (this.isLoadingDates) return; const isAtEnd = this.windowStart + this.windowSize >= this.allDates.length; if (isAtEnd) { this.$emit("requestMoreDates"); + this.pendingAutoSelect = true; } else { - const maxStart = Math.max(0, this.allDates.length - this.windowSize); - this.windowStart = Math.min(maxStart, this.windowStart + this.windowSize); + this.advanceWindowAndAutoSelect(); + } + }, + advanceWindowAndAutoSelect() { + const maxStart = Math.max(0, this.allDates.length - this.windowSize); + this.windowStart = Math.min(maxStart, this.windowStart + this.windowSize); + this.autoSelectFirstAvailable(); + }, + autoSelectFirstAvailable() { + const first = this.visibleDates.find((d) => d.isAvailable); + this.$emit("update:modelValue", first ? first.value : null); + }, + initializeWindow() { + this.initialized = true; + if (this.modelValue !== null) return; + + const firstAvailable = this.allDates.find((d) => d.isAvailable); + if (firstAvailable) { + const index = this.allDates.indexOf(firstAvailable); + this.windowStart = Math.floor(index / this.windowSize) * this.windowSize; + this.$emit("update:modelValue", firstAvailable.value); + } else { + this.windowStart = Math.max(0, this.allDates.length - this.windowSize); } }, selectDate(date) {