Hi,
PFA backform control for selecting multiple columns.(This control depends
on column node.)
Usage:
{
id: 'columns', label: '{{ _('Columns') }}',
type: 'collection', group: '{{ _('Definition') }}', editable:true,
canDelete: true, canAdd: true, control: Backform.MultiColumnSelectControl,
deps: ['index'], node: 'column',
model: pgBrowser.Node.Model.extend({
keys: ['column'],
defaults: {
column: undefined
}
})
}
Note: When using this control model should have *column* attribute. And
node property should be *column*.
--
*Harshal Dhumal*
*Software Engineer *
EenterpriseDB <http://www.enterprisedb.com>
diff --git a/web/pgadmin/browser/static/js/node.ui.js b/web/pgadmin/browser/static/js/node.ui.js
index b84b6ee..500d49b 100644
--- a/web/pgadmin/browser/static/js/node.ui.js
+++ b/web/pgadmin/browser/static/js/node.ui.js
@@ -558,6 +558,145 @@ function($, _, pgAdmin, Backbone, Backform, Alertify, Node) {
})
});
+ /*
+ * Control to select multiple columns.
+ */
+ var MultiColumnSelectControl = Backform.MultiColumnSelectControl = Backform.NodeListByNameControl.extend({
+ formatter: {
+ fromRaw: function (rawData, model) {
+ var res = _.isObject(rawData) ? rawData : JSON.parse(rawData);
+
+ return _.pluck(res, 'column');
+ },
+ toRaw: function (formattedData, model) {
+ return formattedData;
+ }
+ },
+ template: _.template([
+ '<label class="control-label col-xs-12"><%=label%></label>',
+ '<div class="pgadmin-controls col-xs-12">',
+ ' <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")),
+ events: {"change select": "onChange"},
+ getValueFromDOM: function() {
+ var res = [];
+
+ this.$el.find("select").find(':selected').each(function() {
+ res.push($(this).attr('value'));
+ });
+
+ return res;
+ },
+ render: function() {
+ var field = _.defaults(this.field.toJSON(), this.defaults),
+ attrArr = field.name.split('.'),
+ name = attrArr.shift(),
+ path = attrArr.join('.'),
+ data = _.extend(field),
+ evalF = function(f, d, m) {
+ return (_.isFunction(f) ? !!f.apply(d, [m]) : !!f);
+ };
+
+ // 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)
+ });
+
+ var attributes = this.model.toJSON(),
+ rawValue = this.keyPathAccessor(attributes[name], path);
+
+ data = _.extend(data, {
+ rawValue: rawValue,
+ value: this.formatter.fromRaw(rawValue, this.model),
+ attributes: attributes,
+ formatter: this.formatter
+ })
+ // Evaluation the options
+ if (_.isFunction(data.options)) {
+ try {
+ data.options = data.options.apply(this)
+ } catch(e) {
+ // Do nothing
+ data.options = []
+ this.model.trigger('pgadmin-view:transform:error', m, self.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);
+ this.updateInvalid();
+
+ var self = this,
+ collection = this.model.get(this.field.get('name'));
+
+ this.$el.find('select').select2({
+ multiple: true,
+ allowClear: true,
+ placeholder: "Select column/s",
+ width: 'style'
+ }).on("change", function(e) {
+ $(e.target).find(':selected').each(function() {
+ });
+ });
+ return this;
+ },
+ onChange: function(e) {
+ var model = this.model,
+ $el = $(e.target),
+ attrArr = this.field.get("name").split('.'),
+ name = attrArr.shift(),
+ path = attrArr.join('.'),
+ vals = this.getValueFromDOM(),
+ collection = model.get(name),
+ removed = [];
+
+ this.stopListening(this.model, "change:" + name, this.render);
+
+ /*
+ * Iterate through all the values, and find out how many are already
+ * present in the collection.
+ */
+ collection.each(function(m) {
+ var column = m.get('column'),
+ idx = _.indexOf(vals, column);
+
+ if (idx > -1) {
+ vals.splice(idx, 1);
+ } else {
+ removed.push(column);
+ }
+ });
+
+ /*
+ * Adding new values
+ */
+ _.each(vals, function(v) {
+ collection.add({column: v});
+ });
+
+ /*
+ * Removing unwanted!
+ */
+ _.each(removed, function(v) {
+ collection.remove(collection.where({column: v}));
+ });
+
+ this.listenTo(this.model, "change:" + name, this.render);
+ }
+ });
return Backform;
});
--
Sent via pgadmin-hackers mailing list (pgadmin-hackers@postgresql.org)
To make changes to your subscription:
http://www.postgresql.org/mailpref/pgadmin-hackers
