merge

components.merge-ui.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.search-ui.js

import Ember from 'ember';

export default Ember.Component.extend({
  offset: 0,
  search: '',
  results: Ember.computed('titles', 'search', 'offset', function() {
    let search = this.search.toLowerCase();
    return this.titles.filter(t => t.name.toLowerCase().includes(search)).slice(this.offset, this.offset + 25);
  }),
  hasPrev: Ember.computed.gt('offset', 0),
  hasNext: Ember.computed('offset', 'titles', function() {
    return this.offset < this.titles.length;
  }),
  
  actions: {
    updateSearch(search) {
      this.setProperties({ search, offset: 0 });
    },
    
    nextPage() {
      this.incrementProperty('offset', 25);
    },
    
    prevPage() {
    	this.decrementProperty('offset', 25);
    }
  }
});

controllers.application.js

import Ember from 'ember';

const titles = [
"Stand By Me",
"Raging Bull",
"Amélie",
"Titanic",
"Good Will Hunting",
"Arrival",
"Lost In Translation",
"The Princess Bride",
"The Terminator",
"The Prestige",
"No Country For Old Men",
"Shaun Of The Dead",
"The Exorcist",
"Predator",
"Indiana Jones And The Last Crusade",
"Léon",
"Rocky",
"True Romance",
"Some Like It Hot",
"The Social Network",
"Spirited Away",
"Captain America: Civil War",
"Oldboy",
"Toy Story",
"A Clockwork Orange",
"Fargo",
"Mulholland Dr.",
"Seven Samurai",
"Rear Window",
"Hot Fuzz",
"The Lion King",
"Singin’ In The Rain",
"Ghostbusters",
"Memento",
"Star Wars: Return Of The Jedi",
"Avengers Assemble",
"L.A. Confidential",
"Donnie Darko",
"La La Land",
"Forrest Gump",
"American Beauty",
"E.T. — The Extra-Terrestrial",
"Inglourious Basterds",
"Whiplash",
"Reservoir Dogs",
"Pan's Labyrinth",
"Vertigo",
"Psycho",
"Once Upon A Time In The West",
"It’s a Wonderful Life",
"Lawrence Of Arabia",
"Trainspotting",
"The Silence Of The Lambs",
"Interstellar",
"Citizen Kane",
"Drive",
"Gladiator",
"One Flew Over The Cuckoo’s Nest",
"There Will Be Blood",
"Eternal Sunshine Of The Spotless Mind",
"12 Angry Men",
"Saving Private Ryan",
"Mad Max: Fury Road",
"John Carpenter’s The Thing",
"The Departed",
"The Shining",
"Guardians Of The Galaxy",
"Schindler’s List",
"The Usual Suspects",
"Taxi Driver",
"Seven",
"The Big Lebowski",
"Casablanca",
"The Good, The Bad And The Ugly",
"Heat",
"Terminator 2: Judgment Day",
"The Matrix",
"The Lord Of The Rings: The Two Towers",
"Apocalypse Now",
"2001: A Space Odyssey",
"Die Hard",
"Jurassic Park",
"Inception",
"Fight Club",
"The Lord Of The Rings: The Return Of The King",
"Aliens",
"Alien",
"Blade Runner",
"The Godfather Part II",
"Back To The Future",
"The Lord Of The Rings: The Fellowship Of The Ring",
"Star Wars: Episode IV — A New Hope",
"Jaws",
"Raiders Of The Lost Ark",
"GoodFellas",
"Pulp Fiction",
"The Shawshank Redemption",
"The Dark Knight",
"Star Wars: Episode V — The Empire Strikes Back",
"The Godfather"
];


export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  titles: Ember.computed(function() {
    let i = 0;
    return titles
      .map(t => Array(Math.floor(Math.random() * 10) + 1).fill().map(() => ({ name: t, id: ++i })))
      .flat();
  }),
  
  init() {
    this._super(...arguments);
    this.selections = [];
  },
  
  actions: {
    addSelection(title){
      this.selections.addObject(title);
    },
    
    removeSelection(title) {
      this.selections.removeObject(title);
      if (this.target === title) {
        this.set('target', null);
      }
    },
    
    setTarget(title) {
      this.set('target', title);
    }
  }
});

templates.application.hbs

<div style="display: flex; width: 100%">
	<div style="flex: 1;">
  	{{search-ui titles=titles selections=selections addSelection=(action "addSelection") removeSelection=(action "removeSelection")}}
  </div>
	<div style="flex: 1">
  	{{merge-ui selections=selections removeSelection=(action "removeSelection") target=target setTarget=(action "setTarget")}}
  </div>
</div>

templates.components.merge-ui.hbs

{{#if selections}}
	<table>
  	<tr>
  		<th></th>
    	<th>Name</th>
    	<th>Id</th>
      <th></th>
   	</tr>
		{{#each selections as |selection|}}
  		<tr style={{if (eq target selection) "background-color: lime"}}>
    		<td><input type="radio" name="target" checked={{eq target selection}} onclick={{action setTarget selection}}></td>
    		<td>{{selection.name}}</td>
    	  <td>{{selection.id}}</td>
        <td><button {{action removeSelection selection}}>-</button></td>
   	 </tr>
    {{/each}}
  </table>
  <button disabled={{not target}}>Merge</button>
{{else}}
   Add titles on the left to merge.
{{/if}}

templates.components.search-ui.hbs

<label>
	Search
  <input value={{search}} oninput={{action "updateSearch" value="target.value"}}>
</label>

<table>
	<tr>
  	<th></th>
    <th>Name</th>
    <th>Id</th>
   </tr>
	{{#each results as |result|}}
  	<tr style={{if (contains result selections) "background-color: lime"}}>
    	<td>
        {{#if (contains result selections)}}
          <button {{action removeSelection result}}>-</button>
        {{else}}
      		<button {{action addSelection result}}>+</button>
        {{/if}}
      </td>
    	<td>{{result.name}}</td>
      <td>{{result.id}}</td>
    </tr>
  {{/each}}
</table>

<button disabled={{not hasPrev}} {{action "prevPage"}}>‹</button>
<button disabled={{not hasNext}} {{action "nextPage"}}>›</button>

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-truth-helpers": "2.1.0",
    "ember-composable-helpers": "2.1.0"
  }
}