Open basz opened 5 years ago
To answer myself; just use an onUpdateSorts action and transition into a new route.
@action
onUpdateSorts(sorts) {
this.router.transitionTo(this.router.currentRouteName, { queryParams: { page: 1, sort: Sorting.toQueryValue(sorts) } });
}
@basz The approach I've used with much success is to persist the value for @sorts
on the Controller like any other query param. I additionally implement a custom get
/set
to serialize the sorts
array to a JSON string for the QP and deserialize it back to an array of objects for ember-table. Here's an example (in TypeScript) of the base Controller class that I use for Controllers that will persist an ember-table sorts
to QP:
import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import { EmberTableSort } from 'ember-table';
export default class extends Controller {
queryParams = ['sorts'];
@tracked sorts: string | null = null;
get sortsValue(): EmberTableSort[] | undefined {
let { sorts } = this;
if (!sorts) {
return undefined;
}
return JSON.parse(sorts) as EmberTableSort[];
}
set sortsValue(value: EmberTableSort[] | undefined) {
this.sorts = value?.length ? JSON.stringify(value) : null;
}
@action updateSorts(sorts?: EmberTableSort[]): void {
this.sortsValue = sorts;
}
}
Hi,
I'm looking for a way to have paging and sorting accessible via query params (for navigation purposes (back button)). For paging I got this working now, but the sorting logic is hardcoded with a click handler which (seems to) means I cannot easily use a link-to helper with its query property in a custom header template.
What would be the recommended manner to achieve sorting via query params?