Increase readability

This commit is contained in:
scottkiener-at-safelite 2026-05-29 11:39:55 -04:00
parent 7fd7362982
commit 0bed421da3

View file

@ -153,7 +153,7 @@ export default {
this.initializeWindow(); this.initializeWindow();
return; return;
} }
// Pending auto select is set when the user is at the end of the dates and the next page of dates is loaded.
if (this.pendingAutoSelect) { if (this.pendingAutoSelect) {
this.pendingAutoSelect = false; this.pendingAutoSelect = false;
this.advanceWindowAndAutoSelect(); this.advanceWindowAndAutoSelect();
@ -164,9 +164,11 @@ export default {
this.updateWindowSize(); this.updateWindowSize();
window.addEventListener("resize", this.updateWindowSize); window.addEventListener("resize", this.updateWindowSize);
if (!this.allDates.length) return; if (!this.allDates.length) return;
// If a model value is set, we need to set the window start to the index of the model value.
// Otherwise, we need to initialize the window.
if (this.modelValue) { if (this.modelValue) {
const index = this.allDates.findIndex((d) => d.value === this.modelValue); const index = this.allDates.findIndex((d) => d.value === this.modelValue);
if (index !== -1) this.windowStart = this.getWindowStart(index); if (index !== -1) this.windowStart = this.getWindowStartFromIndex(index);
} else { } else {
this.initializeWindow(); this.initializeWindow();
} }
@ -183,7 +185,7 @@ export default {
? require("@/assets/img/icons/chevron-right-blue.svg") ? require("@/assets/img/icons/chevron-right-blue.svg")
: require("@/assets/img/icons/chevron-right-grey.svg"); : require("@/assets/img/icons/chevron-right-grey.svg");
}, },
getWindowStart(index) { getWindowStartFromIndex(index) {
return Math.floor(index / this.windowSize) * this.windowSize; return Math.floor(index / this.windowSize) * this.windowSize;
}, },
goBack() { goBack() {
@ -206,6 +208,7 @@ export default {
this.autoSelectFirstAvailable(); this.autoSelectFirstAvailable();
}, },
autoSelectFirstAvailable() { autoSelectFirstAvailable() {
// Finds the first available date in the visible dates and emits the value.
const first = this.visibleDates.find((d) => d.isAvailable); const first = this.visibleDates.find((d) => d.isAvailable);
this.$emit("update:modelValue", first ? first.value : null); this.$emit("update:modelValue", first ? first.value : null);
}, },
@ -215,10 +218,12 @@ export default {
const firstAvailable = this.allDates.find((d) => d.isAvailable); const firstAvailable = this.allDates.find((d) => d.isAvailable);
if (firstAvailable) { if (firstAvailable) {
// If an available date is found, set the window start ensures the first available date is visible.
const index = this.allDates.indexOf(firstAvailable); const index = this.allDates.indexOf(firstAvailable);
this.windowStart = this.getWindowStart(index); this.windowStart = this.getWindowStartFromIndex(index);
this.$emit("update:modelValue", firstAvailable.value); this.$emit("update:modelValue", firstAvailable.value);
} else { } else {
// If no available dates are found, set the window start to the last window.
this.windowStart = Math.max(0, this.allDates.length - this.windowSize); this.windowStart = Math.max(0, this.allDates.length - this.windowSize);
} }
}, },