public inbox for [email protected]  
help / color / mirror / Atom feed
From: Akshay Joshi <[email protected]>
To: Dave Page <[email protected]>
Cc: pgadmin-hackers <[email protected]>
Subject: Re: [pgAdmin4] [Patch] Implementation of the Data Grid and Query Tool
Date: Tue, 3 May 2016 12:11:01 +0530
Message-ID: <CANxoLDfeX0a0s_H1r3+-vcm1vrww40SvTFOEN+79=cCuT=dsAw@mail.gmail.com> (raw)
In-Reply-To: <CANxoLDdGKqrMrKahUb1jufox2sGS+nWvwaxC7ZQWUCXp1Dxxfg@mail.gmail.com>
References: <CANxoLDe8fRZ=m8NGPc0=YQLS0vTc4-L5xmjyn2J2V1jUt937Mg@mail.gmail.com>
	<CA+OCxoz4ejTML6cjwMvOLd7vg4Dcd1koz30StnH_huND61gdzg@mail.gmail.com>
	<CANxoLDemUxkGL_z6=OPkA=3E-+ZDDmA3oht2wgDoCmurVv3JYQ@mail.gmail.com>
	<CA+OCxoxOOW4j0o+_NsV7JoW+-3aQ_As_xC90U3ShGw_DgWgLvQ@mail.gmail.com>
	<CANxoLDcp=sjd=P8U7qUP3tOQThAXDx+GUFyoE6F9xNDKwa5MnA@mail.gmail.com>
	<CA+OCxozK661Ha4RD51FtxmEdTzBd2h0nVgemAhfh0opbYOTerA@mail.gmail.com>
	<CANxoLDcxkQ+T8XwpVabDo2=E5P0x3e27Gz4Ob3NAsi_9C=m14w@mail.gmail.com>
	<CA+OCxowdBvsnin91F2chyWLaH1ivEZmD_N_oY2DEJ11jEe3OjQ@mail.gmail.com>
	<CANxoLDd0Ljz7Oq6uaJo181uiAixXHsEpDQr3nFi8VyisYx-9sQ@mail.gmail.com>
	<CA+OCxoz0Y-So4gOLVG2UVUEKBu-f9wAh0iEyMPfXH8ao-4Ai6w@mail.gmail.com>
	<CANxoLDcmtT5zUyXAU_HvLcoJjFeYWfRx2egLWp_3rdwOsKXV_w@mail.gmail.com>
	<CA+OCxowg-0gM-SkmfFmWZDeHAJvhYtuyWdRWHtxrn_sp0rjAPA@mail.gmail.com>
	<CANxoLDe-pk8=s0JkW=9ccr5LBx-Fyh-vrPQ-hqLpYYjqfoUycw@mail.gmail.com>
	<CA+OCxoyaQsfpJk+XfpvSGc=Vf9i4o4SjW+g_H9tChYKsbiCf=Q@mail.gmail.com>
	<CANxoLDcxHDoe0yebsUE4rJ=8Rxrz8FdVYM1Zp8uWw2YkD0CvXw@mail.gmail.com>
	<CA+OCxoxPbb39KimzTuHYvDHfCJtBSLqvdWJ28zw6ospUsNui0Q@mail.gmail.com>
	<CANxoLDdGKqrMrKahUb1jufox2sGS+nWvwaxC7ZQWUCXp1Dxxfg@mail.gmail.com>
List-Unsubscribe:  <mailto:[email protected]?body=unsub%20pgadmin-hackers>

Hi All

Added support of code-folding for QueryTool. Please ignore previous patch,
attached is the new combined patch.

On Thu, Apr 21, 2016 at 2:00 PM, Akshay Joshi <[email protected]
> wrote:

