public inbox for [email protected]
help / color / mirror / Atom feedFrom: Akshay Joshi <[email protected]>
To: Joao De Almeida Pereira <[email protected]>
Cc: Neethu Mariya Joy <[email protected]>
Cc: pgadmin-hackers <[email protected]>
Subject: Re: Bug #3083 fix
Date: Wed, 28 Mar 2018 17:33:03 +0530
Message-ID: <CANxoLDdrGtD76fwSe-b3swcbFcrcm8Me-s5Du+F_xyCYfCg_9A@mail.gmail.com> (raw)
In-Reply-To: <CAE+jjamnK3vVZYqs_6+4yVxUPgpMbgM9NM06m1L4ytaMbkXpVQ@mail.gmail.com>
References: <CAAdJd1OqoYe1=FZkZrO-WYEYH_asph3GP8u7a6XdjmQ7FwAaiA@mail.gmail.com>
<CAE+jjamnK3vVZYqs_6+4yVxUPgpMbgM9NM06m1L4ytaMbkXpVQ@mail.gmail.com>
Hi
On Fri, Mar 2, 2018 at 3:40 AM, Joao De Almeida Pereira <
[email protected]> wrote:
> Hello Neethu,
> We passed the patch through our CI pipeline and all tests pass.
> The code looks good, but we are trying to decouple files as much as we
> can so that we do not end up with files with over 1000 lines, that are hard
> to read and to maintain. Also we are trying to create Unit Tests to have
> more coverage in our Javascript code.
>
> Can you split the new implementation code into it's own file and create
> some tests to ensure the behavior will not be broken in the future?iYou
> have some examples on: pgadmin/browser/server_groups/servers/databases/
> external_tables/*
>
I have spilt the new implementation into different file. Its' been hard
to write jasmine/feature test case as it requires drag event and exact
co-ordinate to resize the slickgrid cell.
Attached is the modified patch.
>
> Thanks
> Joao
>
> On Thu, Mar 1, 2018 at 10:37 AM Neethu Mariya Joy <
> [email protected]> wrote:
>
>> Hi,
>> I am Neethu Mariya Joy, an undergraduate pursuing BE in Computer Science
>> at BITS Pilani.
>>
>> I've attempted to fix https://redmine.postgresql.org/issues/3083. Since
>> the textarea resize feature is the default HTML feature, I have not changed
>> it. Instead, I've added draggable borders to the wrapper which expands the
>> textarea inside it.
>>
>> I'm attaching my patch as bug3083.diff below as per the contribution
>> guidelines.
>>
>> Hope this helps. Thank you for your consideration!
>>
>> Sincerely,
>> Neethu Mariya Joy
>> GitHub <https://github.com/Roboneet; | Linkedin
>> <https://www.linkedin.com/in/neethu-mariya-joy-653655128/;
>>
>>
>>
--
*Akshay Joshi*
*Sr. Software Architect *
*Phone: +91 20-3058-9517Mobile: +91 976-788-8246*
Attachments:
[application/octet-stream] RM_3083_v2.patch (54.2K, 3-RM_3083_v2.patch)
download | inline diff:
diff --git a/web/pgadmin/static/js/slickgrid/editors.js b/web/pgadmin/static/js/slickgrid/editors.js
index 7652bf3..ccd9167 100644
--- a/web/pgadmin/static/js/slickgrid/editors.js
+++ b/web/pgadmin/static/js/slickgrid/editors.js
@@ -3,961 +3,970 @@
* @module Editors
* @namespace Slick
*/
-
-(function($) {
- // register namespace
- $.extend(true, window, {
- 'Slick': {
- 'Editors': {
- 'pgText': pgTextEditor,
- 'JsonText': JsonTextEditor,
- 'CustomNumber': CustomNumberEditor,
- 'Checkbox': pgCheckboxEditor,
- // Below editor will read only editors, Just to display data
- 'ReadOnlyText': ReadOnlyTextEditor,
- 'ReadOnlyCheckbox': ReadOnlyCheckboxEditor,
- 'ReadOnlypgText': ReadOnlypgTextEditor,
- 'ReadOnlyJsonText': ReadOnlyJsonTextEditor,
+define([
+ 'sources/slickgrid/resize_editor',
+],
+function (resizeEditor) {
+
+ (function($) {
+ // register namespace
+ $.extend(true, window, {
+ 'Slick': {
+ 'Editors': {
+ 'pgText': pgTextEditor,
+ 'JsonText': JsonTextEditor,
+ 'CustomNumber': CustomNumberEditor,
+ 'Checkbox': pgCheckboxEditor,
+ // Below editor will read only editors, Just to display data
+ 'ReadOnlyText': ReadOnlyTextEditor,
+ 'ReadOnlyCheckbox': ReadOnlyCheckboxEditor,
+ 'ReadOnlypgText': ReadOnlypgTextEditor,
+ 'ReadOnlyJsonText': ReadOnlyJsonTextEditor,
+ },
},
- },
- });
-
- // return wrapper element
- function getWrapper() {
- return $('<div class=\'pg_text_editor\' />');
- }
-
- // return textarea element
- function getTextArea() {
- return $('<textarea class=\'pg_textarea text-12\' hidefocus rows=5\'>');
- }
-
- // Generate and return editor buttons
- function getButtons(editable) {
- var $buttons = $('<div class=\'pg_buttons\' />'),
- label = editable ? 'Cancel' : 'OK',
- button_type = editable ? 'btn-danger' : 'btn-primary';
-
- if (editable) {
- $('<button class=\'btn btn-primary fa fa-lg fa-save long_text_editor pg-alertify-button\'>Save</button>')
- .appendTo($buttons);
+ });
+
+ // return wrapper element
+ function getWrapper() {
+ return $('<div class=\'pg_text_editor\' />');
}
- $('<button class=\'btn ' + button_type + ' fa fa-lg fa-times long_text_editor pg-alertify-button\'>' + label + '</button>')
- .appendTo($buttons);
- return $buttons;
- }
-
- function is_valid_array(val) {
- val = $.trim(val);
- return !(val != '' && (val.charAt(0) != '{' || val.charAt(val.length - 1) != '}'));
- }
- /*
- * This function handles the [default] and [null] values for cells
- * if row is copied, otherwise returns the editor value.
- * @param {args} editor object
- * @param {item} row cell values
- * @param {state} entered value
- * @param {column_type} type of column
- */
- function setValue(args, item, state, column_type) {
- // declare a 2-d array which tracks the status of each updated cell
- // If a cell is edited for the 1st time and state is null,
- // set cell value to [default] and update its status [row][cell] to 1.
- // If same cell is edited again, and kept blank, set cell value to [null]
-
- // If a row is copied
- var grid = args.grid;
- if (item.is_row_copied) {
- if (!grid.copied_rows) {
- grid.copied_rows = [
- [],
- ];
- }
+ // return textarea element
+ function getTextArea() {
+ return $('<textarea class=\'pg_textarea text-12\' hidefocus rows=5\'>');
+ }
- var active_cell = grid.getActiveCell(),
- row = active_cell['row'],
- cell = active_cell['cell'],
- last_value = item[args.column.pos];
-
- last_value = (column_type === 'number') ?
- (_.isEmpty(last_value) || last_value) : last_value;
-
- item[args.column.field] = state;
- if (last_value && _.isNull(state) &&
- (_.isUndefined(grid.copied_rows[row]) ||
- _.isUndefined(grid.copied_rows[row][cell]))
- ) {
- item[args.column.field] = undefined;
- if (grid.copied_rows[row] == undefined) grid.copied_rows[row] = [];
- grid.copied_rows[row][cell] = 1;
+ // Generate and return editor buttons
+ function getButtons(editable) {
+ var $buttons = $('<div class=\'pg_buttons\' />'),
+ label = editable ? 'Cancel' : 'OK',
+ button_type = editable ? 'btn-danger' : 'btn-primary';
+
+ if (editable) {
+ $('<button class=\'btn btn-primary fa fa-lg fa-save long_text_editor pg-alertify-button\'>Save</button>')
+ .appendTo($buttons);
}
- } else {
- item[args.column.field] = state;
+
+ $('<button class=\'btn ' + button_type + ' fa fa-lg fa-times long_text_editor pg-alertify-button\'>' + label + '</button>')
+ .appendTo($buttons);
+ return $buttons;
}
- }
-
- function calculateEditorPosition(position, $wrapper) {
- var $edit_grid = $wrapper.parent().find('#datagrid');
- var _elem_height = $edit_grid.height(),
- is_hidden, _position;
- // We cannot display editor partially visible so we will lift it above select column
- if (position.top > _elem_height) {
- is_hidden = position.bottom - _elem_height;
+
+ function is_valid_array(val) {
+ val = $.trim(val);
+ return !(val != '' && (val.charAt(0) != '{' || val.charAt(val.length - 1) != '}'));
}
+ /*
+ * This function handles the [default] and [null] values for cells
+ * if row is copied, otherwise returns the editor value.
+ * @param {args} editor object
+ * @param {item} row cell values
+ * @param {state} entered value
+ * @param {column_type} type of column
+ */
+ function setValue(args, item, state, column_type) {
+ // declare a 2-d array which tracks the status of each updated cell
+ // If a cell is edited for the 1st time and state is null,
+ // set cell value to [default] and update its status [row][cell] to 1.
+ // If same cell is edited again, and kept blank, set cell value to [null]
+
+ // If a row is copied
+ var grid = args.grid;
+ if (item.is_row_copied) {
+ if (!grid.copied_rows) {
+ grid.copied_rows = [
+ [],
+ ];
+ }
- if (is_hidden) {
- _position = position.top - is_hidden;
- } else {
- _position = position.top - 7;
+ var active_cell = grid.getActiveCell(),
+ row = active_cell['row'],
+ cell = active_cell['cell'],
+ last_value = item[args.column.pos];
+
+ last_value = (column_type === 'number') ?
+ (_.isEmpty(last_value) || last_value) : last_value;
+
+ item[args.column.field] = state;
+ if (last_value && _.isNull(state) &&
+ (_.isUndefined(grid.copied_rows[row]) ||
+ _.isUndefined(grid.copied_rows[row][cell]))
+ ) {
+ item[args.column.field] = undefined;
+ if (grid.copied_rows[row] == undefined) grid.copied_rows[row] = [];
+ grid.copied_rows[row][cell] = 1;
+ }
+ } else {
+ item[args.column.field] = state;
+ }
}
- position.top = _position;
- var grid_width = $edit_grid.width(),
- popup_width = $wrapper.width() + 32;
- popup_width += position.left;
+ function calculateEditorPosition(position, $wrapper) {
+ var $edit_grid = $wrapper.parent().find('#datagrid');
+ var _elem_height = $edit_grid.height(),
+ is_hidden, _position;
+ // We cannot display editor partially visible so we will lift it above select column
+ if (position.top > _elem_height) {
+ is_hidden = position.bottom - _elem_height;
+ }
- if (popup_width > grid_width) {
- position.left -= (popup_width - grid_width);
- }
- return position;
- }
-
- // Text data type editor
- function pgTextEditor(args) {
- var $input, $wrapper, $buttons;
- var defaultValue;
- var scope = this;
-
- this.init = function() {
- var $container = $('body');
-
- $wrapper = getWrapper().appendTo($container);
- $input = getTextArea().appendTo($wrapper);
- $buttons = getButtons(true).appendTo($wrapper);
-
- $buttons.find('button:first').on('click', this.save);
- $buttons.find('button:last').on('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.save();
- } else if (e.which == $.ui.keyCode.ESCAPE) {
- e.preventDefault();
- scope.cancel();
- } else if (e.which == $.ui.keyCode.TAB && e.shiftKey) {
- e.preventDefault();
- args.grid.navigatePrev();
- } else if (e.which == $.ui.keyCode.TAB) {
- e.preventDefault();
- args.grid.navigateNext();
+ if (is_hidden) {
+ _position = position.top - is_hidden;
+ } else {
+ _position = position.top - 7;
}
- };
-
- this.save = function() {
- args.commitChanges();
- };
-
- this.cancel = function() {
- $input.val(defaultValue);
- args.cancelChanges();
- };
-
- this.hide = function() {
- $wrapper.hide();
- };
-
- this.show = function() {
- $wrapper.show();
- };
-
- this.position = function(position) {
- calculateEditorPosition(position, $wrapper);
- $wrapper
- .css('top', position.top)
- .css('left', position.left);
- };
-
- this.destroy = function() {
- $wrapper.remove();
- };
-
- this.focus = function() {
- $input.focus();
- };
-
- // When text editor opens
- this.loadValue = function(item) {
- if (
- _.isUndefined(item[args.column.field]) ||
- _.isNull(item[args.column.field])
- ) {
- $input.val(defaultValue = '');
- return;
+ position.top = _position;
+
+ var grid_width = $edit_grid.width(),
+ popup_width = $wrapper.width() + 32;
+ popup_width += position.left;
+
+ if (popup_width > grid_width) {
+ position.left -= (popup_width - grid_width);
}
+ return position;
+ }
+
+ // Text data type editor
+ function pgTextEditor(args) {
+ var $input, $wrapper, $buttons;
+ var defaultValue;
+ var scope = this;
+
+ this.init = function() {
+ var $container = $('body');
+
+ $wrapper = getWrapper().appendTo($container);
+ $input = getTextArea().appendTo($wrapper);
+ $buttons = getButtons(true).appendTo($wrapper);
+
+ $buttons.find('button:first').on('click', this.save);
+ $buttons.find('button:last').on('click', this.cancel);
+ $input.bind('keydown', this.handleKeyDown);
+
+ resizeEditor.resizeContentOnDrag($wrapper, $input);
+ scope.position(args.position);
+ $input.focus().select();
+ };
+
+ this.handleKeyDown = function(e) {
+ if (e.which == $.ui.keyCode.ENTER && e.ctrlKey) {
+ scope.save();
+ } else if (e.which == $.ui.keyCode.ESCAPE) {
+ e.preventDefault();
+ scope.cancel();
+ } else if (e.which == $.ui.keyCode.TAB && e.shiftKey) {
+ e.preventDefault();
+ args.grid.navigatePrev();
+ } else if (e.which == $.ui.keyCode.TAB) {
+ e.preventDefault();
+ args.grid.navigateNext();
+ }
+ };
+
+ this.save = function() {
+ args.commitChanges();
+ };
+
+ this.cancel = function() {
+ $input.val(defaultValue);
+ args.cancelChanges();
+ };
+
+ this.hide = function() {
+ $wrapper.hide();
+ };
+
+ this.show = function() {
+ $wrapper.show();
+ };
+
+ this.position = function(position) {
+ calculateEditorPosition(position, $wrapper);
+ $wrapper
+ .css('top', position.top)
+ .css('left', position.left);
+ };
- if (!args.column.is_array) {
- if (item[args.column.field] === '') {
- $input.val(defaultValue = '\'\'');
- } else if (item[args.column.field] === '\'\'') {
- $input.val(defaultValue = '\\\'\\\'');
- } else if (item[args.column.field] === '""') {
- $input.val(defaultValue = '\\"\\"');
+ this.destroy = function() {
+ $wrapper.remove();
+ };
+
+ this.focus = function() {
+ $input.focus();
+ };
+
+ // When text editor opens
+ this.loadValue = function(item) {
+ if (
+ _.isUndefined(item[args.column.field]) ||
+ _.isNull(item[args.column.field])
+ ) {
+ $input.val(defaultValue = '');
+ return;
+ }
+
+ if (!args.column.is_array) {
+ if (item[args.column.field] === '') {
+ $input.val(defaultValue = '\'\'');
+ } else if (item[args.column.field] === '\'\'') {
+ $input.val(defaultValue = '\\\'\\\'');
+ } else if (item[args.column.field] === '""') {
+ $input.val(defaultValue = '\\"\\"');
+ } else {
+ $input.val(defaultValue = item[args.column.field]);
+ $input.select();
+ }
} else {
$input.val(defaultValue = item[args.column.field]);
$input.select();
}
- } else {
- $input.val(defaultValue = item[args.column.field]);
- $input.select();
- }
- };
+ };
- this.serializeValue = function() {
+ this.serializeValue = function() {
- var value = $input.val();
- // If empty return null
- if (value === '') {
- return null;
- }
+ var value = $input.val();
+ // If empty return null
+ if (value === '') {
+ return null;
+ }
- if (!args.column.is_array) {
- if (value === '\'\'' || value === '""') {
- return '';
- } else if (value === '\\\'\\\'') {
- return '\'\'';
- } else if (value === '\\"\\"') {
- return '""';
+ if (!args.column.is_array) {
+ if (value === '\'\'' || value === '""') {
+ return '';
+ } else if (value === '\\\'\\\'') {
+ return '\'\'';
+ } else if (value === '\\"\\"') {
+ return '""';
+ } else {
+ return value;
+ }
} else {
- return value;
+ return $.trim(value);
}
- } else {
- return $.trim(value);
- }
- };
+ };
- this.applyValue = function(item, state) {
- setValue(args, item, state, 'text');
- };
+ this.applyValue = function(item, state) {
+ setValue(args, item, state, 'text');
+ };
- this.isValueChanged = function() {
- // Use _.isNull(value) for comparison for null instead of
- // defaultValue == null, because it returns true for undefined value.
- if ($input.val() == '' && _.isUndefined(defaultValue)) {
- return false;
- } else {
- return (!($input.val() == '' && _.isNull(defaultValue))) &&
- ($input.val() !== defaultValue);
- }
- };
+ this.isValueChanged = function() {
+ // Use _.isNull(value) for comparison for null instead of
+ // defaultValue == null, because it returns true for undefined value.
+ if ($input.val() == '' && _.isUndefined(defaultValue)) {
+ return false;
+ } else {
+ return (!($input.val() == '' && _.isNull(defaultValue))) &&
+ ($input.val() !== defaultValue);
+ }
+ };
- this.validate = function() {
- if (args.column.validator) {
- var validationResults = args.column.validator($input.val());
- if (!validationResults.valid) {
- return validationResults;
+ this.validate = function() {
+ if (args.column.validator) {
+ var validationResults = args.column.validator($input.val());
+ if (!validationResults.valid) {
+ return validationResults;
+ }
+ }
+
+ if (args.column.is_array && !is_valid_array($input.val())) {
+ return {
+ valid: false,
+ msg: 'Array must start with \'{\' and end with \'}\'',
+ };
}
- }
- if (args.column.is_array && !is_valid_array($input.val())) {
return {
- valid: false,
- msg: 'Array must start with \'{\' and end with \'}\'',
+ valid: true,
+ msg: null,
};
- }
+ };
- return {
- valid: true,
- msg: null,
- };
- };
-
- this.init();
- }
-
- // JSON data type editor
- function JsonTextEditor(args) {
- var $input, $wrapper, $buttons;
- var defaultValue;
- var scope = this;
-
- this.init = function() {
- var $container = $('body');
-
- $wrapper = getWrapper().appendTo($container);
- $input = getTextArea().appendTo($wrapper);
- $buttons = getButtons(true).appendTo($wrapper);
-
- $buttons.find('button:first').on('click', this.save);
- $buttons.find('button:last').on('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.save();
- } else if (e.which == $.ui.keyCode.ESCAPE) {
- e.preventDefault();
- scope.cancel();
- } else if (e.which == $.ui.keyCode.TAB && e.shiftKey) {
- e.preventDefault();
- args.grid.navigatePrev();
- } else if (e.which == $.ui.keyCode.TAB) {
- e.preventDefault();
- args.grid.navigateNext();
- }
- };
-
- this.save = function() {
- args.commitChanges();
- };
-
- this.cancel = function() {
- $input.val(defaultValue);
- args.cancelChanges();
- };
-
- this.hide = function() {
- $wrapper.hide();
- };
-
- this.show = function() {
- $wrapper.show();
- };
-
- this.position = function(position) {
- calculateEditorPosition(position, $wrapper);
- $wrapper
- .css('top', position.top)
- .css('left', position.left);
- };
-
- this.destroy = function() {
- $wrapper.remove();
- };
-
- this.focus = function() {
- $input.focus();
- };
-
- this.loadValue = function(item) {
- var data = defaultValue = item[args.column.field];
- if (data && typeof data === 'object' && !Array.isArray(data)) {
- data = JSON.stringify(data, null, 4);
- } else if (Array.isArray(data)) {
- var temp = [];
- $.each(data, function(i, val) {
- if (typeof val === 'object') {
- temp.push(JSON.stringify(val, null, 4));
- } else {
- temp.push(val);
- }
- });
- data = '[' + temp.join() + ']';
- }
- $input.val(data);
- $input.select();
- };
+ this.init();
+ }
- this.serializeValue = function() {
- if ($input.val() === '') {
- return null;
- }
- return $input.val();
- };
+ // JSON data type editor
+ function JsonTextEditor(args) {
+ var $input, $wrapper, $buttons;
+ var defaultValue;
+ var scope = this;
- this.applyValue = function(item, state) {
- setValue(args, item, state, 'text');
- };
+ this.init = function() {
+ var $container = $('body');
- this.isValueChanged = function() {
- if ($input.val() == '' && _.isUndefined(defaultValue)) {
- return false;
- } else {
- return (!($input.val() == '' && _.isNull(defaultValue))) && ($input.val() != defaultValue);
- }
- };
+ $wrapper = getWrapper().appendTo($container);
+ $input = getTextArea().appendTo($wrapper);
+ $buttons = getButtons(true).appendTo($wrapper);
+
+ $buttons.find('button:first').on('click', this.save);
+ $buttons.find('button:last').on('click', this.cancel);
+ $input.bind('keydown', this.handleKeyDown);
+
+ resizeEditor.resizeContentOnDrag($wrapper, $input);
+ scope.position(args.position);
+ $input.focus().select();
+ };
- this.validate = function() {
- if (args.column.validator) {
- var validationResults = args.column.validator($input.val());
- if (!validationResults.valid) {
- return validationResults;
+ this.handleKeyDown = function(e) {
+ if (e.which == $.ui.keyCode.ENTER && e.ctrlKey) {
+ scope.save();
+ } else if (e.which == $.ui.keyCode.ESCAPE) {
+ e.preventDefault();
+ scope.cancel();
+ } else if (e.which == $.ui.keyCode.TAB && e.shiftKey) {
+ e.preventDefault();
+ args.grid.navigatePrev();
+ } else if (e.which == $.ui.keyCode.TAB) {
+ e.preventDefault();
+ args.grid.navigateNext();
}
- }
+ };
- return {
- valid: true,
- msg: null,
- };
- };
-
- this.init();
- }
-
- // Text data type editor
- function ReadOnlypgTextEditor(args) {
- var $input, $wrapper, $buttons;
- var defaultValue;
- var scope = this;
-
- this.init = function() {
- var $container = $('body');
-
- $wrapper = getWrapper().appendTo($container);
- $input = getTextArea().appendTo($wrapper);
- $buttons = getButtons(false).appendTo($wrapper);
-
- $buttons.find('button:first').on('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) {
- calculateEditorPosition(position, $wrapper);
- $wrapper
- .css('top', position.top)
- .css('left', position.left);
- };
-
- 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;
+ this.save = function() {
+ args.commitChanges();
+ };
+
+ this.cancel = function() {
+ $input.val(defaultValue);
+ args.cancelChanges();
+ };
+
+ this.hide = function() {
+ $wrapper.hide();
+ };
+
+ this.show = function() {
+ $wrapper.show();
+ };
+
+ this.position = function(position) {
+ calculateEditorPosition(position, $wrapper);
+ $wrapper
+ .css('top', position.top)
+ .css('left', position.left);
+ };
+
+ this.destroy = function() {
+ $wrapper.remove();
+ };
+
+ this.focus = function() {
+ $input.focus();
+ };
+
+ this.loadValue = function(item) {
+ var data = defaultValue = item[args.column.field];
+ if (data && typeof data === 'object' && !Array.isArray(data)) {
+ data = JSON.stringify(data, null, 4);
+ } else if (Array.isArray(data)) {
+ var temp = [];
+ $.each(data, function(i, val) {
+ if (typeof val === 'object') {
+ temp.push(JSON.stringify(val, null, 4));
+ } else {
+ temp.push(val);
+ }
+ });
+ data = '[' + temp.join() + ']';
}
- }
+ $input.val(data);
+ $input.select();
+ };
- return {
- valid: true,
- msg: null,
- };
- };
-
- this.init();
- }
-
- // JSON data type editor
- function ReadOnlyJsonTextEditor(args) {
- var $input, $wrapper, $buttons;
- var defaultValue;
- var scope = this;
-
- this.init = function() {
- var $container = $('body');
-
- $wrapper = getWrapper().appendTo($container);
- $input = getTextArea().appendTo($wrapper);
- $buttons = getButtons(false).appendTo($wrapper);
-
- $buttons.find('button:first').on('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) {
- calculateEditorPosition(position, $wrapper);
- $wrapper
- .css('top', position.top)
- .css('left', position.left);
- };
-
- 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, null, 4);
- } else if (Array.isArray(data)) {
- var temp = [];
- $.each(data, function(i, val) {
- if (typeof val === 'object') {
- temp.push(JSON.stringify(val, null, 4));
- } else {
- temp.push(val);
+ this.serializeValue = function() {
+ if ($input.val() === '') {
+ return null;
+ }
+ return $input.val();
+ };
+
+ this.applyValue = function(item, state) {
+ setValue(args, item, state, 'text');
+ };
+
+ this.isValueChanged = function() {
+ if ($input.val() == '' && _.isUndefined(defaultValue)) {
+ return false;
+ } else {
+ return (!($input.val() == '' && _.isNull(defaultValue))) && ($input.val() != defaultValue);
+ }
+ };
+
+ this.validate = function() {
+ if (args.column.validator) {
+ var validationResults = args.column.validator($input.val());
+ if (!validationResults.valid) {
+ return validationResults;
}
- });
- data = '[' + temp.join() + ']';
- }
- $input.val(data);
- $input.select();
- };
+ }
- this.serializeValue = function() {
- return $input.val();
- };
+ return {
+ valid: true,
+ msg: null,
+ };
+ };
- this.applyValue = function(item, state) {
- item[args.column.field] = state;
- };
+ this.init();
+ }
+
+ // Text data type editor
+ function ReadOnlypgTextEditor(args) {
+ var $input, $wrapper, $buttons;
+ var defaultValue;
+ var scope = this;
+
+ this.init = function() {
+ var $container = $('body');
- this.isValueChanged = function() {
- return (!($input.val() == '' && defaultValue == null)) && ($input.val() != defaultValue);
- };
+ $wrapper = getWrapper().appendTo($container);
+ $input = getTextArea().appendTo($wrapper);
+ $buttons = getButtons(false).appendTo($wrapper);
- this.validate = function() {
- if (args.column.validator) {
- var validationResults = args.column.validator($input.val());
- if (!validationResults.valid) {
- return validationResults;
+ $buttons.find('button:first').on('click', this.cancel);
+ $input.bind('keydown', this.handleKeyDown);
+
+ resizeEditor.resizeContentOnDrag($wrapper, $input);
+ 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();
+ };
- return {
- valid: true,
- msg: null,
+ this.hide = function() {
+ $wrapper.hide();
};
- };
- this.init();
- }
+ this.show = function() {
+ $wrapper.show();
+ };
- function ReadOnlyTextEditor(args) {
- var $input;
- var defaultValue;
+ this.position = function(position) {
+ calculateEditorPosition(position, $wrapper);
+ $wrapper
+ .css('top', position.top)
+ .css('left', position.left);
+ };
- 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() {
+ $wrapper.remove();
+ };
- this.destroy = function() {
- $input.remove();
- };
+ this.focus = function() {
+ $input.focus();
+ };
- this.focus = function() {
- $input.focus();
- };
+ this.loadValue = function(item) {
+ $input.val(defaultValue = item[args.column.field]);
+ $input.select();
+ };
- this.getValue = function() {
- return $input.val();
- };
+ this.serializeValue = function() {
+ return $input.val();
+ };
- this.loadValue = function(item) {
- var value = item[args.column.field];
+ this.applyValue = function(item, state) {
+ item[args.column.field] = state;
+ };
- // Check if value is null or undefined
- if (value === undefined && typeof value === 'undefined') {
- value = '';
- }
- defaultValue = value;
- $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;
+ 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,
+ return {
+ valid: true,
+ msg: null,
+ };
};
- };
- this.init();
- }
+ this.init();
+ }
- function ReadOnlyCheckboxEditor(args) {
- var $select;
- var defaultValue;
+ // JSON data type editor
+ function ReadOnlyJsonTextEditor(args) {
+ var $input, $wrapper, $buttons;
+ var defaultValue;
+ var scope = this;
- this.init = function() {
- $select = $('<INPUT type=checkbox value=\'true\' class=\'editor-checkbox\' hideFocus disabled>');
- $select.appendTo(args.container);
- $select.focus();
- };
+ this.init = function() {
+ var $container = $('body');
- this.destroy = function() {
- $select.remove();
- };
+ $wrapper = getWrapper().appendTo($container);
+ $input = getTextArea().appendTo($wrapper);
+ $buttons = getButtons(false).appendTo($wrapper);
- this.focus = function() {
- $select.focus();
- };
+ $buttons.find('button:first').on('click', this.cancel);
+ $input.bind('keydown', this.handleKeyDown);
- this.loadValue = function(item) {
- defaultValue = item[args.column.pos];
- if (_.isNull(defaultValue) || _.isUndefined(defaultValue)) {
- $select.prop('indeterminate', true);
- $select.data('checked', 2);
- } else {
- defaultValue = !!item[args.column.pos];
- if (defaultValue) {
- $select.prop('checked', true);
- $select.data('checked', 0);
- } else {
- $select.prop('checked', false);
- $select.data('checked', 1);
+ resizeEditor.resizeContentOnDrag($wrapper, $input);
+ 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.serializeValue = function() {
- if ($select.prop('indeterminate')) {
- return null;
- }
- return $select.prop('checked');
- };
+ this.cancel = function() {
+ $input.val(defaultValue);
+ args.cancelChanges();
+ };
- this.applyValue = function(item, state) {
- item[args.column.pos] = state;
- };
+ this.hide = function() {
+ $wrapper.hide();
+ };
+
+ this.show = function() {
+ $wrapper.show();
+ };
+
+ this.position = function(position) {
+ calculateEditorPosition(position, $wrapper);
+ $wrapper
+ .css('top', position.top)
+ .css('left', position.left);
+ };
+
+ this.destroy = function() {
+ $wrapper.remove();
+ };
- this.isValueChanged = function() {
- // var select_value = this.serializeValue();
- var select_value = $select.data('checked');
- return (!(select_value === 2 && (defaultValue == null || defaultValue == undefined))) &&
- (select_value !== defaultValue);
- };
+ this.focus = function() {
+ $input.focus();
+ };
- this.validate = function() {
- return {
- valid: true,
- msg: null,
+ this.loadValue = function(item) {
+ var data = defaultValue = item[args.column.field];
+ if (typeof data === 'object' && !Array.isArray(data)) {
+ data = JSON.stringify(data, null, 4);
+ } else if (Array.isArray(data)) {
+ var temp = [];
+ $.each(data, function(i, val) {
+ if (typeof val === 'object') {
+ temp.push(JSON.stringify(val, null, 4));
+ } else {
+ temp.push(val);
+ }
+ });
+ data = '[' + temp.join() + ']';
+ }
+ $input.val(data);
+ $input.select();
};
- };
- this.init();
- }
+ this.serializeValue = function() {
+ return $input.val();
+ };
- function CustomNumberEditor(args) {
- var $input;
- var defaultValue;
+ this.applyValue = function(item, state) {
+ item[args.column.field] = state;
+ };
- this.init = function() {
- $input = $('<INPUT type=text class=\'editor-text\' />');
+ this.isValueChanged = function() {
+ return (!($input.val() == '' && defaultValue == null)) && ($input.val() != defaultValue);
+ };
- $input.bind('keydown.nav', function(e) {
- if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
- e.stopImmediatePropagation();
+ this.validate = function() {
+ if (args.column.validator) {
+ var validationResults = args.column.validator($input.val());
+ if (!validationResults.valid) {
+ return validationResults;
+ }
}
- });
- $input.appendTo(args.container);
- $input.focus().select();
- };
+ return {
+ valid: true,
+ msg: null,
+ };
+ };
- this.destroy = function() {
- $input.remove();
- };
+ this.init();
+ }
- this.focus = function() {
- $input.focus();
- };
+ function ReadOnlyTextEditor(args) {
+ var $input;
+ var defaultValue;
+
+ 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.loadValue = function(item) {
- defaultValue = item[args.column.field];
+ this.destroy = function() {
+ $input.remove();
+ };
- if (args.column.is_array && !_.isNull(defaultValue) && !_.isUndefined(defaultValue)) {
- $input.val('{' + defaultValue.join() + '}');
- } else {
- $input.val(defaultValue);
- }
+ this.focus = function() {
+ $input.focus();
+ };
- $input[0].defaultValue = defaultValue;
- $input.select();
- };
+ this.getValue = function() {
+ return $input.val();
+ };
- this.serializeValue = function() {
- var value = $input.val();
+ this.loadValue = function(item) {
+ var value = item[args.column.field];
- if (value === '') {
- return null;
- }
+ // Check if value is null or undefined
+ if (value === undefined && typeof value === 'undefined') {
+ value = '';
+ }
+ defaultValue = value;
+ $input.val(defaultValue);
+ $input[0].defaultValue = defaultValue;
+ $input.select();
+ };
+
+ this.serializeValue = function() {
+ return $input.val();
+ };
- if (args.column.is_array) {
- // Remove leading { and trailing }.
- // Also remove leading and trailing whitespaces.
- var val = $.trim(value.slice(1, -1));
+ this.applyValue = function(item, state) {
+ item[args.column.field] = state;
+ };
- if (val == '') {
- return [];
+ 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;
+ }
}
- val = val.split(',');
- for (var k in val) {
- if (val[k] == '') {
- val[k] = null; //empty string from editor is null value.
+
+ return {
+ valid: true,
+ msg: null,
+ };
+ };
+
+ this.init();
+ }
+
+ function ReadOnlyCheckboxEditor(args) {
+ var $select;
+ var defaultValue;
+
+ this.init = function() {
+ $select = $('<INPUT type=checkbox value=\'true\' class=\'editor-checkbox\' hideFocus disabled>');
+ $select.appendTo(args.container);
+ $select.focus();
+ };
+
+ this.destroy = function() {
+ $select.remove();
+ };
+
+ this.focus = function() {
+ $select.focus();
+ };
+
+ this.loadValue = function(item) {
+ defaultValue = item[args.column.pos];
+ if (_.isNull(defaultValue) || _.isUndefined(defaultValue)) {
+ $select.prop('indeterminate', true);
+ $select.data('checked', 2);
+ } else {
+ defaultValue = !!item[args.column.pos];
+ if (defaultValue) {
+ $select.prop('checked', true);
+ $select.data('checked', 0);
+ } else {
+ $select.prop('checked', false);
+ $select.data('checked', 1);
}
}
- return val;
- }
+ };
- return value;
- };
+ this.serializeValue = function() {
+ if ($select.prop('indeterminate')) {
+ return null;
+ }
+ return $select.prop('checked');
+ };
- this.applyValue = function(item, state) {
- setValue(args, item, state, 'number');
- };
+ this.applyValue = function(item, state) {
+ item[args.column.pos] = state;
+ };
- this.isValueChanged = function() {
- if ($input.val() == '' && _.isUndefined(defaultValue)) {
- return false;
- } else if ($input.val() == '' && defaultValue == '') {
- return true;
- } else {
- return (!($input.val() == '' && _.isNull(defaultValue))) &&
- ($input.val() != defaultValue);
- }
- };
+ this.isValueChanged = function() {
+ // var select_value = this.serializeValue();
+ var select_value = $select.data('checked');
+ return (!(select_value === 2 && (defaultValue == null || defaultValue == undefined))) &&
+ (select_value !== defaultValue);
+ };
- this.validate = function() {
- var value = $input.val();
- if (!args.column.is_array && isNaN(value)) {
+ this.validate = function() {
return {
- valid: false,
- msg: 'Please enter a valid number',
+ valid: true,
+ msg: null,
};
- }
- if (args.column.validator) {
- var validationResults = args.column.validator(value);
- if (!validationResults.valid) {
- return validationResults;
+ };
+
+ this.init();
+ }
+
+ function CustomNumberEditor(args) {
+ var $input;
+ var defaultValue;
+
+ this.init = function() {
+ $input = $('<INPUT type=text class=\'editor-text\' />');
+
+ $input.bind('keydown.nav', function(e) {
+ if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
+ e.stopImmediatePropagation();
+ }
+ });
+
+ $input.appendTo(args.container);
+ $input.focus().select();
+ };
+
+ this.destroy = function() {
+ $input.remove();
+ };
+
+ this.focus = function() {
+ $input.focus();
+ };
+
+ this.loadValue = function(item) {
+ defaultValue = item[args.column.field];
+
+ if (args.column.is_array && !_.isNull(defaultValue) && !_.isUndefined(defaultValue)) {
+ $input.val('{' + defaultValue.join() + '}');
+ } else {
+ $input.val(defaultValue);
}
- }
- if (args.column.is_array) {
- if (!is_valid_array(value)) {
- return {
- valid: false,
- msg: 'Array must start with \'{\' and end with \'}\'',
- };
+ $input[0].defaultValue = defaultValue;
+ $input.select();
+ };
+
+ this.serializeValue = function() {
+ var value = $input.val();
+
+ if (value === '') {
+ return null;
}
- var val = $.trim(value.slice(1, -1)),
- arr;
+ if (args.column.is_array) {
+ // Remove leading { and trailing }.
+ // Also remove leading and trailing whitespaces.
+ var val = $.trim(value.slice(1, -1));
+
+ if (val == '') {
+ return [];
+ }
+ val = val.split(',');
+ for (var k in val) {
+ if (val[k] == '') {
+ val[k] = null; //empty string from editor is null value.
+ }
+ }
+ return val;
+ }
- if (val == '') {
- arr = [];
+ return value;
+ };
+
+ this.applyValue = function(item, state) {
+ setValue(args, item, state, 'number');
+ };
+
+ this.isValueChanged = function() {
+ if ($input.val() == '' && _.isUndefined(defaultValue)) {
+ return false;
+ } else if ($input.val() == '' && defaultValue == '') {
+ return true;
} else {
- arr = val.split(',');
+ return (!($input.val() == '' && _.isNull(defaultValue))) &&
+ ($input.val() != defaultValue);
+ }
+ };
+
+ this.validate = function() {
+ var value = $input.val();
+ if (!args.column.is_array && isNaN(value)) {
+ return {
+ valid: false,
+ msg: 'Please enter a valid number',
+ };
+ }
+ if (args.column.validator) {
+ var validationResults = args.column.validator(value);
+ if (!validationResults.valid) {
+ return validationResults;
+ }
}
- for (var k in arr) {
- if (isNaN(arr[k])) {
+ if (args.column.is_array) {
+ if (!is_valid_array(value)) {
return {
valid: false,
- msg: 'Please enter a valid numbers',
+ msg: 'Array must start with \'{\' and end with \'}\'',
};
}
+
+ var val = $.trim(value.slice(1, -1)),
+ arr;
+
+ if (val == '') {
+ arr = [];
+ } else {
+ arr = val.split(',');
+ }
+
+ for (var k in arr) {
+ if (isNaN(arr[k])) {
+ return {
+ valid: false,
+ msg: 'Please enter a valid numbers',
+ };
+ }
+ }
}
- }
- return {
- valid: true,
- msg: null,
- };
- };
-
- this.init();
- }
-
- // Custom checkbox editor, We need it for runtime as it does not render
- // indeterminate checkbox state
- function pgCheckboxEditor(args) {
- var $select, el;
- var defaultValue, previousState;
-
- this.init = function() {
- $select = $('<div class=\'multi-checkbox\'><span class=\'check\' hideFocus></span></div>');
- $select.appendTo(args.container);
- $select.focus();
-
- // The following code is taken from https://css-tricks.com/indeterminate-checkboxes/
- $select.bind('click', function() {
- el = $(this);
- var states = ['unchecked', 'partial', 'checked'];
- var curState = el.find('.check').data('state');
- curState++;
- el.find('.check')
- .removeClass('unchecked partial checked')
- .addClass(states[curState % states.length])
- .data('state', curState % states.length);
- });
- };
-
- this.destroy = function() {
- $select.remove();
- };
-
- this.focus = function() {
- $select.focus();
- };
-
- this.loadValue = function(item) {
- defaultValue = item[args.column.field];
- previousState = 1;
- if (_.isNull(defaultValue) || _.isUndefined(defaultValue)) {
- $select.find('.check').data('state', 1).addClass('partial');
- } else {
- defaultValue = !!item[args.column.field];
- if (defaultValue) {
- $select.find('.check').data('state', 2).addClass('checked');
- previousState = 2;
+ return {
+ valid: true,
+ msg: null,
+ };
+ };
+
+ this.init();
+ }
+
+ // Custom checkbox editor, We need it for runtime as it does not render
+ // indeterminate checkbox state
+ function pgCheckboxEditor(args) {
+ var $select, el;
+ var defaultValue, previousState;
+
+ this.init = function() {
+ $select = $('<div class=\'multi-checkbox\'><span class=\'check\' hideFocus></span></div>');
+ $select.appendTo(args.container);
+ $select.focus();
+
+ // The following code is taken from https://css-tricks.com/indeterminate-checkboxes/
+ $select.bind('click', function() {
+ el = $(this);
+ var states = ['unchecked', 'partial', 'checked'];
+ var curState = el.find('.check').data('state');
+ curState++;
+ el.find('.check')
+ .removeClass('unchecked partial checked')
+ .addClass(states[curState % states.length])
+ .data('state', curState % states.length);
+ });
+ };
+
+ this.destroy = function() {
+ $select.remove();
+ };
+
+ this.focus = function() {
+ $select.focus();
+ };
+
+ this.loadValue = function(item) {
+ defaultValue = item[args.column.field];
+ previousState = 1;
+ if (_.isNull(defaultValue) || _.isUndefined(defaultValue)) {
+ $select.find('.check').data('state', 1).addClass('partial');
} else {
- $select.find('.check').data('state', 0).addClass('unchecked');
- previousState = 0;
+ defaultValue = !!item[args.column.field];
+ if (defaultValue) {
+ $select.find('.check').data('state', 2).addClass('checked');
+ previousState = 2;
+ } else {
+ $select.find('.check').data('state', 0).addClass('unchecked');
+ previousState = 0;
+ }
}
- }
- };
+ };
- this.serializeValue = function() {
- if ($select.find('.check').data('state') == 1) {
- return null;
- }
- return $select.find('.check').data('state') == 2 ? true : false;
- };
+ this.serializeValue = function() {
+ if ($select.find('.check').data('state') == 1) {
+ return null;
+ }
+ return $select.find('.check').data('state') == 2 ? true : false;
+ };
- this.applyValue = function(item, state) {
- item[args.column.field] = state;
- };
+ this.applyValue = function(item, state) {
+ item[args.column.field] = state;
+ };
- this.isValueChanged = function() {
- var currentState = $select.find('.check').data('state');
- return currentState !== previousState;
- };
+ this.isValueChanged = function() {
+ var currentState = $select.find('.check').data('state');
+ return currentState !== previousState;
+ };
- this.validate = function() {
- if (args.column.validator) {
- var validationResults = args.column.validator(this.serializeValue());
- if (!validationResults.valid) {
- return validationResults;
+ this.validate = function() {
+ if (args.column.validator) {
+ var validationResults = args.column.validator(this.serializeValue());
+ if (!validationResults.valid) {
+ return validationResults;
+ }
}
- }
- return {
- valid: true,
- msg: null,
+ return {
+ valid: true,
+ msg: null,
+ };
};
- };
- this.init();
- }
+ this.init();
+ }
-})(window.jQuery);
+ })(window.jQuery);
+});
diff --git a/web/pgadmin/static/js/slickgrid/resize_editor.js b/web/pgadmin/static/js/slickgrid/resize_editor.js
new file mode 100644
index 0000000..3a3ec34
--- /dev/null
+++ b/web/pgadmin/static/js/slickgrid/resize_editor.js
@@ -0,0 +1,45 @@
+export function resizeContentOnDrag($wrapper, $input){
+ // right border, bottom border and right bottom corner of the wrapper are draggable
+ $wrapper.append('<div class="drag-border" data="right"></div>\
+ <div class="drag-border" data="bottom"></div>\
+ <div class="drag-border" data="both"></div>');
+
+ $wrapper.find('.drag-border').on('drag', (event)=>{
+ event.preventDefault();
+ var mouseX = event.clientX;
+ var mouseY = event.clientY;
+
+ // mouseX == 0 && mouseY == 0 mouse up / end of drag
+ if(mouseX == 0 && mouseY == 0)return;
+
+ // default spacing between $input and cursor
+ var paddingBottom = 30;
+ var paddingRight = 10;
+ var dir = event.target.getAttribute('data');
+
+ // size of $input is changed according to cursor position
+ switch(dir){
+ case 'right':
+ changeWidth($input, mouseX, paddingRight);
+ break;
+ case 'bottom':
+ changeHeight($input, mouseY, paddingBottom);
+ break;
+ case 'both':
+ changeHeight($input, mouseY, paddingBottom);
+ changeWidth($input, mouseX, paddingRight);
+ }
+ });
+}
+
+function changeWidth($input, mouseX, padding){
+ var rect = $input[0].getBoundingClientRect();
+ var newWidth = rect.width + mouseX - rect.right - padding;
+ $input.css('width', newWidth.toString() + 'px');
+}
+
+function changeHeight($input, mouseY, padding){
+ var rect = $input[0].getBoundingClientRect();
+ var newHeight = rect.height + mouseY - rect.bottom - padding;
+ $input.css('height', newHeight.toString() + 'px');
+}
diff --git a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
index 46588dc..034e405 100644
--- a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
+++ b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
@@ -505,6 +505,38 @@ input.editor-checkbox:focus {
-moz-border-radius:10px;
border-radius:10px;
}
+
+.drag-border{
+ background: transparent;
+ position: absolute;
+}
+
+.drag-border[data=right]{
+ cursor: ew-resize;
+ top: 0;
+ right: -10px;
+ bottom: 0;
+ width: 20px;
+}
+
+.drag-border[data=bottom]{
+ cursor: ns-resize;
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: -10px;
+ height: 20px;
+}
+
+.drag-border[data=both]{
+ cursor: move;
+ position: absolute;
+ bottom: -10px;
+ right: -10px;
+ width: 20px;
+ height: 20px;
+}
+
.pg_textarea {
backround:#fff;
width:250px;
view thread (13+ 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], [email protected]
Subject: Re: Bug #3083 fix
In-Reply-To: <CANxoLDdrGtD76fwSe-b3swcbFcrcm8Me-s5Du+F_xyCYfCg_9A@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