filter-toggle-layers-working

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 showColors = false;
	@tracked showTags = false;


  @action
  toggleColors() {
    this.showColors = !this.showColors;
  }

	@action
  toggleTags() {
    this.showTags = !this.showTags;
  }
}

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() {
    return this.items.filter(r => this.selectedIds.includes(r.id));
  }
}

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

	@tracked _colorIds = [];
	@tracked _tagIds = [];

	get colorIds() {
    return this._colorIds;
  }

	set colorIds(value) {
    this._colorIds = value;
  }

	get tagIds() {
    return this._tagIds;
  }

	set tagIds(value) {
    this._tagIds = 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.colorOption.selectedIds = [...this.colorIds];
    this.tagOption.selectedIds = [...this.tagIds];
    return [
      this.colorOption,
      this.tagOption,
    ];
  }

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

    if (index === -1) {
      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>
<FilterBar 
	@options={{this.filterOptions}}
  @toggleItemSelected={{this.toggleItemSelected}}
/>

templates.components.filter-bar\.hbs

<div>
	{{#each @options as |filter|}}
  	{{#if filter.isColor}}
    	<div>
    	<button {{on "click" this.toggleColors}}>
        {{#each filter.selected as |item|}}
          {{log "selectedItems" item}}
          <span>{{item.name}},</span>
        {{else}}
          Add {{filter.title}} Filter
        {{/each}}
      </button>
      {{#if this.showColors}}
        <ul>
          {{#each filter.items as |item|}}
            {{log item}}
            <li {{on "click" (fn @toggleItemSelected filter item.id)}}>{{item.name}}</li>
          {{/each}}
        </ul>
      {{/if}}
      </div>
     {{else}}
     	<div>
     	<button {{on "click" this.toggleTags}}>
        {{#each filter.selected as |item|}}
          {{log "selectedItems" item}}
          <span>{{item.name}},</span>
        {{else}}
          Add {{filter.title}} Filter
        {{/each}}
      </button>
      {{#if this.showTags}}
        <ul>
          {{#each filter.items as |item|}}
            {{log item}}
            <li {{on "click" (fn @toggleItemSelected filter item.id)}}>{{item.name}}</li>
          {{/each}}
        </ul>
      {{/if}}
     </div>
     {{/if}}
	{{/each}}
</div>

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.17.0",
    "ember-template-compiler": "3.17.0",
    "ember-testing": "3.17.0"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}