diff --git a/web/pgadmin/tools/datagrid/templates/datagrid/index.html b/web/pgadmin/tools/datagrid/templates/datagrid/index.html index 31ade7dfa..ddb9d8f8e 100644 --- a/web/pgadmin/tools/datagrid/templates/datagrid/index.html +++ b/web/pgadmin/tools/datagrid/templates/datagrid/index.html @@ -10,11 +10,121 @@ body { }
-
', +
-
+
+ +
+ +
+
{% endblock %} diff --git a/web/pgadmin/tools/sqleditor/command.py b/web/pgadmin/tools/sqleditor/command.py index f5f0eb879..88eb559af 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 4e08baf83..dee3ea11e 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 3e9bc5cf8..29f4137e5 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([ - '', - '
', - '', - '
' - ].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); + //sql_panel.load(main_docker); + sql_panel.load(main_docker); + var sql_panel_obj = main_docker.addPanel('sql_panel', wcDocker.DOCK.TOP); - // 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); - - // By default, the splitter splits down the middle, we split the main panel by 80%. - hSplitter.pos(0.25); - - var text_container = $(''); - - // 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 = $('
'); - hSplitter.right().addItem(output_container); + var text_container = $('').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/insert.sql similarity index 100% rename from web/pgadmin/tools/sqleditor/templates/sqleditor/sql/9.1_plus/create.sql rename to web/pgadmin/tools/sqleditor/templates/sqleditor/sql/9.1_plus/insert.sql