Re: [pgadmin-hackers] Control for selecting multiple columns [pgadmin4]

[Dave Page]

Thanks - applied.

On Tue, Mar 22, 2016 at 10:10 AM, Harshal Dhumal <
harshal.dhu...@enterprisedb.com> wrote:

> Hi,
>
> PFA patch for MultiselectControl.
>
> Issue: Fixed issue when parsing undefined data as json.
>
>
> --
> *Harshal Dhumal*
> *Software Engineer *
>
>
>
> EenterpriseDB 
>
> On Mon, Mar 21, 2016 at 11:35 AM, Harshal Dhumal <
> harshal.dhu...@enterprisedb.com> wrote:
>
>> Hi,
>>
>> Here is updated patch
>>
>> --
>> *Harshal Dhumal*
>> *Software Engineer *
>>
>>
>>
>> EenterpriseDB 
>>
>> On Fri, Mar 18, 2016 at 9:37 PM, Dave Page  wrote:
>>
>>>
>>>
>>> On Fri, Mar 18, 2016 at 11:41 AM, Harshal Dhumal <
>>> harshal.dhu...@enterprisedb.com> wrote:
>>>
 Hi Dave,

 The error is at line 84 in primary_key.js (from screenshot).

 In primary_key.js it requires MultiSelectAjaxControl. I guess patch of
 MultiSelectControl was not applied correctly.

 Can you please try again.

 When testing it check if (in browser script tab) MultiSelectControl is
 there in node.ui.js at line no 562 (approx).

>>>
>>> OK, I got it in the end. Took a lot of repeated cache clear outs though
>>> :-(
>>>
>>> So... I see two issues:
>>>
>>> 1) The control has a black border when it has focus, unlike other
>>> controls that have gray ones.
>>>
>> Fixed.
>>
>>
>>
>>>
>>>
>> 2)  The sizing is different from other controls, whether in large screen
>>> or small screen modes. Please see the attached screenshots. The control
>>> should be positioned and sized just like a text control (with the exception
>>> that it expands to multiple rows if needed, as it does).
>>>
>>> Fixed.
>>
>>
>>
>>> Thanks.
>>>
>>> [image: Inline image 2][image: Inline image 1]
>>>
>>> --
>>> 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

Re: [pgadmin-hackers] Control for selecting multiple columns [pgadmin4]

[Harshal Dhumal]

Hi,

PFA patch for MultiselectControl.

Issue: Fixed issue when parsing undefined data as json.


-- 
*Harshal Dhumal*
*Software Engineer *



EenterpriseDB 

On Mon, Mar 21, 2016 at 11:35 AM, Harshal Dhumal <
harshal.dhu...@enterprisedb.com> wrote:

> Hi,
>
> Here is updated patch
>
> --
> *Harshal Dhumal*
> *Software Engineer *
>
>
>
> EenterpriseDB 
>
> On Fri, Mar 18, 2016 at 9:37 PM, Dave Page  wrote:
>
>>
>>
>> On Fri, Mar 18, 2016 at 11:41 AM, Harshal Dhumal <
>> harshal.dhu...@enterprisedb.com> wrote:
>>
>>> Hi Dave,
>>>
>>> The error is at line 84 in primary_key.js (from screenshot).
>>>
>>> In primary_key.js it requires MultiSelectAjaxControl. I guess patch of
>>> MultiSelectControl was not applied correctly.
>>>
>>> Can you please try again.
>>>
>>> When testing it check if (in browser script tab) MultiSelectControl is
>>> there in node.ui.js at line no 562 (approx).
>>>
>>
>> OK, I got it in the end. Took a lot of repeated cache clear outs though
>> :-(
>>
>> So... I see two issues:
>>
>> 1) The control has a black border when it has focus, unlike other
>> controls that have gray ones.
>>
> Fixed.
>
>
>
>>
>>
> 2)  The sizing is different from other controls, whether in large screen
>> or small screen modes. Please see the attached screenshots. The control
>> should be positioned and sized just like a text control (with the exception
>> that it expands to multiple rows if needed, as it does).
>>
>> Fixed.
>
>
>
>> Thanks.
>>
>> [image: Inline image 2][image: Inline image 1]
>>
>> --
>> Dave Page
>> Blog: http://pgsnake.blogspot.com
>> Twitter: @pgsnake
>>
>> EnterpriseDB UK: http://www.enterprisedb.com
>> The Enterprise PostgreSQL Company
>>
>
>
diff --git a/web/pgadmin/browser/static/js/node.ui.js b/web/pgadmin/browser/static/js/node.ui.js
index a373972..f127d52 100644
--- a/web/pgadmin/browser/static/js/node.ui.js
+++ b/web/pgadmin/browser/static/js/node.ui.js
@@ -556,6 +556,46 @@ function($, _, pgAdmin, Backbone, Backform, Alertify, Node) {
 })
   });
 