> Hi
>
> I have fixed following review comments given by Dave and attached is the
> patch file:
>
>    - The button bar be moved out into an HTML template
>    - create.sql should perhaps be renamed to insert.sql
>    - The "Add Row" button only works if you're on the last page of the
>    resultset.
>
> I have tried to fix the following review comments, but unable to figure
> out the solution
>
>
>
>    - Please add an SQL button. This should show/hide the SQL panel in
>    *both* Query Tool and Edit Grid modes.
>
>            I have changed the design and have only one wcDocker and add
> SQL panel to the Top and remaining panel to the Bottom, then I have tried
> to hide the top panel, but not able to fix it.
>
>    - If a field has been edited, but not saved, can we highlight it
>    somehow? Maybe make the text dark blue?
>
>            For this we have "backgrid:edited" event in which we get model
> and column, but not sure how we can find the cell to add the class to
> change the colour and if we will have solution then, we will have to remove
> that class again once user will enter the original value again.
>
>    - Can the "Copy Row" button also populate the clipboard with CSV data
>    for the row?
>    - Cut, Copy and Paste to Clipboard.
>
>            I have googled for solution and found some of them which have
> only "Copy" feature, some of them works for limited browsers. One solution
> is to use "document.execCommand("Copy")" but it works for TextArea and we
> have CodeMirror.
>
>    - The layout of the result tabs should be maintained if new Query Tool
>    or Edit Grid tabs are opened.
>
>
>
>
>
>
>
>
>
>
>
> To solve the above I need some help/suggestions here.
>
>
> On Fri, Apr 15, 2016 at 1:22 PM, Dave Page <[email protected]>
> wrote:
>
>> Thanks - committed.
>>
>> On Fri, Apr 15, 2016 at 8:03 AM, Akshay Joshi <
>> [email protected]> wrote:
>>
>>>
>>>
>>> On Thu, Apr 14, 2016 at 7:40 PM, Dave Page <[email protected]>
>>> wrote:
>>>
>>>> Hi
>>>>
>>>> On Thu, Apr 14, 2016 at 1:58 PM, Akshay Joshi <
>>>> [email protected]> wrote:
>>>>
>>>>> Hi All
>>>>>
>>>>> I have fixed review comments given by Dave and couple of them are
>>>>> remaining
>>>>>
>>>>> *Fixed Review Comments:*
>>>>>
>>>>>    - The View Data menu option should be on the Object menu, which
>>>>>    should mirror the Context menu, except options should be disabled when not
>>>>>    applicable instead of hidden.
>>>>>    - The Query Tool menu icon should be a glyphicon, to match the
>>>>>    others.
>>>>>    - Please merge the functionality of the Refresh and Execute
>>>>>    buttons into one button. We shouldn't have two buttons that do essentially
>>>>>    the same thing.
>>>>>    - In Edit Grid mode, the History panel should log all queries (
>>>>>    SELECTs, UPDATEs, DELETEs etc) as it would in the Query Tool.
>>>>>    - In Edit Grid mode, the Messages panel should display any
>>>>>    messages from the most recent action  as it would in the Query Tool.
>>>>>    - In Edit Grid mode, that textbox should be read-only, but should
>>>>>    display the SQL used (including any LIMIT/FILTER clauses)
>>>>>    - Please remove the border from the SQL box, such that it fills
>>>>>    all available space.
>>>>>    - The Filter box should be in a modal overlay over the top of the
>>>>>    SQL box/Results tabs as required. Those elements should be grayed
>>>>>    whilst it is open.
>>>>>    - Please adjust the height of the Delete icon in the Edit Grid,
>>>>>    such that it doesn't force the row height to be higher than it should be.
>>>>>    - I think the names of the tabs are far too long. Can we change
>>>>>    them to "Query 1", "Query 2" etc, then rename them to the filename
>>>>>    if the user saves/loads a file?
>>>>>    - We should add an "Edit" button, which opens a drop-down menu.
>>>>>    This would eventually include options as found on the Edit menu in the
>>>>>    pgAdmin3 query tool, such as the "Clear SQL" option.
>>>>>    - Ashesh and I discussed changing the History tab to be a grid,
>>>>>    showing: Date/Time, Query (first line only), Rows affected, Runtime
>>>>>    and Status, in a row per query executed. Ashesh suggested using a
>>>>>    sub-form that can be expanded for each row, which could show the full query
>>>>>    and error details (SQL State etc). New rows should be added to the
>>>>>    top of the list.
>>>>>    - Errors should be highlighted in the SQL box - a marker in the
>>>>>    margin to note the line, and spellcheck-style underlining for the error
>>>>>    word.
>>>>>    - Query results should have spaces converted to "&nbsp;", so that
>>>>>    proper indenting is maintained (for example, on EXPLAIN queries).
>>>>>    - on shutdown pgAdmin server , appropriate message should be
>>>>>    displayed.
>>>>>
>>>>>
>>>> Awesome!
>>>>
>>>> I've made a few minor style changes - mostly colouring, but I also
>>>> widened the Execute button and it was easier to push it's dropdown than it
>>>> - and pushed the code.
>>>>
>>>>
>>>>> *Remaining review comments*:
>>>>>
>>>>>    - Please add an SQL button. This should show/hide the SQL panel in
>>>>>    *both* Query Tool and Edit Grid modes.
>>>>>    - If a field has been edited, but not saved, can we highlight it
>>>>>    somehow? Maybe make the text dark blue?
>>>>>    - The "Add Row" button only works if you're on the last page of
>>>>>    the resultset.
>>>>>    - Can the "Copy Row" button also populate the clipboard with CSV
>>>>>    data for the row?
>>>>>    - In Edit mode, we need to be able to represent/set values to NULL.
>>>>>    - The layout of the result tabs should be maintained if new Query
>>>>>    Tool or Edit Grid tabs are opened.
>>>>>
>>>>> *TODO's* (apart from above)
>>>>>
>>>>>    - Open/Save SQL file.
>>>>>    - Cut, Copy, Paste functionality.
>>>>>
>>>>> Agreed on the above.
>>>>
>>>> My only real suggestion on the code itself (which looks good and clean
>>>> on a quick review), is that:
>>>>
>>>> - The button bar be moved out into an HTML template
>>>> - create.sql should perhaps be renamed to insert.sql
>>>> - It looks like we only allow updates if we have a pkey. Should we
>>>> allow use of OIDs when present, if a pkey isn't there?
>>>>
>>>> I'll continue to log additional issues if/when I find them.
>>>>
>>>
>>>    Thanks for committing the patch. I'll work on the above comments.
>>> Meanwhile I have found one issue where "View Filtered Row" is not working,
>>> so attached is the patch file to fix that. Can you please review/commit it.
>>>
>>>>
>>>> --
>>>> Dave Page
>>>> VP, Chief Architect, Tools & Installers
>>>> EnterpriseDB: http://www.enterprisedb.com
>>>> The Enterprise PostgreSQL Company
>>>>
>>>> Blog: http://pgsnake.blogspot.com
>>>> Twitter: @pgsnake
>>>>
>>>
>>>
>>>
>>> --
>>> *Akshay Joshi*
>>> *Principal Software Engineer *
>>>
>>>
>>>
>>> *Phone: +91 20-3058-9517 <%2B91%2020-3058-9517>Mobile: +91 976-788-8246*
>>>
>>
>>
>>
>> --
>> Dave Page
>> VP, Chief Architect, Tools & Installers
>> EnterpriseDB: http://www.enterprisedb.com
>> The Enterprise PostgreSQL Company
>>
>> Blog: http://pgsnake.blogspot.com
>> Twitter: @pgsnake
>>
>
>
>
> --
> *Akshay Joshi*
> *Principal Software Engineer *
>
>
>
> *Phone: +91 20-3058-9517Mobile: +91 976-788-8246*
>



