public inbox for [email protected]
help / color / mirror / Atom feedFrom: Murtuza Zabuawala <[email protected]>
To: Joao De Almeida Pereira <[email protected]>
Cc: Dave Page <[email protected]>
Cc: Robert Eckhardt <[email protected]>
Cc: pgadmin-hackers <[email protected]>
Subject: Re: [pgAdmin4][RM#3055] Allow user to sort the data in View data mode
Date: Fri, 6 Apr 2018 11:14:41 +0530
Message-ID: <CAKKotZTP8rFgvhVOvmt88pqPbrdL6+AEckq7mfG9fB-cEdzHGg@mail.gmail.com> (raw)
In-Reply-To: <CAKKotZR105xJ6D-yig-M6g1qeO-X1Ae3KLNV-1sqh5KQ4R6WdA@mail.gmail.com>
References: <CAKKotZTzsN7Duyb5KpVuVHBK9pGHXLNvrp7JRVJ1uetAEYhuKg@mail.gmail.com>
<CA+OCxoxj2Jp0iaJw4TmRWE4Yz3ZwpF47n7agoeq8rR5MaNhyig@mail.gmail.com>
<CAKKotZSf=7iBb3db3aYvmYpA081tjcsxcSyApVe_y8b4d+7q+Q@mail.gmail.com>
<CAE+jjakMz=G-gj_u9pQ4wUcbaF5=kdBTz1R25Cb3iavLyEuJMg@mail.gmail.com>
<CAAtBm9V+y-xTCQvTzQ6tnGoB77fKRsVKdqeq+b+9GzvQ_Cmfsw@mail.gmail.com>
<CA+OCxoxZmCwSHg_bbP6WjJQhgu01eEqP=Y4ZyXAcWhtb+Q91wQ@mail.gmail.com>
<CAKKotZSG=4Z2PFs_sE7kgON=BEtot3R599iWYK3_ZCKiEkTLjg@mail.gmail.com>
<CAAtBm9U=KZmKY--nA3o98T4Xg9+T8Ha0_hmcQzM8k36Dpu0-OQ@mail.gmail.com>
<CAKKotZS+k_C3YGz3C=SUG9TRnr30zoS614BGJpPgzxjmCARoXQ@mail.gmail.com>
<CAAtBm9WOWap9=CVyKSN6097RKpmF7U+GWpT-Ep0ftGd-Fz4R6w@mail.gmail.com>
<CAKKotZQWS=JUb0N0-Cy1KVsWhBjk1TxwhMcZXfrZzQNKvrSVsg@mail.gmail.com>
<CA+OCxow0Ov99inLnLWZjbAHh+YToa2t4jQdcW--gOppow-QN9g@mail.gmail.com>
<CAKKotZRdfOXX_8osxWHxD=G0mUtmwvdyYa-=RHCkpbOhyOid9g@mail.gmail.com>
<CA+OCxozrO=d5OnRo7=xN_LMQOqhCc682fL0FAwvpRLR8n_bOUw@mail.gmail.com>
<CAE+jjakOkMpQG9DgTtSCjc9+w4yXp8_27pbckGQ2eQZYE2YrOQ@mail.gmail.com>
<CAKKotZR105xJ6D-yig-M6g1qeO-X1Ae3KLNV-1sqh5KQ4R6WdA@mail.gmail.com>
Hi,
Please find the patch which will change the syntax from requirejs syntax to
ES6 from previous commit.
--
Regards,
Murtuza Zabuawala
EnterpriseDB: http://www.enterprisedb.com
The Enterprise PostgreSQL Company
On Fri, Apr 6, 2018 at 9:13 AM, Murtuza Zabuawala <
[email protected]> wrote:
> Hi Joao,
>
>
> On Thu, Apr 5, 2018 at 11:20 PM, Joao De Almeida Pereira <
> [email protected]> wrote:
>
>> Hi Murtuza,
>> I forgot to mention this in my review........
>> Do you think we can start using only ES6 instead of keep using requirejs
>> syntax on new things that we are building?
>> How much effort do you think it will be?
>>
> Yes, we can.
> Let me try to change the code to use ES6 and I'll send patch.
>
>
>>
>> Like this patch, as an example, do you think it could have been
>> implemented without using requirejs?
>>
>
>> Thanks
>>
>> On Thu, Apr 5, 2018 at 11:26 AM Dave Page <[email protected]> wrote:
>>
>>> Thanks, applied.
>>>
>>> On Thu, Apr 5, 2018 at 12:29 PM, Murtuza Zabuawala <
>>> [email protected]> wrote:
>>>
>>>> Hi Dave,
>>>>
>>>> Please find rebased patch.
>>>>
>>>> --
>>>> Regards,
>>>> Murtuza Zabuawala
>>>> EnterpriseDB: http://www.enterprisedb.com
>>>> The Enterprise PostgreSQL Company
>>>>
>>>>
>>>> On Thu, Apr 5, 2018 at 4:15 PM, Dave Page <[email protected]> wrote:
>>>>
>>>>> Can you rebase this please?
>>>>>
>>>>> On Wed, Mar 28, 2018 at 8:19 AM, Murtuza Zabuawala <
>>>>> [email protected]> wrote:
>>>>>
>>>>>> Hi Dave,
>>>>>>
>>>>>> Please find updated patch with following changes,
>>>>>> - Combined Filter and Data sorting together same as pgAdmin3.
>>>>>> - Extracted model into separate file
>>>>>> - Change the colour of filter button from orange to blue.
>>>>>> - Updated docs and screenshot.
>>>>>>
>>>>>> @Joao,
>>>>>> Could you please provide any reference for learning more about
>>>>>> jasmine test framework?
>>>>>>
>>>>>>
>>>>>> --
>>>>>> Regards,
>>>>>> Murtuza Zabuawala
>>>>>> EnterpriseDB: http://www.enterprisedb.com
>>>>>> The Enterprise PostgreSQL Company
>>>>>>
>>>>>>
>>>>>> On Wed, Mar 28, 2018 at 6:07 AM, Robert Eckhardt <
>>>>>> [email protected]> wrote:
>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> On Tue, Mar 27, 2018 at 9:54 AM, Murtuza Zabuawala <
>>>>>>> [email protected]> wrote:
>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>> On Tue, Mar 27, 2018 at 7:06 PM, Robert Eckhardt <
>>>>>>>> [email protected]> wrote:
>>>>>>>>
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> On Tue, Mar 27, 2018 at 6:25 AM, Murtuza Zabuawala <
>>>>>>>>> [email protected]> wrote:
>>>>>>>>>
>>>>>>>>>> On Tue, Mar 27, 2018 at 3:13 PM, Dave Page <[email protected]>
>>>>>>>>>> wrote:
>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>> On Mon, Mar 26, 2018 at 9:26 PM, Robert Eckhardt <
>>>>>>>>>>> [email protected]> wrote:
>>>>>>>>>>>
>>>>>>>>>>>>
>>>>>>>>>>>>
>>>>>>>>>>>> On Mon, Mar 26, 2018 at 2:07 PM, Joao De Almeida Pereira <
>>>>>>>>>>>> [email protected]> wrote:
>>>>>>>>>>>>
>>>>>>>>>>>>> Hi Hackers,
>>>>>>>>>>>>>
>>>>>>>>>>>>> @Murtuza: The patch codewise looks good. Nice to see that we
>>>>>>>>>>>>> are using axios instead of jquery ajax calls and that there is some
>>>>>>>>>>>>> coverage for the change.
>>>>>>>>>>>>> Nevertheless the Javascript testing looks a bit slim and could
>>>>>>>>>>>>> be improved. Also the DataSorting class could have some other member
>>>>>>>>>>>>> functions like the model validation could be extracted out so that it is
>>>>>>>>>>>>> easily tested.
>>>>>>>>>>>>>
>>>>>>>>>>>>>
>>>>>>>>>>>>> @Hackers: This was how we tried to test this feature:
>>>>>>>>>>>>> 1 - Started pgAdmin
>>>>>>>>>>>>> 2 - Opened the query tool for a specific server
>>>>>>>>>>>>> 3 - Executed a SQL statment
>>>>>>>>>>>>> 4 - Pressed the column header to try to order, nothing happened
>>>>>>>>>>>>> 5 - Right clicked the column header to see if it was there the
>>>>>>>>>>>>> option, nothing
>>>>>>>>>>>>>
>>>>>>>>>>>>> This is the behavior that we were expecting, not to have to
>>>>>>>>>>>>> open Data View and then press the icon that is not even near the grid in
>>>>>>>>>>>>> order to sort the column. Is this really the way we want people to use the
>>>>>>>>>>>>> grid in pgAdmin? Should it be more intuitive?
>>>>>>>>>>>>>
>>>>>>>>>>>>
>>>>>>>>>>>> Have we considered making the grid behave more like excel or
>>>>>>>>>>>> other grids? I think that having the ascending and descending inside the
>>>>>>>>>>>> column header, we could similarly provide filtering. Something that would
>>>>>>>>>>>> give users a more intuitive place to look.
>>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>> Doing the sorting via header clicks is convenient but very
>>>>>>>>>>> restrictive. How do you specify multiple columns to sort by for example?
>>>>>>>>>>> The current design allows you to select columns and the sort order as you
>>>>>>>>>>> see fit.
>>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>> Honestly I'm not sold on my idea, I was just proposing an
>>>>>>>>> alternative in an effort to start a discussion about the user experience.
>>>>>>>>> Ideally what I'd like to see, maybe this happened, is some user research.
>>>>>>>>> When we initial worked on refactoring the results grid we made a bunch of
>>>>>>>>> changes. One of the things we intended to do was to follow up to see how
>>>>>>>>> people were using the grid now so that we could better understand how it
>>>>>>>>> was now being used in order to design and implement features just like
>>>>>>>>> this. Clearly we haven't gotten there yet.
>>>>>>>>>
>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> Another reason we can't use that because w
>>>>>>>>>> e have already occupied that behaviour for selecting entire column
>>>>>>>>>> when user clicks on header.
>>>>>>>>>> As Dave suggested, I will be merging it with filter dialog
>>>>>>>>>> meaning it will be accessible via direct button on toolbar & keyboard
>>>>>>>>>> shortcut.
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>
>>>>>>>>> How are users currently interacting with that filter dialog?
>>>>>>>>>
>>>>>>>>
>>>>>>>> By clicking on the toolbar button as well as keyboard shortcut.
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>
>>>>>>> Sorry I wasn't clear. My question was more along the lines of, do
>>>>>>> we know if people are using the filter functionality? What kind of
>>>>>>> filters are people using? What do they like about it? What do they wish
>>>>>>> they could do above and beyond sorting, etc.
>>>>>>>
>>>>>> I have not done any data gathering from users so I can't comment on
>>>>>> your queries.
>>>>>> but a
>>>>>> s far as I understood from the feature requests that most of the
>>>>>> users expect to have functionality which will allow then to sort columns as
>>>>>> it was in pgAdmin3.
>>>>>>
>>>>>>
>>>>>>
>>>>>>> -- Rob
>>>>>>>
>>>>>>>
>>>>>>>>
>>>>>>>>> What I'm suggesting is that we understand how users want to
>>>>>>>>> interact with their results, be those the results of a query or a table
>>>>>>>>> view, then we can design something that meets those needs. I agree that
>>>>>>>>> changing the column selection behavior isn't desirable, however, I also
>>>>>>>>> feel like providing the best user experience is better than holding onto a
>>>>>>>>> particular feature implementation.
>>>>>>>>>
>>>>>>>>>
>>>>>>>>>
>>>>>>>>
>>>>>>>>> -- Rob
>>>>>>>>>
>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>> --
>>>>>>>>>>> Dave Page
>>>>>>>>>>> Blog: http://pgsnake.blogspot.com
>>>>>>>>>>> Twitter: @pgsnake
>>>>>>>>>>>
>>>>>>>>>>> EnterpriseDB UK: http://www.enterprisedb.com
>>>>>>>>>>> The Enterprise PostgreSQL Company
>>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>
>>>>>>>>
>>>>>>>
>>>>>>
>>>>>
>>>>>
>>>>> --
>>>>> Dave Page
>>>>> Blog: http://pgsnake.blogspot.com
>>>>> Twitter: @pgsnake
>>>>>
>>>>> EnterpriseDB UK: http://www.enterprisedb.com
>>>>> The Enterprise PostgreSQL Company
>>>>>
>>>>
>>>>
>>>
>>>
>>> --
>>> Dave Page
>>> Blog: http://pgsnake.blogspot.com
>>> Twitter: @pgsnake
>>>
>>> EnterpriseDB UK: http://www.enterprisedb.com
>>> The Enterprise PostgreSQL Company
>>>
>>
>
Attachments:
[image/png] image.png (87.7K, 3-image.png)
download | view image
[application/octet-stream] RM_1894_ES6_changes.diff (25.3K, 4-RM_1894_ES6_changes.diff)
download | inline diff:
diff --git a/web/pgadmin/static/js/sqleditor/filter_dialog.js b/web/pgadmin/static/js/sqleditor/filter_dialog.js
index 0ba9e35..8a48c86 100644
--- a/web/pgadmin/static/js/sqleditor/filter_dialog.js
+++ b/web/pgadmin/static/js/sqleditor/filter_dialog.js
@@ -1,243 +1,241 @@
-define([
- 'sources/gettext', 'sources/url_for', 'jquery', 'underscore', 'underscore.string',
- 'pgadmin.alertifyjs', 'sources/pgadmin', 'backbone',
- 'pgadmin.backgrid', 'pgadmin.backform', 'axios',
- 'sources/sqleditor/query_tool_actions',
- 'sources/sqleditor/filter_dialog_model',
- //'pgadmin.browser.node.ui',
-], function(
- gettext, url_for, $, _, S, Alertify, pgAdmin, Backbone,
- Backgrid, Backform, axios, queryToolActions, filterDialogModel
-) {
-
- let FilterDialog = {
- 'dialog': function(handler) {
- let title = gettext('Sort/Filter options');
- axios.get(
- url_for('sqleditor.get_filter_data', {
- 'trans_id': handler.transId,
- }),
- { headers: {'Cache-Control' : 'no-cache'} }
- ).then(function (res) {
- let response = res.data.data.result;
-
- // Check the alertify dialog already loaded then delete it to clear
- // the cache
- if (Alertify.filterDialog) {
- delete Alertify.filterDialog;
- }
-
- // Create Dialog
- Alertify.dialog('filterDialog', function factory() {
- let $container = $('<div class=\'data_sorting_dialog\'></div>');
- return {
- main: function() {
- this.set('title', gettext('Sort/Filter options'));
- },
- build: function() {
- this.elements.content.appendChild($container.get(0));
- Alertify.pgDialogBuild.apply(this);
- },
- setup: function() {
- return {
- buttons: [{
- text: '',
- key: 112,
- className: 'btn btn-default pull-left fa fa-lg fa-question',
- attrs: {
- name: 'dialog_help',
- type: 'button',
- label: gettext('Help'),
- url: url_for('help.static', {
- 'filename': 'editgrid.html',
- }),
- },
- }, {
- text: gettext('Ok'),
- className: 'btn btn-primary fa fa-lg fa-save pg-alertify-button',
- 'data-btn-name': 'ok',
- }, {
- text: gettext('Cancel'),
- key: 27,
- className: 'btn btn-danger fa fa-lg fa-times pg-alertify-button',
- 'data-btn-name': 'cancel',
- }],
- // Set options for dialog
- options: {
- title: title,
- //disable both padding and overflow control.
- padding: !1,
- overflow: !1,
- model: 0,
- resizable: true,
- maximizable: true,
- pinnable: false,
- closableByDimmer: false,
- modal: false,
- autoReset: false,
+import gettext from 'sources/gettext';
+import url_for from 'sources/url_for';
+import $ from 'jquery';
+import Alertify from 'pgadmin.alertifyjs';
+import pgAdmin from 'sources/pgadmin';
+import Backform from 'pgadmin.backform';
+import axios from 'axios';
+import queryToolActions from 'sources/sqleditor/query_tool_actions';
+import filterDialogModel from 'sources/sqleditor/filter_dialog_model';
+
+let FilterDialog = {
+ 'dialog': function(handler) {
+ let title = gettext('Sort/Filter options');
+ axios.get(
+ url_for('sqleditor.get_filter_data', {
+ 'trans_id': handler.transId,
+ }),
+ { headers: {'Cache-Control' : 'no-cache'} }
+ ).then(function (res) {
+ let response = res.data.data.result;
+
+ // Check the alertify dialog already loaded then delete it to clear
+ // the cache
+ if (Alertify.filterDialog) {
+ delete Alertify.filterDialog;
+ }
+
+ // Create Dialog
+ Alertify.dialog('filterDialog', function factory() {
+ let $container = $('<div class=\'data_sorting_dialog\'></div>');
+ return {
+ main: function() {
+ this.set('title', gettext('Sort/Filter options'));
+ },
+ build: function() {
+ this.elements.content.appendChild($container.get(0));
+ Alertify.pgDialogBuild.apply(this);
+ },
+ setup: function() {
+ return {
+ buttons: [{
+ text: '',
+ key: 112,
+ className: 'btn btn-default pull-left fa fa-lg fa-question',
+ attrs: {
+ name: 'dialog_help',
+ type: 'button',
+ label: gettext('Help'),
+ url: url_for('help.static', {
+ 'filename': 'editgrid.html',
+ }),
},
- };
- },
- hooks: {
- // triggered when the dialog is closed
- onclose: function() {
- if (this.view) {
- this.filterCollectionModel.stopSession();
- this.view.model.stopSession();
- this.view.remove({
- data: true,
- internal: true,
- silent: true,
- });
- }
+ }, {
+ text: gettext('Ok'),
+ className: 'btn btn-primary fa fa-lg fa-save pg-alertify-button',
+ 'data-btn-name': 'ok',
+ }, {
+ text: gettext('Cancel'),
+ key: 27,
+ className: 'btn btn-danger fa fa-lg fa-times pg-alertify-button',
+ 'data-btn-name': 'cancel',
+ }],
+ // Set options for dialog
+ options: {
+ title: title,
+ //disable both padding and overflow control.
+ padding: !1,
+ overflow: !1,
+ model: 0,
+ resizable: true,
+ maximizable: true,
+ pinnable: false,
+ closableByDimmer: false,
+ modal: false,
+ autoReset: false,
},
+ };
+ },
+ hooks: {
+ // triggered when the dialog is closed
+ onclose: function() {
+ if (this.view) {
+ this.filterCollectionModel.stopSession();
+ this.view.model.stopSession();
+ this.view.remove({
+ data: true,
+ internal: true,
+ silent: true,
+ });
+ }
},
- prepare: function() {
- let self = this;
- $container.html('');
- // Disable Ok button
- this.__internal.buttons[1].element.disabled = true;
-
- // Status bar
- this.statusBar = $('<div class=\'pg-prop-status-bar pg-el-xs-12 hide\'>' +
- ' <div class=\'media error-in-footer bg-red-1 border-red-2 font-red-3 text-14\'>' +
- ' <div class=\'media-body media-middle\'>' +
- ' <div class=\'alert-icon error-icon\'>' +
- ' <i class=\'fa fa-exclamation-triangle\' aria-hidden=\'true\'></i>' +
- ' </div>' +
- ' <div class=\'alert-text\'>' +
- ' </div>' +
- ' </div>' +
- ' </div>' +
- '</div>', {
- text: '',
- }).appendTo($container);
-
- // To show progress on filter Saving/Updating on AJAX
- this.showFilterProgress = $(
- '<div id="show_filter_progress" class="wcLoadingIconContainer busy-fetching hidden">' +
- '<div class="wcLoadingBackground"></div>' +
- '<span class="wcLoadingIcon fa fa-spinner fa-pulse"></span>' +
- '<span class="busy-text wcLoadingLabel">' + gettext('Loading data...') + '</span>' +
- '</div>').appendTo($container);
-
- $(
- self.showFilterProgress[0]
- ).removeClass('hidden');
-
- self.filterCollectionModel = filterDialogModel(response);
-
- let fields = Backform.generateViewSchema(
- null, self.filterCollectionModel, 'create', null, null, true
- );
+ },
+ prepare: function() {
+ let self = this;
+ $container.html('');
+ // Disable Ok button
+ this.__internal.buttons[1].element.disabled = true;
+
+ // Status bar
+ this.statusBar = $('<div class=\'pg-prop-status-bar pg-el-xs-12 hide\'>' +
+ ' <div class=\'media error-in-footer bg-red-1 border-red-2 font-red-3 text-14\'>' +
+ ' <div class=\'media-body media-middle\'>' +
+ ' <div class=\'alert-icon error-icon\'>' +
+ ' <i class=\'fa fa-exclamation-triangle\' aria-hidden=\'true\'></i>' +
+ ' </div>' +
+ ' <div class=\'alert-text\'>' +
+ ' </div>' +
+ ' </div>' +
+ ' </div>' +
+ '</div>', {
+ text: '',
+ }).appendTo($container);
+
+ // To show progress on filter Saving/Updating on AJAX
+ this.showFilterProgress = $(
+ '<div id="show_filter_progress" class="wcLoadingIconContainer busy-fetching hidden">' +
+ '<div class="wcLoadingBackground"></div>' +
+ '<span class="wcLoadingIcon fa fa-spinner fa-pulse"></span>' +
+ '<span class="busy-text wcLoadingLabel">' + gettext('Loading data...') + '</span>' +
+ '</div>').appendTo($container);
+
+ $(
+ self.showFilterProgress[0]
+ ).removeClass('hidden');
+
+ self.filterCollectionModel = filterDialogModel(response);
+
+ let fields = Backform.generateViewSchema(
+ null, self.filterCollectionModel, 'create', null, null, true
+ );
+
+ let view = this.view = new Backform.Dialog({
+ el: '<div></div>',
+ model: self.filterCollectionModel,
+ schema: fields,
+ });
+
+ $(this.elements.body.childNodes[0]).addClass(
+ 'alertify_tools_dialog_properties obj_properties'
+ );
+
+ $container.append(view.render().$el);
+
+ // Enable/disable save button and show/hide statusbar based on session
+ view.listenTo(view.model, 'pgadmin-session:start', function() {
+ view.listenTo(view.model, 'pgadmin-session:invalid', function(msg) {
+ self.statusBar.removeClass('hide');
+ $(self.statusBar.find('.alert-text')).html(msg);
+ // Disable Okay button
+ self.__internal.buttons[1].element.disabled = true;
+ });
- let view = this.view = new Backform.Dialog({
- el: '<div></div>',
- model: self.filterCollectionModel,
- schema: fields,
+ view.listenTo(view.model, 'pgadmin-session:valid', function() {
+ self.statusBar.addClass('hide');
+ $(self.statusBar.find('.alert-text')).html('');
+ // Enable Okay button
+ self.__internal.buttons[1].element.disabled = false;
});
+ });
- $(this.elements.body.childNodes[0]).addClass(
- 'alertify_tools_dialog_properties obj_properties'
- );
+ view.listenTo(view.model, 'pgadmin-session:stop', function() {
+ view.stopListening(view.model, 'pgadmin-session:invalid');
+ view.stopListening(view.model, 'pgadmin-session:valid');
+ });
- $container.append(view.render().$el);
+ // Starts monitoring changes to model
+ view.model.startNewSession();
- // Enable/disable save button and show/hide statusbar based on session
- view.listenTo(view.model, 'pgadmin-session:start', function() {
- view.listenTo(view.model, 'pgadmin-session:invalid', function(msg) {
- self.statusBar.removeClass('hide');
- $(self.statusBar.find('.alert-text')).html(msg);
- // Disable Okay button
- self.__internal.buttons[1].element.disabled = true;
- });
+ // Set data in collection
+ let viewDataSortingModel = view.model.get('data_sorting');
+ viewDataSortingModel.add(response['data_sorting']);
- view.listenTo(view.model, 'pgadmin-session:valid', function() {
- self.statusBar.addClass('hide');
- $(self.statusBar.find('.alert-text')).html('');
- // Enable Okay button
- self.__internal.buttons[1].element.disabled = false;
- });
- });
+ // Hide Progress ...
+ $(
+ self.showFilterProgress[0]
+ ).addClass('hidden');
- view.listenTo(view.model, 'pgadmin-session:stop', function() {
- view.stopListening(view.model, 'pgadmin-session:invalid');
- view.stopListening(view.model, 'pgadmin-session:valid');
- });
+ },
+ // Callback functions when click on the buttons of the Alertify dialogs
+ callback: function(e) {
+ let self = this;
- // Starts monitoring changes to model
- view.model.startNewSession();
+ if (e.button.element.name == 'dialog_help') {
+ e.cancel = true;
+ pgAdmin.Browser.showHelp(e.button.element.name, e.button.element.getAttribute('url'),
+ null, null, e.button.element.getAttribute('label'));
+ return;
+ } else if (e.button['data-btn-name'] === 'ok') {
+ e.cancel = true; // Do not close dialog
- // Set data in collection
- let viewDataSortingModel = view.model.get('data_sorting');
- viewDataSortingModel.add(response['data_sorting']);
+ let filterCollectionModel = this.filterCollectionModel.toJSON();
- // Hide Progress ...
+ // Show Progress ...
$(
self.showFilterProgress[0]
- ).addClass('hidden');
-
- },
- // Callback functions when click on the buttons of the Alertify dialogs
- callback: function(e) {
- let self = this;
-
- if (e.button.element.name == 'dialog_help') {
- e.cancel = true;
- pgAdmin.Browser.showHelp(e.button.element.name, e.button.element.getAttribute('url'),
- null, null, e.button.element.getAttribute('label'));
- return;
- } else if (e.button['data-btn-name'] === 'ok') {
- e.cancel = true; // Do not close dialog
-
- let filterCollectionModel = this.filterCollectionModel.toJSON();
+ ).removeClass('hidden');
- // Show Progress ...
+ axios.put(
+ url_for('sqleditor.set_filter_data', {
+ 'trans_id': handler.transId,
+ }),
+ filterCollectionModel
+ ).then(function () {
+ // Hide Progress ...
+ $(
+ self.showFilterProgress[0]
+ ).addClass('hidden');
+ setTimeout(
+ function() {
+ self.close(); // Close the dialog now
+ Alertify.success(gettext('Filter updated successfully'));
+ queryToolActions.executeQuery(handler);
+ }, 10
+ );
+
+ }).catch(function (error) {
+ // Hide Progress ...
$(
self.showFilterProgress[0]
- ).removeClass('hidden');
+ ).addClass('hidden');
+ handler.onExecuteHTTPError(error);
+
+ setTimeout(
+ function() {
+ Alertify.error(error);
+ }, 10
+ );
+ });
+ } else {
+ self.close();
+ }
+ },
+ };
+ });
- axios.put(
- url_for('sqleditor.set_filter_data', {
- 'trans_id': handler.transId,
- }),
- filterCollectionModel
- ).then(function () {
- // Hide Progress ...
- $(
- self.showFilterProgress[0]
- ).addClass('hidden');
- setTimeout(
- function() {
- self.close(); // Close the dialog now
- Alertify.success(gettext('Filter updated successfully'));
- queryToolActions.executeQuery(handler);
- }, 10
- );
-
- }).catch(function (error) {
- // Hide Progress ...
- $(
- self.showFilterProgress[0]
- ).addClass('hidden');
- handler.onExecuteHTTPError(error);
-
- setTimeout(
- function() {
- Alertify.error(error);
- }, 10
- );
- });
- } else {
- self.close();
- }
- },
- };
- });
+ Alertify.filterDialog(title).resizeTo('65%', '60%');
+ });
+ },
+};
- Alertify.filterDialog(title).resizeTo('65%', '60%');
- });
- },
- };
- return FilterDialog;
-});
+module.exports = FilterDialog;
diff --git a/web/pgadmin/static/js/sqleditor/filter_dialog_model.js b/web/pgadmin/static/js/sqleditor/filter_dialog_model.js
index c3146a4..e1b977e 100644
--- a/web/pgadmin/static/js/sqleditor/filter_dialog_model.js
+++ b/web/pgadmin/static/js/sqleditor/filter_dialog_model.js
@@ -1,133 +1,132 @@
-define([
- 'sources/gettext', 'underscore', 'sources/pgadmin',
- 'pgadmin.backform', 'pgadmin.backgrid',
-], function(
- gettext, _, pgAdmin, Backform, Backgrid
-) {
+import gettext from 'sources/gettext';
+import _ from 'underscore';
+import pgAdmin from 'sources/pgadmin';
+import Backgrid from 'pgadmin.backgrid';
+import Backform from 'pgadmin.backform';
- let initModel = function(response) {
+let initModel = function(response) {
- let order_mapping = {
- 'asc': gettext('ASC'),
- 'desc': gettext('DESC'),
- };
+ let order_mapping = {
+ 'asc': gettext('ASC'),
+ 'desc': gettext('DESC'),
+ };
- let DataSortingModel = pgAdmin.Browser.DataModel.extend({
- idAttribute: 'name',
- defaults: {
- name: undefined,
- order: 'asc',
+ let DataSortingModel = pgAdmin.Browser.DataModel.extend({
+ idAttribute: 'name',
+ defaults: {
+ name: undefined,
+ order: 'asc',
+ },
+ schema: [{
+ id: 'name',
+ name: 'name',
+ label: gettext('Column'),
+ cell: 'select2',
+ editable: true,
+ cellHeaderClasses: 'width_percent_60',
+ headerCell: Backgrid.Extension.CustomHeaderCell,
+ disabled: false,
+ control: 'select2',
+ select2: {
+ allowClear: false,
},
- schema: [{
- id: 'name',
- name: 'name',
- label: gettext('Column'),
- cell: 'select2',
- editable: true,
- cellHeaderClasses: 'width_percent_60',
- headerCell: Backgrid.Extension.CustomHeaderCell,
- disabled: false,
- control: 'select2',
- select2: {
- allowClear: false,
- },
- options: function() {
- return _.map(response.column_list, (obj) => {
- return {
- value: obj,
- label: obj,
- };
- });
- },
+ options: function() {
+ return _.map(response.column_list, (obj) => {
+ return {
+ value: obj,
+ label: obj,
+ };
+ });
},
- {
- id: 'order',
- name: 'order',
- label: gettext('Order'),
- control: 'select2',
- cell: 'select2',
- cellHeaderClasses: 'width_percent_40',
- headerCell: Backgrid.Extension.CustomHeaderCell,
- editable: true,
- deps: ['type'],
- select2: {
- allowClear: false,
- },
- options: function() {
- return _.map(order_mapping, (val, key) => {
- return {
- value: key,
- label: val,
- };
- });
- },
+ },
+ {
+ id: 'order',
+ name: 'order',
+ label: gettext('Order'),
+ control: 'select2',
+ cell: 'select2',
+ cellHeaderClasses: 'width_percent_40',
+ headerCell: Backgrid.Extension.CustomHeaderCell,
+ editable: true,
+ deps: ['type'],
+ select2: {
+ allowClear: false,
},
- ],
- validate: function() {
- let msg = null;
- this.errorModel.clear();
- if (_.isUndefined(this.get('name')) ||
- _.isNull(this.get('name')) ||
- String(this.get('name')).replace(/^\s+|\s+$/g, '') == '') {
- msg = gettext('Please select a column.');
- this.errorModel.set('name', msg);
- return msg;
- } else if (_.isUndefined(this.get('order')) ||
- _.isNull(this.get('order')) ||
- String(this.get('order')).replace(/^\s+|\s+$/g, '') == '') {
- msg = gettext('Please select the order.');
- this.errorModel.set('order', msg);
- return msg;
- }
- return null;
+ options: function() {
+ return _.map(order_mapping, (val, key) => {
+ return {
+ value: key,
+ label: val,
+ };
+ });
},
- });
+ },
+ ],
+ validate: function() {
+ let msg = null;
+ this.errorModel.clear();
+ if (_.isUndefined(this.get('name')) ||
+ _.isNull(this.get('name')) ||
+ String(this.get('name')).replace(/^\s+|\s+$/g, '') == '') {
+ msg = gettext('Please select a column.');
+ this.errorModel.set('name', msg);
+ return msg;
+ } else if (_.isUndefined(this.get('order')) ||
+ _.isNull(this.get('order')) ||
+ String(this.get('order')).replace(/^\s+|\s+$/g, '') == '') {
+ msg = gettext('Please select the order.');
+ this.errorModel.set('order', msg);
+ return msg;
+ }
+ return null;
+ },
+ });
- let FilterCollectionModel = pgAdmin.Browser.DataModel.extend({
- idAttribute: 'sql',
- defaults: {
- sql: response.sql || null,
- },
- schema: [{
- id: 'sql',
- label: gettext('SQL Filter'),
- cell: 'string',
- type: 'text', mode: ['create'],
- control: Backform.SqlFieldControl.extend({
- render: function() {
- let obj = Backform.SqlFieldControl.prototype.render.apply(this, arguments);
- // We need to set focus on editor after the dialog renders
- setTimeout(() => {
- obj.sqlCtrl.focus();
- }, 1000);
- return obj;
- },
- }),
- extraClasses:['custom_height_css_class'],
- },{
- id: 'data_sorting',
- name: 'data_sorting',
- label: gettext('Data Sorting'),
- model: DataSortingModel,
- editable: true,
- type: 'collection',
- mode: ['create'],
- control: 'unique-col-collection',
- uniqueCol: ['name'],
- canAdd: true,
- canEdit: false,
- canDelete: true,
- visible: true,
- version_compatible: true,
- }],
- validate: function() {
- return null;
- },
- });
+ let FilterCollectionModel = pgAdmin.Browser.DataModel.extend({
+ idAttribute: 'sql',
+ defaults: {
+ sql: response.sql || null,
+ },
+ schema: [{
+ id: 'sql',
+ label: gettext('SQL Filter'),
+ cell: 'string',
+ type: 'text', mode: ['create'],
+ control: Backform.SqlFieldControl.extend({
+ render: function() {
+ let obj = Backform.SqlFieldControl.prototype.render.apply(this, arguments);
+ // We need to set focus on editor after the dialog renders
+ setTimeout(() => {
+ obj.sqlCtrl.focus();
+ }, 1000);
+ return obj;
+ },
+ }),
+ extraClasses:['custom_height_css_class'],
+ },{
+ id: 'data_sorting',
+ name: 'data_sorting',
+ label: gettext('Data Sorting'),
+ model: DataSortingModel,
+ editable: true,
+ type: 'collection',
+ mode: ['create'],
+ control: 'unique-col-collection',
+ uniqueCol: ['name'],
+ canAdd: true,
+ canEdit: false,
+ canDelete: true,
+ visible: true,
+ version_compatible: true,
+ }],
+ validate: function() {
+ return null;
+ },
+ });
+
+ let model = new FilterCollectionModel();
+ return model;
+};
- let model = new FilterCollectionModel();
- return model;
- };
- return initModel;
-});
+module.exports = initModel;
view thread (25+ 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], [email protected]
Subject: Re: [pgAdmin4][RM#3055] Allow user to sort the data in View data mode
In-Reply-To: <CAKKotZTP8rFgvhVOvmt88pqPbrdL6+AEckq7mfG9fB-cEdzHGg@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