+  /*
+   * Control to select multiple columns.
+   */
+  var MultiSelectAjaxControl = Backform.MultiSelectAjaxControl = NodeAjaxOptionsControl.extend({
+formatter: {
+  fromRaw: function (rawData, model) {
+return (_.isUndefined(rawData) || _.isObject(rawData)) ? rawData : JSON.parse(rawData);
+  },
+  toRaw: function (formattedData, model) {
+return formattedData;
+  }
+},
+template: _.template([
+  '<%=label%>',
+  '',
+  '   <%=required ? "required" : ""%>>',
+  '<% for (var i=0; i < options.length; i++) { %>',
+  '  <% var option = options[i]; %>',
+  '   <%=value != null && _.indexOf(value, option.value) != -1 ? "selected" : ""%> <%=option.disabled ? "disabled=\'disabled\'" : ""%>><%-option.label%>',
+  '<% } %>',
+  '  ',
+  ''
+  ].join("\n")),
+getValueFromDOM: function() {
+  var res = [];
+
+  this.$el.find("select").find(':selected').each(function() {
+res.push($(this).attr('value'));
+  });
+
+  return res;
+},
+defaults: _.extend({}, NodeAjaxOptionsControl.prototype.defaults, {
+  select2: {
+multiple: true,
+allowClear: true,
+width: 'style'
+  }
+})
+  });
 
   return Backform;
 });
diff --git a/web/pgadmin/static/css/overrides.css b/web/pgadmin/static/css/overrides.css
index 4dcff33..b406e43 100755
--- a/web/pgadmin/static/css/overrides.css
+++ b/web/pgadmin/static/css/overrides.css
@@ -807,4 +807,10 @@ td.edit-cell.editable.sortable.renderable.editor {
 .backgrid .textarea-cell.editor textarea {
 width: 100%;
 height: auto;
+}
+
+.select2-container--default.select2-container--focus
+.select2-selection--multiple {
+border: 1px solid #aaa !important;
+outline: 0 none;
 }
\ No newline at end of file

-- 
Sent via pgadmin-hackers mailing list (pgadmin-hackers@postgresql.org)
To make changes to your subscription:
http://www.postgresql.org/mailpref/pgadmin-hackers

Re: [pgadmin-hackers] Control for selecting multiple columns [pgadmin4]

[Harshal Dhumal]

Hi,

Here is updated patch

-- 
*Harshal Dhumal*
*Software Engineer *



EenterpriseDB 

On Fri, Mar 18, 2016 at 9:37 PM, Dave Page  wrote:

>
>
> On Fri, Mar 18, 2016 at 11:41 AM, Harshal Dhumal <
> harshal.dhu...@enterprisedb.com> wrote:
>
>> Hi Dave,
>>
>> The error is at line 84 in primary_key.js (from screenshot).
>>
>> In primary_key.js it requires MultiSelectAjaxControl. I guess patch of
>> MultiSelectControl was not applied correctly.
>>
>> Can you please try again.
>>
>> When testing it check if (in browser script tab) MultiSelectControl is
>> there in node.ui.js at line no 562 (approx).
>>
>
> OK, I got it in the end. Took a lot of repeated cache clear outs though :-(
>
> So... I see two issues:
>
> 1) The control has a black border when it has focus, unlike other controls
> that have gray ones.
>
Fixed.



>
>
2)  The sizing is different from other controls, whether in large screen or
> small screen modes. Please see the attached screenshots. The control should
> be positioned and sized just like a text control (with the exception that
> it expands to multiple rows if needed, as it does).
>
> Fixed.



