Componente Majestoso

component.js

import Ember from 'ember';
import _ from 'lodash';

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

  didInsertElement() {
    let that = this,
      modelName = this.get('modelName');

    this.set('options', Ember.A());

    this.get('ajax').request(this.endpoint).then(itens => {
      itens.forEach(item => {
        let obj = { id: item.id, text: this.buildTextShow(item) };
        this.get('options').pushObject(obj);
      });

      Ember.run.scheduleOnce('afterRender', this, function () {
        this.$('select').multiSelect({
          cssClass: 'form-control multiselect-talent',
          selectableHeader: `<input type="text" class="search-input" autocomplete="off" placeholder="Filtrar...">
                            <a id="selectAll" class="select-btn">Selecionar Todos
                            <i class="fa fa-angle-double-right" aria-hidden="true"></i></a>`,
          selectionHeader: `<input type="text" class="search-input" autocomplete="off" placeholder="Filtrar...">
                            <a id="removeAll" class="select-btn">
                            <i class="fa fa-angle-double-left" aria-hidden="true"></i> Remover Todos</a>`,
          afterInit: function () {
            that.searchTermSelectable(this);
            that.searchTermSelection(this);
          },
          afterSelect: val => {
            if (val.length > 1) {
              this.set('inputValue', 'carregando...');
            }

            that.get('store')
            .query(modelName, { ids: val })
            .then((found)=> {
              this.get('selected').pushObjects(found.toArray());
              this.set('inputValue', this.get('selected').mapBy('id').join(', '));
            })
            .catch(()=> {
              this.set('inputValue', '');
            });
          },
          afterDeselect: val => {
            let foundDeselects = this.get('selected').filter((obj)=> {
              return _.includes(val, obj.id.toString());
            });

            this.get('selected').removeObjects(foundDeselects);
            this.set('inputValue', this.get('selected').mapBy('id').join(', '));
          }
        });
      });
    });
  },

  searchTermSelectable(that) {
    let $selectableSearch = that.$selectableUl.prev().prev();

    that.qs1 = $selectableSearch.on('keyup', e => {
      if (e.which === 40) {
        that.$selectableUl.focus();
        return false;
      }

      let term = e.currentTarget.value.toUpperCase();
      let $options = this.$(`#${that.$container.attr('id')} .ms-elem-selectable:not(.ms-selected)`);
      this.searchAndHide($options, term);
    });
  },

  searchTermSelection(that) {
    let $selectionSearch = that.$selectionUl.prev().prev();

    that.qs2 = $selectionSearch.on('keyup', e => {
      if (e.which === 40) {
        that.$selectionUl.focus();
        return false;
      }

      let term = e.currentTarget.value.toUpperCase();
      let $options = this.$(`#${that.$container.attr('id')} .ms-elem-selection.ms-selected`);
      this.searchAndHide($options, term);
    });
  },

  searchAndHide($options, term) {
    if (!term) {
      $options.show();
      return;
    }

    $options.hide();
    $options.each((k, e) => {
      let eleText = this.$(e).text().toUpperCase();

      if (eleText.includes(term)) this.$(e).show();
    });
  },

  managePanelSide($ele) {
    if ($('body').prop('scrollWidth') > window.innerWidth) $ele.addClass('to-right');
  },

  click(e) {
    if (e.target === this.$('#selectAll')[0] || e.target === this.$('#selectAll i')[0]) {
      this.$('select').multiSelect('select_all');
    } else if (e.target === this.$('#removeAll')[0] || e.target === this.$('#removeAll i')[0]) {
      this.$('select').multiSelect('deselect_all');
    }
  },

  keyDown(e) {
    if (e.keyCode === 40 && this.$('.multiselect-talent').is(":visible")) {
      return;
    } else if (e.target === this.$('.text-input')[0] && e.keyCode === 13) {
      e.preventDefault();
      let $multiSelectEle = this.$('.multiselect-talent');
      $multiSelectEle.show();
      this.managePanelSide($multiSelectEle);
    } else if (e.target === this.$('.text-input')[0]) {
      this.$('select').focus();
    } else if (e.keyCode === 9 && e.target !== this.$('select')[0]) {
      e.preventDefault();
    }
  },

  keyUp(e) {
    if (e.keyCode === 27) this.$('.multiselect-talent').hide();
  },

  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;
  },

  actions: {
    showMultipleSelect() {
      let $multiSelectEle = this.$('.multiselect-talent');

      $multiSelectEle.toggle();
      this.managePanelSide($multiSelectEle);
    },
    clickOutside() {
      this.$('.multiselect-talent').hide();
    }
  }
});

template.hbs

{{#click-outside action=(action "clickOutside")}}
  <div class="multiselect-talent-block">
    <div class="form-group">
      <div class="up-input" {{action "showMultipleSelect"}}></div>
      {{input-floating-label type="text" class="form-control text-input" value=inputValue}}
      <label>{{placeholder}}</label>
    </div>
    <select class="form-control" multiple="multiple">
      {{#each options as |item|}}
      <option class="{{item.hideClass}}" value={{item.id}}>{{item.text}}</option>
      {{/each}}
    </select>
  </div>
{{/click-outside}}