Merge pull request #821 from AllenBW/PT/#146312989-typeahead-dialog-s…

…elect Pt/#146312989 typeahead dialog select
ManageIQ · Jun 17, 2017 · f6c2af7 · f6c2af7
2 parents c6aba21 + 6a1c767
commit f6c2af7
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 26 deletions.
diff --git a/client/app.js b/client/app.js
@@ -48,6 +48,7 @@ require('datatables.net/js/jquery.dataTables');
 require('datatables.net-select/js/dataTables.select');
 require('angular-datatables');
 require('angular-datatables/dist/plugins/select/angular-datatables.select');
+require('ui-select');
 
 // Needs imports loader because it expects `this` to be `window`
 require('imports-loader?this=>window!actioncable');
@@ -64,6 +65,7 @@ require('angular-patternfly/dist/styles/angular-patternfly.css');
 require('manageiq-ui-components/dist/css/ui-components.css');
 require('ngprogress/ngProgress.css');
 require('datatables.net-dt/css/jquery.dataTables.css');
+require('ui-select/dist/select.css');
 
 // Application styles
 require('./assets/sass/styles.sass');

diff --git a/client/app/shared/dialog-content/dialog-content.html b/client/app/shared/dialog-content/dialog-content.html
@@ -56,15 +56,18 @@ <h2 class="text-capitalize no-wrap">{{ ::vm.dialog.label }}</h2>
                       uib-tooltip="{{ ::inputTitle }}"
                       ng-checked="dialogField.default_value == 't'">
 
-                    <select
-                      ng-switch-when="DialogFieldDropDownList"
-                      ng-model="dialogField.default_value"
-                      ng-disabled="dialogField.read_only || vm.inputDisabled"
-                      ng-change="dialogField.triggerAutoRefresh(dialogField)"
-                      class="form-control"
-                      ng-options="fieldValue[0] as fieldValue[1] for fieldValue in dialogField.values">
-                    </select>
-
+                    <span ng-switch-when="DialogFieldDropDownList">
+                      <ui-select ng-model="dialogField.default_value"
+                                 ng-disabled="dialogField.read_only || vm.inputDisabled"
+                                 theme="bootstrap">
+                        <ui-select-match
+                          placeholder="{{dialogField.description}}">{{$select.selected[1] }}</ui-select-match>
+                        <ui-select-choices
+                          repeat="fieldValue[0] as fieldValue in dialogField.values | filter: $select.search">
+                          <span>{{fieldValue[1]}}</span>
+                        </ui-select-choices>
+                      </ui-select>
+                    </span>
 
                     <select ng-if="dialogField.options.force_single_value"
                             ng-switch-when="DialogFieldTagControl"

diff --git a/client/app/shared/shared.module.js b/client/app/shared/shared.module.js
@@ -1,20 +1,17 @@
-import {
-  formatBytes,
-  megaBytes,
-} from './format-bytes.filter.js';
-import {AceEditorComponent} from './ace-editor/ace-editor.component.js';
-import {ActionButtonGroupComponent} from './action-button-group/action-button-group.component.js';
-import {AutofocusDirective} from './autofocus.directive.js';
-import {ConfirmationDirective} from './confirmation/confirmation.directive.js';
-import {CustomDropdownComponent} from './custom-dropdown/custom-dropdown.component.js';
-import {DialogContentComponent} from './dialog-content/dialog-content.component.js';
-import {ElapsedTime} from './elapsedTime.filter.js';
-import {IconListComponent} from './icon-list/icon-list.component.js';
-import {LoadingComponent} from './loading.component.js';
-import {PaginationComponent} from './pagination/pagination.component.js';
-import {SSCardComponent} from './ss-card/ss-card.component.js';
-import {TaggingComponent} from './tagging/tagging.component.js';
-import {substitute} from './substitute.filter.js';
+import {formatBytes, megaBytes} from "./format-bytes.filter.js";
+import {AceEditorComponent} from "./ace-editor/ace-editor.component.js";
+import {ActionButtonGroupComponent} from "./action-button-group/action-button-group.component.js";
+import {AutofocusDirective} from "./autofocus.directive.js";
+import {ConfirmationDirective} from "./confirmation/confirmation.directive.js";
+import {CustomDropdownComponent} from "./custom-dropdown/custom-dropdown.component.js";
+import {DialogContentComponent} from "./dialog-content/dialog-content.component.js";
+import {ElapsedTime} from "./elapsedTime.filter.js";
+import {IconListComponent} from "./icon-list/icon-list.component.js";
+import {LoadingComponent} from "./loading.component.js";
+import {PaginationComponent} from "./pagination/pagination.component.js";
+import {SSCardComponent} from "./ss-card/ss-card.component.js";
+import {TaggingComponent} from "./tagging/tagging.component.js";
+import {substitute} from "./substitute.filter.js";
 
 export const SharedModule = angular
   .module('app.shared', [
@@ -26,6 +23,7 @@ export const SharedModule = angular
     'patternfly',
     'patternfly.charts',
     'patternfly.table',
+    'ui.select',
   ])
   .component('actionButtonGroup', ActionButtonGroupComponent)
   .component('customDropdown', CustomDropdownComponent)

diff --git a/package.json b/package.json
@@ -108,6 +108,7 @@
     "style-loader": "0.18.1",
     "ts-loader": "2.1.0",
     "typescript": "2.3.4",
+    "ui-select": "0.19.8",
     "url-loader": "0.5.8",
     "webpack": "2.6.1",
     "yargs": "8.0.1",

diff --git a/yarn.lock b/yarn.lock
@@ -7492,6 +7492,10 @@ uglify-to-browserify@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
 
+[email protected]:
+  version "0.19.8"
+  resolved "https://registry.yarnpkg.com/ui-select/-/ui-select-0.19.8.tgz#74860848a7fd8bc494d9856d2f62776ea98637c1"
+
 uid-number@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"