> Thanks.
>
> [image: Inline image 2][image: Inline image 1]
>
> --
> Dave Page
> Blog: http://pgsnake.blogspot.com
> Twitter: @pgsnake
>
> EnterpriseDB UK: http://www.enterprisedb.com
> The Enterprise PostgreSQL Company
>
diff --git a/web/pgadmin/browser/static/js/node.ui.js b/web/pgadmin/browser/static/js/node.ui.js
index a373972..21a73c0 100644
--- a/web/pgadmin/browser/static/js/node.ui.js
+++ b/web/pgadmin/browser/static/js/node.ui.js
@@ -556,6 +556,46 @@ function($, _, pgAdmin, Backbone, Backform, Alertify, Node) {
 })
   });
 
+  /*
+   * Control to select multiple columns.
+   */
+  var MultiSelectAjaxControl = Backform.MultiSelectAjaxControl = NodeAjaxOptionsControl.extend({
+formatter: {
+  fromRaw: function (rawData, model) {
+return _.isObject(rawData) ? rawData : JSON.parse(rawData);
+  },
+  toRaw: function (formattedData, model) {
+return formattedData;
+  }
+},
+template: _.template([
+  '<%=label%>',
+  '',
+  '   <%=required ? "required" : ""%>>',
+  '<% for (var i=0; i < options.length; i++) { %>',
+  '  <% var option = options[i]; %>',
+  '   <%=value != null && _.indexOf(value, option.value) != -1 ? "selected" : ""%> <%=option.disabled ? "disabled=\'disabled\'" : ""%>><%-option.label%>',
+  '<% } %>',
+  '  ',
+  ''
+  ].join("\n")),
+getValueFromDOM: function() {
+  var res = [];
+
+  this.$el.find("select").find(':selected').each(function() {
+res.push($(this).attr('value'));
+  });
+
+  return res;
+},
+defaults: _.extend({}, NodeAjaxOptionsControl.prototype.defaults, {
+  select2: {
+multiple: true,
+allowClear: true,
+width: 'style'
+  }
+})
+  });
 
   return Backform;
 });
