power-select

components.site-power-select.js

import Ember from 'ember';

const {get, set, Component} = Ember;

export default Component.extend({
  tagName: "",
  classNames: "",

  actions: {
    customAction(items) {
      const dashboard = get(this, 'dashboard');
      
      let objects = get(dashboard, 'powerSelects');

      if (objects === null) {
        objects = {};
      }
      items.forEach(function (item) {
        const parent = item.get('object.title');
        const child = item.get('title');

        objects[parent].push({title: child});
      });

      dashboard.set('powerSelects', objects);
      dashboard.save();
    }
  }

});

models.dashboard.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
  
  // Empty array
  powerSelects: attr(),
  
});

models.power-select-option.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
  title: attr('string'),
  powerSelect: belongsTo('power-select'),
});

models.power-select.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
  title: attr('string'),
  options: hasMany('power-select-option'),
});

routes.admin.js

import Ember from 'ember';

export default Ember.Route.extend({
  
  model() {
    return RSVP.hash({
      powerSelects: get(this, 'store').findAll('power-select'),
    });
  },

  setupController(controller, models) {
    this._super(...arguments);
    controller.setProperties(models);
  },

  actions: {
    addPowerSelect() {
      const powerSelect = get(this, 'store').createRecord('power-select');

      powerSelect.save();
    },

    addOption(powerSelect) {
      const option = this.get('store').createRecord('power-select-option', {
        powerSelect: powerSelect
      });

      option.save().then(() => {
        powerSelect.save();
      });
    },
  },
  
});

templates.application.hbs

{{site-power-select}}

templates.components.site-power-select.hbs

<div class="column is-12 object-item">
  <div class="card">
    <header class="card-header">
      <p class="card-header-title">
        {{powerSelect.title}}
      </p>
    </header>
    <div class="card-content">
      {{#power-select-multiple
        placeholder=""
        options=powerSelect.options
        searchEnabled=false
        selected=?
        onchange=(action 'customAction') as |option|}}
        {{option.title}}
      {{/power-select-multiple}}
    </div>
  </div>
</div>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-power-select": "1.9.10"
  }
}