("ember-cli": "2.2.0-beta.6")
A search page on my website allows users to look for two different types of records: Users or Organizations.
The URL for this search page is /search and I have implemented query parameters to maintain the state and enable back/forward navigation within a web browser (keeping track of previous search terms).
This feature works well when searching for Users, but not for Organizations. When an organization is searched and the user presses the back button, they are redirected to a random route (sometimes even one that was never accessed and doesn't appear in the browsing history).
search/controller.js
export default Ember.Controller.extend({
itemType: 'users',
queryParams: [
{
searchString: {
scope: 'controller',
as: 'term'
}
}
],
searchString: '',
userColumns: [
{
'title': 'Name',
'key': 'name',
'type': 'function',
'handler': (key, document) => {
return document._source.firstname + ' ' + document._source.lastname;
}
},
{
'title': 'Email',
'key': '_source.name',
'type': 'string'
},
{
'title': 'Date Registered',
'key': '_source.created_at',
'type': 'date'
}
],
roleColumns: [
{
'title': 'Name',
'key': '_source.name',
'type': 'string'
},
{
'title': 'Email',
'key': '_source.info.email',
'type': 'string'
},
{
'title': 'Date Registered',
'key': '_source.created_at',
'type': 'date'
}
],
linkToTarget: Ember.computed('itemType', function() {
const itemType = this.get('itemType');
return itemType === 'users' ? 'user' : 'organization';
}),
columnDefinitions: Ember.computed('itemType', function() {
const itemType = this.get('itemType');
return itemType === 'users' ? this.get('userColumns') : this.get('roleColumns');
})
});
search/route.js
export default Ember.Route.extend(AuthenticatedRouteMixin, {
queryParams: { searchString: { replace: true } },
resetController(controller, isExiting) {
if (isExiting) {
controller.set('searchString', '');
}
}
});
search/template.hbs
{{#es-generic-search
itemType=itemType
searchString=searchString
columnDefinitions=columnDefinitions
as |section data|
}}
{{#if (eq section 'searchForm')}}
{{#bs-button-group value=itemType type="radio" size="xs"}}
{{#bs-button value='users'}}Users{{/bs-button}}
{{#bs-button value='roles'}}Organizations{{/bs-button}}
{{/bs-button-group}}
{{/if}}
{{#if (eq section 'afterLastHeader')}}
<th></th>
{{/if}}
{{#if (eq section 'afterLastColumn')}}
<td>
{{#link-to linkToTarget data._id}}
<button class="btn btn-default btn-xs">
<i class="fa fa-eye"></i>
</button>
{{/link-to}}
</td>
{{/if}}
{{/es-generic-search}}
{{outlet}}
es-generic-search is a component that executes an Elasticsearch query and then utilizes the columnDefinitions to present relevant information in a table format.
I initially had separate routes for Users and Organizations, but decided to consolidate them into a single view for better user experience. However, the same issue persists even with this change.
I am struggling to resolve this issue and would greatly appreciate any help provided!!