diff --git a/web/pgadmin/static/css/overrides.css b/web/pgadmin/static/css/overrides.css
index 4dcff33..b406e43 100755
--- a/web/pgadmin/static/css/overrides.css
+++ b/web/pgadmin/static/css/overrides.css
@@ -807,4 +807,10 @@ td.edit-cell.editable.sortable.renderable.editor {
 .backgrid .textarea-cell.editor textarea {
 width: 100%;
 height: auto;
+}
+
+.select2-container--default.select2-container--focus
+.select2-selection--multiple {
+border: 1px solid #aaa !important;
+outline: 0 none;
 }
\ No newline at end of file

-- 
Sent via pgadmin-hackers mailing list (pgadmin-hackers@postgresql.org)
To make changes to your subscription:
http://www.postgresql.org/mailpref/pgadmin-hackers

Re: [pgadmin-hackers] Control for selecting multiple columns [pgadmin4]

[Dave Page]

Hi

I tried that, but get the attached error when testing. I'm on a clean tree,
with the WIP tables patch (which, by the way, doesn't look much like Arun's
design so is likely to need a lot of layout work). I've restarted,
refreshed etc.

[image: Inline image 1]


On Thu, Mar 17, 2016 at 6:04 AM, Harshal Dhumal <
harshal.dhu...@enterprisedb.com> wrote:

> Hi Dave,
>
> I have used same control in primary key constraint for selecting multiple
> columns. So to test this control please extract attached table.zip file
> under schema node. This zip contains table, column and constraint node with
> primary key support (as constraint node has dependency on table and column
> node). Also you will need to apply multiselect control patch separately as
> this zip does not contain the same.
>
>
> Thank you,
>
> Harshal
>
>
> --
> *Harshal Dhumal*
> *Software Engineer *
>
>
>
> EenterpriseDB 
>
> On Tue, Mar 15, 2016 at 10:13 PM, Dave Page  wrote:
>
>> It seems to be missing the test dialogue?
>>
>> On Tue, Mar 15, 2016 at 8:47 AM, Harshal Dhumal <
>> harshal.dhu...@enterprisedb.com> wrote:
>>
>>> Hi,
>>>
>>> PFA generalized updated patch for backform multiSelectControl.
>>>
>>> --
>>> *Harshal Dhumal*
>>> *Software Engineer *
>>>
>>>
>>>
>>> EenterpriseDB 
>>>
>>> On Tue, Mar 8, 2016 at 1:04 PM, Harshal Dhumal <
>>> harshal.dhu...@enterprisedb.com> wrote:
>>>
 Hi,

 PFA backform control for selecting multiple columns.(This control
 depends on column node.)

 Usage:

 {
   id: 'columns', label: '{{ _('Columns') }}',
   type: 'collection', group: '{{ _('Definition') }}', editable:true,
   canDelete: true, canAdd: true, control: 
 Backform.MultiColumnSelectControl,
   deps: ['index'], node: 'column',
   model: pgBrowser.Node.Model.extend({
 keys: ['column'],
 defaults: {
   column: undefined
 }
   })
 }


 Note: When using this control model should have *column* attribute.
 And node property should be *column*.




 --
 *Harshal Dhumal*
 *Software Engineer *



 EenterpriseDB 

>>>
>>>
>>>
>>> --
>>> Sent via pgadmin-hackers mailing list (pgadmin-hackers@postgresql.org)
>>> To make changes to your subscription:
>>> http://www.postgresql.org/mailpref/pgadmin-hackers
>>>
>>>
>>
>>
>> --
>> 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

Re: [pgadmin-hackers] Control for selecting multiple columns [pgadmin4]

[Dave Page]

On Fri, Mar 18, 2016 at 11:41 AM, Harshal Dhumal <
harshal.dhu...@enterprisedb.com> wrote:

> Hi Dave,
>
> The error is at line 84 in primary_key.js (from screenshot).
>
> In primary_key.js it requires MultiSelectAjaxControl. I guess patch of
> MultiSelectControl was not applied correctly.
>
> Can you please try again.
>
> When testing it check if (in browser script tab) MultiSelectControl is
> there in node.ui.js at line no 562 (approx).
>

OK, I got it in the end. Took a lot of repeated cache clear outs though :-(

So... I see two issues:

1) The control has a black border when it has focus, unlike other controls
that have gray ones.

2)  The sizing is different from other controls, whether in large screen or
small screen modes. Please see the attached screenshots. The control should
be positioned and sized just like a text control (with the exception that
it expands to multiple rows if needed, as it does).

Thanks.

[image: Inline image 2][image: Inline image 1]

-- 
Dave Page
Blog: http://pgsnake.blogspot.com
Twitter: @pgsnake

EnterpriseDB UK: http://www.enterprisedb.com
The Enterprise PostgreSQL Company

Re: [pgadmin-hackers] Control for selecting multiple columns [pgadmin4]

[Harshal Dhumal]

Hi Dave,

This seems to be some dependency issue. Can you please send me a screenshot
of debugger console with js error stack.


Regards,
Harshal


-- 
*Harshal Dhumal*
*Software Engineer *



EenterpriseDB 

On Thu, Mar 17, 2016 at 10:33 PM, Dave Page  wrote:

