Subject: patch for RM1460 [pgAdmin4]

From: Harshal Dhumal <[email-masked]>
Date: Wed, 20 Jul 2016 17:42:57 +0530

Hi,

PFA patch for RM1460

Changes:
- Opening a file should set the tab name to the filename
- Editing a file should add a * to the tab name to indicate the file is
dirty
- Saving changes to a file should clear the *
- The Save button should have a drop-down menu, with a Save As option.

-- 
*Harshal Dhumal*
*Software Engineer*

EnterpriseDB India: http://www.enterprisedb.com
The Enterprise PostgreSQL Company
diff --git a/web/pgadmin/tools/datagrid/templates/datagrid/index.html b/web/pgadmin/tools/datagrid/templates/datagrid/index.html
index 67cf107..1611887 100644
--- a/web/pgadmin/tools/datagrid/templates/datagrid/index.html
+++ b/web/pgadmin/tools/datagrid/templates/datagrid/index.html
@@ -30,6 +30,22 @@
                 <button id="btn-save" type="button" class="btn btn-default" title="{{ _('Save') }}" disabled>
                     <i class="fa fa-floppy-o" aria-hidden="true"></i>
                 </button>
+                <button id="btn-file-menu-dropdown" type="button" class="btn btn-default dropdown-toggle"
+                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled>
+                    <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span>
+                </button>
+                <ul class="dropdown-menu">
+                    <li>
+                        <a id="btn-file-menu-save" href="#">
+                            <span>{{ _('Save') }}</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a id="btn-file-menu-save-as" href="#">
+                            <span>{{ _('Save as') }}</span>
+                        </a>
+                    </li>
+                </ul>
             </div>
             <div class="btn-group" role="group" aria-label="">
                 <button id="btn-copy-row" type="button" class="btn btn-default" title="{{ _('Copy Row') }}" disabled>
