Hi,

PFA updated patch,
1) Added Keyboard shortcuts to comment line, uncomment line and
comment/uncomment block of code also added drop-down for the same.
2) Also added options for indent & unindent code in the same drop-down.
3) Updated shortcut documents accordingly.

Please review.

On Mon, Jul 17, 2017 at 3:05 PM, Dave Page <dp...@pgadmin.org> wrote:

> Hi
>
> On Mon, Jul 17, 2017 at 10:31 AM, Murtuza Zabuawala <
> murtuza.zabuaw...@enterprisedb.com> wrote:
>
>> Hi Dave,
>>
>> On Mon, Jul 17, 2017 at 2:33 PM, Dave Page <dp...@pgadmin.org> wrote:
>>
>>> Hi
>>>
>>> On Wed, Jul 12, 2017 at 1:16 PM, Murtuza Zabuawala <
>>> murtuza.zabuaw...@enterprisedb.com> wrote:
>>>
>>>> Hi,
>>>>
>>>> PFA patch which will add functionality to allow user to
>>>> comment/uncomment code in query editor.
>>>> RM#2456
>>>>
>>>
>>> This is cool, but I'm not sure it's right as-is:
>>>
>>> * I prefer SQL style commenting, e.g.
>>>
>>> -- This is a comment
>>>
>>> Should we make that a config option if CodeMirror can do it? Or a
>>> different hotkey?
>>>
>>>
>> I'll check the extension code and update you accordingly, and It will be
>> good idea to keep the both the options because with large code block
>> current style works the best.
>>
>
> Right.
>
>
>> * You've added it as an option to the Clear XXX dropdown, which really
>>> isn't the right place in my opinion. Should we add a new drop down for
>>> this, and include some/all of the other Editing options on there? E.g.
>>> tab/shift-tab.
>>>
>>> I thought that is misc options dropdown for our editor, but I don't see
>> any point adding new drop down for one single option, Can we add new button
>> instead?
>>
>
> I think you missed this bit:  "and include some/all of the other Editing
> options on there? E.g. tab/shift-tab.". Essentially, we'd be adding an Edit
> menu...
>
>
>> * I think the docs should say Ctrl+Shift+/ rather than Shift+Ctrl+/, and
>>> be ordered in the table to reflect that. It seems more natural to me.
>>>
>>> Initially I wrote ctrl + shift + /only but when I saw all other
>> shortcuts starts with Shift , then I changed it to shift + ctrl + / :)
>>
>
> No they don't - Ctrl+Alt+Left for example. I believe it's normal to put
> Ctrl first, then Shift as it's a modifier.
>
>
>> Thoughts?
>>>
>>> --
>>> Dave Page
>>> Blog: http://pgsnake.blogspot.com
>>> Twitter: @pgsnake
>>>
>>> EnterpriseDB UK: http://www.enterprisedb.com
>>> The Enterprise PostgreSQL Company
>>>
>>
>>
>
>
> --
> Dave Page
> Blog: http://pgsnake.blogspot.com
> Twitter: @pgsnake
>
> EnterpriseDB UK: http://www.enterprisedb.com
> The Enterprise PostgreSQL Company
>
diff --git a/docs/en_US/keyboard_shortcuts.rst 
b/docs/en_US/keyboard_shortcuts.rst
index 2194d63..194a2c5 100644
--- a/docs/en_US/keyboard_shortcuts.rst
+++ b/docs/en_US/keyboard_shortcuts.rst
@@ -59,6 +59,12 @@ When using the syntax-highlighting SQL editors, the 
following shortcuts are avai
 
+--------------------------+------------------+-------------------------------------+
 | Shift+Tab                | Shift+Tab        | Un-indent selected text        
     |
 
+--------------------------+------------------+-------------------------------------+
+| Ctrl+Shift+,             | Ctrl+Shift+,     | Comment selected code (Inline) 
     |
++--------------------------+------------------+-------------------------------------+
+| Ctrl+Shift+.             | Ctrl+Shift+.     | Uncomment selected code 
(Inline)    |
++--------------------------+------------------+-------------------------------------+
+| Ctrl+Shift+/             | Ctrl+Shift+/     | Comment/Uncomment code (Block) 
     |
++--------------------------+------------------+-------------------------------------+
 
 **Query Tool**
 
diff --git a/web/pgadmin/static/bundle/codemirror.js 
b/web/pgadmin/static/bundle/codemirror.js
index 6c3525b..c8766ff 100644
--- a/web/pgadmin/static/bundle/codemirror.js
+++ b/web/pgadmin/static/bundle/codemirror.js
@@ -13,6 +13,7 @@ import 'codemirror/addon/search/searchcursor';
 import 'codemirror/addon/search/jump-to-line';
 import 'codemirror/addon/edit/matchbrackets';
 import 'codemirror/addon/edit/closebrackets';