> Hi
>
> I tried that, but get the attached error when testing. I'm on a clean
> tree, with the WIP tables patch (which, by the way, doesn't look much like
> Arun's design so is likely to need a lot of layout work). I've restarted,
> refreshed etc.
>
> [image: Inline image 1]
>
>
> On Thu, Mar 17, 2016 at 6:04 AM, Harshal Dhumal <
> harshal.dhu...@enterprisedb.com> wrote:
>
>> Hi Dave,
>>
>> I have used same control in primary key constraint for selecting multiple
>> columns. So to test this control please extract attached table.zip file
>> under schema node. This zip contains table, column and constraint node with
>> primary key support (as constraint node has dependency on table and column
>> node). Also you will need to apply multiselect control patch separately as
>> this zip does not contain the same.
>>
>>
>> Thank you,
>>
>> Harshal
>>
>>
>> --
>> *Harshal Dhumal*
>> *Software Engineer *
>>
>>
>>
>> EenterpriseDB 
>>
>> On Tue, Mar 15, 2016 at 10:13 PM, Dave Page  wrote:
>>
>>> It seems to be missing the test dialogue?
>>>
>>> On Tue, Mar 15, 2016 at 8:47 AM, Harshal Dhumal <
>>> harshal.dhu...@enterprisedb.com> wrote:
>>>
 Hi,

 PFA generalized updated patch for backform multiSelectControl.

 --
 *Harshal Dhumal*
 *Software Engineer *



 EenterpriseDB 

 On Tue, Mar 8, 2016 at 1:04 PM, Harshal Dhumal <
 harshal.dhu...@enterprisedb.com> wrote:

> Hi,
>
> PFA backform control for selecting multiple columns.(This control
> depends on column node.)
>
> Usage:
>
> {
>   id: 'columns', label: '{{ _('Columns') }}',
>   type: 'collection', group: '{{ _('Definition') }}', editable:true,
>   canDelete: true, canAdd: true, control: 
> Backform.MultiColumnSelectControl,
>   deps: ['index'], node: 'column',
>   model: pgBrowser.Node.Model.extend({
> keys: ['column'],
> defaults: {
>   column: undefined
> }
>   })
> }
>
>
> Note: When using this control model should have *column* attribute.
> And node property should be *column*.
>
>
>
>
> --
> *Harshal Dhumal*
> *Software Engineer *
>
>
>
> EenterpriseDB 
>



 --
 Sent via pgadmin-hackers mailing list (pgadmin-hackers@postgresql.org)
 To make changes to your subscription:
 http://www.postgresql.org/mailpref/pgadmin-hackers


>>>
>>>
>>> --
>>> 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
>

Re: [pgadmin-hackers] Control for selecting multiple columns [pgadmin4]

[Dave Page]

It seems to be missing the test dialogue?

On Tue, Mar 15, 2016 at 8:47 AM, Harshal Dhumal <
harshal.dhu...@enterprisedb.com> wrote:

> Hi,
>
> PFA generalized updated patch for backform multiSelectControl.
>
> --
> *Harshal Dhumal*
> *Software Engineer *
>
>
>
> EenterpriseDB 
>
> On Tue, Mar 8, 2016 at 1:04 PM, Harshal Dhumal <
> harshal.dhu...@enterprisedb.com> wrote:
>
>> Hi,
>>
>> PFA backform control for selecting multiple columns.(This control depends
>> on column node.)
>>
>> Usage:
>>
>> {
>>   id: 'columns', label: '{{ _('Columns') }}',
>>   type: 'collection', group: '{{ _('Definition') }}', editable:true,
>>   canDelete: true, canAdd: true, control: Backform.MultiColumnSelectControl,
>>   deps: ['index'], node: 'column',
>>   model: pgBrowser.Node.Model.extend({
>> keys: ['column'],
>> defaults: {
>>   column: undefined
>> }
>>   })
>> }
>>
>>
>> Note: When using this control model should have *column* attribute. And
>> node property should be *column*.
>>
>>
>>
>>
>> --
>> *Harshal Dhumal*
>> *Software Engineer *
>>
>>
>>
>> EenterpriseDB 
>>
>
>
>
> --
> Sent via pgadmin-hackers mailing list (pgadmin-hackers@postgresql.org)
> To make changes to your subscription:
> http://www.postgresql.org/mailpref/pgadmin-hackers
>
>


-- 
Dave Page
Blog: http://pgsnake.blogspot.com
Twitter: @pgsnake

EnterpriseDB UK: http://www.enterprisedb.com
The Enterprise PostgreSQL Company

Re: [pgadmin-hackers] Control for selecting multiple columns [pgadmin4]

[Harshal Dhumal]

Hi,

PFA generalized updated patch for backform multiSelectControl.

-- 
*Harshal Dhumal*
*Software Engineer *



EenterpriseDB 

On Tue, Mar 8, 2016 at 1:04 PM, Harshal Dhumal <
harshal.dhu...@enterprisedb.com> wrote:

> Hi,
>
> PFA backform control for selecting multiple columns.(This control depends
> on column node.)
>
> Usage:
>
> {
>   id: 'columns', label: '{{ _('Columns') }}',
>   type: 'collection', group: '{{ _('Definition') }}', editable:true,
>   canDelete: true, canAdd: true, control: Backform.MultiColumnSelectControl,
>   deps: ['index'], node: 'column',
>   model: pgBrowser.Node.Model.extend({
> keys: ['column'],
> defaults: {
>   column: undefined
> }
>   })
> }
>
>
> Note: When using this control model should have *column* attribute. And
> node property should be *column*.
>
>
>
>
> --
> *Harshal Dhumal*
> *Software Engineer *
>
>
>
> EenterpriseDB 
>
diff --git a/web/pgadmin/browser/static/js/node.ui.js b/web/pgadmin/browser/static/js/node.ui.js
index b84b6ee..1202580 100644
--- a/web/pgadmin/browser/static/js/node.ui.js
+++ b/web/pgadmin/browser/static/js/node.ui.js
@@ -558,6 +558,46 @@ function($, _, pgAdmin, Backbone, Backform, Alertify, Node) {
 })
   });
 
