CODEWITHSUNDEEP
ember.jsember-dataember-cliember-power-select
spacerobot
spacerobot

Reputation: 297

Ember power select to sort table results

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.

Upvotes: 0

Views: 255

Answers (1)

Lux
Lux

Reputation: 18240

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);
  },
}

Upvotes: 2

Related Questions