+import 'codemirror/addon/comment/comment'
 import 'pgadmin.sqlfoldcode';
 
 export default CodeMirror;
\ No newline at end of file
diff --git a/web/pgadmin/tools/datagrid/templates/datagrid/index.html 
b/web/pgadmin/tools/datagrid/templates/datagrid/index.html
index 24ea742..a9038c9 100644
--- a/web/pgadmin/tools/datagrid/templates/datagrid/index.html
+++ b/web/pgadmin/tools/datagrid/templates/datagrid/index.html
@@ -208,6 +208,39 @@
                 </button>
             </div>
             <div class="btn-group" role="group" aria-label="">
+                <button id="btn-comment-code" type="button" class="btn 
btn-default" title="{{ _('Comment/Uncomment Selection (Block)') }}">
+                    <i class="fa fa-file-code-o" aria-hidden="true"></i>
+                </button>
+                <button id="btn-edit-dropdown" type="button" class="btn 
btn-default dropdown-toggle"
+                        data-toggle="dropdown" aria-haspopup="true" 
aria-expanded="false">
+                    <span class="caret"></span> <span class="sr-only">Toggle 
Dropdown</span>
+                </button>
+                <ul class="dropdown-menu dropdown-menu">
+                    <li>
+                        <a id="btn-indent-code" href="#">
+                            <i class="fa fa-indent" aria-hidden="true"></i>
+                            <span> {{ _('Indent Selection') }} </span>
+                        </a>
+                        <a id="btn-unindent-code" href="#">
+                            <i class="fa fa-outdent" aria-hidden="true"></i>
+                            <span> {{ _('Unindent Selection') }} </span>
+                        </a>
+                        <a id="btn-comment-line" href="#">
+                            <i class="fa fa-code" aria-hidden="true"></i>
+                            <span> {{ _('Comment Selection (Inline)') }} 
</span>
+                        </a>
+                        <a id="btn-uncomment-line" href="#">
+                            <i class="fa fa-code" aria-hidden="true"></i>
+                            <span> {{ _('Uncomment Selection (Inline)') }} 
</span>
+                        </a>
+                        <a id="btn-toggle-comment-block" href="#">
+                            <i class="fa fa-code" aria-hidden="true"></i>
+                            <span> {{ _('Comment/Uncomment Selection (Block)') 
}} </span>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+            <div class="btn-group" role="group" aria-label="">
                 <button id="btn-edit" type="button" class="btn btn-default" 
title="{{ _('Clear query window') }}">
                     <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                 </button>
