addon/components/ui-multi-select.js

  1. import UiSelectBase from '../mixins/ui-select-base';
  2. import layout from '../templates/components/ui-multi-select';
  3. import Component from '@ember/component';
  4. import { observer } from '@ember/object';
  5. import { set } from '@ember/object';
  6. import $ from 'jquery';
  7.  
  8.  
  9. /**
  10.  
  11. ui-multi-select component see {{#crossLink "mixins.UiSelectBase"}}{{/crossLink}}
  12.  
  13. @module components
  14. @namespace components
  15. @class UiMultiSelect
  16. @constructor
  17. */
  18. export default Component.extend(UiSelectBase, {
  19.     layout: layout,
  20.     /**
  21.      * defaultValue  for the component
  22.      *
  23.      * @property {Array} defaultValue
  24.      */
  25.     defaultValue: null,
  26.     _multiple: true,
  27.     _valueChange: observer('value.[]', function(){
  28.         if (this.value.join(',') !== this._value) {
  29.             this.setupSelected();
  30.             this.set('_value', this.value.join(','));
  31.         }
  32.     }),
  33.     renderDropDown() {
  34.         let that = this;
  35.         this.$().dropdown({
  36.             onAdd: function(addedValue) {
  37.                 for (var i = 0; i < that._options.length; i++) {
  38.                     let item = that._options[i];
  39.                     if (item['value'] === addedValue) {
  40.                         that._selectedOptions.pushObject(item);
  41.                         break;
  42.                     }
  43.                 }
  44.                 that.value.pushObject(addedValue);
  45.             },
  46.             onRemove: function(removedValue) {
  47.                 for (var i = 0; i < that._selectedOptions.length; i++) {
  48.                     let item = that._selectedOptions[i];
  49.                     if (item['value'] === removedValue) {
  50.                         that._selectedOptions.removeObject(item);
  51.                         break;
  52.                     }
  53.                 }
  54.                 that.value.removeObject(removedValue);
  55.             },
  56.             onLabelCreate: function(label) {
  57.                 that.$('input.search').val('');
  58.                 return $(label);
  59.             }
  60.         });
  61.     },
  62.     setupSelected: function() {
  63.         this._selectedOptions.clear();
  64.         for (var i = 0; i < this._options.length; i++) {
  65.             let item = this._options[i];
  66.             let checked = this.isOptionChecked(item['value']);
  67.             set(item, 'selected', checked);
  68.             if(checked){
  69.                 this._selectedOptions.pushObject(item);
  70.             }
  71.         }
  72.     },
  73.     isOptionChecked(optionValue) {
  74.         if (this.value) {
  75.             return this.value.includes(optionValue);
  76.         }
  77.         return false;
  78.     },
  79.     init() {
  80.         this._super(...arguments);
  81.     }
  82. });