addon/components/ui-input-tags.js

import Ember from 'ember';
import layout from '../templates/components/ui-input-tags';
import Component from '@ember/component';
import { guidFor } from '@ember/object/internals'
import { A } from '@ember/array';
import { computed } from '@ember/object';
import { isArray } from '@ember/array';
import $ from 'jquery';

/**
ui-input-tags component

@module components
@namespace components
@class UiInputTags
@constructor
*/
export default Component.extend({
    layout: layout,
    tagName: 'div',

    /**
     * Class name to apply to the button
     *
     * @property {String} theme
    */
    theme: 'fluid',
    /**
     * Class name to apply to the button
     *
     * @property {String} class
    */
    class: '',
    classNameBindings: ['_uiClass', 'class', 'theme', '_componentClass'],
    _uiClass: 'ui',
    _componentClass: 'multiple search selection dropdown',

    renderDropDown: function() {
        let that = this;
        this.$().dropdown({
            allowAdditions: true,
            onAdd: function(addedValue) {
                that._addValue(addedValue);
            },
            onRemove: function(removedValue) {
                that._removeValue(removedValue);
            },
            onLabelCreate: function(label){
                that.$('input.search').val('');
                that.$('.addition.item b').html('');
                return $(label);
            }
        });
    },
    didInsertElement() {
        this.renderDropDown();
    },
    _addValue(value){
        try{
            this.get('value').addObject(value);
        }catch(e){
            let id = guidFor(this);
            Ember.Logger.warn(`component:ui-input-tags ${id} value is not Ember.A type`);
            Ember.Logger.error(e);
        }
        if(typeof this.attrs.update === 'function'){
            this.attrs.update(this.get('value'));
        }
    },
    _removeValue(value){
        this.get('value').removeObject(value);
        if(typeof this.attrs.update === 'function'){
            this.attrs.update(this.get('value'));
        }
    },
    init(){
        //if value do not be passed to component
        this._super(...arguments);
        if(this.value === undefined){
            this.set('value', A());
        }

        for (var i = this.value.length - 1; i >= 0; i--) {
            this.value.set(String(i), String(this.value[i]));
        }
    },
    hiddenValue: computed('value', {
        get(){
            if(isArray(this.value)){
                return this.value.join(',');
            }else{
                return '';
            }
        }
    })
});