public inbox for [email protected]
help / color / mirror / Atom feedFrom: Murtuza Zabuawala <[email protected]>
To: pgadmin-hackers <[email protected]>
Subject: PATCH: To fix the issue where user cannot view long data in Query Tool output (pgAdmin4)
Date: Mon, 12 Sep 2016 16:24:38 +0530
Message-ID: <CAKKotZSENBmwCP9wikdRYLGjaKvDCj+pwiyWo8J8JTuJO1GGzQ@mail.gmail.com> (raw)
List-Unsubscribe: <mailto:[email protected]?body=unsub%20pgadmin-hackers>
Hi,
PFA patch to fix the issue where user was not able to view long data in the
data grid.
To fix the issue we have added Readonly editors in the grid to view data.
RM#1672, RM#1668
--
Regards,
Murtuza Zabuawala
EnterpriseDB: http://www.enterprisedb.com
The Enterprise PostgreSQL Company
--
Sent via pgadmin-hackers mailing list ([email protected])
To make changes to your subscription:
http://www.postgresql.org/mailpref/pgadmin-hackers
Attachments:
[text/x-patch] RM_1672.patch (14.0K, 3-RM_1672.patch)
download | inline diff:
diff --git a/web/pgadmin/static/js/slickgrid/slick.pgadmin.editors.js b/web/pgadmin/static/js/slickgrid/slick.pgadmin.editors.js
index 093416d..6f2984a 100644
--- a/web/pgadmin/static/js/slickgrid/slick.pgadmin.editors.js
+++ b/web/pgadmin/static/js/slickgrid/slick.pgadmin.editors.js
@@ -10,7 +10,12 @@
"Slick": {
"Editors": {
"pgText": pgTextEditor,
- "JsonText": JsonTextEditor
+ "JsonText": JsonTextEditor,
+ // Below editor will read only editors, Just to display data
+ "ReadOnlyText": ReadOnlyTextEditor,
+ "ReadOnlyCheckbox": ReadOnlyCheckboxEditor,
+ "ReadOnlypgText": ReadOnlypgTextEditor,
+ "ReadOnlyJsonText": ReadOnlyJsonTextEditor
}
}
});
@@ -258,4 +263,352 @@
this.init();
}
+
+ // Text data type editor
+ function ReadOnlypgTextEditor(args) {
+ var $input, $wrapper;
+ var defaultValue;
+ var scope = this;
+
+ this.init = function () {
+ var $container = $("body");
+
+ $wrapper = $("<DIV style='z-index:10000;position:absolute;background:white;padding:5px;border:3px solid gray; -moz-border-radius:10px; border-radius:10px;'/>")
+ .appendTo($container);
+
+ $input = $("<TEXTAREA hidefocus rows=5 style='backround:white;width:250px;height:80px;border:0;outline:0' readonly>")
+ .appendTo($wrapper);
+
+ $("<DIV style='text-align:right'><BUTTON class='btn btn-danger fa fa-lg fa-times long_text_editor pg-alertify-button'>Cancel</BUTTON></DIV>")
+ .appendTo($wrapper);
+
+ $wrapper.find("button:first").bind("click", this.cancel);
+ $input.bind("keydown", this.handleKeyDown);
+
+ scope.position(args.position);
+ $input.focus().select();
+ };
+
+ this.handleKeyDown = function (e) {
+ if (e.which == $.ui.keyCode.ENTER && e.ctrlKey) {
+ scope.cancel();
+ } else if (e.which == $.ui.keyCode.ESCAPE) {
+ e.preventDefault();
+ scope.cancel();
+ } else if (e.which == $.ui.keyCode.TAB && e.shiftKey) {
+ scope.cancel();
+ e.preventDefault();
+ args.grid.navigatePrev();
+ } else if (e.which == $.ui.keyCode.TAB) {
+ scope.cancel();
+ e.preventDefault();
+ args.grid.navigateNext();
+ }
+ };
+
+ this.cancel = function () {
+ $input.val(defaultValue);
+ args.cancelChanges();
+ };
+
+ this.hide = function () {
+ $wrapper.hide();
+ };
+
+ this.show = function () {
+ $wrapper.show();
+ };
+
+ this.position = function (position) {
+ var _elem_height = $wrapper.parent().find('#datagrid').height(),
+ is_hidden, _position;
+ // We can not display editor partially visible so we will lift it above select column
+ if(position.top > _elem_height) {
+ is_hidden = position.bottom - _elem_height;
+ }
+
+ if(is_hidden) {
+ _position = position.top - is_hidden;
+ } else {
+ _position = position.top - 5;
+ }
+
+ $wrapper
+ .css("top", _position)
+ .css("left", position.left - 5)
+ };
+
+ this.destroy = function () {
+ $wrapper.remove();
+ };
+
+ this.focus = function () {
+ $input.focus();
+ };
+
+ this.loadValue = function (item) {
+ $input.val(defaultValue = item[args.column.field]);
+ $input.select();
+ };
+
+ this.serializeValue = function () {
+ return $input.val();
+ };
+
+ this.applyValue = function (item, state) {
+ item[args.column.field] = state;
+ };
+
+ this.isValueChanged = function () {
+ return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
+ };
+
+ this.validate = function () {
+ if (args.column.validator) {
+ var validationResults = args.column.validator($input.val());
+ if (!validationResults.valid) {
+ return validationResults;
+ }
+ }
+
+ return {
+ valid: true,
+ msg: null
+ };
+ };
+
+ this.init();
+ }
+
+ // JSON data type editor
+ function ReadOnlyJsonTextEditor(args) {
+ var $input, $wrapper;
+ var defaultValue;
+ var scope = this;
+
+ this.init = function () {
+ var $container = $("body");
+
+ $wrapper = $("<DIV style='z-index:10000;position:absolute;background:white;padding:5px;border:3px solid gray; -moz-border-radius:10px; border-radius:10px;'/>")
+ .appendTo($container);
+
+ $input = $("<TEXTAREA hidefocus rows=5 style='backround:white;width:250px;height:80px;border:0;outline:0' readonly>")
+ .appendTo($wrapper);
+
+ $("<DIV style='text-align:right'><BUTTON class='btn btn-danger fa fa-lg fa-times long_text_editor pg-alertify-button'>Cancel</BUTTON></DIV>")
+ .appendTo($wrapper);
+
+ $wrapper.find("button:first").bind("click", this.cancel);
+ $input.bind("keydown", this.handleKeyDown);
+
+ scope.position(args.position);
+ $input.focus().select();
+ };
+
+ this.handleKeyDown = function (e) {
+ if (e.which == $.ui.keyCode.ENTER && e.ctrlKey) {
+ scope.cancel();
+ } else if (e.which == $.ui.keyCode.ESCAPE) {
+ e.preventDefault();
+ scope.cancel();
+ } else if (e.which == $.ui.keyCode.TAB && e.shiftKey) {
+ scope.cancel();
+ e.preventDefault();
+ args.grid.navigatePrev();
+ } else if (e.which == $.ui.keyCode.TAB) {
+ scope.cancel();
+ e.preventDefault();
+ args.grid.navigateNext();
+ }
+ };
+
+ this.cancel = function () {
+ $input.val(defaultValue);
+ args.cancelChanges();
+ };
+
+ this.hide = function () {
+ $wrapper.hide();
+ };
+
+ this.show = function () {
+ $wrapper.show();
+ };
+
+ this.position = function (position) {
+ var _elem_height = $wrapper.parent().find('#datagrid').height(),
+ is_hidden, _position;
+ // We can not display editor partially visible so we will lift it above select column
+ if(position.top > _elem_height) {
+ is_hidden = position.bottom - _elem_height;
+ }
+
+ if(is_hidden) {
+ _position = position.top - is_hidden;
+ } else {
+ _position = position.top - 5;
+ }
+
+ $wrapper
+ .css("top", _position)
+ .css("left", position.left - 5)
+ };
+
+ this.destroy = function () {
+ $wrapper.remove();
+ };
+
+ this.focus = function () {
+ $input.focus();
+ };
+
+ this.loadValue = function (item) {
+ var data = defaultValue = item[args.column.field];
+ if (typeof data === "object" && !Array.isArray(data)) {
+ data = JSON.stringify(data);
+ }
+ $input.val(data);
+ $input.select();
+ };
+
+ this.serializeValue = function () {
+ return $input.val();
+ };
+
+ this.applyValue = function (item, state) {
+ item[args.column.field] = state;
+ };
+
+ this.isValueChanged = function () {
+ return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
+ };
+
+ this.validate = function () {
+ if (args.column.validator) {
+ var validationResults = args.column.validator($input.val());
+ if (!validationResults.valid) {
+ return validationResults;
+ }
+ }
+
+ return {
+ valid: true,
+ msg: null
+ };
+ };
+
+ this.init();
+ }
+
+ function ReadOnlyTextEditor(args) {
+ var $input;
+ var defaultValue;
+ var scope = this;
+
+ this.init = function () {
+ $input = $("<INPUT type=text class='editor-text' readonly/>")
+ .appendTo(args.container)
+ .bind("keydown.nav", function (e) {
+ if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
+ e.stopImmediatePropagation();
+ }
+ })
+ .focus()
+ .select();
+ };
+
+ this.destroy = function () {
+ $input.remove();
+ };
+
+ this.focus = function () {
+ $input.focus();
+ };
+
+ this.getValue = function () {
+ return $input.val();
+ };
+
+ this.loadValue = function (item) {
+ defaultValue = item[args.column.field] || "";
+ $input.val(defaultValue);
+ $input[0].defaultValue = defaultValue;
+ $input.select();
+ };
+
+ this.serializeValue = function () {
+ return $input.val();
+ };
+
+ this.applyValue = function (item, state) {
+ item[args.column.field] = state;
+ };
+
+ this.isValueChanged = function () {
+ return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
+ };
+
+ this.validate = function () {
+ if (args.column.validator) {
+ var validationResults = args.column.validator($input.val());
+ if (!validationResults.valid) {
+ return validationResults;
+ }
+ }
+
+ return {
+ valid: true,
+ msg: null
+ };
+ };
+
+ this.init();
+ }
+
+ function ReadOnlyCheckboxEditor(args) {
+ var $select;
+ var defaultValue;
+ var scope = this;
+
+ this.init = function () {
+ $select = $("<INPUT type=checkbox value='true' class='editor-checkbox' hideFocus readonly>");
+ $select.appendTo(args.container);
+ $select.focus();
+ };
+
+ this.destroy = function () {
+ $select.remove();
+ };
+
+ this.focus = function () {
+ $select.focus();
+ };
+
+ this.loadValue = function (item) {
+ defaultValue = !!item[args.column.field];
+ if (defaultValue) {
+ $select.prop('checked', true);
+ } else {
+ $select.prop('checked', false);
+ }
+ };
+
+ this.serializeValue = function () {
+ return $select.prop('checked');
+ };
+
+ this.isValueChanged = function () {
+ return (this.serializeValue() !== defaultValue);
+ };
+
+ this.validate = function () {
+ return {
+ valid: true,
+ msg: null
+ };
+ };
+
+ this.init();
+ }
+
})(jQuery);
diff --git a/web/pgadmin/static/js/slickgrid/slick.pgadmin.formatters.js b/web/pgadmin/static/js/slickgrid/slick.pgadmin.formatters.js
index 6740ede..b131657 100644
--- a/web/pgadmin/static/js/slickgrid/slick.pgadmin.formatters.js
+++ b/web/pgadmin/static/js/slickgrid/slick.pgadmin.formatters.js
@@ -11,6 +11,7 @@
"Slick": {
"Formatters": {
"JsonString": JsonFormatter,
+ "Numbers": NumbersFormatter,
"Checkmark": CheckmarkFormatter
}
}
@@ -29,7 +30,18 @@
}
}
+ function NumbersFormatter(row, cell, value, columnDef, dataContext) {
+ if (value == null || value === "") {
+ return "";
+ } else {
+ return "<span style='float:right'>" + value + "</span>";
+ }
+ }
+
function CheckmarkFormatter(row, cell, value, columnDef, dataContext) {
+ if (value == null || value === "") {
+ return "";
+ }
return value ? "true" : "false";
}
diff --git a/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js b/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
index eac64b0..402c316 100644
--- a/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
+++ b/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
@@ -276,8 +276,8 @@ define(
var notify = false, msg;
if(self.handler.can_edit) {
var data_store = self.handler.data_store;
- if(_.size(data_store.added) ||
- _.size(data_store.updated)) {
+ if(data_store && (_.size(data_store.added) ||
+ _.size(data_store.updated))) {
msg = '{{ _('The data has been modified, but not saved. Are you sure you wish to discard the changes?') }}';
notify = true;
}
@@ -515,9 +515,7 @@ define(
collection = [];
}
- // Create an array for client filter
- var filter_array = new Array(),
- grid_columns = new Array(),
+ var grid_columns = new Array(),
checkboxSelector;
checkboxSelector = new Slick.CheckboxSelectColumn({
@@ -527,37 +525,35 @@ define(
grid_columns.push(checkboxSelector.getColumnDefinition());
_.each(columns, function(c) {
- filter_array.push(c.name);
var options = {
id: c.name,
field: c.name,
name: c.label
};
- // If grid is editable then add editor
- if(is_editable) {
- if(c.cell == 'Json') {
- options['editor'] = Slick.Editors.JsonText;
- } else if(c.cell == 'number') {
- options['editor'] = Slick.Editors.Text;
- } else if(c.cell == 'boolean') {
- options['editor'] = Slick.Editors.Checkbox;
- } else {
- options['editor'] = Slick.Editors.pgText;
- }
- }
-
- // To handle json & boolean formatter in grid
+ // If grid is editable then add editor else make it readonly
if(c.cell == 'Json') {
+ options['editor'] = is_editable ? Slick.Editors.JsonText
+ : Slick.Editors.ReadOnlyJsonText;
options['formatter'] = Slick.Formatters.JsonString;
+ } else if(c.cell == 'number') {
+ options['editor'] = is_editable ? Slick.Editors.Text
+ : Slick.Editors.ReadOnlyText;
+ options['formatter'] = Slick.Formatters.Numbers;
} else if(c.cell == 'boolean') {
+ options['editor'] = is_editable ? Slick.Editors.Checkbox
+ : Slick.Editors.ReadOnlyCheckbox;
options['formatter'] = Slick.Formatters.Checkmark;
+ } else {
+ options['editor'] = is_editable ? Slick.Editors.pgText
+ : Slick.Editors.ReadOnlypgText;
}
- grid_columns.push(options)
+
+ grid_columns.push(options)
});
var grid_options = {
- editable: is_editable,
+ editable: true,
enableAddRow: is_editable,
enableCellNavigation: true,
enableColumnReorder: false,
view thread (2+ 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]
Subject: Re: PATCH: To fix the issue where user cannot view long data in Query Tool output (pgAdmin4)
In-Reply-To: <CAKKotZSENBmwCP9wikdRYLGjaKvDCj+pwiyWo8J8JTuJO1GGzQ@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