-- 
*Akshay Joshi*
*Principal Software Engineer *



*Phone: +91 20-3058-9517Mobile: +91 976-788-8246*


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


Attachments:

  [application/octet-stream] Fixed_review_comments_v2.patch (27.5K, 3-Fixed_review_comments_v2.patch)
  download | inline diff:
diff --git a/web/pgadmin/tools/datagrid/templates/datagrid/index.html b/web/pgadmin/tools/datagrid/templates/datagrid/index.html
index 31ade7d..ddb9d8f 100644
--- a/web/pgadmin/tools/datagrid/templates/datagrid/index.html
+++ b/web/pgadmin/tools/datagrid/templates/datagrid/index.html
@@ -10,11 +10,121 @@ body {
 }
 </style>
     <div id="main-editor_panel">
-        <div id="fetching_data" class="sql-editor-busy-fetching hide">',
+        <div id="fetching_data" class="sql-editor-busy-fetching hide">
             <span class="sql-editor-busy-icon"><img src="{{ url_for('browser.static', filename='css/aciTree/image/load-root.gif') }}"></span>
             <span class="sql-editor-busy-text"></span>
         </div>
-        <div class="sql-editor" data-trans-id="{{ uniqueId }}"></div>
+        <div class="sql-editor" data-trans-id="{{ uniqueId }}">
+        <div id="btn-toolbar" class="pg-prop-btn-group" role="toolbar" aria-label="">
+          <div class="btn-group" role="group" aria-label="">
+            <button id="btn-save" type="button" class="btn btn-default" title="{{ _('Save') }}" disabled>
+              <i class="fa fa-floppy-o" aria-hidden="true"></i>
+            </button>
+          </div>
+          <div class="btn-group" role="group" aria-label="">
+            <button id="btn-copy-row" type="button" class="btn btn-default" title="{{ _('Copy Row') }}" disabled>
+              <i class="fa fa-files-o" aria-hidden="true"></i>
+            </button>
+            <button id="btn-paste-row" type="button" class="btn btn-default" title="{{ _('Paste Row') }}" disabled>
+              <i class="fa fa-clipboard" aria-hidden="true"></i>
+            </button>
+          </div>
+          <div class="btn-group" role="group" aria-label="">
+            <button id="btn-add-row" type="button" class="btn btn-default" title="{{ _('Add New Row') }}" disabled>
+              <i class="fa fa-plus" aria-hidden="true"></i>
+            </button>
+          </div>
+          <div class="btn-group" role="group" aria-label="">
+            <button id="btn-filter" type="button" class="btn btn-default" title="{{ _('Filter') }}" disabled>
+              <i class="fa fa-filter" aria-hidden="true"></i>
+            </button>
+            <button id="btn-filter-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 dropdown-menu-right">
+              <li>
+                <a id="btn-remove-filter" href="#">{{ _('Remove') }}</a>
+                <a id="btn-include-filter" href="#">{{ _('By selection') }}</a>
+                <a id="btn-exclude-filter" href="#">{{ _('Exclude selection') }}</a>
+              </li>
+            </ul>
+          </div>
+          <div class="btn-group" role="group" aria-label="">
+            <select class="limit" style="height: 30px; width: 90px;" disabled>
+              <option value="-1">No limit</option>
+              <option value="1000">1000 rows</option>
+              <option value="500">500 rows</option>
+              <option value="100">100 rows</option>
+            </select>
+          </div>
+          <div class="btn-group" role="group" aria-label="">
+            <button id="btn-flash" type="button" class="btn btn-default" style="width: 40px;" title="{{ _('Execute/Refresh') }}">
+              <i class="fa fa-bolt" aria-hidden="true"></i>
+            </button>
+            <button id="btn-query-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-auto-commit" href="#">
+                    <i class="auto-commit fa fa-check" aria-hidden="true"></i>
+                    <span> {{ _('Auto-Commit') }} </span>
+                </a>
+                <a id="btn-auto-rollback" href="#">
+                    <i class="auto-rollback fa fa-check visibility-hidden" aria-hidden="true"></i>
+                    <span> {{ _('Auto-Rollback') }} </span>
+                </a>
+              </li>
+            </ul>
+            <button id="btn-cancel-query" type="button" class="btn btn-default" title="{{ _('Cancel query') }}" disabled>
+              <i class="fa fa-stop" aria-hidden="true"></i>
+            </button>
+          </div>
+          <div class="btn-group" role="group" aria-label="">
+            <button id="btn-edit" type="button" class="btn btn-default" title="{{ _('Edit') }}">
+              <i class="fa fa-pencil-square-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-clear" href="#">
+                    <i class="fa fa-eraser" aria-hidden="true"></i>
+                    <span> {{ _('Clear query window') }} </span>
+                </a>
+                <a id="btn-clear-history" href="#">
+                    <i class="fa fa-eraser" aria-hidden="true"></i>
+                    <span> {{ _('Clear history') }} </span>
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div class="btn-group" role="group" aria-label="">
+            <button id="btn-download" type="button" class="btn btn-default" title="{{ _('Download as CSV') }}">
+              <i class="fa fa-download" aria-hidden="true"></i>
+            </button>
+          </div>
+        </div>
+        <div class="editor-title"></div>
+        <div id="filter" class="filter-container hidden">
+          <div class="filter-title">Filter</div>
+          <div class="sql-textarea">
+            <textarea id="sql_filter" row="5"></textarea>
+          </div>
+          <div class="btn-group">
+            <button id="btn-cancel" type="button" class="btn btn-danger" title="{{ _('Cancel') }}">
+              <i class="fa fa-times" aria-hidden="true"></i> {{ _('Cancel') }}
+            </button>
+          </div>
+          <div class="btn-group">
+            <button id="btn-apply" type="button" class="btn btn-primary" title="{{ _('Apply') }}">
+              <i class="fa fa-check" aria-hidden="true"></i> {{ _('Apply') }}
+            </button>
+          </div>
+        </div>
+        <div id="editor-panel"></div>
+        </div>
     </div>
 {% endblock %}
 
