
import Ember from "ember";

export default Ember.Component.extend({

  tagName: 'div',
  classNames: ['ui', 'selection', 'dropdown', 'fluid'],
  classNameBindings: ['multiple', 'search'],

  content: null,
  value: null,
  optionValuePath: null,
  optionLabelPath: null,
  allowAdditions: null,

  bindAttributes: ['optionValuePath', 'optionLabelPath', 'value', 'content', 'allowAdditions', 'action'],

  actions: {},

  options: function () {
    var optionLabelPath = this.get('optionLabelPath');
    var optionValuePath = this.get('optionValuePath');
    var selectContent = this.get('content');

    return selectContent ? selectContent.map(function (item, index, list) {
      return {
        value: optionValuePath ? item.get(optionValuePath) : item,
        label: optionLabelPath ? item.get(optionLabelPath) : item
      };
    }, this) : [];

  }.property('content.[]'),

  setup: function () {
    this.$().dropdown({
      allowAdditions: this.allowAdditions,
      onChange: Ember.run.bind(this, this.onChange)
    }).dropdown('set selected', this.value);

  }.on('didInsertElement'),

  // onValueChange: function () {
  //   if (typeof this.value === 'undefined') {
  //     return;
  //   }

  //   this.$().dropdown('set selected', Ember.A(this.value.map(function (item, index, list) {
  //     return item.replace(',', '');
  //   })));

  // }.observes('value'),

  onChange: function (value, text, $choice) {

    // NOTE: This will have to be improved, can not assume ignoring value === undefined is okay
    // if ((this.value && this.value.toString() === value) || (this.value === undefined)) {
    //   return;
    // }

    if (this.get('attrs.action')) {

      if (!this.get('attrs.value')) {
        this.$().dropdown('clear');
      }

      this.sendAction('action', value);

    } else {
      if (this.optionValuePath) {
        value = this.get('content').findBy(this.optionValuePath, value);
      }

      if (this.get('multiple')) {
       value = value ? Ember.A(value.split(',')) : undefined;
      }

      this.set('value', value);
    }

  }

});


import Ember from "ember";

export default Ember.Component.extend({

  tagName: 'div',
  classNames: ['ui', 'dropdown'],
  classNameBindings: ['multiple', 'search', 'inline', 'selection', 'fluid'],

  selection: true,
  fluid: true,

  content: null,
  value: null,
  optionValuePath: null,
  optionLabelPath: null,
  allowAdditions: null,

  bindAttributes: ['optionValuePath', 'optionLabelPath', 'value', 'content', 'allowAdditions', 'action'],

  actions: {},

  options: function () {
    var optionLabelPath = this.get('optionLabelPath');
    var optionValuePath = this.get('optionValuePath');
    var selectContent = this.get('content');

    return selectContent ? selectContent.map(function (item, index, list) {
      return {
        value: optionValuePath ? item.get(optionValuePath) : item,
        label: optionLabelPath ? item.get(optionLabelPath) : item
      };
    }, this) : [];

  }.property('content.[]'),

  setup: function () {
    if (this.get('inline')) {
      this.set('selection', false);
      this.set('fluid', false);
    }

    this.$().dropdown({
      allowAdditions: this.allowAdditions,
      onChange: Ember.run.bind(this, this.onChange)
    }).dropdown('set selected', this.value);

  }.on('didInsertElement'),

  // onValueChange: function () {
  //   if (typeof this.value === 'undefined') {
  //     return;
  //   }

  //   this.$().dropdown('set selected', Ember.A(this.value.map(function (item, index, list) {
  //     return item.replace(',', '');
  //   })));

  // }.observes('value'),

  onChange: function (value, text, $choice) {

    // NOTE: This will have to be improved, can not assume ignoring value === undefined is okay
    // if ((this.value && this.value.toString() === value) || (this.value === undefined)) {
    //   return;
    // }

    if (this.get('attrs.action')) {

      if (!this.get('attrs.value')) {
        this.$().dropdown('clear');
      }

      this.sendAction('action', value);

    } else {
      if (this.optionValuePath) {
        value = this.get('content').findBy(this.optionValuePath, value);
      }

      if (this.get('multiple')) {
       value = value ? Ember.A(value.split(',')) : undefined;
      }

      this.set('value', value);
    }

  }

});

Add support for inline dropdowns to ui-dropdown