Add md-codelist-multi

Inherits from md-codelist.
select2 option closeOnSelect is set to false.

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

@@ -0,0 +1,72 @@
+import Ember from 'ember';
+import MdCodelist from '../md-codelist/component';
+
+export default MdCodelist.extend({
+/**
+ * Initial value. Accepts either an Array or JSON formatted array of strings.
+ * Example: '["foo","bar"]'
+ *
+ * @property value
+ * @type {Array|String}
+ */
+
+  /**
+   * codelist is an array of code objects in mdCodelist format
+   * the initial codelist for 'mdCodeName' is pulled from the 'codelist' service;
+   * then if a new value was created by the user a new object will be added into the codelist;
+   * then a new 'selected' element will be added to each codelist object to let select2
+   * and the template <option> tag know this item should be selected.
+   *
+   * @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;
+    let create = this.get('create');
+    if(selectedItems) {
+      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
+            };
+            codelist.pushObject(newObject);
+          }
+        });
+      }
+      codelist.forEach(function(item) {
+        let mdIndex = selectedItems.indexOf(item['codeName']);
+        if(mdIndex > -1) {
+          item['selected'] = true;
+        }
+      });
+    }
+
+    return codelist;
+  })
+});

app/pods/components/input/md-codelist-multi/template.hbs

@@ -0,0 +1,13 @@
+<div class="form-group">
+  {{#if label}}
+    <label>{{label}}</label>
+  {{/if}}
+  <select class="form-control md-codelist md-codelist-multi" {{action 'setValue' on='change'}} multiple="multiple">
+    <option></option>
+    {{#each codelist as |code index|}}
+      <option value={{code.codeName}} selected={{code.selected}}
+        data-tooltip={{code.description}}>{{code.codeName}}</option>
+    {{/each}}
+    {{yield}}
+  </select>
+</div>

tests/integration/pods/components/input/md-codelist-multi/component-test.js

@@ -0,0 +1,82 @@
+import {
+  moduleForComponent, test
+}
+from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+import Ember from 'ember';
+
+const codelist = Ember.Service.extend({
+  foobar: {
+    codelist: [{
+      code: '001',
+      codeName: 'foo',
+      description: 'This is foo.'
+    }, {
+      code: '002',
+      codeName: 'bar',
+      description: 'This is bar.'
+    }]
+  }
+});
+
+moduleForComponent('input/md-codelist-multi',
+  'Integration | Component | input/md codelist multi', {
+    integration: true,
+    beforeEach: function() {
+      this.register('service:codelist', codelist);
+      this.inject.service('codelist', {
+        as: 'codelist'
+      });
+    }
+  });
+
+test('it renders', function(assert) {
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });" + EOL + EOL +
+  this.set('fooVal', ['foo', 'bar']);
+
+  this.render(hbs `
+    {{input/md-codelist-multi
+    value='["foo","bar"]'
+    create = true
+    mdCodeName="foobar"}}
+    `);
+
+  assert.equal(this.$()
+    .text()
+    .replace(/[ \n]+/g, '|'), '|bar|foo|×bar×foo|',
+    'renders with JSON string');
+
+  // Template block usage:" + EOL +
+  this.render(hbs `
+    {{#input/md-codelist-multi
+      mdCodeName="foobar"
+      value=fooVal
+    }}
+      <p>template block text</p>
+    {{/input/md-codelist-multi}}
+  `);
+
+  assert.equal(this.$()
+    .text()
+    .replace(/[ \n]+/g, '|'), '|bar|foo|template|block|text|×bar×foo|',
+    'renders block with array value');
+});
+
+test('set value action', function(assert) {
+  // test dummy for the external profile action
+  this.on('update', (actual) => {
+    assert.equal(actual, "['bar']",
+      'submitted value is passed to external action');
+  });
+
+  this.render(hbs `{{input/md-codelist-multi
+    create = true
+    value='["foo"]'
+    mdCodeName="foobar"
+    change=(action "update" "['bar']")}}`);
+
+  this.$('select')
+    .trigger('change');
+});