List Manager Experiments

components.list-manager.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    setItemAt(index, item) {
      console.log("set", index, item);
      this.get('list').replace(index, 1, [item]);
      console.log('after', this.get('list'));
    },
    
    addItem(item) {
      this.get('list').pushObject(item);
    },
    
    addEmptyItem() {
      let emptyItem = {};
      if (this.get('createEmptyItem')) {
        emptyItem = this.get('createEmptyItem')();
      }
      console.log("addEmpty");
      this.get('list').pushObject(emptyItem)
    }

  },
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

controllers.index.js

import Ember from 'ember';

export default Ember.Controller.extend({
  list1: [true, false, false, true],
  list2: ['yes', 'no', 'no', 'yes'],
  list3: ['paul', 'lukas', 'matthias'],
  options: ['yes', 'no'],
  names: ['lukas', 'felix', 'philipp', 'natascha', 'paul', 'emu', 'matthias'],
  
  getEmptyString() {
    return '';
  },
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>

templates.components.list-manager.hbs

{{yield (hash
           list=list
           setItemAt=(action "setItemAt")
           addItem=(action "addItem")
           addEmptyItem=(action "addEmptyItem"))}}

templates.index.hbs

<h2>With automatic add field</h2>

{{#list-manager list=list2 as |lm1|}}
  <ul>
    {{#each lm1.list as |item index|}}
      <li>
        {{#power-select options=options onchange=(action lm1.setItemAt index) selected=item as |name|}}
          {{name}}
        {{/power-select}}
      </li>
    {{/each}}
    <li>
          {{#power-select options=options onchange=(action lm1.addItem) placeholder="add new item to list" as |name|}}
          {{name}}
        {{/power-select}}
    </li>
    
  </ul>
{{/list-manager}}

<ul>
  {{#each list2 as |item|}}
    <li>{{item}}</li>
  {{/each}}
</ul>

<h3>Add button</h3>

{{#list-manager list=list3 createEmptyItem=getEmptyString as |lm1|}}
  <ul>
    {{#each lm1.list as |item index|}}
      <li>
        {{#power-select options=names onchange=(action lm1.setItemAt index) selected=item as |name|}}
          {{name}}
        {{/power-select}}
      </li>
    {{/each}}
    <li><button {{action lm1.addEmptyItem}}>Add</button></li>
  </ul>
{{/list-manager}}

<ul>
  {{#each list3 as |item|}}
    <li>{{item}}</li>
  {{/each}}
  
</ul>

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.5"
  }
}