From b78c6d2ea503cfcf5ce6d151aa70ecc73177a5c2 Mon Sep 17 00:00:00 2001
From: Harrison Deng <yunyangdeng@gmail.com>
Date: Sat, 28 Aug 2021 22:59:56 -0400
Subject: [PATCH] Moved number input validation to before upload.

---
 Props/Pages/Search.cshtml          | 16 +++++++---------
 Props/assets/js/specific/search.js | 14 +++++++++-----
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/Props/Pages/Search.cshtml b/Props/Pages/Search.cshtml
index 8b682a3..92d9400 100644
--- a/Props/Pages/Search.cshtml
+++ b/Props/Pages/Search.cshtml
@@ -23,7 +23,8 @@
     <div class="collapse tear" id="configuration">
         <div class="d-flex">
             <h1 class="my-3 display-2 mx-auto">
-                <i class="bi bi-sliders"></i>
+                <i class="bi bi-sliders" x-show="!timeoutInProgress"></i>
+                <i class="bi bi-cloud-arrow-up" x-show="timeoutInProgress"></i>
                 Configuration
             </h1>
             <button class="btn align-self-start m-3" type="button" id="configuration-close" data-bs-toggle="collapse"
@@ -98,7 +99,7 @@
                                     <input type="number" class="form-control" min="0" id="max-price"
                                         x-model="searchOutline.filters.upperPrice"
                                         x-bind:disabled="!searchOutline.filters.enableUpperPrice"
-                                        x-on:change="searchOutlineChanged" x-on:input="validateNumericalInputs">
+                                        x-on:change="searchOutlineChanged">
                                     <span class="input-group-text">.00</span>
                                 </div>
                             </div>
@@ -107,8 +108,7 @@
                                 <div class="input-group">
                                     <span class="input-group-text">$</span>
                                     <input type="number" class="form-control" min="0" id="min-price"
-                                        x-model="searchOutline.filters.lowerPrice" x-on:change="searchOutlineChanged"
-                                        x-on:input="validateNumericalInputs">
+                                        x-model="searchOutline.filters.lowerPrice" x-on:change="searchOutlineChanged">
                                     <span class="input-group-text">.00</span>
                                 </div>
                             </div>
@@ -124,7 +124,7 @@
                                     <input type="number" class="form-control" min="0" id="max-shipping"
                                         x-model="searchOutline.filters.maxShippingFee"
                                         x-bind:disabled="!searchOutline.filters.enableMaxShipping"
-                                        x-on:change="searchOutlineChanged" x-on:input="validateNumericalInputs">
+                                        x-on:change="searchOutlineChanged">
                                     <span class="input-group-text">.00</span>
                                 </div>
                             </div>
@@ -144,8 +144,7 @@
                                 <label for="min-purchases" class="form-label">Minimum Purchases</label>
                                 <div class="input-group">
                                     <input type="number" class="form-control" min="0" id="min-purchases"
-                                        x-model="searchOutline.filters.minPurchases" x-on:change="searchOutlineChanged"
-                                        x-on:input="validateNumericalInputs">
+                                        x-model="searchOutline.filters.minPurchases" x-on:change="searchOutlineChanged">
                                     <span class="input-group-text">Purchases</span>
                                 </div>
                             </div>
@@ -162,8 +161,7 @@
                                 <label for="min-reviews" class="form-label">Minimum Reviews</label>
                                 <div class="input-group">
                                     <input type="number" class="form-control" min="0" id="min-reviews"
-                                        x-model="searchOutline.filters.minReviews" x-on:change="searchOutlineChanged"
-                                        x-on:input="validateNumericalInputs">
+                                        x-model="searchOutline.filters.minReviews" x-on:change="searchOutlineChanged">
                                     <span class="input-group-text">Reviews</span>
                                 </div>
                             </div>
diff --git a/Props/assets/js/specific/search.js b/Props/assets/js/specific/search.js
index f9a5c50..42202a0 100644
--- a/Props/assets/js/specific/search.js
+++ b/Props/assets/js/specific/search.js
@@ -2,8 +2,8 @@ import { apiHttp } from "../services/http";
 import Alpine from "alpinejs";
 import clone from "just-clone";
 
-const uploadDelay = 500;
-const startingSlide = "#quick-picks-slide";
+const UPLOAD_DELAY = 1500;
+const START_SLIDE = "#quick-picks-slide";
 
 function initInteractiveElements() {
     let configurationToggle = document.getElementById("configuration-toggle");
@@ -54,6 +54,7 @@ function initConfigData() {
                 bestPrice: null,
             },
             searchOutlineChangeTimeout: null,
+            timeoutInProgress: false,
             hasResults() {
                 return this.resultsQuery !== null;
             },
@@ -67,7 +68,7 @@ function initConfigData() {
                     this.changeSearchOutlineName(this.serverSearchOutlineName, this.searchOutlines[this.selectedSearchOutline]);
                 }
             },
-            validateNumericalInputs() {
+            validateAllNumericalInputs() {
                 if (!this.searchOutline.filters.lowerPrice) this.searchOutline.filters.lowerPrice = 0;
                 if (!this.searchOutline.filters.upperPrice) this.searchOutline.filters.upperPrice = 0;
                 if (!this.searchOutline.filters.maxShippingFee) this.searchOutline.filters.maxShippingFee = 0;
@@ -89,9 +90,11 @@ function initConfigData() {
                 if (this.searchOutlineChangeTimeout != null) {
                     clearTimeout(this.searchOutlineChangeTimeout);
                 }
+                this.timeoutInProgress = true;
                 this.searchOutlineChangeTimeout = setTimeout(() => {
                     this.uploadAll();
-                }, uploadDelay);
+                    this.timeoutInProgress = false;
+                }, UPLOAD_DELAY);
             },
             uploadAll() {
                 let name = this.searchOutlines[this.selectedSearchOutline];
@@ -100,6 +103,7 @@ function initConfigData() {
             },
             async uploadFilters(name, filters) {
                 if (!this.loggedIn) return;
+                this.validateAllNumericalInputs();
                 this.updatingFilters = true;
                 let uploadFilterResponse = await apiHttp.put(`SearchOutline/${name}/Filters`, filters);
                 this.updatingFilters = false;
@@ -273,7 +277,7 @@ function initSlides() {
     });
     const goTo = () => {
         const match = location.href.match("(#[\\w-]+)");
-        const idAnchor = match && match[1] ? match[1] : startingSlide;
+        const idAnchor = match && match[1] ? match[1] : START_SLIDE;
         document.querySelector("#content-pages > .selectors > .nav-item > .active")?.classList.remove("active");
         document.querySelector("#content-pages > .multipage-slides > .active.show")?.classList.remove("active", "show");
         document.querySelector(`#content-pages > .selectors > .nav-item > [data-bs-target="${idAnchor}"]`).classList.add("active");