tag-colors

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  tagsSorting: ['id'],
  tags: [
    {id: 1, color: 'cp-colour-1'},
    {id: 11, color: 'cp-colour-1'},
    {id: 6, color: 'cp-colour-6'},
    {id: 3, color: 'cp-colour-3'},
    {id: 4, color: 'cp-colour-4'}
    ],
  sortedTags: Ember.computed.sort('tags', 'tagsSorting'),
  tagColorsAvailable: Ember.computed.union('tagColorsAlwaysAvailable', 'tagColorsUnused'),
  tagColorsAlwaysAvailable: ['cp-colour-1'],
  tagColorsUnused: Ember.computed.setDiff('tagColorsPossible', 'tagColorsUsed'),
  tagColorsUsed: Ember.computed.mapBy('tags', 'color'),
  tagColorsPossible: Ember.computed('', function() {
  let arr = [];
  for (let i = 1; i < 19; i++) {
    arr.push('cp-colour-' + i);
  }
  return arr;
}),
});

application.template.hbs

<h1>Available tag colors:</h1>
<br>
{{#each tagColorsAvailable as |c|}}
<li>{{c}}</li>
{{/each}}

{{outlet}}
<br>
<br>

twiddle.json

{
  "version": "0.4.16",
  "EmberENV": {
    "FEATURES": {}
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.1.0/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember-template-compiler.js"
  }
}