diff --git a/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js b/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
index 5544135..6db2310 100644
--- a/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
+++ b/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
@@ -152,6 +152,8 @@ define(
       events: {
         "click .btn-load-file": "on_file_load",
         "click #btn-save": "on_save",
+        "click #btn-file-menu-save": "on_save",
+        "click #btn-file-menu-save-as": "on_save_as",
         "click #btn-add-row": "on_add",
         "click #btn-filter": "on_show_filter",
         "click #btn-include-filter": "on_include_filter",
@@ -713,6 +715,22 @@ define(
         );
       },
 
+      // Callback function for Save button click.
+      on_save_as: function(ev) {
+        var self = this;
+
+        this._stopEventPropogation(ev);
+        this._closeDropDown(ev);
+
+        // Trigger the save signal to the SqlEditorController class
+        self.handler.trigger(
+            'pgadmin-sqleditor:button:save',
+            self,
+            self.handler,
+            true
+        );
+      },
+
       // Callback function for filter button click.
       on_show_filter: function() {
         var self = this;
@@ -1089,7 +1107,7 @@ define(
           // only in query editor tool
           if (self.is_query_tool) {
             self.get_preferences();
-            self.gridView.query_tool_obj.on('change', self._on_query_change, self);
+            self.gridView.query_tool_obj.on('change', self._on_query_change.bind(self));
           }
 
           // Listen on events come from SQLEditorView for the button clicked.
@@ -1183,8 +1201,8 @@ define(
                   $('#btn-filter').addClass('btn-default');
                   $('#btn-filter-dropdown').addClass('btn-default');
                 }
-
                 $("#btn-save").prop('disabled', true);
+                $("#btn-file-menu-dropdown").prop('disabled', true);
                 $("#btn-copy-row").prop('disabled', true);
                 $("#btn-paste-row").prop('disabled', true);
 
@@ -1345,6 +1363,7 @@ define(
           }
           else {
             $("#btn-save").prop('disabled', true);
+            $("#btn-file-menu-dropdown").prop('disabled', true);
             $("#btn-add-row").prop('disabled', true);
             $("#btn-copy-row").prop('disabled', true);
             $("#btn-paste-row").prop('disabled', true);
@@ -1750,10 +1769,12 @@ define(
           model.trigger('backgrid:row:mark:deletion', model);
 
           // Enable/Disable Save button
-          if (self.changedModels.length > 0)
+          if (self.changedModels.length > 0) {
             $("#btn-save").prop('disabled', false);
-          else
+          } else {
             $("#btn-save").prop('disabled', true);
+            $("#btn-file-menu-dropdown").prop('disabled', true);
+          }
         },
 
         /* This is a callback function when backgrid cell
@@ -1851,7 +1872,7 @@ define(
          * the ajax call to save the data into the database server.
          * and will open save file dialog conditionally.
          */
-        _save: function() {
+        _save: function(view, controller, save_as) {
           var self = this,
               data = [],
               save_data = true;
@@ -1860,7 +1881,7 @@ define(
           if (self.is_query_tool) {
 
             var current_file = self.gridView.current_file;
-            if (!_.isUndefined(current_file)) {
+            if (!_.isUndefined(current_file) && !save_as) {
               self._save_file_handler(current_file);
             }
             else {
@@ -1876,8 +1897,8 @@ define(
             }
             return;
           }
-
           $("#btn-save").prop('disabled', true);
+          $("#btn-file-menu-dropdown").prop('disabled', true);
           if (self.changedModels.length == 0)
             return;
 
@@ -1970,6 +1991,19 @@ define(
           }
         },
 
+        // Save as
+        _save_as: function() {
+          return this._save(true);
+        },
+
+        // Set panel title.
+        setTitle: function(title) {
+          _.each(window.top.pgAdmin.Browser.docker.findPanels('frm_datagrid'), function(p) {
+            if(p.isVisible()) {
+              p.title(title);
+            }
+          });
+        },
         // load select file dialog
         _load_file: function() {
           var params = {
@@ -1999,6 +2033,7 @@ define(
               if (res.data.status) {
                 self.gridView.query_tool_obj.setValue(res.data.result);
                 self.gridView.current_file = e;
+                self.setTitle(self.gridView.current_file.replace(/^\/|\/$/g, ''));
               }
             },
             error: function(e) {
@@ -2027,9 +2062,10 @@ define(
               if (res.data.status) {
                 alertify.success('{{ _('File saved successfully.') }}');
                 self.gridView.current_file = e;
-
+                self.setTitle(self.gridView.current_file.replace(/^\/|\/$/g, ''));
                 // disable save button on file save
                 $("#btn-save").prop('disabled', true);
+                $("#btn-file-menu-dropdown").prop('disabled', true);
               }
             },
             error: function(e) {
@@ -2041,12 +2077,17 @@ define(
 
         // codemirror text change event
         _on_query_change: function(query_tool_obj) {
-
+          var self = this;
           if(query_tool_obj.getValue().length == 0) {
             $("#btn-save").prop('disabled', true);
-          }
-          else {
+            $("#btn-file-menu-dropdown").prop('disabled', true);
+          } else {
+            if(self.gridView.current_file) {
+              var title = self.gridView.current_file.replace(/^\/|\/$/g, '') + ' *'
+              self.setTitle(title);
+            }
             $("#btn-save").prop('disabled', false);
+            $("#btn-file-menu-dropdown").prop('disabled', false);
           }
         },
 
@@ -2288,6 +2329,7 @@ define(
               new_model = null;
           if ('copied_model' in self && self.copied_model != null) {
             $("#btn-save").prop('disabled', false);
+            $("#btn-file-menu-dropdown").prop('disabled', false);
 
             // fullCollection is part of pageable collection
             var coll = self.collection.fullCollection === undefined ? self.collection : self.collection.fullCollection;

-- 
Sent via pgadmin-hackers mailing list ([email-masked])
To make changes to your subscription:
http://www.postgresql.org/mailpref/pgadmin-hackers

---

From: Dave Page <[email-masked]>
Date: Thu, 21 Jul 2016 13:48:20 +0100

Hi

Works nicely - committed!

One change I think we should make (please provide a patch when you get
a minute) is to always allow the dropdown menu and Save As to be used,
regardless of whether the file is dirty. Save should only be available
when there are changes of course.

Thanks!

On Wed, Jul 20, 2016 at 1:12 PM, Harshal Dhumal
<[email-masked]> wrote:
> Harshal Dhumal
> Software Engineer

-- 
Dave Page
Blog: http://pgsnake.blogspot.com
Twitter: @pgsnake

EnterpriseDB UK: http://www.enterprisedb.com
The Enterprise PostgreSQL Company

---

From: Harshal Dhumal <[email-masked]>
Date: Fri, 22 Jul 2016 14:56:35 +0530

Hi,

PFA attached patch to show save as option always and to show menu save
option only when file is changed.

-- 
*Harshal Dhumal*
*Software Engineer*

diff --git a/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js b/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
index 6db2310..8961c55 100644
--- a/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
+++ b/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
@@ -2065,7 +2065,7 @@ define(
                 self.setTitle(self.gridView.current_file.replace(/^\/|\/$/g, ''));
                 // disable save button on file save
                 $("#btn-save").prop('disabled', true);
-                $("#btn-file-menu-dropdown").prop('disabled', true);
+                $("#btn-file-menu-save").css('display', 'none');
               }
             },
             error: function(e) {
@@ -2080,6 +2080,7 @@ define(
           var self = this;
           if(query_tool_obj.getValue().length == 0) {
             $("#btn-save").prop('disabled', true);
+            $("#btn-file-menu-save").css('display', 'none');
             $("#btn-file-menu-dropdown").prop('disabled', true);
           } else {
             if(self.gridView.current_file) {
@@ -2087,6 +2088,7 @@ define(
               self.setTitle(title);
             }
             $("#btn-save").prop('disabled', false);
+            $("#btn-file-menu-save").css('display', 'block');
             $("#btn-file-menu-dropdown").prop('disabled', false);
           }
         },

---

From: Dave Page <[email-masked]>
Date: Fri, 22 Jul 2016 16:43:25 +0100

Hi

> option only when file is changed.

This doesn't seem to be working - if I open the query tool, write
something, and save the file, the Save button and drop-down menu are
then disabled so I cannot use Save As.

---

From: Harshal Dhumal <[email-masked]>
Date: Mon, 25 Jul 2016 11:43:40 +0530

Hi Dave,

Can you please try again with clean cache. Above mentioned scenario is
working fine for me.

Thanks.

-- 
*Harshal Dhumal*
*Software Engineer*

---

From: Dave Page <[email-masked]>
Date: Mon, 25 Jul 2016 12:55:49 +0100

Hi

I thought I had, but clearly that was not the case. It all works now -
committed.

Sorry for the noise.