public inbox for [email protected]
help / color / mirror / Atom feedPatch: Added select2cell editor for backgrid [pgAdmin4]
5+ messages / 3 participants
[nested] [flat]
* Patch: Added select2cell editor for backgrid [pgAdmin4]
@ 2016-03-31 06:57 Murtuza Zabuawala <[email protected]>
2016-04-01 09:38 ` Re: Patch: Added select2cell editor for backgrid [pgAdmin4] Ashesh Vashi <[email protected]>
0 siblings, 1 reply; 5+ messages in thread
From: Murtuza Zabuawala @ 2016-03-31 06:57 UTC (permalink / raw)
To: pgadmin-hackers
Hi,
We have added Select2Cell Editor for backgrid, eariler as it was not
present & causing issue in rendering in subnode control.
--
Regards,
Murtuza Zabuawala
EnterpriseDB: http://www.enterprisedb.com
The Enterprise PostgreSQL Company
--
Sent via pgadmin-hackers mailing list ([email protected])
To make changes to your subscription:
http://www.postgresql.org/mailpref/pgadmin-hackers
Attachments:
[application/octet-stream] Added_Select2Cell_Editor_v1.patch (4.9K, 3-Added_Select2Cell_Editor_v1.patch)
download | inline diff:
diff --git a/web/pgadmin/static/js/backgrid/backgrid.pgadmin.js b/web/pgadmin/static/js/backgrid/backgrid.pgadmin.js
index 4b233d2..a8d3216 100644
--- a/web/pgadmin/static/js/backgrid/backgrid.pgadmin.js
+++ b/web/pgadmin/static/js/backgrid/backgrid.pgadmin.js
@@ -335,22 +335,130 @@
}
});
+ /**
+ Select2CellEditor the cell editor renders a Select2 input
+ box as its editor.
+ */
+ var Select2CellEditor = Backgrid.Select2CellEditor = Backgrid.SelectCellEditor.extend({
+ /** @property */
+ events: {
+ "change": "onSave"
+ },
+
+ /** @property */
+ setSelect2Options: function (options) {
+ this.select2Options = _.extend(options || {});
+ },
+
+ /** @property */
+ select2Options: {
+ openOnEnter: false
+ },
+
+ /** @property {function(Object, ?Object=): string} template */
+ template: _.template('<option value="<%- value %>" <%= selected ? \'selected="selected"\' : "" %>><%- text %></option>', null, {variable: null}),
+
+ initialize: function () {
+ Backgrid.SelectCellEditor.prototype.initialize.apply(this, arguments);
+ this.close = _.bind(this.close, this);
+ },
+ /**
+ Renders a `select2` select box instead of the default `<select>` HTML
+ element using the supplied options from #select2Options.
+ */
+ render: function () {
+ var self =this,
+ col = _.defaults(this.column.toJSON(), this.defaults),
+ model = this.model, column = this.column,
+ editable = Backgrid.callByNeed(col.editable, column, model),
+ optionValues = Backgrid.callByNeed(col.options, column, this);
+
+ this.$el.empty();
+
+ if (!_.isArray(optionValues)) throw new TypeError("optionValues must be an array");
+
+ /*
+ * Add empty option as Select2 requires any empty '<option><option>' for
+ * some of its functionality to work.
+ */
+
+ var optionText = null,
+ optionValue = null,
+ model = this.model,
+ selectedValues = model.get(this.column.get("name"));
+
+ for (var i = 0; i < optionValues.length; i++) {
+ var optionValue = optionValues[i];
+
+ if (_.isArray(optionValue) || _.isObject(optionValue)) {
+ optionText = optionValue[0] || optionValue.label;
+ optionValue = optionValue[1] || optionValue.value;
+
+ this.$el.append(
+ this.template({
+ text: optionText,
+ value: optionValue,
+ selected: (selectedValues == optionValue) ||
+ (_.indexOf(selectedValues, optionValue) > -1)
+ }));
+ } else {
+ throw new TypeError("optionValues elements must be a name-value pair.");
+ }
+ }
+ // Initialize select2 control.
+ this.$el.select2(
+ _.defaults(
+ {'disabled': !editable},
+ col.select2,
+ this.select2Options
+ ));
+
+ setTimeout(function(){
+ model.set(column.get("name"), self.$el.val(), {silent: true});
+ },10);
+
+ this.delegateEvents();
+
+ return this;
+ },
+ /**
+ Attach event handlers to the select2 box and focus it.
+ */
+ postRender: function () {
+ var self = this;
+ self.$el.on("blur", function (e) {
+ self.close(e);
+ }).select2("focus");
+ },
+
+ remove: function () {
+ this.$el.select2("destroy");
+ return Backgrid.SelectCellEditor.prototype.remove.apply(this, arguments);
+ },
+ onSave: function (e) {
+ var model = this.model;
+ var column = this.column;
+ model.set(column.get("name"), this.$el.val(), {silent: true});
+ }
+ });
/*
* Select2Cell for backgrid.
*/
- var Select2Cell = Backgrid.Extension.Select2Cell = Backgrid.Cell.extend({
+ var Select2Cell = Backgrid.Extension.Select2Cell = Backgrid.SelectCell.extend({
className: "select2-cell",
+ /** @property */
+ editor: Select2CellEditor,
defaults: _.defaults({
select2: {}
- }, Backgrid.Cell.prototype.defaults),
+ }, Backgrid.SelectCell.prototype.defaults),
events: {
"change": "onSave",
"select2:unselect": "onSave"
},
- template: _.template(
- '<option value="<%- value %>" <%= selected ? \'selected="selected"\' : "" %>><%- text %></option>'
- ),
+ /** @property {function(Object, ?Object=): string} template */
+ template: _.template('<option value="<%- value %>" <%= selected ? \'selected="selected"\' : "" %>><%- text %></option>', null, {variable: null}),
+
render: function () {
var col = _.defaults(this.column.toJSON(), this.defaults),
model = this.model, column = this.column,
@@ -413,7 +521,7 @@
onSave: function (e) {
var model = this.model;
var column = this.column;
- model.set(column.get("name"), this.$select.val());
+ model.set(column.get("name"), this.$select.val(), {silent: true});
}
});
^ permalink raw reply [nested|flat] 5+ messages in thread
* Re: Patch: Added select2cell editor for backgrid [pgAdmin4]
2016-03-31 06:57 Patch: Added select2cell editor for backgrid [pgAdmin4] Murtuza Zabuawala <[email protected]>
@ 2016-04-01 09:38 ` Ashesh Vashi <[email protected]>
2016-04-04 07:39 ` Re: Patch: Added select2cell editor for backgrid [pgAdmin4] Murtuza Zabuawala <[email protected]>
0 siblings, 1 reply; 5+ messages in thread
From: Ashesh Vashi @ 2016-04-01 09:38 UTC (permalink / raw)
To: Murtuza Zabuawala <[email protected]>; +Cc: pgadmin-hackers
On Thu, Mar 31, 2016 at 12:27 PM, Murtuza Zabuawala <
[email protected]> wrote:
> Hi,
>
> We have added Select2Cell Editor for backgrid, eariler as it was not
> present & causing issue in rendering in subnode control.
>
Looks good to me, but - have some feedback.
1. Can you please mention - why do we need 'openOnEnter: false' in select2
options?
2. There is a difference between UI, when rendered from the editor, and
from the Select2Cell. (I can see padding, when the Cell is rendered, but -
not when editor is rendered.)
Can you please fix this two?
--
Thanks & Regards,
Ashesh Vashi
EnterpriseDB INDIA: Enterprise PostgreSQL Company
<http://www.enterprisedb.com/;
*http://www.linkedin.com/in/asheshvashi*
<http://www.linkedin.com/in/asheshvashi;
>
>
> --
> Regards,
> Murtuza Zabuawala
> EnterpriseDB: http://www.enterprisedb.com
> The Enterprise PostgreSQL Company
>
>
> --
> Sent via pgadmin-hackers mailing list ([email protected])
> To make changes to your subscription:
> http://www.postgresql.org/mailpref/pgadmin-hackers
>
>
^ permalink raw reply [nested|flat] 5+ messages in thread
* Re: Patch: Added select2cell editor for backgrid [pgAdmin4]
2016-03-31 06:57 Patch: Added select2cell editor for backgrid [pgAdmin4] Murtuza Zabuawala <[email protected]>
2016-04-01 09:38 ` Re: Patch: Added select2cell editor for backgrid [pgAdmin4] Ashesh Vashi <[email protected]>
@ 2016-04-04 07:39 ` Murtuza Zabuawala <[email protected]>
2016-04-04 10:07 ` Re: Patch: Added select2cell editor for backgrid [pgAdmin4] Ashesh Vashi <[email protected]>
0 siblings, 1 reply; 5+ messages in thread
From: Murtuza Zabuawala @ 2016-04-04 07:39 UTC (permalink / raw)
To: Ashesh Vashi <[email protected]>; +Cc: pgadmin-hackers
Hi,
PFA updated patch.
Regards,
Murtuza
--
Regards,
Murtuza Zabuawala
EnterpriseDB: http://www.enterprisedb.com
The Enterprise PostgreSQL Company
On Fri, Apr 1, 2016 at 3:08 PM, Ashesh Vashi <[email protected]>
wrote:
> On Thu, Mar 31, 2016 at 12:27 PM, Murtuza Zabuawala <
> [email protected]> wrote:
>
>> Hi,
>>
>> We have added Select2Cell Editor for backgrid, eariler as it was not
>> present & causing issue in rendering in subnode control.
>>
> Looks good to me, but - have some feedback.
> 1. Can you please mention - why do we need 'openOnEnter: false' in select2
> options?
> 2. There is a difference between UI, when rendered from the editor, and
> from the Select2Cell. (I can see padding, when the Cell is rendered, but -
> not when editor is rendered.)
>
> Can you please fix this two?
>
> --
>
> Thanks & Regards,
>
> Ashesh Vashi
> EnterpriseDB INDIA: Enterprise PostgreSQL Company
> <http://www.enterprisedb.com/;
>
>
> *http://www.linkedin.com/in/asheshvashi*
> <http://www.linkedin.com/in/asheshvashi;
>
>>
>>
>> --
>> Regards,
>> Murtuza Zabuawala
>> EnterpriseDB: http://www.enterprisedb.com
>> The Enterprise PostgreSQL Company
>>
>>
>> --
>> Sent via pgadmin-hackers mailing list ([email protected])
>> To make changes to your subscription:
>> http://www.postgresql.org/mailpref/pgadmin-hackers
>>
>>
>
--
Sent via pgadmin-hackers mailing list ([email protected])
To make changes to your subscription:
http://www.postgresql.org/mailpref/pgadmin-hackers
Attachments:
[application/octet-stream] Added_Select2_editor_v2.patch (5.1K, 3-Added_Select2_editor_v2.patch)
download | inline diff:
diff --git a/web/pgadmin/static/css/overrides.css b/web/pgadmin/static/css/overrides.css
index 150567b..ca87e7a 100755
--- a/web/pgadmin/static/css/overrides.css
+++ b/web/pgadmin/static/css/overrides.css
@@ -906,4 +906,9 @@ ul.nav.nav-tabs {
.btn-primary{
margin: 2px 13px !important;
+}
+
+.select2-cell .select2-container > .backgrid th, .backgrid td
+{
+ padding: 0px;
}
\ No newline at end of file
diff --git a/web/pgadmin/static/js/backgrid/backgrid.pgadmin.js b/web/pgadmin/static/js/backgrid/backgrid.pgadmin.js
index 4b233d2..3260dc7 100644
--- a/web/pgadmin/static/js/backgrid/backgrid.pgadmin.js
+++ b/web/pgadmin/static/js/backgrid/backgrid.pgadmin.js
@@ -335,22 +335,134 @@
}
});
+ /**
+ Select2CellEditor the cell editor renders a Select2 input
+ box as its editor.
+ */
+ var Select2CellEditor = Backgrid.Select2CellEditor = Backgrid.SelectCellEditor.extend({
+ /** @property */
+ events: {
+ "change": "onSave"
+ },
+
+ /** @property */
+ setSelect2Options: function (options) {
+ this.select2Options = _.extend(options || {});
+ },
+
+ /** @property */
+ // This option will prevent Select2 list to pop up
+ // when user press tab on select2
+ select2Options: {
+ openOnEnter: false
+ },
+
+ /** @property {function(Object, ?Object=): string} template */
+ template: _.template('<option value="<%- value %>" <%= selected ? \'selected="selected"\' : "" %>><%- text %></option>',
+ null, {variable: null}),
+
+ initialize: function () {
+ Backgrid.SelectCellEditor.prototype.initialize.apply(this, arguments);
+ this.close = _.bind(this.close, this);
+ },
+ /**
+ Renders a `select2` select box instead of the default `<select>` HTML
+ element using the supplied options from #select2Options.
+ */
+ render: function () {
+ var self =this,
+ col = _.defaults(this.column.toJSON(), this.defaults),
+ model = this.model, column = this.column,
+ editable = Backgrid.callByNeed(col.editable, column, model),
+ optionValues = Backgrid.callByNeed(col.options, column, this);
+
+ this.$el.empty();
+
+ if (!_.isArray(optionValues)) throw new TypeError("optionValues must be an array");
+
+ /*
+ * Add empty option as Select2 requires any empty '<option><option>' for
+ * some of its functionality to work.
+ */
+
+ var optionText = null,
+ optionValue = null,
+ model = this.model,
+ selectedValues = model.get(this.column.get("name"));
+
+ for (var i = 0; i < optionValues.length; i++) {
+ var optionValue = optionValues[i];
+
+ if (_.isArray(optionValue) || _.isObject(optionValue)) {
+ optionText = optionValue[0] || optionValue.label;
+ optionValue = optionValue[1] || optionValue.value;
+
+ this.$el.append(
+ this.template({
+ text: optionText,
+ value: optionValue,
+ selected: (selectedValues == optionValue) ||
+ (_.indexOf(selectedValues, optionValue) > -1)
+ }));
+ } else {
+ throw new TypeError("optionValues elements must be a name-value pair.");
+ }
+ }
+ // Initialize select2 control.
+ this.$el.select2(
+ _.defaults(
+ {'disabled': !editable},
+ col.select2,
+ this.select2Options
+ ));
+
+ setTimeout(function(){
+ model.set(column.get("name"), self.$el.val());
+ },10);
+
+ this.delegateEvents();
+
+ return this;
+ },
+ /**
+ Attach event handlers to the select2 box and focus it.
+ */
+ postRender: function () {
+ var self = this;
+ self.$el.on("blur", function (e) {
+ self.close(e);
+ }).select2("focus");
+ },
+
+ remove: function () {
+ this.$el.select2("destroy");
+ return Backgrid.SelectCellEditor.prototype.remove.apply(this, arguments);
+ },
+ onSave: function (e) {
+ var model = this.model;
+ var column = this.column;
+ model.set(column.get("name"), this.$el.val());
+ }
+ });
/*
* Select2Cell for backgrid.
*/
- var Select2Cell = Backgrid.Extension.Select2Cell = Backgrid.Cell.extend({
+ var Select2Cell = Backgrid.Extension.Select2Cell = Backgrid.SelectCell.extend({
className: "select2-cell",
+ /** @property */
+ editor: Select2CellEditor,
defaults: _.defaults({
select2: {}
- }, Backgrid.Cell.prototype.defaults),
+ }, Backgrid.SelectCell.prototype.defaults),
events: {
"change": "onSave",
"select2:unselect": "onSave"
},
- template: _.template(
- '<option value="<%- value %>" <%= selected ? \'selected="selected"\' : "" %>><%- text %></option>'
- ),
+ /** @property {function(Object, ?Object=): string} template */
+ template: _.template('<option value="<%- value %>" <%= selected ? \'selected="selected"\' : "" %>><%- text %></option>',
+ null, {variable: null}),
+
render: function () {
var col = _.defaults(this.column.toJSON(), this.defaults),
model = this.model, column = this.column,
^ permalink raw reply [nested|flat] 5+ messages in thread
* Re: Patch: Added select2cell editor for backgrid [pgAdmin4]
2016-03-31 06:57 Patch: Added select2cell editor for backgrid [pgAdmin4] Murtuza Zabuawala <[email protected]>
2016-04-01 09:38 ` Re: Patch: Added select2cell editor for backgrid [pgAdmin4] Ashesh Vashi <[email protected]>
2016-04-04 07:39 ` Re: Patch: Added select2cell editor for backgrid [pgAdmin4] Murtuza Zabuawala <[email protected]>
@ 2016-04-04 10:07 ` Ashesh Vashi <[email protected]>
2016-04-05 15:51 ` Re: Patch: Added select2cell editor for backgrid [pgAdmin4] Dave Page <[email protected]>
0 siblings, 1 reply; 5+ messages in thread
From: Ashesh Vashi @ 2016-04-04 10:07 UTC (permalink / raw)
To: Murtuza Zabuawala <[email protected]>; +Cc: pgadmin-hackers
Thanks - committed with small changes.
--
Thanks & Regards,
Ashesh Vashi
EnterpriseDB INDIA: Enterprise PostgreSQL Company
<http://www.enterprisedb.com;
*http://www.linkedin.com/in/asheshvashi*
<http://www.linkedin.com/in/asheshvashi;
On Mon, Apr 4, 2016 at 1:09 PM, Murtuza Zabuawala <
[email protected]> wrote:
> Hi,
>
> PFA updated patch.
>
> Regards,
> Murtuza
>
>
>
>
> --
> Regards,
> Murtuza Zabuawala
> EnterpriseDB: http://www.enterprisedb.com
> The Enterprise PostgreSQL Company
>
> On Fri, Apr 1, 2016 at 3:08 PM, Ashesh Vashi <
> [email protected]> wrote:
>
>> On Thu, Mar 31, 2016 at 12:27 PM, Murtuza Zabuawala <
>> [email protected]> wrote:
>>
>>> Hi,
>>>
>>> We have added Select2Cell Editor for backgrid, eariler as it was not
>>> present & causing issue in rendering in subnode control.
>>>
>> Looks good to me, but - have some feedback.
>> 1. Can you please mention - why do we need 'openOnEnter: false' in
>> select2 options?
>> 2. There is a difference between UI, when rendered from the editor, and
>> from the Select2Cell. (I can see padding, when the Cell is rendered, but -
>> not when editor is rendered.)
>>
>> Can you please fix this two?
>>
>> --
>>
>> Thanks & Regards,
>>
>> Ashesh Vashi
>> EnterpriseDB INDIA: Enterprise PostgreSQL Company
>> <http://www.enterprisedb.com/;
>>
>>
>> *http://www.linkedin.com/in/asheshvashi*
>> <http://www.linkedin.com/in/asheshvashi;
>>
>>>
>>>
>>> --
>>> Regards,
>>> Murtuza Zabuawala
>>> EnterpriseDB: http://www.enterprisedb.com
>>> The Enterprise PostgreSQL Company
>>>
>>>
>>> --
>>> Sent via pgadmin-hackers mailing list ([email protected])
>>> To make changes to your subscription:
>>> http://www.postgresql.org/mailpref/pgadmin-hackers
>>>
>>>
>>
>
^ permalink raw reply [nested|flat] 5+ messages in thread
* Re: Patch: Added select2cell editor for backgrid [pgAdmin4]
2016-03-31 06:57 Patch: Added select2cell editor for backgrid [pgAdmin4] Murtuza Zabuawala <[email protected]>
2016-04-01 09:38 ` Re: Patch: Added select2cell editor for backgrid [pgAdmin4] Ashesh Vashi <[email protected]>
2016-04-04 07:39 ` Re: Patch: Added select2cell editor for backgrid [pgAdmin4] Murtuza Zabuawala <[email protected]>
2016-04-04 10:07 ` Re: Patch: Added select2cell editor for backgrid [pgAdmin4] Ashesh Vashi <[email protected]>
@ 2016-04-05 15:51 ` Dave Page <[email protected]>
0 siblings, 0 replies; 5+ messages in thread
From: Dave Page @ 2016-04-05 15:51 UTC (permalink / raw)
To: Ashesh Vashi <[email protected]>; +Cc: Murtuza Zabuawala <[email protected]>; pgadmin-hackers
I've reverted the change to overrides.css that this patch made as it was
that that was causing the padding issue on backgrid that we noted this
morning when looking at the debugger.
+}
+
+.select2-cell .select2-container > .backgrid th, .backgrid td
+{
+ padding: 0px;
Please fix in a less blanket way.
On Mon, Apr 4, 2016 at 11:07 AM, Ashesh Vashi <[email protected]
> wrote:
> Thanks - committed with small changes.
>
> --
>
> Thanks & Regards,
>
> Ashesh Vashi
> EnterpriseDB INDIA: Enterprise PostgreSQL Company
> <http://www.enterprisedb.com;
>
>
> *http://www.linkedin.com/in/asheshvashi*
> <http://www.linkedin.com/in/asheshvashi;
>
> On Mon, Apr 4, 2016 at 1:09 PM, Murtuza Zabuawala <
> [email protected]> wrote:
>
>> Hi,
>>
>> PFA updated patch.
>>
>> Regards,
>> Murtuza
>>
>>
>>
>>
>> --
>> Regards,
>> Murtuza Zabuawala
>> EnterpriseDB: http://www.enterprisedb.com
>> The Enterprise PostgreSQL Company
>>
>> On Fri, Apr 1, 2016 at 3:08 PM, Ashesh Vashi <
>> [email protected]> wrote:
>>
>>> On Thu, Mar 31, 2016 at 12:27 PM, Murtuza Zabuawala <
>>> [email protected]> wrote:
>>>
>>>> Hi,
>>>>
>>>> We have added Select2Cell Editor for backgrid, eariler as it was not
>>>> present & causing issue in rendering in subnode control.
>>>>
>>> Looks good to me, but - have some feedback.
>>> 1. Can you please mention - why do we need 'openOnEnter: false' in
>>> select2 options?
>>> 2. There is a difference between UI, when rendered from the editor, and
>>> from the Select2Cell. (I can see padding, when the Cell is rendered, but -
>>> not when editor is rendered.)
>>>
>>> Can you please fix this two?
>>>
>>> --
>>>
>>> Thanks & Regards,
>>>
>>> Ashesh Vashi
>>> EnterpriseDB INDIA: Enterprise PostgreSQL Company
>>> <http://www.enterprisedb.com/;
>>>
>>>
>>> *http://www.linkedin.com/in/asheshvashi*
>>> <http://www.linkedin.com/in/asheshvashi;
>>>
>>>>
>>>>
>>>> --
>>>> Regards,
>>>> Murtuza Zabuawala
>>>> EnterpriseDB: http://www.enterprisedb.com
>>>> The Enterprise PostgreSQL Company
>>>>
>>>>
>>>> --
>>>> Sent via pgadmin-hackers mailing list ([email protected])
>>>> 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
^ permalink raw reply [nested|flat] 5+ messages in thread
end of thread, other threads:[~2016-04-05 15:51 UTC | newest]
Thread overview: 5+ messages (download: mbox mbox.gz follow: Atom feed)
-- links below jump to the message on this page --
2016-03-31 06:57 Patch: Added select2cell editor for backgrid [pgAdmin4] Murtuza Zabuawala <[email protected]>
2016-04-01 09:38 ` Ashesh Vashi <[email protected]>
2016-04-04 07:39 ` Murtuza Zabuawala <[email protected]>
2016-04-04 10:07 ` Ashesh Vashi <[email protected]>
2016-04-05 15:51 ` Dave Page <[email protected]>
This inbox is served by agora; see mirroring instructions
for how to clone and mirror all data and code used for this inbox