ydeng/props
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Moved number input validation to before upload.

Browse Source
This commit is contained in:
Harrison Deng 2021-08-28 22:59:56 -04:00
parent c6b8ca523b
commit b78c6d2ea5
2 changed files with 16 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
Props/Pages/Search.cshtml
View File

@ -23,7 +23,8 @@
<div class="collapse tear" id="configuration"> <div class="collapse tear" id="configuration">
<div class="d-flex"> <div class="d-flex">
<h1 class="my-3 display-2 mx-auto"> <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 Configuration
</h1> </h1>
<button class="btn align-self-start m-3" type="button" id="configuration-close" data-bs-toggle="collapse" <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" <input type="number" class="form-control" min="0" id="max-price"
x-model="searchOutline.filters.upperPrice" x-model="searchOutline.filters.upperPrice"
x-bind:disabled="!searchOutline.filters.enableUpperPrice" 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> <span class="input-group-text">.00</span>
</div> </div>
</div> </div>
@ -107,8 +108,7 @@
<div class="input-group"> <div class="input-group">
<span class="input-group-text">$</span> <span class="input-group-text">$</span>
<input type="number" class="form-control" min="0" id="min-price" <input type="number" class="form-control" min="0" id="min-price"
x-model="searchOutline.filters.lowerPrice" x-on:change="searchOutlineChanged" x-model="searchOutline.filters.lowerPrice" x-on:change="searchOutlineChanged">
x-on:input="validateNumericalInputs">
<span class="input-group-text">.00</span> <span class="input-group-text">.00</span>
</div> </div>
</div> </div>
@ -124,7 +124,7 @@
<input type="number" class="form-control" min="0" id="max-shipping" <input type="number" class="form-control" min="0" id="max-shipping"
x-model="searchOutline.filters.maxShippingFee" x-model="searchOutline.filters.maxShippingFee"
x-bind:disabled="!searchOutline.filters.enableMaxShipping" 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> <span class="input-group-text">.00</span>
</div> </div>
</div> </div>
@ -144,8 +144,7 @@
<label for="min-purchases" class="form-label">Minimum Purchases</label> <label for="min-purchases" class="form-label">Minimum Purchases</label>
<div class="input-group"> <div class="input-group">
<input type="number" class="form-control" min="0" id="min-purchases" <input type="number" class="form-control" min="0" id="min-purchases"
x-model="searchOutline.filters.minPurchases" x-on:change="searchOutlineChanged" x-model="searchOutline.filters.minPurchases" x-on:change="searchOutlineChanged">
x-on:input="validateNumericalInputs">
<span class="input-group-text">Purchases</span> <span class="input-group-text">Purchases</span>
</div> </div>
</div> </div>
@ -162,8 +161,7 @@
<label for="min-reviews" class="form-label">Minimum Reviews</label> <label for="min-reviews" class="form-label">Minimum Reviews</label>
<div class="input-group"> <div class="input-group">
<input type="number" class="form-control" min="0" id="min-reviews" <input type="number" class="form-control" min="0" id="min-reviews"
x-model="searchOutline.filters.minReviews" x-on:change="searchOutlineChanged" x-model="searchOutline.filters.minReviews" x-on:change="searchOutlineChanged">
x-on:input="validateNumericalInputs">
<span class="input-group-text">Reviews</span> <span class="input-group-text">Reviews</span>
</div> </div>
</div> </div>

14
Props/assets/js/specific/search.js
View File

@ -2,8 +2,8 @@ import { apiHttp } from "../services/http";
import Alpine from "alpinejs"; import Alpine from "alpinejs";
import clone from "just-clone"; import clone from "just-clone";
const uploadDelay = 500; const UPLOAD_DELAY = 1500;
const startingSlide = "#quick-picks-slide"; const START_SLIDE = "#quick-picks-slide";
function initInteractiveElements() { function initInteractiveElements() {
let configurationToggle = document.getElementById("configuration-toggle"); let configurationToggle = document.getElementById("configuration-toggle");
@ -54,6 +54,7 @@ function initConfigData() {
bestPrice: null, bestPrice: null,
}, },
searchOutlineChangeTimeout: null, searchOutlineChangeTimeout: null,
timeoutInProgress: false,
hasResults() { hasResults() {
return this.resultsQuery !== null; return this.resultsQuery !== null;
}, },
@ -67,7 +68,7 @@ function initConfigData() {
this.changeSearchOutlineName(this.serverSearchOutlineName, this.searchOutlines[this.selectedSearchOutline]); this.changeSearchOutlineName(this.serverSearchOutlineName, this.searchOutlines[this.selectedSearchOutline]);
} }
}, },
validateNumericalInputs() { validateAllNumericalInputs() {
if (!this.searchOutline.filters.lowerPrice) this.searchOutline.filters.lowerPrice = 0; if (!this.searchOutline.filters.lowerPrice) this.searchOutline.filters.lowerPrice = 0;
if (!this.searchOutline.filters.upperPrice) this.searchOutline.filters.upperPrice = 0; if (!this.searchOutline.filters.upperPrice) this.searchOutline.filters.upperPrice = 0;
if (!this.searchOutline.filters.maxShippingFee) this.searchOutline.filters.maxShippingFee = 0; if (!this.searchOutline.filters.maxShippingFee) this.searchOutline.filters.maxShippingFee = 0;
@ -89,9 +90,11 @@ function initConfigData() {
if (this.searchOutlineChangeTimeout != null) { if (this.searchOutlineChangeTimeout != null) {
clearTimeout(this.searchOutlineChangeTimeout); clearTimeout(this.searchOutlineChangeTimeout);
} }
this.timeoutInProgress = true;
this.searchOutlineChangeTimeout = setTimeout(() => { this.searchOutlineChangeTimeout = setTimeout(() => {
this.uploadAll(); this.uploadAll();
}, uploadDelay); this.timeoutInProgress = false;
}, UPLOAD_DELAY);
}, },
uploadAll() { uploadAll() {
let name = this.searchOutlines[this.selectedSearchOutline]; let name = this.searchOutlines[this.selectedSearchOutline];
@ -100,6 +103,7 @@ function initConfigData() {
}, },
async uploadFilters(name, filters) { async uploadFilters(name, filters) {
if (!this.loggedIn) return; if (!this.loggedIn) return;
this.validateAllNumericalInputs();
this.updatingFilters = true; this.updatingFilters = true;
let uploadFilterResponse = await apiHttp.put(`SearchOutline/${name}/Filters`, filters); let uploadFilterResponse = await apiHttp.put(`SearchOutline/${name}/Filters`, filters);
this.updatingFilters = false; this.updatingFilters = false;
@ -273,7 +277,7 @@ function initSlides() {
}); });
const goTo = () => { const goTo = () => {
const match = location.href.match("(#[\\w-]+)"); 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 > .selectors > .nav-item > .active")?.classList.remove("active");
document.querySelector("#content-pages > .multipage-slides > .active.show")?.classList.remove("active", "show"); 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"); document.querySelector(`#content-pages > .selectors > .nav-item > [data-bs-target="${idAnchor}"]`).classList.add("active");