From 2c6ca7d82ce403fe64652b2ea92fb5b66286a634 Mon Sep 17 00:00:00 2001
From: Ashesh Vashi <ashesh.vashi@enterprisedb.com>
Date: Sat, 21 May 2016 15:41:35 +0530
Subject: [PATCH] Changed the Select2Control to work more consistently.

---
 web/pgadmin/browser/static/js/node.ui.js  | 104 +------------------
 web/pgadmin/static/css/overrides.css      |   5 +
 web/pgadmin/static/js/backform.pgadmin.js | 117 ++++++++++++++++++++--
 3 files changed, 114 insertions(+), 112 deletions(-)

diff --git a/web/pgadmin/browser/static/js/node.ui.js b/web/pgadmin/browser/static/js/node.ui.js
index 7e8493512..90c9ada56 100644
--- a/web/pgadmin/browser/static/js/node.ui.js
+++ b/web/pgadmin/browser/static/js/node.ui.js
@@ -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,
diff --git a/web/pgadmin/static/css/overrides.css b/web/pgadmin/static/css/overrides.css
index 711e14529..428a534d7 100755
--- a/web/pgadmin/static/css/overrides.css
+++ b/web/pgadmin/static/css/overrides.css
@@ -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;
 }
diff --git a/web/pgadmin/static/js/backform.pgadmin.js b/web/pgadmin/static/js/backform.pgadmin.js
index 1d5a5a68c..496f15345 100644
--- a/web/pgadmin/static/js/backform.pgadmin.js
+++ b/web/pgadmin/static/js/backform.pgadmin.js
@@ -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
+      );
     }
   });