Last active
January 12, 2023 21:42
-
-
Save runspired/0f04545f6fd02a0eb565b02c78aaf709 to your computer and use it in GitHub Desktop.
Query Params Service
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Controller from '@ember/controller'; | |
| import { inject as service } from '@ember/service'; | |
| export default class extends Controller { | |
| @service('query-params') params; | |
| // queryParams = this.params.buildControllerParams('application', { | |
| // composeWith: [this.params.getDatatableParams('controls')] | |
| // }); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Route from '@ember/routing/route'; | |
| import { inject as service } from '@ember/service'; | |
| export default class extends Route { | |
| @service('query-params') params; | |
| // remove this if you want to use a real controller | |
| // this just gives us a controller that has the query params service injected | |
| // onto it. | |
| controllerName = '-base'; | |
| dataTableParams = this.params.getDatatableParams('controls'); | |
| queryParams = this.params.buildRouteParams( | |
| 'application', | |
| { name: 'Chris' }, | |
| { composeWith: [this.dataTableParams] } | |
| ); | |
| model() { | |
| return { | |
| params: this.params.getParams('application'), | |
| dt: this.params.getDatatableParams('controls') | |
| }; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { tracked } from '@glimmer/tracking'; | |
| class Tag { | |
| @tracked ref = 0; | |
| } | |
| // this just emulates TrackedObject, same idea | |
| class Params { | |
| constructor(obj) { | |
| const tag = new Tag(); | |
| return new Proxy(this, { | |
| get(target, k) { | |
| tag.ref; | |
| return obj[k]; | |
| }, | |
| set(target, k, v) { | |
| tag.ref = 0; | |
| obj[k] = v; | |
| return true; | |
| } | |
| }); | |
| } | |
| } | |
| export default class { | |
| _params = new Map(); | |
| _keys = new Map(); | |
| _keyed = {}; | |
| _keyLookup = new Map(); | |
| getParams(key) { | |
| return this._params.get(key); | |
| } | |
| getDatatableParams(key) { | |
| // note that `.` and `::` etc. are not valid | |
| // in keys used for query params, hence prefix with `_` | |
| const name = `datatable_${key}`; | |
| if (this._params.has(name)) { | |
| return this._params.get(name); | |
| } | |
| return this.createParams(name, {filter: '', sort: 'asc', limit: 25 }); | |
| } | |
| createParams(key, obj) { | |
| const params = new Params(obj); | |
| this._params.set(key, params); | |
| this._keys.set(key, Object.keys(obj)); | |
| this._keyed[key] = params; | |
| this._keyLookup.set(params, key); | |
| return params; | |
| } | |
| _buildRouteParams(name, serviceProp) { | |
| const keys = this._keys.get(name); | |
| const config = {}; | |
| keys.forEach(key => { | |
| config[`${serviceProp}._keyed.${name}.${key}`] = { as: key, refreshModel: true, replace: true }; | |
| }); | |
| return config; | |
| } | |
| buildRouteParams(name, obj, options, serviceProp = 'params') { | |
| this.createParams(name, obj); | |
| const config = this._buildRouteParams(name, serviceProp); | |
| options?.composeWith.forEach(params => { | |
| Object.assign(config, this._buildRouteParams(this._keyLookup.get(params), serviceProp)); | |
| }); | |
| return config; | |
| } | |
| // _buildControllerParams(name, serviceProp) { | |
| // const keys = this._keys.get(name); | |
| // const config = keys.map(k => `${serviceProp}._keyed.${name}.${k}`); | |
| // return config; | |
| // } | |
| // buildControllerParams(name, options, serviceProp = 'params') { | |
| // const keys = this._keys.get(name); | |
| // const config = this._buildControllerParams(name, serviceProp); | |
| // options?.composeWith.forEach(params => { | |
| // const k = this._keyLookup.get(params); | |
| // config.push(...this._buildControllerParams(k, serviceProp)); | |
| // }); | |
| // return config; | |
| // } | |
| constructor(args) { | |
| Object.assign(this, args); | |
| } | |
| static create(args) { | |
| return new this(args); | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "version": "0.17.1", | |
| "EmberENV": { | |
| "FEATURES": {}, | |
| "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false, | |
| "_APPLICATION_TEMPLATE_WRAPPER": true, | |
| "_JQUERY_INTEGRATION": true | |
| }, | |
| "options": { | |
| "use_pods": false, | |
| "enable-testing": false | |
| }, | |
| "dependencies": { | |
| "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js", | |
| "ember": "3.18.1", | |
| "ember-template-compiler": "3.18.1", | |
| "ember-testing": "3.18.1" | |
| }, | |
| "addons": { | |
| "@glimmer/component": "1.0.0" | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment