', {
- 'class': 'pg-panel-content',
- }).append($(that.content));
-
- myPanel.closeable(!!that.isCloseable);
- myPanel.layout().addItem($container);
- that.panel = myPanel;
- if (that.events && _.isObject(that.events)) {
- _.each(that.events, function(v, k) {
- if (v && _.isFunction(v)) {
- myPanel.on(k, v);
- }
- });
- }
- _.each([
- wcDocker.EVENT.UPDATED, wcDocker.EVENT.VISIBILITY_CHANGED,
- wcDocker.EVENT.BEGIN_DOCK, wcDocker.EVENT.END_DOCK,
- wcDocker.EVENT.GAIN_FOCUS, wcDocker.EVENT.LOST_FOCUS,
- wcDocker.EVENT.CLOSED, wcDocker.EVENT.BUTTON,
- wcDocker.EVENT.ATTACHED, wcDocker.EVENT.DETACHED,
- wcDocker.EVENT.MOVE_STARTED, wcDocker.EVENT.MOVE_ENDED,
- wcDocker.EVENT.MOVED, wcDocker.EVENT.RESIZE_STARTED,
- wcDocker.EVENT.RESIZE_ENDED, wcDocker.EVENT.RESIZED,
- wcDocker.EVENT.SCROLLED,
- ], function(ev) {
- myPanel.on(ev, that.eventFunc.bind(myPanel, ev));
- });
+let pgBrowser = pgAdmin.Browser = pgAdmin.Browser || {};
+let wcDocker = window.wcDocker;
- if (that.onCreate && _.isFunction(that.onCreate)) {
- that.onCreate.apply(that, [myPanel, $container]);
- }
+pgAdmin.Browser.Panel = function(options) {
+ const defaults = [
+ 'name', 'title', 'width', 'height', 'showTitle', 'isCloseable',
+ 'isPrivate', 'content', 'icon', 'events', 'onCreate', 'elContainer',
+ 'canHide', 'limit', 'isMoveable',
+ ];
+ _.extend(this, _.pick(options, defaults));
+};
- if (that.elContainer) {
- myPanel.pgElContainer = $container;
- $container.addClass('pg-el-container');
- _.each([
- wcDocker.EVENT.RESIZED, wcDocker.EVENT.ATTACHED,
- wcDocker.EVENT.DETACHED, wcDocker.EVENT.VISIBILITY_CHANGED,
- ], function(ev) {
- myPanel.on(ev, that.resizedContainer.bind(myPanel));
- });
- that.resizedContainer.apply(myPanel);
- }
+_.extend(pgAdmin.Browser.Panel.prototype, {
+ name: '',
+ title: '',
+ width: 300,
+ height: 600,
+ showTitle: true,
+ isCloseable: true,
+ isPrivate: false,
+ isMoveable: false,
+ content: '',
+ icon: '',
+ panel: null,
+ onCreate: null,
+ elContainer: false,
+ limit: null,
+ load: function(docker, title) {
+ const that = this;
+ if (!that.panel) {
+ docker.registerPanelType(that.name, {
+ title: that.title,
+ isPrivate: that.isPrivate,
+ limit: that.limit,
+ onCreate: function(myPanel) {
+ $(myPanel).data('pgAdminName', that.name);
+ myPanel.initSize(that.width, that.height);
- // Bind events only if they are configurable
- if (that.canHide) {
- _.each([wcDocker.EVENT.CLOSED, wcDocker.EVENT.VISIBILITY_CHANGED],
- function(ev) {
- myPanel.on(ev, that.handleVisibility.bind(myPanel, ev));
- });
+ if (!that.showTitle)
+ myPanel.title(false);
+ else {
+ const title_elem = '
' + (title || that.title) + '';
+ myPanel.title(title_elem);
+ if (that.icon !== '')
+ myPanel.icon(that.icon);
+ }
+
+ const $container = $('
', {
+ 'class': 'pg-panel-content',
+ }).append($(that.content));
+
+ myPanel.closeable(!!that.isCloseable);
+ myPanel.layout().addItem($container);
+ that.panel = myPanel;
+ if (that.events && _.isObject(that.events)) {
+ _.each(that.events, function(v, k) {
+ if (v && _.isFunction(v)) {
+ myPanel.on(k, v);
}
- },
+ });
+ }
+ _.each([
+ wcDocker.EVENT.UPDATED, wcDocker.EVENT.VISIBILITY_CHANGED,
+ wcDocker.EVENT.BEGIN_DOCK, wcDocker.EVENT.END_DOCK,
+ wcDocker.EVENT.GAIN_FOCUS, wcDocker.EVENT.LOST_FOCUS,
+ wcDocker.EVENT.CLOSED, wcDocker.EVENT.BUTTON,
+ wcDocker.EVENT.ATTACHED, wcDocker.EVENT.DETACHED,
+ wcDocker.EVENT.MOVE_STARTED, wcDocker.EVENT.MOVE_ENDED,
+ wcDocker.EVENT.MOVED, wcDocker.EVENT.RESIZE_STARTED,
+ wcDocker.EVENT.RESIZE_ENDED, wcDocker.EVENT.RESIZED,
+ wcDocker.EVENT.SCROLLED,
+ ], function(ev) {
+ myPanel.on(ev, that.eventFunc.bind(myPanel, ev));
});
- }
- },
- eventFunc: function(eventName) {
- var name = $(this).data('pgAdminName');
-
- try {
- pgBrowser.Events.trigger(
- 'pgadmin-browser:panel', eventName, this, arguments
- );
- pgBrowser.Events.trigger(
- 'pgadmin-browser:panel:' + eventName, this, arguments
- );
- if (name) {
- pgBrowser.Events.trigger(
- 'pgadmin-browser:panel-' + name, eventName, this, arguments
- );
- pgBrowser.Events.trigger(
- 'pgadmin-browser:panel-' + name + ':' + eventName, this, arguments
- );
+ if (that.onCreate && _.isFunction(that.onCreate)) {
+ that.onCreate.apply(that, [myPanel, $container]);
}
- } catch (e) {
- console.warn(e.stack || e);
- }
- },
- resizedContainer: function() {
- var p = this;
-
- if (p.pgElContainer && !p.pgResizeTimeout) {
- if (!p.isVisible()) {
- clearTimeout(p.pgResizeTimeout);
- p.pgResizeTimeout = null;
-
- return;
+
+ if (that.elContainer) {
+ myPanel.pgElContainer = $container;
+ $container.addClass('pg-el-container');
+ _.each([
+ wcDocker.EVENT.RESIZED, wcDocker.EVENT.ATTACHED,
+ wcDocker.EVENT.DETACHED, wcDocker.EVENT.VISIBILITY_CHANGED,
+ ], function(ev) {
+ myPanel.on(ev, that.resizedContainer.bind(myPanel));
+ });
+ that.resizedContainer.apply(myPanel);
}
- p.pgResizeTimeout = setTimeout(
- function() {
- var w = p.width();
- p.pgResizeTimeout = null;
-
- if (w <= 480) {
- w = 'xs';
- } else if (w < 600) {
- w = 'sm';
- } else if (w < 768) {
- w = 'md';
- } else {
- w = 'lg';
- }
- p.pgElContainer.attr('el', w);
- },
- 100
+ // Bind events only if they are configurable
+ if (that.canHide) {
+ _.each([wcDocker.EVENT.CLOSED, wcDocker.EVENT.VISIBILITY_CHANGED],
+ function(ev) {
+ myPanel.on(ev, that.handleVisibility.bind(myPanel, ev));
+ });
+ }
+
+ // Update panels as per new preference value
+ window.top.pgAdmin.Browser.Events.on(
+ 'pgadmin-browser:preferences-updated',
+ that.updatePanel, myPanel
);
- }
- },
- handleVisibility: function(eventName) {
- // Currently this function only works with dashboard panel but
- // as per need it can be extended
- if (this._type != 'dashboard' || _.isUndefined(pgAdmin.Dashboard))
- return;
-
- if (eventName == 'panelClosed') {
- pgBrowser.save_current_layout(pgBrowser);
- pgAdmin.Dashboard.toggleVisibility(false);
- } else if (eventName == 'panelVisibilityChanged') {
- if (pgBrowser.tree) {
- pgBrowser.save_current_layout(pgBrowser);
- var selectedNode = pgBrowser.tree.selected();
- // Discontinue this event after first time visible
- this.off(wcDocker.EVENT.VISIBILITY_CHANGED);
- if (!_.isUndefined(pgAdmin.Dashboard))
- pgAdmin.Dashboard.toggleVisibility(true);
- // Explicitly trigger tree selected event when we add the tab.
- pgBrowser.Events.trigger('pgadmin-browser:tree:selected', selectedNode,
- pgBrowser.tree.itemData(selectedNode), pgBrowser.Node);
+
+ myPanel.moveable(that.isMoveable);
+ // If not frame then update it
+ if(!that.isMoveable) {
+ that.updatePanel.call(myPanel);
}
- }
- },
+ },
+ });
+ }
+ },
+
+ // This method will allow us to lock the individual Frame panel
+ lockFramePanel: function() {
+ // Find each wcFrame
+ $('.wcFrameTitleBar').each(function() {
+ // If it's not locked
+ if(!$(this).hasClass('no-mouse-event')) {
+ $(this).addClass('no-mouse-event');
+ }
+ });
+ },
+ // This method will allow us to unlock the individual Frame panel
+ unlockFramePanel: function() {
+ $('.wcFrameTitleBar').each(function() {
+ // If it's locked
+ if($(this).hasClass('no-mouse-event')) {
+ $(this).removeClass('no-mouse-event');
+ }
});
+ },
+
+ // We'll execute this function after preferences update
+ updatePanel: function() {
+ let panel = this;
+ let preference = pgBrowser.get_preference(
+ 'miscellaneous', 'lock_panel_layout'
+ );
+
+ // If the Panel opens in iframe
+ if(_.isUndefined(preference) || _.isNull(preference)) {
+ if(window.opener && window.opener.pgAdmin.Browser){
+ preference = window.opener.pgAdmin.Browser.get_preference(
+ 'miscellaneous', 'lock_panel_layout'
+ );
+ } else if(window.top && window.top.pgAdmin.Browser) {
+ preference = window.top.pgAdmin.Browser.get_preference(
+ 'miscellaneous', 'lock_panel_layout'
+ );
+ }
+ }
+
+ // If still preference is missing then don't do anything
+ if(_.isUndefined(preference) || _.isNull(preference)) {
+ return;
+ }
+
+ /*
+ preference.value == true then Lock
+ preference.value == false then UnLock
+ panel.moveable() returns True if panel is moveable
+ */
+ let isMoveable = !preference.value;
+
+ // If not moveable then lock it
+ if (isMoveable) {
+ pgAdmin.Browser.Panel.prototype.unlockFramePanel();
+ } else {
+ pgAdmin.Browser.Panel.prototype.lockFramePanel();
+ }
+
+ // If no change in settings then return from here
+ if(panel.moveable() === isMoveable)
+ return;
+
+ pgBrowser.utils.isPanelMoveable = isMoveable;
+ panel.moveable(isMoveable);
+ },
+
+ eventFunc: function(eventName) {
+ const name = $(this).data('pgAdminName');
+
+ try {
+ pgBrowser.Events.trigger(
+ 'pgadmin-browser:panel', eventName, this, arguments
+ );
+ pgBrowser.Events.trigger(
+ 'pgadmin-browser:panel:' + eventName, this, arguments
+ );
+
+ if (name) {
+ pgBrowser.Events.trigger(
+ 'pgadmin-browser:panel-' + name, eventName, this, arguments
+ );
+ pgBrowser.Events.trigger(
+ 'pgadmin-browser:panel-' + name + ':' + eventName, this, arguments
+ );
+ }
+ } catch (e) {
+ console.warn(e.stack || e);
+ }
+ },
+ resizedContainer: function() {
+ const p = this;
+
+ if (p.pgElContainer && !p.pgResizeTimeout) {
+ if (!p.isVisible()) {
+ clearTimeout(p.pgResizeTimeout);
+ p.pgResizeTimeout = null;
+
+ return;
+ }
+ p.pgResizeTimeout = setTimeout(
+ function() {
+ let w = p.width();
+ p.pgResizeTimeout = null;
+
+ if (w <= 480) {
+ w = 'xs';
+ } else if (w < 600) {
+ w = 'sm';
+ } else if (w < 768) {
+ w = 'md';
+ } else {
+ w = 'lg';
+ }
+
+ p.pgElContainer.attr('el', w);
+ },
+ 100
+ );
+ }
+ },
+ handleVisibility: function(eventName) {
+ // Currently this function only works with dashboard panel but
+ // as per need it can be extended
+ if (this._type !== 'dashboard' || _.isUndefined(pgAdmin.Dashboard))
+ return;
+
+ if (eventName === 'panelClosed') {
+ pgBrowser.save_current_layout(pgBrowser);
+ pgAdmin.Dashboard.toggleVisibility(false);
+ } else if (eventName === 'panelVisibilityChanged') {
+ if (pgBrowser.tree) {
+ pgBrowser.save_current_layout(pgBrowser);
+ const selectedNode = pgBrowser.tree.selected();
+ // Discontinue this event after first time visible
+ this.off(wcDocker.EVENT.VISIBILITY_CHANGED);
+ if (!_.isUndefined(pgAdmin.Dashboard))
+ pgAdmin.Dashboard.toggleVisibility(true);
+ // Explicitly trigger tree selected event when we add the tab.
+ pgBrowser.Events.trigger('pgadmin-browser:tree:selected', selectedNode,
+ pgBrowser.tree.itemData(selectedNode), pgBrowser.Node);
+ }
+ }
+ },
+
+});
- return pgAdmin.Browser.Panel;
- });
+module.exports = pgAdmin.Browser.Panel;
diff --git a/web/pgadmin/browser/templates/browser/js/utils.js b/web/pgadmin/browser/templates/browser/js/utils.js
index be3b7122..aa37925b 100644
--- a/web/pgadmin/browser/templates/browser/js/utils.js
+++ b/web/pgadmin/browser/templates/browser/js/utils.js
@@ -26,6 +26,7 @@ define('pgadmin.browser.utils',
is_indent_with_tabs: '{{ editor_indent_with_tabs }}' == 'True',
app_name: '{{ app_name }}',
pg_libpq_version: {{pg_libpq_version|e}},
+ isPanelMoveable: true,
counter: {total: 0, loaded: 0},
registerScripts: function (ctx) {
diff --git a/web/pgadmin/misc/__init__.py b/web/pgadmin/misc/__init__.py
index da28413a..7b9521c2 100644
--- a/web/pgadmin/misc/__init__.py
+++ b/web/pgadmin/misc/__init__.py
@@ -68,6 +68,11 @@ class MiscModule(PgAdminModule):
category_label=gettext('User language'),
options=lang_options
)
+ self.misc_preference.register(
+ 'layout', 'lock_panel_layout',
+ gettext("Lock layout?"), 'boolean', False,
+ category_label=gettext('Layout')
+ )
def get_exposed_url_endpoints(self):
"""
diff --git a/web/pgadmin/settings/__init__.py b/web/pgadmin/settings/__init__.py
index 269bfdf1..2b8eb2ea 100644
--- a/web/pgadmin/settings/__init__.py
+++ b/web/pgadmin/settings/__init__.py
@@ -115,7 +115,7 @@ def store(setting=None, value=None):
store_setting(setting, value)
except Exception as e:
success = 0
- errormsg = e.message
+ errormsg = str(e)
try:
info = traceback.format_exc()
diff --git a/web/pgadmin/static/css/webcabin.overrides.css b/web/pgadmin/static/css/webcabin.overrides.css
index 18d89f84..102b3451 100644
--- a/web/pgadmin/static/css/webcabin.overrides.css
+++ b/web/pgadmin/static/css/webcabin.overrides.css
@@ -399,3 +399,11 @@ i.wcTabIcon {
background-size: 18px !important;
height: 18px;
}
+
+.wcTabScroller {
+ position: initial;
+}
+
+.wcPanelTab {
+ pointer-events: auto;
+}
diff --git a/web/pgadmin/tools/datagrid/static/js/datagrid.js b/web/pgadmin/tools/datagrid/static/js/datagrid.js
index b0ed60f6..27323180 100644
--- a/web/pgadmin/tools/datagrid/static/js/datagrid.js
+++ b/web/pgadmin/tools/datagrid/static/js/datagrid.js
@@ -527,10 +527,21 @@ define('pgadmin.datagrid', [
// Set panel title and icon
queryToolPanel.title(''+panel_title+'');
queryToolPanel.icon('fa fa-bolt');
+ queryToolPanel.moveable(pgBrowser.utils.isPanelMoveable);
+ pgBrowser.Events.on(
+ 'pgadmin-browser:preferences-updated',
+ pgAdmin.Browser.Panel.prototype.updatePanel, queryToolPanel
+ );
+
queryToolPanel.focus();
// Listen on the panel closed event.
queryToolPanel.on(wcDocker.EVENT.CLOSED, function() {
+ pgBrowser.Events.off(
+ 'pgadmin-browser:preferences-updated',
+ pgAdmin.Browser.Panel.prototype.updatePanel, queryToolPanel
+ );
+
$.ajax({
url: url_for('datagrid.close', {'trans_id': trans_obj.gridTransId}),
method: 'GET',
diff --git a/web/pgadmin/tools/debugger/static/js/debugger_ui.js b/web/pgadmin/tools/debugger/static/js/debugger_ui.js
index f9049d81..3a96fd8b 100644
--- a/web/pgadmin/tools/debugger/static/js/debugger_ui.js
+++ b/web/pgadmin/tools/debugger/static/js/debugger_ui.js
@@ -725,9 +725,19 @@ define([
);
panel.focus();
+ panel.moveable(pgBrowser.utils.isPanelMoveable);
+ pgBrowser.Events.on(
+ 'pgadmin-browser:preferences-updated',
+ pgAdmin.Browser.Panel.prototype.updatePanel, panel
+ );
// Panel Closed event
panel.on(wcDocker.EVENT.CLOSED, function() {
+ pgBrowser.Events.off(
+ 'pgadmin-browser:preferences-updated',
+ pgAdmin.Browser.Panel.prototype.updatePanel, panel
+ );
+
var closeUrl = url_for('debugger.close', {
'trans_id': res.data.debuggerTransId,
});
diff --git a/web/pgadmin/tools/sqleditor/static/js/sqleditor.js b/web/pgadmin/tools/sqleditor/static/js/sqleditor.js
index f95389c6..be731728 100644
--- a/web/pgadmin/tools/sqleditor/static/js/sqleditor.js
+++ b/web/pgadmin/tools/sqleditor/static/js/sqleditor.js
@@ -155,6 +155,7 @@ define('tools.querytool', [
height: '20%',
isCloseable: false,
isPrivate: true,
+ isMoveable: true,
});
sql_panel.load(main_docker);
diff --git a/web/regression/javascript/browser/panel_spec.js b/web/regression/javascript/browser/panel_spec.js
index e69de29b..3f0184c8 100644
--- a/web/regression/javascript/browser/panel_spec.js
+++ b/web/regression/javascript/browser/panel_spec.js
@@ -0,0 +1,52 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2018, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+import pgAdmin from 'pgadmin';
+import Panel from 'browser/panel';
+
+describe('Panel', function () {
+ let pgBrowser = pgAdmin.Browser;
+ let Panel = pgAdmin.Browser.Panel;
+ let testPanel;
+ beforeEach(function () {
+ testPanel = new Panel({
+ name: 'test',
+ title: 'Test',
+ isMoveable: true,
+ });
+ });
+
+ describe('when we create a panel', function () {
+ describe('and it is moveable panel', function () {
+ it('it should call moveable method with true as argument', function () {
+ expect(testPanel.isMoveable).toBe(true);
+ });
+ });
+
+ describe('and it is non-moveable panel', function () {
+ beforeEach(function () {
+ testPanel.isMoveable = false;
+ });
+ it('it should call moveable method with false as argument', function () {
+ expect(testPanel.isMoveable).toBe(false);
+ });
+ });
+
+ describe('and user created panel without defining isMoveable then it should be moveable', function () {
+ beforeEach(function () {
+ testPanel = new Panel({
+ name: 'test',
+ title: 'Test',
+ });
+ });
+ it('it should call moveable method with true as argument', function () {
+ expect(testPanel.isMoveable).toBe(true);
+ });
+ });
+ });
+});
diff --git a/web/webpack.test.config.js b/web/webpack.test.config.js
index 306a030b..9932907f 100644
--- a/web/webpack.test.config.js
+++ b/web/webpack.test.config.js
@@ -80,6 +80,7 @@ module.exports = {
'pgadmin.alertifyjs': sourcesDir + '/js/alertify.pgadmin.defaults',
'pgadmin.backgrid': sourcesDir + '/js/backgrid.pgadmin',
'pgadmin.backform': sourcesDir + '/js/backform.pgadmin',
+ 'wcdocker': path.join(__dirname, './node_modules/webcabin-docker/Build/wcDocker'),
},
},
};