I have following computed properties, tempate and a model where there are relationships which are async=true
ArrayController is used to sort the people-cards 1st after upgrading to 2.1.8 its not working. how to achieve this ?
export default Mixin.create( {
animate: true,
filterText: '',
filter: 0,
filterTabs: A(),
card: null,
changeofperson:null,
people:A(),
people: computed(
'model.coordinators.[]',
'model.directors.[]',
'model.professors.[]',
'model.students.[]',
'model.advisors.[]',
'model.managers.[]',
'model.contacts.[]',
'model.consultants.[]',
'model.guests.[]',
function() {
debugger;
var people = A();
this.get( 'model.coordinators.[]' ).forEach( function( person ) {
people.pushObject( Ember.Object.create( { person:person, id:person.id, role:'coordinators', title:'Coordinator', selected:false } ) );
} );
this.get( 'model.professors.[]' ).forEach( function( person ) {
people.pushObject( Ember.Object.create( { person:person, id:person.id, role:'professors', title:'Faculty', selected:false } ) );
} );
this.get( 'model.guests.[]' ).forEach( function( person ) {
people.pushObject( Ember.Object.create( { person:person, id:person.id, role:'guests', title:'Guest', selected:false } ) );
} );
this.get( 'model.students.[]' ).forEach( function( person ) {
people.pushObject( Ember.Object.create( { person:person, id:person.id, role:'students', title:'Participant', selected:false } ) );
} );
this.get( 'model.advisors.[]' ).forEach( function( person ) {
people.pushObject( Ember.Object.create( { person:person, id:person.id, role:'advisors', title:'Programme Advisor', selected:false } ) );
} );
this.get( 'model.directors.[]' ).forEach( function( person ) {
people.pushObject( Ember.Object.create( { person:person, id:person.id, role:'directors', title:'Programme Director', selected:false } ) );
} );
this.get( 'model.consultants.[]' ).forEach( function( person ) {
people.pushObject( Ember.Object.create( { person:person, id:person.id, role:'consultants', title:'Programme Consultant', selected:false } ) );
} );
this.get( 'model.contacts.[]' ).forEach( function( person ) {
people.pushObject( Ember.Object.create( { person:person, id:person.id, role:'contacts', title:'Programme Contact', selected:false } ) );
} );
this.get( 'model.managers.[]' ).forEach( function( person ) {
people.pushObject( Ember.Object.create( { person:person, id:person.id, role:'managers', title:'Programme Management', selected:false } ) );
} );
return people;
}),
sortedPeople: computed('people', function() {
debugger;
return this.get('people').sortBy('person.lastName')
}),
peopleWithoutDuplicates: computed( 'sortedPeople' ,function() {
var dedupedPeople = {},
people = this.get( 'people' );
people.forEach( person => dedupedPeople[ person.id ] = person );
return Object.keys( dedupedPeople ).map( id => dedupedPeople[ id ] );
} ),
groupedPeople: computed( 'peopleWithoutDuplicates', 'filter', function() {
var people = this.get( 'peopleWithoutDuplicates' ),
tabPeople = A(),
getFilter = this.get( 'filter' ),
arrayController;
if ( getFilter === 0 || getFilter === 1 ) {
tabPeople.pushObjects( people.filterBy( 'role', 'coordinators' ) );
tabPeople.pushObjects( people.filterBy( 'role', 'directors' ) );
tabPeople.pushObjects( people.filterBy( 'role', 'professors' ) );
tabPeople.pushObjects( people.filterBy( 'role', 'advisors' ) );
tabPeople.pushObjects( people.filterBy( 'role', 'managers' ) );
tabPeople.pushObjects( people.filterBy( 'role', 'contacts' ) );
tabPeople.pushObjects( people.filterBy( 'role', 'consultants' ) );
tabPeople.pushObjects( people.filterBy( 'role', 'guests' ) );
}
if ( getFilter === 0 || getFilter === 2 ) {
tabPeople.pushObjects( people.filterBy( 'role', 'students' ) );
}
// arrayController = Ember.Controller.create( {
//
// model: tabPeople,
// sortProperties: [ 'person.lastName' ],
// sortAscending: true
// } );
return tabPeople;
} ),
filteredResults: computed( 'filterText', 'groupedPeople.[]', function() {
var sortedArr =this.get('groupedPeople')
var filter = this.get( 'filterText' ).replace( /\s+([^\s]+)/, '|$1' ).replace( /\s+$/, '' ),
regExp = new RegExp( filter, 'i' ),
filteredResults = sortedArr.filter( function( result ) {
return regExp.test( result.get( 'person.fullName' ) );
} );
return filteredResults;
} ),
person: Ember.computed( 'card.person', function() {
return this.get( 'card.person' );
} ),
} );
template.hbs
{{#each filteredResults as |result|}}
<div class="grid--column grid--column-3">
{{people-card card=result loaded=result.person.isLoaded openProfileAction="openProfile" profileLoadedAction="personLoaded" }}
</div>
{{/each}}
model
{
coordinators: DS.hasMany( 'profile', { async: true } ),
directors: DS.hasMany( 'profile', { async: true } ),
professors: DS.hasMany( 'profile', { async: true } ),
students: DS.hasMany( 'profile', { async: true } ),
advisors: DS.hasMany( 'profile', { async: true } ),
}
im trying to show a sorted list of people-cards in template ( sort by lastname ) . this works under ember 1.13 but when i upgraded to ember2.18.x im getting an error ArrayController is depreciated. how to achive the sorting for those async=true relationships to work this again ?