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

Changed the Select2Control to work more consistently.

Browse Source
This commit is contained in:
Ashesh Vashi 2016-05-21 15:41:35 +05:30
parent b2b6d443b5
commit 2c6ca7d82c
3 changed files with 114 additions and 112 deletions
web/pgadmin
browser/static/js
node.ui.js
static
css
overrides.css
js
backform.pgadmin.js

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

@ -4,23 +4,6 @@ function($, _, pgAdmin, Backbone, Backform, Alertify, Node) {
var pgBrowser = pgAdmin.Browser;
// Store value in DOM as stringified JSON.
var StringOrJSONFormatter = function() {};
_.extend(StringOrJSONFormatter.prototype, {
fromRaw: function(rawData, model) {
return JSON.stringify(_.escape(rawData));
},
toRaw: function(formattedData, model) {
if (typeof(formattedData) == 'string') {
return _.unescape(formattedData);
}
if (formattedData instanceof Array) {
return JSON.stringify(JSON.parse(JSON.stringify(formattedData)));
}
return JSON.parse(formattedData);
}
});
/*
* NodeAjaxOptionsControl
* This control will fetch the options required to render the select
@ -34,38 +17,22 @@ function($, _, pgAdmin, Backbone, Backform, Alertify, Node) {
* data to proper 'label', 'value' format.
*/
var NodeAjaxOptionsControl = Backform.NodeAjaxOptionsControl =
Backform.SelectControl.extend({
defaults: _.extend(Backform.SelectControl.prototype.defaults, {
Backform.Select2Control.extend({
defaults: _.extend(Backform.Select2Control.prototype.defaults, {
url: undefined,
transform: undefined,
url_with_id: false,
first_empty: false,
empty_value: '-- None --',
select2: {
allowClear: true,
placeholder: 'Select from the list',
width: 'style'
}
}),
template: _.template([
'<label class="<%=Backform.controlLabelClassName%>"><%=label%></label>',
'<div class="<%=Backform.controlsClassName%> <%=extraClasses.join(\' \')%>">',
' <select class="pgadmin-node-select form-control" name="<%=name%>" style="width:100%;" value="<%-value%>" <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> >',
' <% if (first_empty) { %>',
' <option value="" <%="" === rawValue ? "selected" : "" %>><%- empty_value %></option>',
' <% } %>',
' <% for (var i=0; i < options.length; i++) { %>',
' <% var option = options[i]; %>',
' <option <% if (option.image) { %> data-image=<%= option.image %> <% } %> value=<%= formatter.fromRaw(option.value) %> <%=option.value === rawValue ? "selected=\'selected\'" : "" %>><%-option.label%></option>',
' <% } %>',
' </select>',
'</div>'].join("\n")),
formatter: StringOrJSONFormatter,
initialize: function() {
/*
* Initialization from the original control.
*/
Backform.SelectControl.prototype.initialize.apply(this, arguments);
Backform.Select2Control.prototype.initialize.apply(this, arguments);
/*
* We're about to fetch the options required for this control.
@ -140,41 +107,6 @@ function($, _, pgAdmin, Backbone, Backform, Alertify, Node) {
self.field.set('options', data);
}
}
},
render: function() {
if(this.$sel && this.$sel.select2) {
this.$sel.select2('destroy')
}
/*
* Let SelectControl render it, we will do our magic on the
* select control in it.
*/
Backform.SelectControl.prototype.render.apply(this, arguments);
var d = this.field.toJSON(),
select2_opts = _.defaults({}, d.select2, this.defaults.select2),
evalF = function(f, d, m) {
return (_.isFunction(f) ? !!f.apply(d, [m]) : !!f);
};
/*
* If select2 options do not have any disabled property on this field
* and schema has disabled property then we need to apply it
*/
if(!_.has(select2_opts, 'disabled') && (d && d.disabled)) {
_.extend(select2_opts, {disabled: evalF(d.disabled, d, this.model)
});
}
/*
* Add empty option as Select2 requires any empty '<option><option>' for
* some of its functionality to work and initialize select2 control.
*/
this.$sel = this.$el.find("select").select2(select2_opts);
return this;
}
});
@ -199,8 +131,6 @@ function($, _, pgAdmin, Backbone, Backform, Alertify, Node) {
var NodeListByIdControl = Backform.NodeListByIdControl = NodeAjaxOptionsControl.extend({
controlClassName: 'pgadmin-node-select form-control',
defaults: _.extend({}, NodeAjaxOptionsControl.prototype.defaults, {
first_empty: true,
empty_value: '-- None --',
url: 'nodes',
filter: undefined,
transform: function(rows) {
@ -537,34 +467,6 @@ function($, _, pgAdmin, Backbone, Backform, Alertify, Node) {
* Control to select multiple columns.
*/
var MultiSelectAjaxControl = Backform.MultiSelectAjaxControl = NodeAjaxOptionsControl.extend({
formatter: {
fromRaw: function (rawData, model) {
return (_.isUndefined(rawData) || _.isObject(rawData)) ? rawData : JSON.parse(rawData);
},
toRaw: function (formattedData, model) {
return formattedData;
}
},
template: _.template([
'<label class="control-label col-sm-4"><%=label%></label>',
'<div class="pgadmin-controls col-sm-8">',
' <select multiple="multiple" style="width:100%;" class="pgadmin-controls <%=extraClasses.join(\' \')%>" name="<%=name%>" value="<%-JSON.stringify(value)%>" <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%>>',
' <% for (var i=0; i < options.length; i++) { %>',
' <% var option = options[i]; %>',
' <option value=<%-option.value%> <%=value != null && _.indexOf(value, option.value) != -1 ? "selected" : ""%> <%=option.disabled ? "disabled=\'disabled\'" : ""%>><%-option.label%></option>',
' <% } %>',
' </select>',
'</div>'
].join("\n")),
getValueFromDOM: function() {
var res = [];
this.$el.find("select").find(':selected').each(function() {
res.push($(this).attr('value'));
});
return res;
},
defaults: _.extend({}, NodeAjaxOptionsControl.prototype.defaults, {
select2: {
multiple: true,

5
web/pgadmin/static/css/overrides.css
View File

@ -263,6 +263,10 @@ iframe {
padding: 3px 6px !important;
}
.pgadmin-controls > span.select2 {
width: 100%;
}
.obj_properties fieldset > div > .pgadmin-control-group > label {
min-height: 28px;
}
@ -820,6 +824,7 @@ td.edit-cell.editable.sortable.renderable.editor {
.subnode > table.backgrid > thead > tr > th:last-child{
border-right-color: #2C76B4;
}
.select2-container .select2-selection--single .select2-selection__rendered{
padding-left: 5px;
}

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

@ -600,13 +600,13 @@
if (opts && opts.data) {
if (this.model) {
if (this.model.reset) {
this.model.reset();
this.model.reset({validate: false, silent: true, stop: true});
}
this.model.clear({silent: true});
this.model.clear({validate: false, silent: true, stop: true});
delete (this.model);
}
if (this.errorModel) {
this.errorModel.clear({silent: true});
this.errorModel.clear({validate: false, silent: true, stop: true});
delete (this.errorModel);
}
}
@ -1786,30 +1786,125 @@
return fields;
};
var Select2Formatter = function() {};
_.extend(Select2Formatter.prototype, {
fromRaw: function(rawData, model) {
return JSON.stringify(_.escape(rawData));
},
toRaw: function(formattedData, model) {
return formattedData;
}
});
/*
* Backform Select2 control.
*/
var Select2Control = Backform.Select2Control = Backform.SelectControl.extend({
defaults: _.extend({}, Backform.SelectControl.prototype.defaults, {
select2: {
first_empty: true,
multiple: false
}
}),
formatter: Select2Formatter,
template: _.template([
'<label class="<%=Backform.controlLabelClassName%>"><%=label%></label>',
'<div class="<%=Backform.controlsClassName%>">',
' <select class="<%=Backform.controlClassName%> <%=extraClasses.join(\' \')%>"',
' name="<%=name%>" value="<%-value%>" <%=disabled ? "disabled" : ""%>',
' <%=required ? "required" : ""%><%= select2.multiple ? " multiple>" : ">" %>',
' <%=select2.first_empty ? " <option></option>" : ""%>',
' <% for (var i=0; i < options.length; i++) {%>',
' <% var option = options[i]; %>',
' <option ',
' <% if (option.image) { %> data-image=<%=option.image%> <%}%>',
' value=<%= formatter.fromRaw(option.value) %>',
' <% if (!select2.multiple && option.value === rawValue) {%>selected="selected"<%}%>',
' <% if (select2.multiple && rawValue && rawValue.indexOf(option.value) != -1){%>selected="selected" data-index="rawValue.indexOf(option.value)"<%}%>',
' <%= disabled ? "disabled" : ""%>><%-option.label%></option>',
' <%}%>',
' </select>',
' <% if (helpMessage && helpMessage.length) { %>',
' <span class="<%=Backform.helpMessageClassName%>"><%=helpMessage%></span>',
' <% } %>',
'</div>'
].join("\n")),
render: function() {
if(this.$sel && this.$sel.select2) {
this.$sel.select2('destroy')
}
Backform.SelectControl.prototype.render.apply(this, arguments);
var opts = this.field.toJSON();
var select2Opts = _.defaults(
{}, opts.select2, (this.defaults && this.defaults.select2) || {}
);
var field = _.defaults(this.field.toJSON(), this.defaults),
attributes = this.model.toJSON(),
attrArr = field.name.split('.'),
name = attrArr.shift(),
path = attrArr.join('.'),
rawValue = this.keyPathAccessor(attributes[name], path),
data = _.extend(field, {
rawValue: rawValue,
value: this.formatter.fromRaw(rawValue, this.model),
attributes: attributes,
formatter: this.formatter
}),
evalF = function(f, d, m) {
return (_.isFunction(f) ? !!f.apply(d, [m]) : !!f);
};
data.select2 = data.select2 || {};
_.defaults(data.select2, this.defaults.select2, {
first_empty: true,
multiple: false
});
// Evaluate the disabled, visible, and required option
_.extend(data, {
disabled: evalF(data.disabled, data, this.model),
visible: evalF(data.visible, data, this.model),
required: evalF(data.required, data, this.model)
});
// Evaluation the options
if (_.isFunction(data.options)) {
try {
data.options = data.options(this)
} catch(e) {
// Do nothing
data.options = []
this.model.trigger(
'pgadmin-view:transform:error', this.model, this.field, e
);
}
}
// Clean up first
this.$el.removeClass(Backform.hiddenClassname);
if (!data.visible)
this.$el.addClass(Backform.hiddenClassname);
this.$el.html(this.template(data)).addClass(field.name);
var select2Opts = _.extend({
disabled: data.disabled
}, field.select2, {
options: (this.field.get('options') || this.defaults.options)
});
/*
* Add empty option as Select2 requires any empty '<option><option>' for
* some of its functionality to work and initialize select2 control.
*/
var $select = this.$el.find("select");
$select.prepend($('<option></option>'));
this.$sel = $select.select2(select2Opts);
this.$sel = this.$el.find("select").select2(select2Opts);
this.updateInvalid();
return this;
},
getValueFromDOM: function() {
return Backform.SelectControl.prototype.getValueFromDOM.apply(
this, arguments
);
}
});