EmberJS: Issue with Query Params for a Route and Backward Navigation

Question

("ember-cli": "2.2.0-beta.6")

I've got a search page which can search for two types of records: Users or Organisations.

The route for this page is /search and I have also tried to use query params to persist state and enable back/forward navigation within a browser (retaining previous search terms).

This works when Users is selected but not for Organisations. If an organisation is searched and routed to, then pressing back, will return to a random route (sometimes a route that was never accessed and not in the Browser's 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' : 'organisation';
  }),
  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'}}Organisations{{/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 which basically performs an Elasticsearch query and then uses the columnDefinitions to display the relevant information in a table.

I did originally have Users and Organisations searchable from separate routes but it made sense from a UX perspective to collapse to a single view.

The exact issue I'm experience was problematic with separate routes too.

I'm genuinely lost with this and really appreciate any assistance provided!!

Calvin Alvin Calvin Alvin · Accepted Answer · 2017-03-21T22:07:55

I don't know if this will help, but it looks like in search/controller.js your linkToTarget computed property flags between two types, users and organisation.

return itemType === 'users' ? 'user' : 'organisation';

However in your search/template.hbs it looks like you pass the value roles into your Organisations button.

{{#bs-button value='roles'}}Organisations{{/bs-button}}

Could it be that elsewhere in your code you might be mixing up the two? (between 'role' and 'organisation') Just a thought.

EmberJS: Issue with Query Params for a Route and Backward Navigation

1 Answers