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: Thu, 21 Apr 2016 14:00:18 +0530
Message-ID: <CANxoLDdGKqrMrKahUb1jufox2sGS+nWvwaxC7ZQWUCXp1Dxxfg@mail.gmail.com> (raw)
In-Reply-To: <CA+OCxoxPbb39KimzTuHYvDHfCJtBSLqvdWJ28zw6ospUsNui0Q@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>
List-Unsubscribe:  <mailto:[email protected]?body=unsub%20pgadmin-hackers>

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*


-- 
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_Comment_v1.patch (25.3K, 3-Fixed_Review_Comment_v1.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..584cc76 100644
--- a/web/pgadmin/tools/datagrid/templates/datagrid/index.html
+++ b/web/pgadmin/tools/datagrid/templates/datagrid/index.html
@@ -10,11 +10,127 @@ 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-copy" href="#">
+                    <span> {{ _('Copy') }} </span>
+                </a>
+                <a id="btn-paste" href="#">
+                    <span> {{ _('Paste') }} </span>
+                </a>
+                <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..e20b04c 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;
diff --git a/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js b/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
index 463ee45..c55df47 100644
--- a/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
+++ b/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
@@ -150,8 +150,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",
@@ -162,129 +162,10 @@ 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="#">',
-                    '<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>'
-        ].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');
@@ -306,40 +187,22 @@ 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);
-
-        // Initialize this splitter with a layout in each pane.
-        hSplitter.initLayouts(wcDocker.LAYOUT.SIMPLE, wcDocker.LAYOUT.SIMPLE);
+        //sql_panel.load(main_docker);
+        sql_panel.load(main_docker);
+        var sql_panel_obj = main_docker.addPanel('sql_panel', wcDocker.DOCK.TOP);
 
-        // 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,
@@ -350,15 +213,6 @@ define(
             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'
-        });
-
         // Create panels for 'Data Output', 'Explain', 'Messages' and 'History'
         var data_output = new pgAdmin.Browser.Panel({
           name: 'data_output',
@@ -401,16 +255,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();
       },
@@ -659,24 +513,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
         );
@@ -822,8 +676,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);
@@ -1024,15 +878,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.
            */
@@ -1076,6 +921,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);
@@ -1092,6 +938,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,
@@ -1728,7 +1597,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
@@ -1737,7 +1606,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)  latest in thread

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: <CANxoLDdGKqrMrKahUb1jufox2sGS+nWvwaxC7ZQWUCXp1Dxxfg@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