admhql code

app-components-data-loader.js

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { restartableTask } from 'ember-concurrency-decorators';
import { inject as service } from '@ember/service';
import query from 'uaw/gql/queries/allOpinionsSearch';

export default class DataLoaderComponent extends Component {
  @service apollo;
  @service filters;
  @tracked results = [];

  constructor() {
    super(...arguments);

    this.filters.on('filtersDidChange', () => this.fetchData.perform());
    this.fetchData.perform();
  }

  @restartableTask
  *fetchData() {
    let variables = { filter: this.filters.parsedFilters };

    this.results = yield this.apollo
                          .query({ query, variables }, 'allOpinionsSearch')
                          .catch(error => console.error(error));
  }
}

app-controllers-opinions.js

import Controller from "@ember/controller";
import QueryParams from "ember-parachute";
import { or } from "@ember/object/computed";
import { tracked } from "@glimmer/tracking";

export const AppQueryParams = new QueryParams({
  companyActive: {
    as: "active",
    defaultValue: true,
    refresh: true
  },

  complainReason: {
    as: "reason",
    defaultValue: "all",
    refresh: true
  }
});

export default class OpinionsController extends Controller.extend(AppQueryParams.Mixin) {
  @or("queryParamsState.{companyActive,complainReason}.changed") queryParamsChanged;
  @tracked companyActive = true;
  @tracked complainReason = "all";
}

app-services-filters.js

// The service who trigger events all over the project about filter changing

import Service from '@ember/service';
import Evented from '@ember/object/evented';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';

export default class FiltersService extends Service.extend(Evented) {
  @tracked companyActive;
  @tracked complainReason;

  @action
  propagate() {
    this.trigger('filtersDidChange');
  }

  setupByURL(queryParams) {
    for (let [key, value] of Object.entries(queryParams)) {
      this[key] = value;
    }
  }

  get parsedFilters() {
    let data = {
      companyActive: JSON.parse(this.companyActive),
      complainReason: this.complainReason.toUpperCase(),
    }

    return data;
  }
}

app-templates-components-filters.hbs

{{!-- Filters component: (there are more select boxes like that), they receive a "query param" property and they change it.
      When they are changed this component call's the service to "propagate" changes by ember evented. --}}
<div>
  <label>is company active?</label>
  <select
    {{on "change" (action (mut @companyActive) value="target.value")}}
    {{on "change" (action (mut this.filters.companyActive) value="target.value")}}
    {{on "change" this.filters.propagate}}
  >
    {{#each this.booleanList as |item|}}
      <option value={{item.value}} selected={{eq @companyActive item.value}}>
        {{item.label}}
      </option>
    {{/each}}
  </select>
</div>

app-templates-opinions.hbs

<div>
  <Filters @companyActive={{this.companyActive}}
           @complainReason={{this.complainReason}} />

  <DataLoader as |loader|>
    {{#if loader.isRunning}}
      Loading...
    {{else}}
      <ItemsList @items={{loader.data}} />
    {{/if}}
  </DataLoader>
</div>