diff --git a/web/pgadmin/feature_tests/view_data_dml_queries.py b/web/pgadmin/feature_tests/view_data_dml_queries.py index 153d796..6dae60f 100644 --- a/web/pgadmin/feature_tests/view_data_dml_queries.py +++ b/web/pgadmin/feature_tests/view_data_dml_queries.py @@ -195,11 +195,8 @@ CREATE TABLE public.defaults "//button[contains(@class, 'fa-save')]").click() else: if data[1] == 'true': - checkbox_el = cell_el.find_element_by_xpath(".//input") + checkbox_el = cell_el.find_element_by_xpath(".//*[contains(@class, 'multi-checkbox')]") checkbox_el.click() - ActionChains(self.driver).move_to_element(checkbox_el).double_click( - checkbox_el - ).perform() def _tables_node_expandable(self): self.page.toggle_open_tree_item(self.server['name']) diff --git a/web/pgadmin/static/css/bootstrap.overrides.css b/web/pgadmin/static/css/bootstrap.overrides.css index 73b4fc7..ca537c1 100755 --- a/web/pgadmin/static/css/bootstrap.overrides.css +++ b/web/pgadmin/static/css/bootstrap.overrides.css @@ -1346,3 +1346,27 @@ body { .alert-dismissable, .alert-dismissible { padding-right: 35px !important; } + +/* CSS for custom checkbox editor in SlickGrid */ +.multi-checkbox .check { + display: inline-block; + vertical-align: top; + width: 15px; + height: 15px; + border: 1px solid #333; + margin: 3px; + text-align: center; + line-height: 15px; +} + +.multi-checkbox .check.unchecked { + background: #fff; +} + +.multi-checkbox .check.partial:after { + content: "\2010"; +} + +.multi-checkbox .check.checked:after { + content: "\2713"; +} diff --git a/web/pgadmin/static/js/slickgrid/editors.js b/web/pgadmin/static/js/slickgrid/editors.js index 80f7cce..ab0bff0 100644 --- a/web/pgadmin/static/js/slickgrid/editors.js +++ b/web/pgadmin/static/js/slickgrid/editors.js @@ -12,10 +12,10 @@ "pgText": pgTextEditor, "JsonText": JsonTextEditor, "CustomNumber": CustomNumberEditor, + "Checkbox": pgCheckboxEditor, // Below editor will read only editors, Just to display data "ReadOnlyText": ReadOnlyTextEditor, "ReadOnlyCheckbox": ReadOnlyCheckboxEditor, - "Checkbox": CheckboxEditor, // Override editor to implement checkbox with three states "ReadOnlypgText": ReadOnlypgTextEditor, "ReadOnlyJsonText": ReadOnlyJsonTextEditor } @@ -545,7 +545,7 @@ */ function CheckboxEditor(args) { var $select, el; - var defaultValue; + var defaultValue, previousState; var scope = this; this.init = function () { @@ -564,22 +564,31 @@ checkbox_status = 1; } switch(checkbox_status) { - // unchecked, going indeterminate + // State 0 will come when we had indeterminate state case 0: - el.prop('indeterminate', true); - el.data('checked', 2); // determines next checkbox status + // We will check now + el.prop('checked', true); + el.data('checked', 1); break; - // indeterminate, going checked + // State 1 will come when we had checked state case 1: - el.prop('checked', true); + // We will uncheck now + el.prop('checked', false); + el.data('checked', 2); + break; + + // State 2 will come when we had unchecked state + case 2: + // We will set to indeterminate state + el.prop('indeterminate', true); el.data('checked', 0); break; - // checked, going unchecked + // Default, Set to indeterminate state default: - el.prop('checked', false); - el.data('checked', 1); + el.prop('indeterminate', true); + el.data('checked', 0); } }); }; @@ -594,18 +603,21 @@ this.loadValue = function (item) { defaultValue = item[args.column.field]; + previousState = 0; if (_.isNull(defaultValue)||_.isUndefined(defaultValue)) { $select.prop('indeterminate', true); - $select.data('checked', 2); + $select.data('checked', 0); } else { defaultValue = !!item[args.column.field]; if (defaultValue) { $select.prop('checked', true); - $select.data('checked', 0); + $select.data('checked', 1); + previousState = 1; } else { $select.prop('checked', false); - $select.data('checked', 1); + $select.data('checked', 2); + previousState = 2; } } }; @@ -622,10 +634,8 @@ }; 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); + var currentState = $select.data('checked'); + return currentState !== previousState; }; this.validate = function () { @@ -1023,4 +1033,87 @@ 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; + var scope = this; + + this.init = function () { + $select = $("