Ember component input-multiselect2

component.js

/* global $ */

/**
* - Nome: input-multiselect2
* - Descrição: Componente permite selecionar vários item a partir de um select
* - Parâmetros:
*   - content: Array onde será adicionado os itens selecionados
*   - endpoint: Onde será buscado os itens para popular o select
*   - endpointSelecteds: Onde será buscado os itens já adicionados no content
*   - modelName: Nome do model do ember store
*   - showProperties: Propriedades que será usado para exibir os itens no select
* - Exemplo de uso:
*   {{input-multiselect2
*     content=model.usersAdmin
*     endpoint="/users/ajax"
*     endpointSelecteds=(concatenate "/decisionMakings/" model.id "/usersAdmin")
*     modelName="user"
*     showProperties="firstName| |lastName"
*     text-label="Usuários Administradores"}}
**/

import Ember from 'ember';
import environment from 'portal-talentrh/config/environment';
import _ from 'lodash';

export default Ember.Component.extend({
  session: Ember.inject.service(),
  store: Ember.inject.service(),
  ajax: Ember.inject.service(),

  didInsertElement() {
    var that = this;
    var $select = this.buildSelect();
    $select.on("select2:select", function(e) {
      that.addUser(e.params.data.id);
    });

    $select.on("select2:unselect", function(e) {
      that.removeUser(e.params.data.id);
    });
    this.loadItemsSelected();
  },

  loadItemsSelected: function() {
    var typeUser = this.get('content');
    var selectedLink = this.get('endpointSelecteds');

    this.get('ajax').request(selectedLink)
    .then((usersSelected)=> {
      var selecteds = usersSelected[this.get('modelName')];
      if (!selecteds) return;

      selecteds = _.map(selecteds, (item)=> {
        return { id: item.id, text: this.buildTextShow(item) };
      });

      this.set('selecteds', Ember.A(selecteds));
      this.buildSelect();
    });
  },

  buildSelect: function() {
    return $('#' + this.get('elementId') + ' select')
    .select2({
      ajax: {
        headers: {
          "Authorization": "Bearer " + this.get('session.session.content.authenticated.token'),
          "Content-Type": "application/json",
        },
        delay: 300,
        url: environment.apiBaseUrl + this.get('endpoint'),
        processResults: (data)=> {
          var content = this.get('content');
          _.remove(data, function(item) {
            var found = content.find(function(findItem) {
              return item.id == findItem.id;
            });
            return found ? true:false;
          });

          return {
            results: $.map(data, (obj)=> {
              obj.text = this.buildTextShow(obj);
              return obj;
            })
          };
        }
    }});
  },

  addUser(id) {
    this.get('store')
    .findRecord(this.get('modelName'), id)
    .then((found)=> {
      var content = this.get('content');
      content.pushObject(found);
    });
  },

  removeUser(id) {
    var content = this.get('content');

    var found = content.findBy('id', id);
    content.removeObject(found);
  },

  buildTextShow(obj) {
    var showProperties = this.get('showProperties');
    var splited = showProperties.split('|');
    var textShow = '';

    if (!obj || !showProperties) return;
    splited.forEach((item)=> {
      textShow += obj[item] || item;
    });

    return textShow;
  }
});

template.hbs

<div class="row">
  <div class="col-lg-12">
    <h5>{{text-label}}</h5>
  </div>

  <div class="col-lg-12">
    <form class="form">
      <select class="form-control select2-list" multiple>
				{{#each selecteds as |selected|}}
          <option value= {{selected.id}} selected> {{selected.text}} </option>
				{{/each}}
			</select>
    </form>
  </div>
</div>