dynamic-filter-broken

components.filter-bar\.js

import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';

export default class extends Component {
  @tracked showDD = false;
	@tracked selectedFilters = [];

	get unselectedFilters() {
    return this.args.options.filter(f => !this.selectedFilters.includes(f));
  }

  @action
  toggleDD() {
    this.showDD = !this.showDD;
  }
	
	@action
	addFilter(filter) {
  	this.selectedFilters = [
    	...this.selectedFilters,
      filter,
    ];
  }
}

components.filter-picker\.js

import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';

export default class extends Component {
  @tracked showDD = false;


  @action
  toggleDD() {
    this.showDD = !this.showDD;
  }
}

controllers.application\.js

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { inject as service } from '@ember/service';
import { setOwner, getOwner } from '@ember/application';
import { action } from '@ember/object';

class Option {
  @service colors;
  @service tags;

  id;
	qpName;
  title;

	@tracked selectedIds = [];

	constructor(id) {
    this.id = id;
  }

	get isColor() {
    return this.id === 'color';
  }

	get items() {
    if (this.id === 'color') return this.colors.allColors;
    if (this.id === 'tag') return this.tags.allTags;
    return [];
  }

  get selected() {
    console.log('selected reused')
    return this.items.filter(r => this.selectedIds.includes(r.id));
  }
}

export default class HomeController extends Controller {
  queryParams = [
    { colorIds: { type: 'array' } },
    { tagIds: { type: 'array' } }
  ];

	get colorIds() {
    return this.colorOption.selectedIds;
  }

	set colorIds(value) {
    this.colorOption.selectedIds = value;
  }

	get tagIds() {
    return this.tagOption.selectedIds;
  }

	set tagIds(value) {
    this.tagOption.selectedIds = value;
  }

  constructor(){
    super(...arguments);
    this.colorOption = new Option('color');
    setOwner(this.colorOption, getOwner(this));
    this.colorOption.title = 'Colors';
    this.colorOption.qpName = 'colorIds';

    this.tagOption = new Option('tag');
    setOwner(this.tagOption, getOwner(this));
    this.tagOption.title = 'Tags';
    this.tagOption.qpName = 'tagIds';
    
  }

  get filterOptions() {
    console.log('buildign options', this.colorIds)

    return [
      this.colorOption,
      this.tagOption,
    ];
  }

  @action
  toggleItemSelected(filterOption, id, evt) {
    evt.stopPropagation();
    const index = this[filterOption.qpName].indexOf(id);
    console.log('toggleItemSelected', index, id, evt);

    if (index === -1) {
      console.log(filterOption.qpName);
      this[filterOption.qpName] = [
        ...this[filterOption.qpName],
        id,
      ];
    } else {
      this[filterOption.qpName].splice(index, 1);
      this[filterOption.qpName] = [...this[filterOption.qpName]];
    }
  }

  @action
  setPreset(preset) {
    console.log('preset', preset);
  }
}

services.colors\.js

import Service from '@ember/service';

export default class ColorsService extends Service{
  allColors = [
    {
      id: 1,
      name: 'gold',
      hex: 'f6d186'
    }, {
      id: 2,
      name: 'yellow',
      hex: 'fcf7bb'
    }, {
      id: 3,
      name: 'green',
      hex: 'cbe2b0'
    }, {
      id: 4,
      name: 'red',
      hex: 'f19292'
    },
  ];
}

services.tags\.js

import Service from '@ember/service';

export default class TagsService extends Service {
  allTags = [
    {
      id: 1,
      name: 'foo',
    }, {
      id: 2,
      name: 'bar',
    }, {
      id: 3,
      name: 'baz',
    }, {
      id: 4,
      name: 'cool',
    },
  ];
}

templates.application\.hbs

<h1>Welcome to {{this.appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>
<p>
Once a filter is added. 
</p>
<p>
	As you select filters from the dropdown the button updates with the name of the filter
</p>
<FilterBar 
	@options={{this.filterOptions}}
  @toggleItemSelected={{this.toggleItemSelected}}
/>

templates.components.filter-bar\.hbs

<div>
	{{#each this.selectedFilters as |filter|}}
  	<FilterPicker
    	@name={{filter.title}}
    	@selectedItems={{filter.selected}}
      @items={{filter.items}}
      @toggleItemSelected={{fn @toggleItemSelected filter}}
    />
	{{/each}}
  <div>
  	<button {{on "click" this.toggleDD}}>Add Filter</button>
    {{#if this.showDD}}
    	<ul>
      	{{#each this.unselectedFilters as |filter|}}
        	<li {{on "click" (fn this.addFilter filter)}}>{{filter.title}}</li>
        {{/each}}
      </ul>
    {{/if}}
  </div>
</div>

templates.components.filter-picker\.hbs

<button {{on "click" this.toggleDD}}>
  {{#each @selectedItems as |item|}}
     {{log "selectedItems" item}}
     <span>{{item.name}},</span>
   {{else}}
     Add {{@name}} Filter
   {{/each}}
</button>
	{{#if this.showDD}}
  	<ul>
    	{{#each @items as |item|}}
     		{{log item}}
        	<li {{on "click" (fn @toggleItemSelected item.id)}}>{{item.name}}</li>
        {{/each}}
     </ul>
   {{/if}}

twiddle\.json

{
  "version": "0.17.0",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.16.3",
    "ember-template-compiler": "3.16.3",
    "ember-testing": "3.16.3"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}