power select with create

controllers.application.js

import { later } from '@ember/runloop';
import { Promise } from 'rsvp';
import Controller from '@ember/controller';

const countries = [
  { name: 'United States',  code: 'US', population: 321853000 },
  { name: 'Spain',          code: 'ES', population: 46439864 },
  { name: 'Portugal',       code: 'PT', population: 10374822 },
  { name: 'Russia',         code: 'RU', population: 146588880 },
  { name: 'Latvia',         code: 'LV', population: 1978300 },
  { name: 'Brazil',         code: 'BR', population: 204921000 },
  { name: 'United Kingdom', code: 'GB', population: 64596752 },
];

export default Controller.extend({
  countries,
  slowPromise: null,

  init() {
    this._super(...arguments);
    this.set('slowPromise', this.createSlowPromise());
    this.set('selectedCountries', []);
  },

  // Actions
  actions: {
    createCountry(countryName) {
      let newCountry = { name: countryName, code: 'XX', population: 'unknown' };
      this.get('countries').pushObject(newCountry);
      this.set('selectedCountry', newCountry);
      this.get('selectedCountries').push(newCountry);
    },
    searchCountries(term) {
      return new Promise((resolve, reject) => {
        this.createSlowPromise(2000).then((countries) => {
          resolve(countries.filter((country) => {
            return country.name.toLowerCase().match(term.toLowerCase());
          }));
        }, reject);
      });
    },
    hideCreateOptionOnSameName(term) {
      let existingOption = this.get('countries').findBy('name', term);
      return !existingOption;
    },
  },

  // Methods
  capitalizeSuggestion(term) {
    return `Hey! Perhaps you want to create ${term.toUpperCase()}??`;
  },

  createSlowPromise(time = 5000) {
    return new Promise(function(resolve) {
      later(() => resolve(countries), time);
    });
  },
});

models.country.js

import DS from 'ember-data';

const { attr, Model } = DS;

export default Model.extend({
  name: attr('string'),
  code: attr('string'),
  population: attr('number')
});

templates.application.hbs

<h2 id="title">Welcome to Ember</h2>
<div id="ember-basic-dropdown-wormhole"></div>
<h3>Default behaviour</h3>
{{#power-select-with-create
    options=countries
    searchField="name"
    selected=selectedCountry
    allowClear=true
    onchange=(action (mut selectedCountry))
    oncreate=(action "createCountry") as |country term|
}}
  {{country.name}}
{{/power-select-with-create}}

<br>
<br>
<br>
<h3>Multiple selections via <code>power-select-multiple-with-create</code></h3>
{{#power-select-multiple-with-create
    options=countries
    searchField="name"
    selected=selectedCountries
    onchange=(action (mut selectedCountries))
    oncreate=(action "createCountry") as |country term|
}}
  {{country.name}}
{{/power-select-multiple-with-create}}

<br>
<br>
<br>
<h3>With custom Add message</h3>
{{#power-select-with-create
    options=countries
    searchField="name"
    selected=selectedCountry
    allowClear=true
    onchange=(action (mut selectedCountry))
    oncreate=(action "createCountry")
    buildSuggestion=capitalizeSuggestion as |country term|
}}
  {{country.name}}
{{/power-select-with-create}}
<br>
<br>
<br>
<h3>With options being a slow promise</h3>
{{#power-select-with-create
    options=slowPromise
    searchField="name"
    selected=selectedCountry
    allowClear=true
    onchange=(action (mut selectedCountry))
    oncreate=(action "createCountry") as |country term|
}}
  {{country.name}}
{{/power-select-with-create}}
<br>
<br>
<br>
<h3>With async search</h3>
{{#power-select-with-create
    search=(action "searchCountries")
    selected=selectedCountry
    allowClear=true
    onchange=(action (mut selectedCountry))
    oncreate=(action "createCountry") as |country term|
}}
  {{country.name}}
{{/power-select-with-create}}
<br>
<br>
<br>
<h3>With callback to hide/show create option</h3>
{{#power-select-with-create
    options=countries
    searchField="name"
    selected=selectedCountry
    allowClear=true
    onchange=(action (mut selectedCountry))
    oncreate=(action "createCountry")
    showCreateWhen=(action "hideCreateOptionOnSameName") as |country|
}}
  {{country.name}}
{{/power-select-with-create}}

twiddle.json

{
  "version": "0.15.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.2.2",
    "ember-template-compiler": "3.2.2",
    "ember-testing": "3.2.2"
  },
  "addons": {
    "ember-data": "3.2.0",
		"ember-power-select-with-create": "0.6.0"
  }
}