From 0bed421da3542566f2010bf5ed4a2c3a4e26b4be Mon Sep 17 00:00:00 2001
From: scottkiener-at-safelite <scott.kiener@safelite.com>
Date: Fri, 29 May 2026 11:39:55 -0400
Subject: [PATCH] Increase readability

---
 src/layouts/scheduling/date-picker/date-picker.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/layouts/scheduling/date-picker/date-picker.vue b/src/layouts/scheduling/date-picker/date-picker.vue
index cdbebb5d9..c3b9afdc5 100644
--- a/src/layouts/scheduling/date-picker/date-picker.vue
+++ b/src/layouts/scheduling/date-picker/date-picker.vue
@@ -153,7 +153,7 @@ export default {
                 this.initializeWindow();
                 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) {
                 this.pendingAutoSelect = false;
                 this.advanceWindowAndAutoSelect();
@@ -164,9 +164,11 @@ export default {
         this.updateWindowSize();
         window.addEventListener("resize", this.updateWindowSize);
         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) {
             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 {
             this.initializeWindow();
         }
@@ -183,7 +185,7 @@ export default {
                 ? require("@/assets/img/icons/chevron-right-blue.svg")
                 : require("@/assets/img/icons/chevron-right-grey.svg");
         },
-        getWindowStart(index) {
+        getWindowStartFromIndex(index) {
             return Math.floor(index / this.windowSize) * this.windowSize;
         },
         goBack() {
@@ -206,6 +208,7 @@ export default {
             this.autoSelectFirstAvailable();
         },
         autoSelectFirstAvailable() {
+            // Finds the first available date in the visible dates and emits the value.
             const first = this.visibleDates.find((d) => d.isAvailable);
             this.$emit("update:modelValue", first ? first.value : null);
         },
@@ -215,10 +218,12 @@ export default {
 
             const firstAvailable = this.allDates.find((d) => d.isAvailable);
             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);
-                this.windowStart = this.getWindowStart(index);
+                this.windowStart = this.getWindowStartFromIndex(index);
                 this.$emit("update:modelValue", firstAvailable.value);
             } 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);
             }
         },