Skip to content

Instantly share code, notes, and snippets.

Embed
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() {
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));
}
}
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;
@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;
}
}
{{!-- 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>
<div>
<Filters @companyActive={{this.companyActive}}
@complainReason={{this.complainReason}} />
<DataLoader as |loader|>
{{#if loader.isRunning}}
Loading...
{{else}}
<ItemsList @items={{loader.data}} />
{{/if}}
</DataLoader>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment