I'd like to create a drop-down menu from a hasMany relation which filters the values of an other drop-down menu. I have ships which belongsTo companies and which haveMany cruises. The user of the webpage should be able to select nothing (the table displays all ships) or a company (the table displays just the ships of that company) or a specific ship (the table just displays one ship). If the user selected a specific company only ships of that company should be displayed in the ship drop-down menu. The table of ships should be updated too.
How can I create a set of two drop-down menus (above or below the table) which behave like this example and filter the content of the table?
I know this question is a tall order. I tried to break it down as much as possible. Thank you for your time and effort.
The code of my example application
ember new travel_agency
cd travel_agency
ember install:addon ember-cli-scaffold
ember g scaffold ship name:string
ember g scaffold company name:string
ember g scaffold cruise starts_at:date
ember generate adapter application
ember g http-mock ships
ember g http-mock companies
ember g http-mock cruises
ember install:addon ember-moment
app/adapters/application.js
import DS from 'ember-data';
export default DS.RESTAdapter.extend({
'namespace': 'api'
});
app/models/company.js
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr('string'),
ships: DS.hasMany('ship', { async: true })
});
app/models/ship.js
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr('string'),
company: DS.belongsTo('company', { async: true }),
cruises: DS.hasMany('cruise', { async: true })
});
app/models/cruise.js
import DS from 'ember-data';
export default DS.Model.extend({
startsAt: DS.attr('date'),
ship: DS.belongsTo('ship', { async: true })
});
server/mocks/ships.js
[...]
var shipList = [
{"id":1,"name":"Carnival Fantasy","company":1,"cruises":[1,2]},
{"id":2,"name":"Carnival Triumph","company":1,"cruises":[3,4]},
{"id":3,"name":"Queen Mary 2","company":2,"cruises":[5]},
{"id":4,"name":"Queen Elizabeth","company":2,"cruises":[6]},
{"id":5,"name":"Norwegian Jewel","company":3,"cruises":[7,8]}
]
[...]
server/mocks/companies.js
[...]
var companyList = [
{"id":1,"name":"Carnival"},
{"id":2,"name":"Cunard"},
{"id":3,"name":"Norwegian Cruise Line"}
]
[...]
server/mocks/cruises.js
[...]
var cruiseList = [
{"id":1,"startsAt":"2014-10-01","ship":1},
{"id":2,"startsAt":"2014-10-15","ship":1},
{"id":3,"startsAt":"2014-10-30","ship":2},
{"id":4,"startsAt":"2014-11-10","ship":2},
{"id":5,"startsAt":"2014-11-20","ship":3},
{"id":6,"startsAt":"2014-11-20","ship":4},
{"id":7,"startsAt":"2014-10-20","ship":5},
{"id":8,"startsAt":"2014-11-20","ship":5}
]
[...]
app/templates/ships/index.hbs
[...]
<tbody>
{{#each ship in model}}
<tr>
<td>
{{ship.name}}
</td>
<td>
{{ship.company.name}}
</td>
<td>
{{#each cruise in ship.cruises}}
{{moment date "L" cruise.startsAt}},
{{/each}}
</td>
<td>
{{link-to "Edit" "ships.edit" ship}}
</td>
<td>
{{link-to "Show" "ships.show" ship}}
</td>
<td>
<a href="#" {{action "remove" ship}}>Remove</a>
</td>
</tr>
{{/each}}
</tbody>
[...]
