Adding Numeric control support for Backform.

This patch also includes an issue related to IntegerControl, which does
not emit any error message, when it has some issues.

In order to fix the issue, it will trigger 'pgadmin-session:invalid'
event, when the input value is not an valid integer.
This commit is contained in:
Akshay Joshi 2016-02-22 17:18:02 +05:30 committed by Ashesh Vashi
parent 6c2faa984b
commit 8186e45844
2 changed files with 105 additions and 1 deletions

View File

@ -634,6 +634,7 @@ function(require, $, _, S, Bootstrap, pgAdmin, alertify, CodeMirror) {
'SQL_TAB': '{{ _('SQL') }}',
'SQL_NO_CHANGE': '\n -- ' + '{{ _('Nothing changed') }}',
'MUST_BE_INT' : " {{ _("'%%s' must be an integer.") }}",
'MUST_BE_NUM' : " {{ _("'%%s' must be a numeric.") }}",
'MUST_GR_EQ' : " {{ _("'%%s' must be greater than or equals to %%d.") }}",
'MUST_LESS_EQ' : " {{ _("'%%s' must be less than or equals to %%d.") }}"
}

View File

@ -67,7 +67,7 @@
var controlMapper = Backform.controlMapper = {
'int': ['uneditable-input', 'integer', 'integer'],
'text': ['uneditable-input', 'input', 'string'],
'numeric': ['uneditable-input', 'input', 'number'],
'numeric': ['uneditable-input', 'numeric', 'numeric'],
'date': 'datepicker',
'boolean': 'boolean',
'options': ['readonly-option', 'select', Backgrid.Extension.PGSelectCell],
@ -1290,6 +1290,109 @@
this.stopListening(this.model, "change:" + name, this.render);
this.model.set(name, value);
this.listenTo(this.model, "change:" + name, this.render);
} else {
if (this.model.collection || this.model.handler) {
(this.model.collection || this.model.handler).trigger(
'pgadmin-session:model:invalid', this.model.errorModel.get(name), this.model
);
} else {
(this.model).trigger(
'pgadmin-session:invalid', this.model.errorModel.get(name), this.model
);
}
}
}
});
/*
* Numeric input Control functionality just like backgrid
*/
var NumericControl = Backform.NumericControl = Backform.InputControl.extend({
defaults: {
type: "number",
label: "",
min: undefined,
max: undefined,
maxlength: 255,
extraClasses: [],
helpMessage: null
},
template: _.template([
'<label class="<%=Backform.controlLabelClassName%>"><%=label%></label>',
'<div class="<%=Backform.controlsClassName%>">',
' <input type="<%=type%>" class="<%=Backform.controlClassName%> <%=extraClasses.join(\' \')%>" name="<%=name%>" min="<%=min%>" max="<%=max%>"maxlength="<%=maxlength%>" value="<%-value%>" placeholder="<%-placeholder%>" <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
' <% if (helpMessage && helpMessage.length) { %>',
' <span class="<%=Backform.helpMessageClassName%>"><%=helpMessage%></span>',
' <% } %>',
'</div>'
].join("\n")),
events: {
"change input": "checkNumeric",
"focus input": "clearInvalid"
},
checkNumeric: function(e) {
var field = _.defaults(this.field.toJSON(), this.defaults),
attrArr = this.field.get("name").split('.'),
name = attrArr.shift(),
value = this.getValueFromDOM(),
min_value = field.min,
max_value = field.max,
isValid = true,
intPattern = new RegExp("^-?[0-9]+(\.?[0-9]*)?$"),
isMatched = intPattern.test(value);
// Below logic will validate input
if (!isMatched) {
isValid = false;
this.model.errorModel.unset(name);
this.model.errorModel.set(
name,
S(pgAdmin.Browser.messages.MUST_BE_NUM).sprintf(
field.label
).value()
);
}
// Below will check if entered value is in-between min & max range
if (isValid && (!_.isUndefined(min_value) && value < min_value)) {
isValid = false;
this.model.errorModel.unset(name);
this.model.errorModel.set(
name,
S(pgAdmin.Browser.messages.MUST_GR_EQ).sprintf(
field.label,
min_value
).value()
);
}
if (isValid && (!_.isUndefined(max_value) && value > max_value)) {
isValid = false;
this.model.errorModel.unset(name);
this.model.errorModel.set(
name,
S(pgAdmin.Browser.messages.MUST_LESS_EQ).sprintf(
field.label,
max_value
).value()
);
}
// After validation we need to set that value into model (only if all flags are true)
if (isValid) {
this.stopListening(this.model, "change:" + name, this.render);
this.model.set(name, value);
this.listenTo(this.model, "change:" + name, this.render);
} else {
if (this.model.collection || this.model.handler) {
(this.model.collection || this.model.handler).trigger(
'pgadmin-session:model:invalid', this.model.errorModel.get(name), this.model
);
} else {
(this.model).trigger(
'pgadmin-session:invalid', this.model.errorModel.get(name), this.model
);
}
}
}
});