Skip to content

Commit

Permalink
BaseInput.js: Transfer basic validation from FilterInput.js
Browse files Browse the repository at this point in the history
  • Loading branch information
@nilmerg
nilmerg committed Apr 28, 2023
1 parent dd2b3ca commit 95f680c
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 72 deletions.
61 changes: 60 additions & 1 deletion asset/js/widget/BaseInput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -317,7 +317,43 @@ define(["../notjQuery", "Completer"], function ($, Completer) {
return this.termsToQueryString(this.usedTerms);
}

checkValidity(input) {
if (input.pattern && ! input.checkValidity()) {
if (! input.value.match(input.pattern)) {
if (input.dataset.invalidMsg) {
input.setCustomValidity(input.dataset.invalidMsg);
}

return false;
}

// If the pattern matches, reset the custom validity, otherwise the value is still invalid.
input.setCustomValidity('');
}

// The pattern isn't set or it matches. Any other custom validity must not be accounted for here.
return true;
}

reportValidity(element) {
setTimeout(() => element.reportValidity(), 0);
}

validate(element) {
if (! this.checkValidity(element)) {
this.reportValidity(element);

return false;
}

return true;
}

saveTerm(input, updateDOM = true, force = false) {
if (! this.checkValidity(input)) {
return false;
}

let termIndex = input.parentNode.dataset.index;
let termData = this.readFullTerm(input, termIndex);

Expand Down Expand Up @@ -348,6 +384,18 @@ define(["../notjQuery", "Completer"], function ($, Completer) {
} else {
label.title = '';
}

if (termData.pattern) {
input.pattern = termData.pattern;
delete termData.pattern;

if (termData.invalidMsg) {
input.dataset.invalidMsg = termData.invalidMsg;
delete termData.invalidMsg;
}

this.validate(input);
}
}

termsToQueryString(terms) {
Expand Down Expand Up @@ -640,6 +688,8 @@ define(["../notjQuery", "Completer"], function ($, Completer) {
this.lastCompletedTerm = termData;
this.writePartialTerm(termData.label, input);

this.checkValidity(input);

if (termIndex >= 0) {
this.autoSubmit(input, 'save', { [termIndex]: this.saveTerm(input, false, true) });
} else {
Expand All @@ -660,6 +710,10 @@ define(["../notjQuery", "Completer"], function ($, Completer) {
}

if (! this.hasSyntaxError(input)) {
if (isTerm && ! this.validate(input)) {
return;
}

this.complete(input, { term: termData });
}

Expand Down Expand Up @@ -830,14 +884,19 @@ define(["../notjQuery", "Completer"], function ($, Completer) {
}

onTermFocus(event) {
let input = event.target;

if (input.parentNode.dataset.index >= 0) {
this.validate(input);
}

if (event.detail.scripted) {
// Only request suggestions if the user manually focuses the term
return;
}

this.deselectTerms();

let input = event.target;
if (! this.hasSyntaxError(input) && (
this.completer === null || ! this.completer.isBeingCompleted(input, false)
)) {
Expand Down
97 changes: 26 additions & 71 deletions asset/js/widget/FilterInput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,24 +105,6 @@ define(["../notjQuery", "BaseInput"], function ($, BaseInput) {
return termIndex;
}

updateTermData(termData, input) {
super.updateTermData(termData, input);

if (termData.pattern) {
input.pattern = termData.pattern;
delete termData.pattern;

if (termData.invalidMsg) {
input.dataset.invalidMsg = termData.invalidMsg;
delete termData.invalidMsg;
}

if (! this.checkValidity(input)) {
this.reportValidity(input);
}
}
}

readFullTerm(input, termIndex = null) {
let termData = super.readFullTerm(input, termIndex);
if (termData === false) {
Expand Down Expand Up @@ -355,14 +337,6 @@ define(["../notjQuery", "BaseInput"], function ($, BaseInput) {
lastTerm.classList.add('last-term');
}

saveTerm(input, updateDOM = true, force = false) {
if (! this.checkValidity(input)) {
return false;
}

return super.saveTerm(input, updateDOM, force);
}

termsToQueryString(terms) {
if (! this.input.form.checkValidity()) {
let filtered = [];
Expand All @@ -386,8 +360,7 @@ define(["../notjQuery", "BaseInput"], function ($, BaseInput) {
let termIndex = Number(label.dataset.index);
if (termIndex < this.usedTerms.length - 1) {
// It's not the last term
if (! this.checkValidity(label.firstChild, label.dataset.type, termIndex)) {
this.reportValidity(label.firstChild);
if (! this.validate(label.firstChild)) {
return false;
}
}
Expand Down Expand Up @@ -834,25 +807,17 @@ define(["../notjQuery", "BaseInput"], function ($, BaseInput) {
}

checkValidity(input, type = null, termIndex = null) {
if (type === null) {
type = input.parentNode.dataset.type;
if (! super.checkValidity(input)) {
return false;
}

if (input.pattern && ! input.checkValidity()) {
if (! input.value.match(input.pattern)) {
if (input.dataset.invalidMsg) {
input.setCustomValidity(input.dataset.invalidMsg);
}

return false;
}

input.setCustomValidity('');
if (type === null) {
type = input.parentNode.dataset.type;
}

if (! type || type === 'value') {
// type is undefined for the main input, values have no special validity rules
return input.checkValidity();
return true;
}

if (termIndex === null && input.parentNode.dataset.index >= 0) {
Expand Down Expand Up @@ -949,10 +914,6 @@ define(["../notjQuery", "BaseInput"], function ($, BaseInput) {
return input.checkValidity();
}

reportValidity(element) {
setTimeout(() => element.reportValidity(), 0);
}

renderSuggestions(suggestions) {
let itemTemplate = $.render('<li><input type="button" tabindex="-1"></li>');

Expand Down Expand Up @@ -1247,22 +1208,19 @@ define(["../notjQuery", "BaseInput"], function ($, BaseInput) {

onTermFocus(event) {
let input = event.target;
let isTerm = input.parentNode.dataset.index >= 0;
let termType = input.parentNode.dataset.type || this.termType;

if (input.parentNode.dataset.index >= 0) {
if (
! this.checkValidity(input, termType)
&& termType !== 'operator'
&& termType !== 'logical_operator'
) {
this.reportValidity(input);
}

if (isTerm) {
this.highlightTerm(input.parentNode);
}

let value = this.readPartialTerm(input);
if (! value && (termType === 'column' || termType === 'value')) {
if (isTerm) {
this.validate(input);
}

// No automatic suggestions without input
return;
}
Expand Down Expand Up @@ -1356,10 +1314,7 @@ define(["../notjQuery", "BaseInput"], function ($, BaseInput) {
onCompletion(event) {
super.onCompletion(event);

let input = event.target;
this.checkValidity(input);

if (input.parentNode.dataset.index >= 0) {
if (event.target.parentNode.dataset.index >= 0) {
return;
}

Expand Down Expand Up @@ -1499,21 +1454,14 @@ define(["../notjQuery", "BaseInput"], function ($, BaseInput) {

onInput(event) {
let input = event.target;
if (this.hasSyntaxError(input)) {
return super.onInput(event);
}

let termIndex = Number(input.parentNode.dataset.index);
let isTerm = termIndex >= 0;

if (this.hasSyntaxError(input)) {
// pass
} else if (termIndex >= 0) {
let value = this.readPartialTerm(input);
if (! this.checkValidity(input)) {
this.reportValidity(input);
// Let inputs also grow upon invalid input
this.updateTermData({ label: value }, input);
return;
} else if (value && ! ['column', 'value'].includes(input.parentNode.dataset.type)) {
this.autoSubmit(input, 'save', { [termIndex]: this.saveTerm(input) });
}
} else if (this.termType === 'operator' || this.termType === 'logical_operator') {
if (! isTerm && (this.termType === 'operator' || this.termType === 'logical_operator')) {
let value = this.readPartialTerm(input);

if (value && ! this.validOperator(value).partialMatches) {
Expand All @@ -1532,6 +1480,13 @@ define(["../notjQuery", "BaseInput"], function ($, BaseInput) {
}

super.onInput(event);

if (isTerm && input.checkValidity()) {
let value = this.readPartialTerm(input);
if (value && ! ['column', 'value'].includes(input.parentNode.dataset.type)) {
this.autoSubmit(input, 'save', { [termIndex]: this.saveTerm(input) });
}
}
}

onPaste(event) {
Expand Down

0 comments on commit 95f680c

Please sign in to comment.