+  /*
+   * Control to select multiple columns.
+   */
+  var MultiSelectAjaxControl = Backform.MultiSelectAjaxControl = NodeAjaxOptionsControl.extend({
+formatter: {
+  fromRaw: function (rawData, model) {
+return _.isObject(rawData) ? rawData : JSON.parse(rawData);
+  },
+  toRaw: function (formattedData, model) {
+return formattedData;
+  }
+},
+template: _.template([
+  '<%=label%>',
+  '',
+  '   <%=required ? "required" : ""%>>',
+  '<% for (var i=0; i < options.length; i++) { %>',
+  '  <% var option = options[i]; %>',
+  '   <%=value != null && _.indexOf(value, option.value) != -1 ? "selected" : ""%> <%=option.disabled ? "disabled=\'disabled\'" : ""%>><%-option.label%>',
+  '<% } %>',
+  '  ',
+  ''
+  ].join("\n")),
+getValueFromDOM: function() {
+  var res = [];
+
+  this.$el.find("select").find(':selected').each(function() {
+res.push($(this).attr('value'));
+  });
+
+  return res;
+},
+defaults: _.extend({}, NodeAjaxOptionsControl.prototype.defaults, {
+  select2: {
+multiple: true,
+allowClear: true,
+width: 'style'
+  }
+})
+  });
 
   return Backform;
 });

-- 
Sent via pgadmin-hackers mailing list (pgadmin-hackers@postgresql.org)
To make changes to your subscription:
http://www.postgresql.org/mailpref/pgadmin-hackers

Re: [pgadmin-hackers] Control for selecting multiple columns [pgadmin4]

[Harshal Dhumal]

Hi Dave,

Currently there is no test dialogue to test this control.
Also Ashesh has suggested some changes. Once I complete those changes; I'll
resubmit the patch along with test dialogue to test it.



-- 
*Harshal Dhumal*
*Software Engineer *



EenterpriseDB 

On Tue, Mar 8, 2016 at 4:16 PM, Dave Page  wrote:

