Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
admhql code
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() {
this.filters.on('filtersDidChange', () => this.fetchData.perform());
*fetchData() {
let variables = { filter: this.filters.parsedFilters };
this.results = yield this.apollo
.query({ query, variables }, 'allOpinionsSearch')
.catch(error => console.error(error));
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";
// 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;
propagate() {
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;
{{!-- 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. --}}
<label>is company active?</label>
{{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}}>
<Filters @companyActive={{this.companyActive}}
@complainReason={{this.complainReason}} />
<DataLoader as |loader|>
{{#if loader.isRunning}}
<ItemsList @items={{}} />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment