Merge pull request #31 from adiwg/feature-29-input-components

feature-29-input-components

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

@@ -0,0 +1,26 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  /**
+   * Value of the input
+   *
+   * @property value
+   * @type {Boolean}
+   * @default false
+   */
+   value: false
+
+  /**
+   * Text to display next to the checkbox
+   *
+   * @property text
+   * @type {String}
+   */
+
+  /**
+   * The form label to display
+   *
+   * @property label
+   * @type {String}
+   */
+});

app/pods/components/input/md-boolean/template.hbs

@@ -0,0 +1,12 @@
+<div class="form-group">
+  {{#if label}}
+    <label>{{label}}</label>
+  {{/if}}
+  <div class="checkbox md-boolean">
+    <label>
+      {{input type="checkbox" checked=value}}
+      <span class="md-boolean-text">{{ text }}</span>
+    </label>
+  </div>
+  {{yield}}
+</div>

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>

app/pods/components/input/md-input-codelist-single/component.js → app/pods/components/input/md-codelist/component.js

@@ -2,66 +2,72 @@ import Ember from 'ember';
 
 export default Ember.Component.extend({
   /**
-   * [service description]
-   * @param  {[type]} 'codelist' [description]
-   * @return {[type]}            [description]
+   * Injected codelist service
+   *
+   * @type  {Array}
    */
   mdCodes: Ember.inject.service('codelist'),
 
   /**
-   * [service description]
-   * @return {Object} [description]
+   * Injected icon service
+   *
+   * @type  {Array}
    */
   icons: Ember.inject.service('icon'),
 
   /**
-   * [create description]
+   * Whether to allow creation of options.
    * @type {Boolean}
    */
   create: false,
 
   /**
-   * [tooltip description]
+   * Indicates if tooltips should be rendered.
    * @type {Boolean}
    */
   tooltip: false,
 
   /**
-   * [icon description]
+   * Indicates if icons should be rendered.
    * @type {Boolean}
    */
   icon: false,
 
   /**
-   * [allowClear description]
+   * Whether to render clear button
    * @type {Boolean}
    */
   allowClear: false,
 
   /**
-   * [mdCodeName description]
+   * The codelist name
+   *
    * @type {String} mdCodeName
    */
 
   /**
-   * [placeholder description]
+   * The string to display when empty.
+   *
    * @type {String}
    */
   placeholder: "Select one option",
 
   /**
-   * [label description]
+   * Form label
+   *
    * @type {String} label
    */
 
   /**
-   * [width description]
+   * Select2 width
+   *
    * @type {String} width
    */
   width: "100%",
 
   /**
-   * [disabled description]
+   * Indicates if input is disabled
+   *
    * @type {Boolean} width
    */
   disabled: false,
@@ -116,8 +122,12 @@ export default Ember.Component.extend({
     return codelist;
   }),
 
-  // Format options for the select tag
-  // Add tooltips,icons if requested
+  /**
+   * Format options for the select tag
+   * Add tooltips,icons if requested
+   *
+   * @return {undefined}
+   */
   didInsertElement: function() {
     let tooltip = this.get('tooltip');
     let icon = this.get('icon');
@@ -153,20 +163,21 @@ export default Ember.Component.extend({
       return $option;
     }
 
-    this.$('.md-input-codelist-single')
+    this.$('.md-codelist')
       .select2({
         placeholder: this.get('placeholder'),
         allowClear: this.get('allowClear'),
         tags: this.get('create'),
         templateResult: formatOption,
         width: this.get('width'),
         minimumResultsForSearch: 10,
+        closeOnSelect: !!this.$('.md-codelist select').prop('multiple'),
         theme: 'bootstrap'
       });
   },
 
   didRender() {
-    this.$('.md-input-codelist-single')
+    this.$('.md-codelist')
       .trigger('change.select2');
   },
 

app/pods/components/input/md-input-codelist-single/template.hbs → app/pods/components/input/md-codelist/template.hbs

@@ -1,7 +1,7 @@
 {{#if label}}
     <div class="form-group">
         <label>{{label}}</label>
-        <select class="form-control md-input-codelist-single" {{action 'setValue' on='change'}}>
+        <select class="form-control md-codelist" {{action 'setValue' on='change'}}>
             <option></option>
             {{#each codelist as |code index|}}
                 <option value={{code.codeName}} selected={{code.selected}}
@@ -11,7 +11,7 @@
         </select>
     </div>
 {{else}}
-    <select class="form-control md-input-codelist-single" {{action 'setValue' on='change'}}>
+    <select class="form-control md-codelist" {{action 'setValue' on='change'}}>
         <option></option>
         {{#each codelist as |code index|}}
             <option value={{code.codeName}} selected={{code.selected}}

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

@@ -0,0 +1,17 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+/**
+ * An object listing the icon classes
+ * @type {Object}
+ */
+  calendarIcons: {
+    time: "fa fa-clock-o",
+    date: "fa fa-calendar",
+    up: "fa fa-chevron-up",
+    down: "fa fa-chevron-down",
+    previous: "fa fa-angle-double-left",
+    next: "fa fa-angle-double-right",
+    close: "fa fa-times"
+  }
+});

app/pods/components/input/md-datetime/template.hbs

@@ -0,0 +1,13 @@
+<div class="form-group">
+    {{#if label}}
+        <label>{{label}}</label>
+    {{/if}}
+    <div class="form-group">
+        {{bs-datetimepicker
+        date=date
+        format=format
+        dateIcon="fa fa-calendar"
+        icons=calendarIcons
+        updateDate=(action (mut date))}}
+    </div>
+</div>

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

@@ -0,0 +1,64 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  /**
+   * Type of input
+   *
+   * @property type
+   * @type {String}
+   * @default text
+   */
+  type: 'text',
+
+  /**
+   * Value of the input
+   *
+   * @property value
+   * @type {String}
+   */
+
+  /**
+   * The form label to display
+   *
+   * @property label
+   * @type {String}
+   */
+
+  /**
+   * The text to display when empty
+   *
+   * @property placeholder
+   * @type {String}
+   */
+
+  /**
+   * Whether the value is required
+   *
+   * @property required
+   * @type {Boolean}
+   * @default false
+   */
+  required: false,
+
+  /**
+   * Text to display next to the checkbox
+   *
+   * @property text
+   * @type {String}
+   */
+
+  /**
+   * Maximum number of characters allowed
+   *
+   * @property maxlength
+   * @type {Number}
+   */
+
+  /**
+   * Class to set on the input
+   *
+   * @property class
+   * @type {string}
+   */
+  class: 'form-control'
+});

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

@@ -0,0 +1,13 @@
+<div class="form-group">
+    {{#if label}}
+        <label>{{label}}</label>
+    {{/if}}
+    {{input
+    value=value
+    placeholder=placeholder
+    required=required
+    type=type
+    maxlength=maxlength
+    class=class}}
+    {{yield}}
+</div>