> Hi,
>
> Do you have a test dialogue or similar in which I can test this code?
> Ideally an addition to the test module would be good.
>
> Thanks.
>
> On Tue, Mar 8, 2016 at 7:34 AM, Harshal Dhumal <
> harshal.dhu...@enterprisedb.com> wrote:
>
>> Hi,
>>
>> PFA backform control for selecting multiple columns.(This control depends
>> on column node.)
>>
>> Usage:
>>
>> {
>>   id: 'columns', label: '{{ _('Columns') }}',
>>   type: 'collection', group: '{{ _('Definition') }}', editable:true,
>>   canDelete: true, canAdd: true, control: Backform.MultiColumnSelectControl,
>>   deps: ['index'], node: 'column',
>>   model: pgBrowser.Node.Model.extend({
>> keys: ['column'],
>> defaults: {
>>   column: undefined
>> }
>>   })
>> }
>>
>>
>> Note: When using this control model should have *column* attribute. And
>> node property should be *column*.
>>
>>
>>
>>
>> --
>> *Harshal Dhumal*
>> *Software Engineer *
>>
>>
>>
>> EenterpriseDB 
>>
>>
>> --
>> Sent via pgadmin-hackers mailing list (pgadmin-hackers@postgresql.org)
>> To make changes to your subscription:
>> http://www.postgresql.org/mailpref/pgadmin-hackers
>>
>>
>
>
> --
> Dave Page
> Blog: http://pgsnake.blogspot.com
> Twitter: @pgsnake
>
> EnterpriseDB UK: http://www.enterprisedb.com
> The Enterprise PostgreSQL Company
>

Re: [pgadmin-hackers] Control for selecting multiple columns [pgadmin4]

[Dave Page]

Hi,

Do you have a test dialogue or similar in which I can test this code?
Ideally an addition to the test module would be good.

Thanks.

On Tue, Mar 8, 2016 at 7:34 AM, Harshal Dhumal <
harshal.dhu...@enterprisedb.com> wrote:

> Hi,
>
> PFA backform control for selecting multiple columns.(This control depends
> on column node.)
>
> Usage:
>
> {
>   id: 'columns', label: '{{ _('Columns') }}',
>   type: 'collection', group: '{{ _('Definition') }}', editable:true,
>   canDelete: true, canAdd: true, control: Backform.MultiColumnSelectControl,
>   deps: ['index'], node: 'column',
>   model: pgBrowser.Node.Model.extend({
> keys: ['column'],
> defaults: {
>   column: undefined
> }
>   })
> }
>
>
> Note: When using this control model should have *column* attribute. And
> node property should be *column*.
>
>
>
>
> --
> *Harshal Dhumal*
> *Software Engineer *
>
>
>
> EenterpriseDB 
>
>
> --
> Sent via pgadmin-hackers mailing list (pgadmin-hackers@postgresql.org)
> To make changes to your subscription:
> http://www.postgresql.org/mailpref/pgadmin-hackers
>
>


-- 
Dave Page
Blog: http://pgsnake.blogspot.com
Twitter: @pgsnake

EnterpriseDB UK: http://www.enterprisedb.com
The Enterprise PostgreSQL Company

[pgadmin-hackers] Control for selecting multiple columns [pgadmin4]

[Harshal Dhumal]

Hi,

PFA backform control for selecting multiple columns.(This control depends
on column node.)

Usage:

{
  id: 'columns', label: '{{ _('Columns') }}',
  type: 'collection', group: '{{ _('Definition') }}', editable:true,
  canDelete: true, canAdd: true, control: Backform.MultiColumnSelectControl,
  deps: ['index'], node: 'column',
  model: pgBrowser.Node.Model.extend({
keys: ['column'],
defaults: {
  column: undefined
}
  })
}


Note: When using this control model should have *column* attribute. And
node property should be *column*.




-- 
*Harshal Dhumal*
*Software Engineer *



EenterpriseDB 
diff --git a/web/pgadmin/browser/static/js/node.ui.js b/web/pgadmin/browser/static/js/node.ui.js
index b84b6ee..500d49b 100644
--- a/web/pgadmin/browser/static/js/node.ui.js
+++ b/web/pgadmin/browser/static/js/node.ui.js
@@ -558,6 +558,145 @@ function($, _, pgAdmin, Backbone, Backform, Alertify, Node) {
 })
   });
 