diff --git a/web/pgadmin/tools/sqleditor/command.py b/web/pgadmin/tools/sqleditor/command.py
index f5f0eb8..88eb559 100644
--- a/web/pgadmin/tools/sqleditor/command.py
+++ b/web/pgadmin/tools/sqleditor/command.py
@@ -440,7 +440,7 @@ class TableCommand(GridCommand):
                                               data_to_be_saved=row['data'], primary_keys=row['keys'],
                                               nsp_name=self.nsp_name)
                 else:
-                    sql = render_template("/".join([self.sql_path, 'create.sql']), object_name=self.object_name,
+                    sql = render_template("/".join([self.sql_path, 'insert.sql']), object_name=self.object_name,
                                           data_to_be_saved=row['data'], nsp_name=self.nsp_name)
 
                 status, res = conn.execute_void(sql)
diff --git a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
index 4e08baf..dee3ea1 100644
--- a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
+++ b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
@@ -53,16 +53,6 @@
   font-size: 13px;
 }
 
-#output-panel .wcDocker {
-  top: 0px;
-  bottom: 0px;
-  height: auto;
-}
-
-#output-panel .wcFrameCenter {
-  overflow: hidden;
-}
-
 .sql-editor-grid-container {
   height: calc(100% - 45px);
   overflow: auto;
@@ -217,3 +207,32 @@
   background: #5B9CEF;
   color: white;
 }
