IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2025-02-25 18:55:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

Improvements in the form/properties dialog control generation, and data

Browse Source 
change events.

- In input & textarea control, call the change event on key up (but -
  not on every key up events, wait for sometime before trigger that
  event, so that - we do not overdo that).
- In unique/subnode control, whenever we create new model object, set
  all the required static fields used by pgAdmin form generation logic.
- In NodeAjaxListCell, we don't need to call the list generation
  operation (ajax operation) for each and every cell. They use the same
  shared column object.
This commit is contained in:
Ashesh Vashi 2016-03-15 18:58:16 +05:30
parent ff424850f8
commit b52a5736ff
2 changed files with 77 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
web/pgadmin/browser/static/js/node.ui.js
View File

@ -321,28 +321,25 @@ function($, _, pgAdmin, Backbone, Backform, Alertify, Node) {
initialize: function () { initialize: function () {
Backgrid.Extension.Select2Cell.prototype.initialize.apply(this, arguments); Backgrid.Extension.Select2Cell.prototype.initialize.apply(this, arguments);
var col = _.defaults(this.column.toJSON(), this.defaults), var url = this.column.get('url') || this.defaults.url,
model = this.model, column = this.column, options_cached = this.column.get('options_cached');
editable = Backgrid.callByNeed(col.editable, column, model),
optionValues = _.clone(this.optionValues || this.column.get('options'));
var self = this,
url = self.column.get('url') || self.defaults.url,
m = self.model.handler || self.model;
// Hmm - we found the url option. // Hmm - we found the url option.
// That means - we needs to fetch the options from that node. // That means - we needs to fetch the options from that node.
if (url) { if (url && !options_cached) {
var node = this.column.get('schema_node'),
node_info = this.column.get('node_info'), var self = this,
model = this.model, column = this.column,
eventHandler = model.top || model,
node = column.get('schema_node'),
node_info = column.get('node_info'),
full_url = node.generate_url.apply( full_url = node.generate_url.apply(
node, [ node, [
null, url, this.column.get('node_data'), null, url, column.get('node_data'),
this.column.get('url_with_id') || false, node_info column.get('url_with_id') || false, node_info
]), ]),
cache_level = this.column.get('cache_level') || node.type, cache_level = column.get('cache_level') || node.type,
cache_node = this.column.get('cache_node'); cache_node = column.get('cache_node');
cache_node = (cache_node && pgAdmin.Browser.Nodes['cache_node']) || node; cache_node = (cache_node && pgAdmin.Browser.Nodes['cache_node']) || node;
@ -353,9 +350,9 @@ function($, _, pgAdmin, Backbone, Backform, Alertify, Node) {
*/ */
var data = cache_node.cache(url, node_info, cache_level); var data = cache_node.cache(url, node_info, cache_level);
if (this.column.get('version_compatible') && if (column.get('version_compatible') &&
(_.isUndefined(data) || _.isNull(data))) { (_.isUndefined(data) || _.isNull(data))) {
m.trigger('pgadmin:view:fetching', m, self.column); eventHandler.trigger('pgadmin:view:fetching', m, column);
$.ajax({ $.ajax({
async: false, async: false,
url: full_url, url: full_url,
@ -367,10 +364,10 @@ function($, _, pgAdmin, Backbone, Backform, Alertify, Node) {
data = cache_node.cache(url, node_info, cache_level, res.data); data = cache_node.cache(url, node_info, cache_level, res.data);
}, },
error: function() { error: function() {
m.trigger('pgadmin:view:fetch:error', m, self.column); eventHandler.trigger('pgadmin:view:fetch:error', m, column);
} }
}); });
m.trigger('pgadmin:view:fetched', m, self.column); eventHandler.trigger('pgadmin:view:fetched', m, column);
} }
// To fetch only options from cache, we do not need time from 'at' // To fetch only options from cache, we do not need time from 'at'
// attribute but only options. // attribute but only options.
@ -381,15 +378,16 @@ function($, _, pgAdmin, Backbone, Backform, Alertify, Node) {
/* /*
* Transform the data * Transform the data
*/ */
transform = this.column.get('transform') || self.defaults.transform; transform = column.get('transform') || self.defaults.transform;
if (transform && _.isFunction(transform)) { if (transform && _.isFunction(transform)) {
// We will transform the data later, when rendering. // We will transform the data later, when rendering.
// It will allow us to generate different data based on the // It will allow us to generate different data based on the
// dependencies. // dependencies.
self.column.set('options', transform.bind(self, data)); column.set('options', transform.bind(self, data));
} else { } else {
self.column.set('options', data); column.set('options', data);
} }
column.set('options_cached', true);
} }
}, },
render: function() { render: function() {

89
web/pgadmin/static/js/backform.pgadmin.js
View File

@ -240,11 +240,24 @@
* Override the input control events in order to reslove the issue related to * Override the input control events in order to reslove the issue related to
* not updating the value sometimes in the input control. * not updating the value sometimes in the input control.
*/ */
Backform.InputControl.prototype.events = { _.extend(
"change input": "onChange", Backform.InputControl.prototype, {
"blur input": "onChange", events: {
"focus input": "clearInvalid" "change input": "onChange",
}; "blur input": "onChange",
"keyup input": "onKeyUp",
"focus input": "clearInvalid"
},
onKeyUp: function(ev) {
if (this.key_timeout) {
clearTimeout(this.key_timeout);
}
this.keyup_timeout = setTimeout(function() {
this.onChange(ev);
}.bind(this), 400);
}
});
/* /*
* Override the textarea control events in order to resolve the issue related * Override the textarea control events in order to resolve the issue related
@ -255,32 +268,40 @@
* http://stackoverflow.com/questions/11338592/how-can-i-bind-to-the-change-event-of-a-textarea-in-jquery * http://stackoverflow.com/questions/11338592/how-can-i-bind-to-the-change-event-of-a-textarea-in-jquery
*/ */
_.extend( _.extend(
Backform.TextareaControl.prototype, { Backform.TextareaControl.prototype, {
defaults: _.extend( defaults: _.extend(
Backform.TextareaControl.prototype.defaults, { Backform.TextareaControl.prototype.defaults, {rows: 5}
rows: 5 ),
}), events : {
events : { "change textarea": "onChange",
"change textarea": "onChange", "keyup textarea": "onKeyUp",
"keyup textarea": "onChange", "paste textarea": "onChange",
"paste textarea": "onChange", "selectionchange textarea": "onChange",
"selectionchange textarea": "onChange", "focus textarea": "clearInvalid"
"focus textarea": "clearInvalid" },
}, template: _.template([
template: _.template([ '<label class="<%=Backform.controlLabelClassName%>"><%=label%></label>',
'<label class="<%=Backform.controlLabelClassName%>"><%=label%></label>', '<div class="<%=Backform.controlsClassName%>">',
'<div class="<%=Backform.controlsClassName%>">', ' <textarea ',
' <textarea ', ' class="<%=Backform.controlClassName%> <%=extraClasses.join(\' \')%>" name="<%=name%>"',
' class="<%=Backform.controlClassName%> <%=extraClasses.join(\' \')%>" name="<%=name%>"', ' maxlength="<%=maxlength%>" placeholder="<%-placeholder%>" <%=disabled ? "disabled" : ""%>',
' maxlength="<%=maxlength%>" placeholder="<%-placeholder%>" <%=disabled ? "disabled" : ""%>', ' rows=<%=rows ? rows : ""%>',
' rows=<%=rows ? rows : ""%>', ' <%=required ? "required" : ""%>><%-value%></textarea>',
' <%=required ? "required" : ""%>><%-value%></textarea>', ' <% if (helpMessage && helpMessage.length) { %>',
' <% if (helpMessage && helpMessage.length) { %>', ' <span class="<%=Backform.helpMessageClassName%>"><%=helpMessage%></span>',
' <span class="<%=Backform.helpMessageClassName%>"><%=helpMessage%></span>', ' <% } %>',
' <% } %>', '</div>'
'</div>' ].join("\n")),
].join("\n")) onKeyUp: function(ev) {
}); if (this.key_timeout) {
clearTimeout(this.key_timeout);
}
this.keyup_timeout = setTimeout(function() {
this.onChange(ev);
}.bind(this), 400);
}
});
/* /*
* Overriding the render function of the select control to allow us to use * Overriding the render function of the select control to allow us to use
@ -748,7 +769,7 @@
// Check if unique columns provided are also in model attributes. // Check if unique columns provided are also in model attributes.
if (uniqueCol.length > _.intersection(columns, uniqueCol).length) { if (uniqueCol.length > _.intersection(columns, uniqueCol).length) {
errorMsg = "Developer: Unique column/s [ "+_.difference(uniqueCol, columns)+" ] not found in collection model [ " + columns +" ]." errorMsg = "Developer: Unique columns [ "+_.difference(uniqueCol, columns)+" ] not found in collection model [ " + columns +" ]."
alert (errorMsg); alert (errorMsg);
} }
@ -1000,7 +1021,9 @@
var m = new (data.model) (null, { var m = new (data.model) (null, {
silent: true, silent: true,
handler: self.model.handler || self.model, handler: self.model.handler || self.model,
top: self.model.top || self.model top: self.model.top || self.model,
node_info: self.model.node_info,
collection: collection
}); });
collection.add(m); collection.add(m);