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="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>

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

@ -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");