diff --git a/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js 
b/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
index acbe6ff..ff98563 100644
--- a/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
+++ b/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
@@ -39,7 +39,10 @@ define('tools.querytool', [
     // Define key codes for shortcut keys
     var F5_KEY = 116,
         F7_KEY = 118,
-        F8_KEY = 119;
+        F8_KEY = 119,
+        COMMA_KEY = 188,
+        PERIOD_KEY = 190,
+        FWD_SLASH_KEY = 191;
 
     var is_query_running = false;
 
@@ -92,7 +95,15 @@ define('tools.querytool', [
         "click #btn-explain-buffers": "on_explain_buffers",
         "click #btn-explain-timing": "on_explain_timing",
         "change .limit": "on_limit_change",
-        "keydown": "keyAction"
+        "keydown": "keyAction",
+        // Comment options
+        "click #btn-comment-code": "on_toggle_comment_block_code",
+        "click #btn-toggle-comment-block": "on_toggle_comment_block_code",
+        "click #btn-comment-line": "on_comment_line_code",
+        "click #btn-uncomment-line": "on_uncomment_line_code",
+        // Indentation options
+        "click #btn-indent-code": "on_indent_code",
+        "click #btn-unindent-code": "on_unindent_code"
       },
 
       // This function is used to render the template.
@@ -1277,6 +1288,59 @@ define('tools.querytool', [
         );
       },
 
+      // Callback function for the line comment code
+      on_comment_line_code: function() {
+        var self = this;
+        // Trigger the comment signal to the SqlEditorController class
+        self.handler.trigger(
+            'pgadmin-sqleditor:comment_line_code',
+            self,
+            self.handler
+        );
+      },
+
+      // Callback function for the line uncomment code
+      on_uncomment_line_code: function() {
+        var self = this;
+        // Trigger the comment signal to the SqlEditorController class
+        self.handler.trigger(
+            'pgadmin-sqleditor:uncomment_line_code',
+            self,
+            self.handler
+        );
+      },
+
+      // Callback function for the block comment/uncomment code
+      on_toggle_comment_block_code: function() {
+        var self = this;
+        // Trigger the comment signal to the SqlEditorController class
+        self.handler.trigger(
+            'pgadmin-sqleditor:toggle_comment_block_code',
+            self,
+            self.handler
+        );
+      },
+
+      on_indent_code: function() {
+        var self = this;
+        // Trigger the comment signal to the SqlEditorController class
+        self.handler.trigger(
+            'pgadmin-sqleditor:indent_selected_code',
+            self,
+            self.handler
+        );
+      },
+
+      on_unindent_code: function() {
+        var self = this;
+        // Trigger the comment signal to the SqlEditorController class
+        self.handler.trigger(
+            'pgadmin-sqleditor:unindent_selected_code',
+            self,
+            self.handler
+        );
+      },
+
       // Callback function for the clear button click.
       on_clear: function(ev) {
         var self = this, sql;
@@ -1487,6 +1551,18 @@ define('tools.querytool', [
           // Download query result as CSV.
           this.on_download(ev);
           ev.preventDefault();
+        } else if (ev.shiftKey && ev.ctrlKey  && keyCode == COMMA_KEY ) {
+          // Toggle comments
+          this.on_comment_line_code(ev);
+          ev.preventDefault();
+        } else if (ev.shiftKey && ev.ctrlKey  && keyCode == PERIOD_KEY ) {
+          // Toggle comments
+          this.on_uncomment_line_code(ev);
+          ev.preventDefault();
+        } else if (ev.shiftKey && ev.ctrlKey  && keyCode == FWD_SLASH_KEY ) {
+          // Toggle comments
+          this.on_toggle_comment_block_code(ev);
+          ev.preventDefault();
         }
       }
     });
@@ -1576,6 +1652,13 @@ define('tools.querytool', [
           self.on('pgadmin-sqleditor:button:explain-costs', 
self._explain_costs, self);
           self.on('pgadmin-sqleditor:button:explain-buffers', 
self._explain_buffers, self);
           self.on('pgadmin-sqleditor:button:explain-timing', 
self._explain_timing, self);
+          // Commenting related
+          self.on('pgadmin-sqleditor:comment_line_code', 
self._comment_line_code, self);
+          self.on('pgadmin-sqleditor:uncomment_line_code', 
self._uncomment_line_code, self);
+          self.on('pgadmin-sqleditor:toggle_comment_block_code', 
self._comment_block_code, self);
+          // Indentation related
+          self.on('pgadmin-sqleditor:indent_selected_code', 
self._indent_selected_code, self);
+          self.on('pgadmin-sqleditor:unindent_selected_code', 
self._unindent_selected_code, self);
 
           if (self.is_query_tool) {
             self.gridView.query_tool_obj.refresh();
@@ -3624,6 +3707,71 @@ define('tools.querytool', [
         },
 
         /*
+         * This function will comment code (Wrapper function)
+         */
+        _comment_line_code: function() {
+          this._toggle_comment_code('comment_line');
+        },
+
+        /*
+         * This function will uncomment code (Wrapper function)
+         */
+        _uncomment_line_code: function() {
+          this._toggle_comment_code('uncomment_line');
+        },
+
+        /*
+         * This function will comment/uncomment code (Wrapper function)
+         */
+        _comment_block_code: function() {
+          this._toggle_comment_code('block');
+        },
+
+        /*
+         * This function will comment/uncomment code (Main function)
+         */
+        _toggle_comment_code: function(of_type) {
+          var self = this, editor = self.gridView.query_tool_obj,
+          selected_code = editor.getSelection(),
+          sql = selected_code.length > 0 ? selected_code : editor.getValue();
+          // If it is an empty query, do nothing.
+          if (sql.length <= 0) return;
+
+          // Find the code selection range
+          var range = {
+            from: editor.getCursor(true),
+            to: editor.getCursor(false)
+          },
+          option = { lineComment: '--' };
+
+          if(of_type == 'comment_line') {
+            // Comment line
+            editor.lineComment(range.from, range.to, option);
+          } else if(of_type == 'uncomment_line') {
+            // Uncomment line
+            editor.uncomment(range.from, range.to, option);
+          } else if(of_type == 'block') {
+            editor.toggleComment(range.from, range.to);
+          }
+        },
+
+        /*
+         * This function will indent selected code
+         */
+        _indent_selected_code: function() {
+          var self = this, editor = self.gridView.query_tool_obj;
+          editor.execCommand("indentMore");
+        },
+
+        /*
+         * This function will unindent selected code
+         */
+        _unindent_selected_code: function() {
+          var self = this, editor = self.gridView.query_tool_obj;
+          editor.execCommand("indentLess");
+        },
+
+        /*
          * This function get explain options and auto rollback/auto commit
          * values from preferences
          */

Reply via email to