AMBARI-19750. Hive2 view - Clicking on browse databases does not work (pallavkul)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/ea1fbaa0 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/ea1fbaa0 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/ea1fbaa0 Branch: refs/heads/branch-dev-patch-upgrade Commit: ea1fbaa020907c7a433275447043b509f8868dcd Parents: c977113 Author: pallavkul <pallav....@gmail.com> Authored: Mon Jan 30 14:21:16 2017 +0530 Committer: pallavkul <pallav....@gmail.com> Committed: Mon Jan 30 14:21:16 2017 +0530 ---------------------------------------------------------------------- .../components/multiple-database-search-bar.js | 31 +++++++++++++++++++- .../components/multiple-database-search-bar.hbs | 11 ++++--- 2 files changed, 35 insertions(+), 7 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/ea1fbaa0/contrib/views/hive20/src/main/resources/ui/app/components/multiple-database-search-bar.js ---------------------------------------------------------------------- diff --git a/contrib/views/hive20/src/main/resources/ui/app/components/multiple-database-search-bar.js b/contrib/views/hive20/src/main/resources/ui/app/components/multiple-database-search-bar.js index 817a826..c27f80f 100644 --- a/contrib/views/hive20/src/main/resources/ui/app/components/multiple-database-search-bar.js +++ b/contrib/views/hive20/src/main/resources/ui/app/components/multiple-database-search-bar.js @@ -66,6 +66,12 @@ export default Ember.Component.extend({ return selecteddblist; }), + focusComesFromOutside(e){ + let blurredEl = e.relatedTarget; + return !blurredEl || !blurredEl.classList.contains('ember-power-select-search-input'); + }, + + actions: { createOnEnter(select, e) { if (e.keyCode === 13 && select.isOpen && @@ -79,10 +85,33 @@ export default Ember.Component.extend({ } }, + handleFocus(select, e) { + if (this.focusComesFromOutside(e)) { + select.actions.open(); + this.$('.browse').addClass('open'); + } + + }, + + handleBlur() { + //console.log('handleBlur'); + }, + updateTables(){ this.sendAction('changeDbHandler', this.get('selectedDbs')); - } + }, + + browse(){ + if(this.$('.browse').hasClass('open')){ + this.$('.browse').removeClass('open'); + this.$('.multiple-db-select input').focusout(); + } else { + this.$('.browse').addClass('open'); + this.$('.multiple-db-select input').focus(); + } + + } } }); http://git-wip-us.apache.org/repos/asf/ambari/blob/ea1fbaa0/contrib/views/hive20/src/main/resources/ui/app/templates/components/multiple-database-search-bar.hbs ---------------------------------------------------------------------- diff --git a/contrib/views/hive20/src/main/resources/ui/app/templates/components/multiple-database-search-bar.hbs b/contrib/views/hive20/src/main/resources/ui/app/templates/components/multiple-database-search-bar.hbs index cc102b4..e620347 100644 --- a/contrib/views/hive20/src/main/resources/ui/app/templates/components/multiple-database-search-bar.hbs +++ b/contrib/views/hive20/src/main/resources/ui/app/templates/components/multiple-database-search-bar.hbs @@ -22,22 +22,21 @@ </div> <div class="col-md-9"> <div class="input-group-lg"> - {{#power-select-multiple + class="multiple-db-select" placeholder="Search databases" options=allDbs selected=selectedMultiDb onchange=(pipe-action (action (mut selectedDbs)) (action "updateTables")) + onfocus=(action "handleFocus") + onblur=(action "handleBlur") onkeydown=(action "createOnEnter") as |number|}} {{fa-icon "database"}} {{number}} {{/power-select-multiple}} - - <span class="input-group-btn" style="top: 0;right: 130px;position: absolute;"> - <button type="button" class="btn btn-default">{{fa-icon "folder"}} Browse <span class="caret"></span></button> + <span class="input-group-btn browse" style="top: 0;right: 130px;position: absolute;"> + <button type="button" class="btn btn-default" {{action "browse" }}>{{fa-icon "folder"}} Browse <span class="caret"></span></button> </span> - - </div> </div>