0

I currently have a route servicerequests.index. In this route I am displaying a table of all service requests that I am getting via this call in my route:

model() {
return this.store.findAll('servicerequest').then(results => 
results.sortBy(this.get('selectedFilter')).reverse());
}

In my hbs file I have this power select:

{{#power-select options=filterOptions placeholder="Select a filter" 
selected=selectedFilter onchange=(action (mut selectedFilter))  
searchField="filterOptions" as |filter|}}
   {{filter.descr}}
{{/power-select}}

In my controller I am defining the options:

filterOptions: [
{ descr: "created_at" },
{ descr: "priority" },
{ descr: "status" }],

actions: {
  selectedFilter(filter) {
    this.set('selectedFilter', filter);

  }
},

What I want to happen is that when I select the different filter sort options to reorder the results on the page. How do you go about doing that?

With the data coming from the route and the options set in the controller I wasn't sure where to do the logic of the power selected.

Any thoughts or suggestions are appreciated.

spacerobot
  • 265
  • 1
  • 5
  • 23

1 Answers1

2

Use a computer property in the controller for the sorting. Don't do it in the model hook.

My answer here is very related to this.

basically do this in your route:

model() {
  return this.store.findAll('servicerequest');
}

and then in your controller:

filtetedModel: computed('selectedFilter', 'model.@each.{created_at,priority,status}', {
  get() {
    return this.model.sortBy(this.selectedFilter);
  }
}),
filterOptions: [
  { descr: "created_at" },
  { descr: "priority" },
  { descr: "status" }
],
actions: {
  selectedFilter(filter) {
    this.set('selectedFilter', filter);
  },
}
Lux
  • 17,835
  • 5
  • 43
  • 73
  • Thanks. So should I not get the data at all in the route but get it in the controller and sort it? – spacerobot Apr 16 '18 at 14:41
  • exactly. I've added an example – Lux Apr 17 '18 at 14:18
  • Thank you. I am playing around with this now. I am getting an error on the filteredoptions section that states: 10:5 error Only string, number, symbol, boolean, null, undefined, and function are allowed as default properties ember/avoid- leaking-state-in-ember-objects Any idea what this means? – spacerobot Apr 18 '18 at 15:44
  • thats a linting error and unrelated to this question. In your case you can ignore this. but basically it tells you that you should not define complex properties (like `filterOptions`) directly on ember objects but use `init` to define them. for discussion please refer to the ember slack #help channel. feel free to ping me there. – Lux Apr 18 '18 at 16:33