Create the status-bar in the properties dialog, and it will listen for

on-status event from the model.

web/pgadmin/browser/templates/browser/js/node.js

@@ -85,6 +85,7 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, Backform) {
     // Used to generate view for the particular node properties, edit,
     // creation.
     getView: function(item, type, el, node, formType, callback, data) {
+      var that = this;
 
       if (!this.type || this.type == '')
         // We have no information, how to generate view for this type.
@@ -117,6 +118,11 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, Backform) {
             info = this.getTreeNodeHierarchy.apply(this, [item]),
             groups = Backform.generateViewSchema(info, newModel, type, this, node);
 
+        if (type == 'create' || type == 'edit'){
+          newModel.on('on-status', function(e){
+            that.statusBar.html(e.msg);
+          });
+        }
         // 'schema' has the information about how to generate the form.
         if (groups) {
           var fields = [];
@@ -487,8 +493,22 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, Backform) {
         view = j.data('obj-view'),
         content = $('<div tabindex="1"></div>')
           .addClass('pg-prop-content col-xs-12'),
+
+        // Template function to create the status bar
+        createStatusBar = function(location){
+            var statusBar = $('<div></div>').addClass(
+                      'pg-prop-status-bar'
+                      ).appendTo(j);
+            if (location == "header") {
+                statusBar.appendTo(that.header);
+            } else {
+                statusBar.prependTo(that.footer);
+            }
+            that.statusBar = statusBar;
+            return statusBar;
+        },
         // Template function to create the button-group
-        createButtons = function(buttons, extraClasses) {
+        createButtons = function(buttons, location, extraClasses) {
           // arguments must be non-zero length array of type
           // object, which contains following attributes:
           // label, type, extraClasses, register
@@ -498,7 +518,7 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, Backform) {
             var btnGroup =
               $('<div></div>').addClass(
                   'pg-prop-btn-group'
-                  ).appendTo(j),
+                  ),
               // Template used for creating a button
               tmpl = _.template([
                 '<button type="<%= type %>" ',
@@ -506,6 +526,11 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, Backform) {
                 '<i class="<%= icon %>"></i>&nbsp;',
                 '<%-label%></button>'
                 ].join(' '));
+            if (location == "header"){
+                btnGroup.appendTo(that.header);
+            }else{
+                btnGroup.appendTo(that.footer);
+            }
             if (extraClasses) {
               btnGroup.addClass(extraClasses);
             }
@@ -546,12 +571,23 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, Backform) {
           }
           // Make sure the HTML element is empty.
           j.empty();
+          that.header = $('<div></div>').addClass(
+                      'pg-prop-header'
+                      ).appendTo(j);
+          that.footer = $('<div></div>').addClass(
+                      'pg-prop-footer'
+                      ).appendTo(j);
           // Create a view to show the properties in fieldsets
           view = that.getView(item, 'properties', content, data, 'fieldset');
           if (view) {
             // Save it for release it later
             j.data('obj-view', view);
+
+            // Create status bar
+            createStatusBar('footer');
+
             // Create proper buttons
+
             var buttons = [];
             buttons.push({
               label: '{{ _("Edit") }}', type: 'edit',
@@ -563,7 +599,7 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, Backform) {
                 });
               }
             });
-            createButtons(buttons, 'pg-prop-btn-group-above');
+            createButtons(buttons, 'header', 'pg-prop-btn-group-above');
           }
           j.append(content);
         },
@@ -586,6 +622,13 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, Backform) {
           // Make sure the HTML element is empty.
           j.empty();
 
+          that.header = $('<div></div>').addClass(
+                      'pg-prop-header'
+                      ).appendTo(j)
+          that.footer = $('<div></div>').addClass(
+                      'pg-prop-footer'
+                      ).appendTo(j);
+
           var modelChanged = function(m, o) {
             var btnGroup = o.find('.pg-prop-btn-group'),
                 btnSave = btnGroup.find('button[type="save"]'),
@@ -620,7 +663,6 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, Backform) {
                 btn.click(function() {
                   var m = view.model,
                     d = m.toJSON(true);
-
                   if (d && !_.isEmpty(d)) {
                     m.save({}, {
                       attrs: d,
@@ -660,9 +702,12 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, Backform) {
                   setTimeout(function() { editFunc.call(); }, 0);
                 });
               }
-            }], 'pg-prop-btn-group-below');
+            }],'footer' ,'pg-prop-btn-group-below');
           };
 
+          // Create status bar.
+          createStatusBar('footer');
+
           // Add some space, so that - button group does not override the
           // space
           content.addClass('pg-prop-has-btn-group-below');
@@ -930,7 +975,7 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, Backform) {
             delete res['deleted'];
           }
 
-          return (_.size(res) == 0 ? null : res);
+          return (_.size(res) == 0 ? null : JSON.stringify(res));
         }
       },
       onModelAdd: function(obj) {
@@ -1227,7 +1272,7 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, Backform) {
 
         _.each(self.objects, function(k) {
           var obj = self.get(k);
-          res[k] = (obj && obj.toJSON(session));
+          res[k] = (obj && JSON.stringify(obj.toJSON(session)));
           });
         return res;
       },

web/pgadmin/static/css/overrides.css

@@ -189,7 +189,7 @@ iframe {
 
 .obj_properties .backform-tab {
     position: absolute;
-    margin: 0px 0px 80px;
+    margin: 0px 0px 110px;
     padding: 0px;
     top: 0px;
     bottom: 0px;
@@ -356,7 +356,6 @@ iframe {
 }
 
 .pg-prop-btn-group {
-    position: absolute;
     text-align: right;
     background-color: #D2D2D2;
     border: 2px solid #A9A9A9;
@@ -364,12 +363,7 @@ iframe {
     right: 0px;
 }
 
-.pg-prop-btn-group-above {
-    top: 0px;
-}
-
 .pg-prop-btn-group-below {
-    bottom: 0px;
     border-color: #A9A9A9;
     border-width: 2px 1px 0px;
     border-style: inset;
@@ -595,3 +589,25 @@ table.backgrid tr.new {
 .width_percent_60 {
 	width: 60%;
 }
+
+.pg-prop-status-bar {
+    left: 0px;
+    right: 0px;
+    background-color: #d2d2d2;
+    color: #b92c28;
+	padding: 5px;
+}
+
+.pg-prop-header {
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    top :0;
+}
+
+.pg-prop-footer{
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    bottom :0;
+}