Filtering Async hasMany Relationships

adapters.application.js

import DS from 'ember-data';

export default DS.RESTAdapter.extend({
  namespace: 'api',
  //coalesceFindRequests: true
});

components.add-pet.js

import Ember from 'ember';

export default Ember.Component.extend({
  store: Ember.inject.service(),
  click: function() {
    //alert(this.get("store").findAll('owner'));
    let pet = this.get('store').peekRecord('pet', 1);
    this.get("store").createRecord('owner', {
      name: 'Rails is Omakase',
      pets: [pet]
    });
    //alert("adfa");
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  queryParams: ['petName'],
  petName: null,
  
  filteredOwners: Ember.computed('petName', '[email protected].[]', function() {
    let petName = this.get('petName');
    let ownersArray = this.get('model').toArray();
    
    let filterPromise = Ember.RSVP.filter(ownersArray, owner => {
      return owner.get('pets').then( pets => {
        return pets.isAny('name', petName);
      });
    });

    return DS.PromiseArray.create({
      promise: filterPromise
    });
  })
});

mocks.js

export default function() {
  const owners = {
    owners: [
      { id: 1, name: 'John', pets: [1, 2] },
      { id: 2, name: 'Sarah', pets: [3, 1] },
      { id: 3, name: 'Chris', pets: [4, 3] }
    ]
  }

  const pet1 = { id: 1, name: 'Tom', owners: [1, 2] }
  const pet2 = { id: 2, name: 'Sigmund', owners: [1] }
  const pet3 = { id: 3, name: 'Rocky', owners: [2, 3] }
  const pet4 = { id: 4, name: 'Buster', owners: [3] }
  
  const pets = {
    pets: [ pet1, pet2, pet3, pet4 ]
  }
  
  getJSON('/api/owners', owners);
  getJSON('/api/pets', pets);
  getJSON('/api/pets/1', { pet: pet1 });
  getJSON('/api/pets/2', { pet: pet2 });
  getJSON('/api/pets/3', { pet: pet3 });
  getJSON('/api/pets/4', { pet: pet4 });

}

function getJSON(url, jsonResponse) {
  $.mockjax({ url: url, responseText: jsonResponse });
}

models.owner.js

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  pets: DS.hasMany('pet')
});

models.pet.js

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  owners: DS.hasMany('owner')
});

routes.application.js

import Ember from 'ember';
import getMocks from '../mocks';

export default Ember.Route.extend({
  init() {
    this._super(...arguments);
    getMocks();
  },
  model() {
    return this.store.findAll('owner');
  }
});

templates.application.hbs

<h1>Filtering Async hasMany Relationships</h1>

<small>Ember version: 2.1</small>
<p>This simple example demonstrates how you can filter results depending on a hasMany relationship value.</p>
<p>By clicking on the names of the pets you can filter the owners.</p>

<h3>All Owners</h3>
<ul>
  {{#each model as |owner|}}
    <li>
      {{owner.name}}
      <ul>
        {{#each owner.pets as |pet|}}
        <li>{{#link-to 'index' (query-params petName=pet.name)}}{{pet.name}}{{/link-to}}</li>
        {{/each}}
      </ul>
    </li>
  {{/each}}
</ul>
<h3>Owners with a pet called {{input value=petName}}</h3>
{{#if filteredOwners.isPending}}
  <p>Loading owners...</p>
{{else}}
  <ul>
    {{#each filteredOwners as |owner|}}
      <li>
        {{owner.name}}
      </li>
    {{else}}
      <li>No owners found...</li>
    {{/each}}
  </ul>
{{/if}}

{{add-pet}}

{{outlet}}

templates.components.add-pet.hbs

<button>Add pet</button>

twiddle.json

{
  "version": "0.4.8",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.1.0",
    "ember-data": "2.1.0",
    "ember-template-compiler": "2.1.0",
    "jquery-mockjax": "https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.js"
  }
}