addon/components/ui-multi-select.js
import UiSelectBase from '../mixins/ui-select-base';
import layout from '../templates/components/ui-multi-select';
import Component from '@ember/component';
import { observer } from '@ember/object';
import { set } from '@ember/object';
import $ from 'jquery';
/**
ui-multi-select component see {{#crossLink "mixins.UiSelectBase"}}{{/crossLink}}
@module components
@namespace components
@class UiMultiSelect
@constructor
*/
export default Component.extend(UiSelectBase, {
layout: layout,
/**
* defaultValue for the component
*
* @property {Array} defaultValue
*/
defaultValue: null,
_multiple: true,
_valueChange: observer('value.[]', function(){
if (this.value.join(',') !== this._value) {
this.setupSelected();
this.set('_value', this.value.join(','));
}
}),
renderDropDown() {
let that = this;
this.$().dropdown({
onAdd: function(addedValue) {
for (var i = 0; i < that._options.length; i++) {
let item = that._options[i];
if (item['value'] === addedValue) {
that._selectedOptions.pushObject(item);
break;
}
}
that.value.pushObject(addedValue);
},
onRemove: function(removedValue) {
for (var i = 0; i < that._selectedOptions.length; i++) {
let item = that._selectedOptions[i];
if (item['value'] === removedValue) {
that._selectedOptions.removeObject(item);
break;
}
}
that.value.removeObject(removedValue);
},
onLabelCreate: function(label) {
that.$('input.search').val('');
return $(label);
}
});
},
setupSelected: function() {
this._selectedOptions.clear();
for (var i = 0; i < this._options.length; i++) {
let item = this._options[i];
let checked = this.isOptionChecked(item['value']);
set(item, 'selected', checked);
if(checked){
this._selectedOptions.pushObject(item);
}
}
},
isOptionChecked(optionValue) {
if (this.value) {
return this.value.includes(optionValue);
}
return false;
},
init() {
this._super(...arguments);
}
});