When to apply saved search config without affecting default query params values?

1

Goal: I have a search form with about 10 parameters. When the user fills out these parameters and does a search, I want to save the parameters they used, in order to prefill them when they return to the site at another time.

What I’ve done so far: When a user does a search, I take the full set of query params and save it to localstorage.

What I’m unsure about: Right now when it comes time to re-apply the saved config, I’m doing it in the init hook of my search service. (There’s a two way binding between the search route’s queryparams, and the values in my search service)

This has a problem in that it sets the values so early that ember treats them as the default queryparam values, which means that they don’t show in the url.

When/how can I apply the saved search config so that the form is prefilled, the search results are the results of the prefilled values, but so that it doesn’t override the default values?

2

Here is an example using 2 terms on a Route. When the Route is entered directly, model(params) offers a means to set values in this order:

  1. query string values

  2. localStorage saved values

  3. default values

     import Ember from 'ember';
 const { get, set, isEmpty, computed, inject, Route } = Ember;
 const { alias } = computed;

 export default Route.extend({
     storage: inject.service(),

     title: alias('controller.title'),
     queryParams: {
         searchType  : { refreshModel: true },
         searchValue : { refreshModel: true }
     },

     model(params) {
         let hash = {};

         let searchType  = params.searchType;
         let searchValue = params.searchValue;
         let savedQuery = get(storage, 'savedQuery'); 
         // where storage is a convenience method/service for localStorage

         if (!isEmpty(searchType) && get(searchValue, 'length')) {
             hash = {
                 searchType  : searchType,
                 searchValue : searchValue
             };
         } else if (savedQuery) {
             // set storage params
             hash = savedQuery;
         } else {
             // set default params
             hash = {
                 searchType  : 'description',
                 searchValue : ''
             };
         }

         return this.store.query('product', hash);
         // return this.store.query('product', params);
     },

     resetController(controller, isExiting, transition) {
         if (isExiting) {
             // isExiting would be false if only the route's model was changing.
             // save query to localStorage via a convenience method/service
             set(storage, 'savedQuery', yourQueryObject);
             // Set queryParam properties to null to reset filters.
             controller.setProperties({
                 searchType  : null,
                 searchValue : null
             });
         }
     }
 });

Alternatively, set the 10 params to be part of a single value, called “query”, then within your Controller apply an observer to the query. If empty, look for saved params in localStorage, else set defaults. When query has param values, then setProperties(query) onto the Controller (which has the queryParam array of the 10 properties) triggering a query.