Merge pull request #75 from jlblcc/enhancement-ember-power-select

Replace select2 ans BS tooltips, fix citation, upgrade docs

Author: jlblcc

app/app.js

@@ -1,3 +1,10 @@
+/**
+ * The mdEditor application instance.
+ *
+ * @module mdeditor
+ * @category docs
+ */
+
 import Ember from 'ember';
 import Resolver from './resolver';
 import loadInitializers from 'ember-load-initializers';
@@ -25,3 +32,21 @@ Ember.Route.reopen({
 });
 
 export default App;
+
+/**
+ * Components used to create objects or arrays of objects.
+ *
+ * @module mdeditor
+ * @submodule components-object
+ * @main components-object
+ * @category docs
+ */
+
+ /**
+  * Components used to input scalar or arrays of scalar values.
+  *
+  * @module mdeditor
+  * @submodule components-input
+  * @main components-input
+  * @category docs
+  */

app/pods/components/input/md-boolean/component.js

@@ -1,14 +1,19 @@
+/**
+ * @module mdeditor
+ * @submodule components-input
+ */
+
 import Ember from 'ember';
 
 export default Ember.Component.extend({
-  
+
   /**
    * Input, edit, display a boolean value
    *
    * @class md-boolean
    * @constructor
    */
-  
+
   /**
    * Value of the input.
    * The edited value is returned
@@ -34,5 +39,5 @@ export default Ember.Component.extend({
    * @default null
    */
   label: null
-  
+
 });

app/pods/components/input/md-codelist-multi/component.js

@@ -1,158 +1,144 @@
+/**
+ * @module mdeditor
+ * @submodule components-input
+ */
+
 import Ember from 'ember';
 import MdCodelist from '../md-codelist/component';
 
 export default MdCodelist.extend({
-  
+  classNames: ['md-codelist-multi'],
   /**
    * Specialized select list control for displaying and selecting
    * options in mdCodes codelists.
    * Extends md-codelist.
-   * Allows selection of multiple options. 
+   * Allows selection of multiple options.
    *
    * @class md-codelist-multi
    * @constructor
+   * @extends md-codelist
    */
-  
+
   /**
-   * Initial value, returned value. 
-   * Accepts either an Array of strings or JSON formatted array
-   * of strings.  Example: '["foo","bar"]'
+   * Initial value, returned value.
+   * Accepts an Array of strings.
+   *
+   * Example: `["foo","bar"]`
    *
    * @property value
    * @type Array
    * @return Array
    * @required
    */
-  
-  /**
-   * Indicates whether to allow the user to enter a new option
-   * not contained in the select list.
-   *
-   * @property create
-   * @type Boolean
-   * @default false
-   */
-  
-  /**
-   * Indicates if tooltips should be rendered for the options.
-   *
-   * @property tooltip
-   * @type Boolean
-   * @default false
-   */
-  
+
   /**
-   * Indicates if icons should be rendered.
+   * The multiple property for power-select-with-create
    *
-   * @property icon
+   * @property multiple
+   * @private
    * @type Boolean
-   * @default false
+   * @default true
    */
-  
+  multiple: true,
+
   /**
-   * Whether to render a button to clear the selection.
+   * The component to render
    *
-   * @property allowClear
-   * @type Boolean
-   * @default false
+   * @property theComponent
+   * @type Ember.computed
+   * @return String
    */
-  
+  theComponent: Ember.computed('create', function () {
+    return this.get('create') ? 'power-select-with-create' :
+      'power-select-multiple';
+  }),
+
   /**
    * Whether to close the selection list after a selection has been made.
    *
    * @property closeOnSelect
    * @type Boolean
-   * @default true
+   * @default false
    */
-  
+  closeOnSelect: false,
+
   /**
    * The string to display when no option is selected.
    *
    * @property placeholder
    * @type String
-   * @default 'Select one option'
+   * @default 'Select one or more options'
    */
-  
-  /**
-   * Form label for select list
-   *
-   * @property label
-   * @type String
-   * @default null
-   */
-  
+  placeholder: 'Select one or more options',
+
   /**
-   * Form field width
+   * The currently selected item in the codelist
    *
-   * @property width
-   * @type String
-   * @default 100%
+   * @property selectedItem
+   * @type Ember.computed
+   * @return PromiseObject
    */
-  
+  selectedItem: Ember.computed('value', function () {
+    let value = this.get('value');
+    let codelist = this.get('codelist');
+
+    if(value) {
+      return codelist.filter((item) => {
+        return value.includes(item['codeName']);
+      });
+    }
+    return null;
+  }),
+
   /**
-   * Indicates if input is disabled
+   * If a value is provided by the user which is not in the codelist and 'create=true'
+   * the new value will be added into the codelist array
    *
-   * @property disabled
-   * @type Boolean
-   * @default false
-   */
-  
-  /*
-   * codelist is an array of code objects in mdCodelist format
-   * the initial codelist for 'mdCodeName' is provided by the 'codelist' service;
-   * if a value is provided by the user which is not in the codelist and 'create=true'
-   * the new value will be added into the codelist array;
-   * then a Boolean 'selected' element will be added to each codelist object where the
-   * selected option will be set to true and all others false.
+   * @property codelist
+   * @type Ember.computed
+   * @return Array
    */
-  codelist: Ember.computed(function() {
-    let codelist = [];
-    let codelistName = this.get('mdCodeName');
-    let mdCodelist = this.get('mdCodes')
-      .get(codelistName)
-      .codelist
-      .sortBy('codeName');
-    mdCodelist.forEach(function(item) {
-      let newObject = {
-        code: item['code'],
-        codeName: item['codeName'],
-        description: item['description'],
-        selected: false
-      };
-      codelist.pushObject(newObject);
-    });
-
-    let val = this.get('value');
-    let selectedItems = typeof val === 'string' ? JSON.parse(val) : val;
+  codelist: Ember.computed('value', function () {
+    let codelist = this.get('mapped');
+    let value = this.get('value');
     let create = this.get('create');
-    if(selectedItems) {
+
+    if(value) {
       if(create) {
-        selectedItems.forEach(function(selectedItem) {
-          let mdIndex = -1;
-          codelist.forEach(function(codeObject, cIndex) {
-            if(selectedItem === codeObject['codeName']) {
-              mdIndex = cIndex;
-            }
-          });
-          if(mdIndex === -1) {
-            let newObject = {
-              code: Math.floor(Math.random() * 100000) + 1,
-              codeName: selectedItem,
-              description: 'Undefined',
-              selected: false
-            };
+        value.forEach((val) => {
+          let found = codelist.findBy('codeName', val);
+          if(found === undefined) {
+            let newObject = this.createCode(val);
             codelist.pushObject(newObject);
           }
         });
       }
-      codelist.forEach(function(item) {
-        let mdIndex = selectedItems.indexOf(item['codeName']);
-        if(mdIndex > -1) {
-          item['selected'] = true;
-        }
-      });
     }
 
     return codelist;
-  })
+  }),
+
+  /**
+   * Set the value on the select.
+   *
+   * @method setValue
+   * @param {Array|Object} selected The value to set. Generally, an array of
+   * selected objects, unless using the create option.
+   */
+  setValue(selected) {
+    let sel;
+
+    //power-select-with-create always sends a single object oncreate
+    //we need to add that object to the selectedItem array
+    if(this.get('create') && !Ember.isArray(selected)) {
+      sel = this.get('selectedItem')
+        .compact();
+      sel.pushObject(selected);
+    } else {
+      sel = selected;
+    }
+
+    this.set('value', sel.mapBy('codeName'));
+    this.change();
+  }
 });