add support for disabled items, fixes #5

tedconf · Oct 29, 2015 · 8eee9b8 · 8eee9b8
1 parent e4aaa0e
commit 8eee9b8
Show file tree

Hide file tree

Showing 9 changed files with 79 additions and 20 deletions.
diff --git a/addon/components/searchable-select.js b/addon/components/searchable-select.js
@@ -11,6 +11,7 @@ export default Ember.Component.extend({
   selected: null,
   // optionValueKey: 'id', //do i need this? or is id a suitable default for unique key?
   optionLabelKey: 'title',
+  optionDisabledKey: null,
   prompt: 'Select an option',
   searchPrompt: 'Type to search',
   limitSearchToWordBoundary: false,
@@ -81,6 +82,10 @@ export default Ember.Component.extend({
       this['on-search'].call(this, text);
     },
     selectItem(item){
+      if (Ember.get(item, this.get('optionDisabledKey'))){
+        //item is disabled
+        return;
+      }
       this.set('_selected', item);
       this['on-change'].call(this, item);
       this.send('hideMenu');

diff --git a/addon/templates/components/searchable-select.hbs b/addon/templates/components/searchable-select.hbs
@@ -29,8 +29,10 @@
     <ul class="Searchable-select__options-list">
       {{#each filteredContent key="@index" as |option|}}
         <li
-          class="Searchable-select__option {{if (searchable-select-is-equal option _selected) 'Searchable-select__option--selected'}}"
-          {{action "selectItem" option}}>
+          class="Searchable-select__option
+          {{if (searchable-select-is-equal option _selected) 'Searchable-select__option--selected'}}
+          {{if (searchable-select-get option optionDisabledKey) 'Searchable-select__option--disabled'}}"
+          {{action "selectItem" option bubbles=false}}>
           {{#if (searchable-select-is-equal option _selected)}}
             <span class="Searchable-select__option-indicator Searchable-select__option-indicator--selected">&#10003;</span>
           {{/if}}

diff --git a/tests/dummy/app/pods/application/template.hbs b/tests/dummy/app/pods/application/template.hbs
@@ -34,6 +34,7 @@
 
   {{examples/example-default TEDevents=TEDevents}}
   {{examples/initial-selection TEDevents=TEDevents}}
+  {{examples/example-disabled TEDevents=TEDevents}}
   {{examples/word-boundary TEDevents=TEDevents}}
   {{examples/ajax-search TEDevents=TEDevents}}
   {{examples/two-way-bound TEDevents=TEDevents}}

diff --git a/tests/dummy/app/pods/components/examples/example-disabled/component.js b/tests/dummy/app/pods/components/examples/example-disabled/component.js
@@ -0,0 +1,13 @@
+import Ember from 'ember';
+
+// BEGIN-SNIPPET example-default
+export default Ember.Component.extend({
+  classNames: 'Example',
+  setBySearchable: null,
+  actions: {
+    update(selection){
+      this.set('setBySearchable', selection);
+    }
+  }
+});
+// END-SNIPPET
diff --git a/tests/dummy/app/pods/components/examples/example-disabled/template.hbs b/tests/dummy/app/pods/components/examples/example-disabled/template.hbs
@@ -0,0 +1,21 @@
+<h3>Disabled options</h3>
+<p>Just like a real select menu, you can disable menu items. Pass in a item key to use as a flag; when true the item will not be selectable. If you don't have an existing model key that evaluates to true/false, you can set up a computed property on the content model that returns a boolean value.</p>
+<br>
+  <div class="row">
+  <div class="col-md-6">
+    {{code-snippet name="disabled.hbs"}}
+  </div>
+  <div class="col-md-6">
+
+  {{!-- BEGIN-SNIPPET disabled --}}
+  {{searchable-select
+    content=TEDevents
+    sortBy="title"
+    optionDisabledKey="isTEDxEvent"
+    on-change=(action "update")}}
+
+  <p>Set by Searchable: {{setBySearchable.title}}</p>
+  {{!-- END-SNIPPET --}}
+
+  </div>
+</div>
diff --git a/tests/dummy/app/pods/components/examples/two-way-bound/component.js b/tests/dummy/app/pods/components/examples/two-way-bound/component.js
@@ -2,14 +2,8 @@ import Ember from 'ember';
 
 export default Ember.Component.extend({
   classNames: 'Example',
-  // setBySearchable: null,
   TEDevents: null,
   selectedOption: Ember.computed('TEDevents', function() {
     return this.get('TEDevents').findBy('title', 'TED2015');
   })
-  // actions: {
-  //   update(selection){
-  //     this.set('setBySearchable', selection);
-  //   }
-  // }
 });
diff --git a/tests/dummy/app/pods/components/examples/two-way-bound/template.hbs b/tests/dummy/app/pods/components/examples/two-way-bound/template.hbs
@@ -1,5 +1,8 @@
-<h3>Two-way bound</h3>
-<p>Although data-down, actions-up is the recommended usage, you can force a two-way binding with the [<code>mut</code> helper](http://emberjs.com/blog/2015/05/10/run-up-to-two-oh.html#toc_the-code-mut-code-helper). Pass in `(mut boundValue)` to the on-change action instead of a named action.</p>
+{{#ember-markdown-section}}
+### Two-way bound
+
+Although data-down, actions-up is the recommended usage, you can force a two-way binding with [Ember's `mut` helper](http://emberjs.com/blog/2015/05/10/run-up-to-two-oh.html#toc_the-code-mut-code-helper). Instead of passing in an action name to `on-change`, pass in something like `(mut boundValue)`.
+{{/ember-markdown-section}}
   <div class="row">
   <div class="col-md-6">
     {{code-snippet name="two-way.hbs"}}

diff --git a/tests/dummy/app/pods/components/options-table/template.hbs b/tests/dummy/app/pods/components/options-table/template.hbs
@@ -6,6 +6,7 @@
     content | array of items to populate the list | Ember.A() | null
     selected | pass in an initial selection | Object | null
     optionLabelKey | the item property to use as the visible label in the menu | string | 'title'
+    optionDisabledKey | optionally provide a boolean item property to use a flag for disabling menu items | string, null | null
     prompt | prompt text for the main input | string | 'Select an option'
     searchPrompt | prompt text for the search input | string | 'Type to search'
     limitSearchToWordBoundary | when set to true, search will only match the beginning of words | boolean | true

diff --git a/tests/integration/components/searchable-select-test.js b/tests/integration/components/searchable-select-test.js
@@ -8,10 +8,11 @@ moduleForComponent('searchable-select', 'Integration | Component | searchable se
 
 var TEDevents = Ember.A([
   {
-   id: 1,
-   title: 'TED2015',
-   longTitle: 'TED2015: Truth and Dare',
-   keywords: ''
+    id: 1,
+    title: 'TED2015',
+    longTitle: 'TED2015: Truth and Dare',
+    keywords: '',
+    isTEDxEvent: false
   },
   {
     id: 2,
@@ -20,14 +21,16 @@ var TEDevents = Ember.A([
     isTEDxEvent: true
   },
   {
-   id: 3,
-   title: 'TED2014',
-   keywords: ''
+    id: 3,
+    title: 'TED2014',
+    keywords: '',
+    isTEDxEvent: false
   },
   {
     id: 4,
     title: 'TEDGlobal 2014',
-    keywords: ''
+    keywords: '',
+    isTEDxEvent: false
   },
   {
     id: 5,
@@ -38,12 +41,14 @@ var TEDevents = Ember.A([
   {
     id: 6,
     title: 'TEDGlobal 2013',
-    keywords: ''
+    keywords: '',
+    isTEDxEvent: false
   },
   {
     id: 7,
     title: 'TED2013',
-    keywords: ''
+    keywords: '',
+    isTEDxEvent: false
   }
 ]);
 
@@ -242,6 +247,20 @@ test('can disable clear functionality', function(assert) {
   assert.equal(this.$('.Searchable-select__clear').length, 0);
 });
 
+test('can flag items as disabled by providing a boolean key to check against', function(assert) {
+  assert.expect(1);
+  this.set('content', TEDevents);
+  this.actions = { assertChanged: function(selection) {
+    //this action should not fire
+  }};
+
+  this.render(hbs`{{searchable-select content=content optionDisabledKey="isTEDxEvent" on-change=(action "assertChanged")}}`);
+  this.$('.Searchable-select__label').click();
+  var disabledOptions = this.$('.Searchable-select__option--disabled');
+  disabledOptions.eq(0).click();
+
+  assert.equal(disabledOptions.length, 2);
+});
 
 // test('can specify a path for a disabled flag', function(assert) {
 //   assert.expect(1);