+
+.CodeMirror-foldmarker {
+  color: blue;
+  text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
+  font-family: arial;
+  line-height: .3;
+  cursor: pointer;
+}
+
+.CodeMirror, #editor-panel .CodeMirror-gutters {
+    min-height: 100%;
+}
+
+.CodeMirror-foldgutter {
+  width: .9em;
+}
+
+.CodeMirror-foldgutter-open,
+.CodeMirror-foldgutter-folded {
+  cursor: pointer;
+}
+
+.CodeMirror-foldgutter-open:after {
+  content: "\25BC";
+}
+
+.CodeMirror-foldgutter-folded:after {
+  content: "\25B6";
+}
diff --git a/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js b/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
index 3e9bc5c..29f4137 100644
--- a/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
+++ b/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
@@ -1,6 +1,7 @@
 define(
   ['jquery', 'underscore', 'alertify', 'pgadmin', 'backbone', 'backgrid', 'codemirror',
    'codemirror/mode/sql/sql', 'codemirror/addon/selection/mark-selection', 'codemirror/addon/selection/active-line',
+   'codemirror/addon/fold/foldgutter', 'codemirror/addon/fold/foldcode', 'codemirror/addon/fold/pgadmin-sqlfoldcode',
    'backgrid.select.all', 'backbone.paginator', 'backgrid.paginator', 'backgrid.filter',
    'bootstrap', 'pgadmin.browser', 'wcdocker'],
   function($, _, alertify, pgAdmin, Backbone, Backgrid, CodeMirror) {
@@ -150,8 +151,8 @@ define(
         "click #btn-remove-filter": "on_remove_filter",
         "click #btn-apply": "on_apply",
         "click #btn-cancel": "on_cancel",
-        "click #btn-copy": "on_copy",
-        "click #btn-paste": "on_paste",
+        "click #btn-copy-row": "on_copy_row",
+        "click #btn-paste-row": "on_paste_row",
         "click #btn-flash": "on_flash",
         "click #btn-cancel-query": "on_cancel_query",
         "click #btn-download": "on_download",
@@ -163,139 +164,27 @@ define(
         "change .limit": "on_limit_change"
       },
 
-      /* Defining the template to create buttons and div to render
-       * the backgrid inside this div.
-       */
-      template: _.template([
-        '<div id="btn-toolbar" class="pg-prop-btn-group" role="toolbar" aria-label="">',
-          '<div class="btn-group" role="group" aria-label="">',
-            '<button id="btn-save" type="button" class="btn btn-default" title="{{ _('Save') }}" disabled>',
-              '<i class="fa fa-floppy-o" aria-hidden="true"></i>',
-            '</button>',
-          '</div>',
-          '<div class="btn-group" role="group" aria-label="">',
-            '<button id="btn-copy" type="button" class="btn btn-default" title="{{ _('Copy Row') }}" disabled>',
-              '<i class="fa fa-files-o" aria-hidden="true"></i>',
-            '</button>',
-            '<button id="btn-paste" type="button" class="btn btn-default" title="{{ _('Paste Row') }}" disabled>',
-              '<i class="fa fa-clipboard" aria-hidden="true"></i>',
-            '</button>',
-          '</div>',
-          '<div class="btn-group" role="group" aria-label="">',
-            '<button id="btn-add-row" type="button" class="btn btn-default" title="{{ _('Add New Row') }}" disabled>',
-              '<i class="fa fa-plus" aria-hidden="true"></i>',
-            '</button>',
-          '</div>',
-          '<div class="btn-group" role="group" aria-label="">',
-            '<button id="btn-filter" type="button" class="btn btn-default" title="{{ _('Filter') }}" disabled>',
-              '<i class="fa fa-filter" aria-hidden="true"></i>',
-            '</button>',
-            '<button id="btn-filter-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 dropdown-menu-right">',
-              '<li>',
-                '<a id="btn-remove-filter" href="#">{{ _('Remove') }}</a>',
-                '<a id="btn-include-filter" href="#">{{ _('By selection') }}</a>',
-                '<a id="btn-exclude-filter" href="#">{{ _('Exclude selection') }}</a>',
-              '</li>',
-            '</ul>',
-          '</div>',
-          '<div class="btn-group" role="group" aria-label="">',
-            '<select class="limit" style="height: 30px; width: 90px;" disabled>',
-              '<option value="-1">No limit</option>',
-              '<option value="1000">1000 rows</option>',
-              '<option value="500">500 rows</option>',
-              '<option value="100">100 rows</option>',
-            '</select>',
-          '</div>',
-          '<div class="btn-group" role="group" aria-label="">',
-            '<button id="btn-flash" type="button" class="btn btn-default" style="width: 40px;" title="{{ _('Execute/Refresh') }}">',
-              '<i class="fa fa-bolt" aria-hidden="true"></i>',
-            '</button>',
-            '<button id="btn-query-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-auto-commit" href="#" class="noclose">',
-                    '<i class="auto-commit fa fa-check" aria-hidden="true"></i>',
-                    '<span> {{ _('Auto Commit') }} </span>',
-                '</a>',
-                '<a id="btn-auto-rollback" href="#" class="noclose">',
-                    '<i class="auto-rollback fa fa-check visibility-hidden" aria-hidden="true"></i>',
-                    '<span> {{ _('Auto Rollback') }} </span>',
-                '</a>',
-              '</li>',
-            '</ul>',
-            '<button id="btn-cancel-query" type="button" class="btn btn-default" title="{{ _('Cancel query') }}" disabled>',
-              '<i class="fa fa-stop" aria-hidden="true"></i>',
-            '</button>',
-          '</div>',
-          '<div class="btn-group" role="group" aria-label="">',
-            '<button id="btn-edit" type="button" class="btn btn-default" title="{{ _('Edit') }}">',
-              '<i class="fa fa-pencil-square-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-clear" href="#">',
-                    '<i class="fa fa-eraser" aria-hidden="true"></i>',
-                    '<span> {{ _('Clear query window') }} </span>',
-                '</a>',
-                '<a id="btn-clear-history" href="#">',
-                    '<i class="fa fa-eraser" aria-hidden="true"></i>',
-                    '<span> {{ _('Clear history') }} </span>',
-                '</a>',
-              '</li>',
-            '</ul>',
-          '</div>',
-          '<div class="btn-group" role="group" aria-label="">',
-            '<button id="btn-download" type="button" class="btn btn-default" title="{{ _('Download as CSV') }}">',
-              '<i class="fa fa-download" aria-hidden="true"></i>',
-            '</button>',
-          '</div>',
-        '</div>',
-        '<div class="editor-title"></div>',
-        '<div id="filter" class="filter-container hidden">',
-          '<div class="filter-title">Filter</div>',
-          '<div class="sql-textarea">',
-            '<textarea id="sql_filter" row="5"></textarea>',
-          '</div>',
-          '<div class="btn-group">',
-            '<button id="btn-cancel" type="button" class="btn btn-danger" title="{{ _('Cancel') }}">',
-              '<i class="fa fa-times" aria-hidden="true"></i> {{ _('Cancel') }}',
-            '</button>',
-          '</div>',
-          '<div class="btn-group">',
-            '<button id="btn-apply" type="button" class="btn btn-primary" title="{{ _('Apply') }}">',
-              '<i class="fa fa-check" aria-hidden="true"></i> {{ _('Apply') }}',
-            '</button>',
-          '</div>',
-        '</div>',
-        '<div id="editor-panel"></div>'
-        ].join("\n")),
-
       // This function is used to render the template.
       render: function() {
         var self = this;
 
-        // Render header only.
-        self.$el.empty();
-        self.$el.html(self.template());
-
         $('.editor-title').text(self.editor_title);
 
         var filter = self.$el.find('#sql_filter');
 
         self.filter_obj = CodeMirror.fromTextArea(filter.get(0), {
             lineNumbers: true,
-            lineWrapping: true,
             matchBrackets: true,
             indentUnit: 4,
-            mode: "text/x-pgsql"
+            mode: "text/x-pgsql",
+            foldOptions: {
+              widget: "\u2026"
+            },
+            foldGutter: {
+              rangeFinder: CodeMirror.fold.combine(CodeMirror.pgadminBeginRangeFinder, CodeMirror.pgadminIfRangeFinder,
+                                CodeMirror.pgadminLoopRangeFinder, CodeMirror.pgadminCaseRangeFinder)
+            },
+            gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
         });
 
         // Create main wcDocker instance
@@ -307,57 +196,37 @@ define(
           theme: 'pgadmin'
         });
 
-        var sub_panel = new pgAdmin.Browser.Panel({
-          name: 'sub_panel',
+        var sql_panel = new pgAdmin.Browser.Panel({
+          name: 'sql_panel',
           title: false,
           width: '100%',
-          height:'100%',
+          height:'20%',
           isCloseable: false,
           isPrivate: true
         });
 
-        sub_panel.load(main_docker);
-        panel = main_docker.addPanel('sub_panel', wcDocker.DOCK.LEFT);
-
-        // Create a Splitter to divide sql code and data output
-        var hSplitter = new wcSplitter(
-          "#editor-panel", panel,
-          wcDocker.ORIENTATION.VERTICAL
-        );
-        hSplitter.scrollable(0, false, false);
-        hSplitter.scrollable(1, true, true);
+        //sql_panel.load(main_docker);
+        sql_panel.load(main_docker);
+        var sql_panel_obj = main_docker.addPanel('sql_panel', wcDocker.DOCK.TOP);
 
-        // Initialize this splitter with a layout in each pane.
-        hSplitter.initLayouts(wcDocker.LAYOUT.SIMPLE, wcDocker.LAYOUT.SIMPLE);
-
-        // By default, the splitter splits down the middle, we split the main panel by 80%.
-        hSplitter.pos(0.25);
-
-        var text_container = $('<textarea id="sql_query_tool" row="5"></textarea>');
-
-        // Add text_container at the top half of the splitter
-        hSplitter.left().addItem(text_container);
-
-        // Add data output panel at the bottom half of the splitter
         var output_container = $('<div id="output-panel"></div>');
-        hSplitter.right().addItem(output_container);
+        var text_container = $('<textarea id="sql_query_tool"></textarea>').append(output_container);
+        sql_panel_obj.layout().addItem(text_container);
 
         self.query_tool_obj = CodeMirror.fromTextArea(text_container.get(0), {
             lineNumbers: true,
-            lineWrapping: true,
             matchBrackets: true,
             indentUnit: 4,
             styleSelectedText: true,
-            mode: "text/x-sql"
-        });
-
-        // Create wcDocker for tab set.
-        var docker = new wcDocker(
-          '#output-panel', {
-          allowContextMenu: false,
-          allowCollapse: false,
-          themePath: '{{ url_for('static', filename='css/wcDocker/Themes') }}',
-          theme: 'pgadmin'
+            mode: "text/x-pgsql",
+            foldOptions: {
+              widget: "\u2026"
+            },
+            foldGutter: {
+              rangeFinder: CodeMirror.fold.combine(CodeMirror.pgadminBeginRangeFinder, CodeMirror.pgadminIfRangeFinder,
+                                CodeMirror.pgadminLoopRangeFinder, CodeMirror.pgadminCaseRangeFinder)
+            },
+            gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
         });
 
         // Create panels for 'Data Output', 'Explain', 'Messages' and 'History'
@@ -402,16 +271,16 @@ define(
         })
 
         // Load all the created panels
-        data_output.load(docker);
-        explain.load(docker);
-        messages.load(docker);
-        history.load(docker);
+        data_output.load(main_docker);
+        explain.load(main_docker);
+        messages.load(main_docker);
+        history.load(main_docker);
 
         // Add all the panels to the docker
-        self.data_output_panel = docker.addPanel('data_output', wcDocker.DOCK.LEFT);
-        self.explain_panel = docker.addPanel('explain', wcDocker.DOCK.STACKED, self.data_output_panel);
-        self.messages_panel = docker.addPanel('messages', wcDocker.DOCK.STACKED, self.data_output_panel);
-        self.history_panel = docker.addPanel('history', wcDocker.DOCK.STACKED, self.data_output_panel);
+        self.data_output_panel = main_docker.addPanel('data_output', wcDocker.DOCK.BOTTOM, sql_panel_obj);
+        self.explain_panel = main_docker.addPanel('explain', wcDocker.DOCK.STACKED, self.data_output_panel);
+        self.messages_panel = main_docker.addPanel('messages', wcDocker.DOCK.STACKED, self.data_output_panel);
+        self.history_panel = main_docker.addPanel('history', wcDocker.DOCK.STACKED, self.data_output_panel);
 
         self.render_history_grid();
       },
@@ -660,24 +529,24 @@ define(
       },
 
       // Callback function for copy button click.
-      on_copy: function() {
+      on_copy_row: function() {
         var self = this;
 
         // Trigger the copy signal to the SqlEditorController class
         self.handler.trigger(
-            'pgadmin-sqleditor:button:copy',
+            'pgadmin-sqleditor:button:copy_row',
             self,
             self.handler
         );
       },
 
       // Callback function for paste button click.
-      on_paste: function() {
+      on_paste_row: function() {
         var self = this;
 
         // Trigger the paste signal to the SqlEditorController class
         self.handler.trigger(
-            'pgadmin-sqleditor:button:paste',
+            'pgadmin-sqleditor:button:paste_row',
             self,
             self.handler
         );
@@ -826,8 +695,8 @@ define(
           self.on('pgadmin-sqleditor:button:exclude_filter', self._exclude_filter, self);
           self.on('pgadmin-sqleditor:button:remove_filter', self._remove_filter, self);
           self.on('pgadmin-sqleditor:button:apply_filter', self._apply_filter, self);
-          self.on('pgadmin-sqleditor:button:copy', self._copy, self);
-          self.on('pgadmin-sqleditor:button:paste', self._paste, self);
+          self.on('pgadmin-sqleditor:button:copy_row', self._copy_row, self);
+          self.on('pgadmin-sqleditor:button:paste_row', self._paste_row, self);
           self.on('pgadmin-sqleditor:button:limit', self._set_limit, self);
           self.on('pgadmin-sqleditor:button:flash', self._refresh, self);
           self.on('pgadmin-sqleditor:button:cancel-query', self._cancel_query, self);
@@ -1028,15 +897,6 @@ define(
           else
             self.can_edit = true;
 
-          /* If user can edit the data then we should enabled
-           * Copy Row, Paste Row and 'Add New Row' buttons.
-           */
-          if (self.can_edit) {
-            $("#btn-add-row").prop('disabled', false);
-            $("#btn-copy").prop('disabled', false);
-            $("#btn-paste").prop('disabled', false);
-          }
-
           /* If user can filter the data then we should enabled
            * Filter and Limit buttons.
            */
@@ -1080,6 +940,7 @@ define(
           self.collection.on('backgrid:editing', self.on_cell_editing, self);
           self.collection.on('backgrid:row:selected', self.on_row_selected, self);
           self.collection.on('backgrid:row:deselected', self.on_row_deselected, self);
+          self.listenTo(self.collection, "reset", self.collection_reset_callback);
 
           // Show message in message and history tab in case of query tool
           self.total_time = self.get_query_run_time(self.query_start_time, self.query_end_time);
@@ -1096,6 +957,29 @@ define(
           self.trigger('pgadmin-sqleditor:loading-icon:hide');
         },
 
+        collection_reset_callback: function() {
+          var self = this
+
+          /* If user can edit the data and current page is the
+           * last page of the paginator then we should enabled
+           * Copy Row, Paste Row and 'Add New Row' buttons.
+           */
+           if (self.can_edit &&
+               self.collection.state.currentPage != undefined &&
+               self.collection.state.lastPage != undefined &&
+               self.collection.state.currentPage == self.collection.state.lastPage)
+           {
+             $("#btn-add-row").prop('disabled', false);
+             $("#btn-copy-row").prop('disabled', false);
+             $("#btn-paste-row").prop('disabled', false);
+           }
+           else {
+             $("#btn-add-row").prop('disabled', true);
+             $("#btn-copy-row").prop('disabled', true);
+             $("#btn-paste-row").prop('disabled', true);
+           }
+        },
+
         // This function creates the columns as required by the backgrid
         _fetch_column_metadata: function(data) {
           var colinfo = data.colinfo,
@@ -1732,7 +1616,7 @@ define(
         },
 
         // This function will copy the selected row.
-        _copy: function() {
+        _copy_row: function() {
           var self = this;
 
           // Save the selected model as copied model for future use
@@ -1741,7 +1625,7 @@ define(
         },
 
         // This function will paste the selected row.
-        _paste: function() {
+        _paste_row: function() {
           var self = this;
               new_model = null;
           if ('copied_model' in self && self.copied_model != null) {
diff --git a/web/pgadmin/tools/sqleditor/templates/sqleditor/sql/9.1_plus/create.sql b/web/pgadmin/tools/sqleditor/templates/sqleditor/sql/9.1_plus/create.sql
deleted file mode 100644
index 7c17616..0000000
--- a/web/pgadmin/tools/sqleditor/templates/sqleditor/sql/9.1_plus/create.sql
+++ /dev/null
@@ -1,8 +0,0 @@
-{# Insert the new row with primary keys (specified in primary_keys) #}
-INSERT INTO {{ conn|qtIdent(nsp_name, object_name) }} (
-{% for col in data_to_be_saved %}
-{% if not loop.first %}, {% endif %}{{ conn|qtIdent(col) }}{% endfor %}
-) VALUES (
-{% for col in data_to_be_saved %}
-{% if not loop.first %}, {% endif %}{{ data_to_be_saved[col]|qtLiteral }}{% endfor %}
-);
\ No newline at end of file
diff --git a/web/pgadmin/tools/sqleditor/templates/sqleditor/sql/9.1_plus/insert.sql b/web/pgadmin/tools/sqleditor/templates/sqleditor/sql/9.1_plus/insert.sql
new file mode 100644
index 0000000..7c17616
--- /dev/null
+++ b/web/pgadmin/tools/sqleditor/templates/sqleditor/sql/9.1_plus/insert.sql
@@ -0,0 +1,8 @@
+{# Insert the new row with primary keys (specified in primary_keys) #}
+INSERT INTO {{ conn|qtIdent(nsp_name, object_name) }} (
+{% for col in data_to_be_saved %}
+{% if not loop.first %}, {% endif %}{{ conn|qtIdent(col) }}{% endfor %}
+) VALUES (
+{% for col in data_to_be_saved %}
+{% if not loop.first %}, {% endif %}{{ data_to_be_saved[col]|qtLiteral }}{% endfor %}
+);
\ No newline at end of file


view thread (18+ messages)

reply

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Reply to all the recipients using the --to and --cc options:
  reply via email

  To: [email protected]
  Cc: [email protected], [email protected]
  Subject: Re: [pgAdmin4] [Patch] Implementation of the Data Grid and Query Tool
  In-Reply-To: <CANxoLDfeX0a0s_H1r3+-vcm1vrww40SvTFOEN+79=cCuT=dsAw@mail.gmail.com>

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

This inbox is served by agora; see mirroring instructions
for how to clone and mirror all data and code used for this inbox