+  /*
+   * Control to select multiple columns.
+   */
+  var MultiColumnSelectControl = Backform.MultiColumnSelectControl = Backform.NodeListByNameControl.extend({
+formatter: {
+  fromRaw: function (rawData, model) {
+var res = _.isObject(rawData) ? rawData : JSON.parse(rawData);
+
+return _.pluck(res, 'column');
+  },
+  toRaw: function (formattedData, model) {
+return formattedData;
+  }
+},
+template: _.template([
+  '<%=label%>',
+  '',
+  '   <%=required ? "required" : ""%>>',
+  '<% for (var i=0; i < options.length; i++) { %>',
+  '  <% var option = options[i]; %>',
+  '   <%=value != null && _.indexOf(value, option.value) != -1 ? "selected" : ""%> <%=option.disabled ? "disabled=\'disabled\'" : ""%>><%-option.label%>',
+  '<% } %>',
+  '  ',
+  ''
+  ].join("\n")),
+events: {"change select": "onChange"},
+getValueFromDOM: function() {
+  var res = [];
+
+  this.$el.find("select").find(':selected').each(function() {
+res.push($(this).attr('value'));
+  });
+
+  return res;
+},
+render: function() {
+  var field = _.defaults(this.field.toJSON(), this.defaults),
+  attrArr = field.name.split('.'),
+  name = attrArr.shift(),
+  path = attrArr.join('.'),
+  data = _.extend(field),
+  evalF = function(f, d, m) {
+return (_.isFunction(f) ? !!f.apply(d, [m]) : !!f);
+  };
+
+  // Evaluate the disabled, visible, and required option
+  _.extend(data, {
+disabled: evalF(data.disabled, data, this.model),
+visible:  evalF(data.visible, data, this.model),
+required: evalF(data.required, data, this.model)
+  });
+
+  var attributes = this.model.toJSON(),
+rawValue = this.keyPathAccessor(attributes[name], path);
+
+  data = _.extend(data, {
+rawValue: rawValue,
+value: this.formatter.fromRaw(rawValue, this.model),
+attributes: attributes,
+formatter: this.formatter
+  })
+  // Evaluation the options
+  if (_.isFunction(data.options)) {
+try {
+  data.options = data.options.apply(this)
+} catch(e) {
+  // Do nothing
+  data.options = []
+  this.model.trigger('pgadmin-view:transform:error', m, self.field, e);
+}
+  }
+
+  // Clean up first
+  this.$el.removeClass(Backform.hiddenClassname);
+
+  if (!data.visible)
+this.$el.addClass(Backform.hiddenClassname);
+
+  this.$el.html(this.template(data)).addClass(field.name);
+  this.updateInvalid();
+
+  var self = this,
+  collection = this.model.get(this.field.get('name'));
+
+  this.$el.find('select').select2({
+multiple: true,
+allowClear: true,
+placeholder: "Select column/s",
+width: 'style'
+  }).on("change", function(e) {
+$(e.target).find(':selected').each(function() {
+});
+  });
+  return this;
+},
+onChange: function(e) {
+  var model = this.model,
+  $el = $(e.target),
+  attrArr = this.field.get("name").split('.'),
+  name = attrArr.shift(),
+  path = attrArr.join('.'),
+  vals = this.getValueFromDOM(),
+  collection = model.get(name),
+  removed = [];
+
+  this.stopListening(this.model, "change:" + name, this.render);
+
+  /*
+   * Iterate through all the values, and find out how many are already
+   * present in the collection.
+   */
+  collection.each(function(m) {
+var column = m.get('column'),
+idx = _.indexOf(vals, column);
+
+if (idx > -1) {
+  vals.splice(idx, 1);
+} else {
+  removed.push(column);
+}
+  });
+
+  /*
+   * Adding new values
+   */
+  _.each(vals, function(v) {
+collection.add({column: v});
+  });
+
+  /*
+   *