Sharing common functionality between two controllers

Design
1

Right now, I have a resource providers and I have an index and I have a route 'show' for it along with a few routes called few other routes for listing different users. Here’s the full router.coffee file

Router.map ->
  @resource 'admin', ->
    @resource 'admin.providers', { path: '/providers' }, ->
      @route 'show'
      @route 'unapproved'
      @route 'approved'
      @route 'pending'

The thing is the index is simply a combination of unapproved, approved and pending pages and each is fetched using a single model with different type arguments

My initial set up direction was to create components (trying to do things Ember 2.0 way and avoid all Views) so I created unapproved-pro, approved-pro and so on which used ember-table to display things in a table. I thought I would be making these components self-sufficient, so that they would fetch the data, get next page and also other actions (like delete, or update)

Now from reading around (How to make ember component fetch data from server. put AJAX call inside the component seems not a good practise to handle this) , I need to supply the components with models and also keep the logic for pagination and other actions in the controllers. Which is fine. Here’s the issue;

My index page is a duplication of unapproved and approved pages. Exempt for maybe the number of rows that are visible in the table. If I put certain logics like ‘approve’ of a provider then I would have to do this logic both for the index controller and also for the pending controller. How can I share these functionalities while keeping it DRY?

Quick note, I did originally thought that I was going to able to create self-contained components that would handle all these actions. So everything related to an unapproved_pro would be self contained in that component so that I could drop it in anywhere. And I still think this might be a valid options.

2

You could move your shared logic into a shared parent route in your case ‘admin.providers’ looks to be the one

The actions will bubble up the hierarchy

For approval you could do something like

sendAction('approve', thingToApprove)

in your components

then in the shared parent router

actions: { 
  approve: function(thingToApprove) { 
    this.approveThing(thingtoApprove); 
  } 
}