addon/components/ui-input-tags.js

  1. import Ember from 'ember';
  2. import layout from '../templates/components/ui-input-tags';
  3. import Component from '@ember/component';
  4. import { guidFor } from '@ember/object/internals'
  5. import { A } from '@ember/array';
  6. import { computed } from '@ember/object';
  7. import { isArray } from '@ember/array';
  8. import $ from 'jquery';
  9.  
  10. /**
  11. ui-input-tags component
  12.  
  13. @module components
  14. @namespace components
  15. @class UiInputTags
  16. @constructor
  17. */
  18. export default Component.extend({
  19.     layout: layout,
  20.     tagName: 'div',
  21.  
  22.     /**
  23.      * Class name to apply to the button
  24.      *
  25.      * @property {String} theme
  26.     */
  27.     theme: 'fluid',
  28.     /**
  29.      * Class name to apply to the button
  30.      *
  31.      * @property {String} class
  32.     */
  33.     class: '',
  34.     classNameBindings: ['_uiClass', 'class', 'theme', '_componentClass'],
  35.     _uiClass: 'ui',
  36.     _componentClass: 'multiple search selection dropdown',
  37.  
  38.     renderDropDown: function() {
  39.         let that = this;
  40.         this.$().dropdown({
  41.             allowAdditions: true,
  42.             onAdd: function(addedValue) {
  43.                 that._addValue(addedValue);
  44.             },
  45.             onRemove: function(removedValue) {
  46.                 that._removeValue(removedValue);
  47.             },
  48.             onLabelCreate: function(label){
  49.                 that.$('input.search').val('');
  50.                 that.$('.addition.item b').html('');
  51.                 return $(label);
  52.             }
  53.         });
  54.     },
  55.     didInsertElement() {
  56.         this.renderDropDown();
  57.     },
  58.     _addValue(value){
  59.         try{
  60.             this.get('value').addObject(value);
  61.         }catch(e){
  62.             let id = guidFor(this);
  63.             Ember.Logger.warn(`component:ui-input-tags ${id} value is not Ember.A type`);
  64.             Ember.Logger.error(e);
  65.         }
  66.         if(typeof this.attrs.update === 'function'){
  67.             this.attrs.update(this.get('value'));
  68.         }
  69.     },
  70.     _removeValue(value){
  71.         this.get('value').removeObject(value);
  72.         if(typeof this.attrs.update === 'function'){
  73.             this.attrs.update(this.get('value'));
  74.         }
  75.     },
  76.     init(){
  77.         //if value do not be passed to component
  78.         this._super(...arguments);
  79.         if(this.value === undefined){
  80.             this.set('value', A());
  81.         }
  82.  
  83.         for (var i = this.value.length - 1; i >= 0; i--) {
  84.             this.value.set(String(i), String(this.value[i]));
  85.         }
  86.     },
  87.     hiddenValue: computed('value', {
  88.         get(){
  89.             if(isArray(this.value)){
  90.                 return this.value.join(',');
  91.             }else{
  92.                 return '';
  93.             }
  94.         }
  95.     })
  96. });