tng / ngqp Goto Github PK
View Code? Open in Web Editor NEWDeclaratively synchronize form controls with the URL
Home Page: https://tng.github.io/ngqp
License: MIT License
Declaratively synchronize form controls with the URL
Home Page: https://tng.github.io/ngqp
License: MIT License
If we added a separate @ngqp/schematics
package to handle ng add
, we could determine the Angular version used and install the appropriate ngqp version. This assumes we align the versions with Angular.
Rapid prototyping is cool, but we need to ensure we know our library before we ship it, so make sure we have a good test coverage.
It should be possible to define, e.g., how skipLocationChange
and replaceUrl
are set. This should be possible globally on module-level as well as on group-level.
The missing ones are currently:
The radio one is a bit tricky since here we will have multiple form controls with the same queryParamName
. This means we need to properly support using the same name on multiple controls.
(Edit: which should now work)
What's your idea?
Router options like replaceUrl
are currently set either globally or per QueryParamGroup. We should consider whether we should also allow a third override per QueryParam.
If so, the replaceUrl example should be updated to use this mechanism.
Once Angular 7.2.0 lands, we should update the dependency to it and use this.router.getCurrentNavigation().extras.state
and navigate(…, {state: {ngqp: true}}
to determine whether to ignore a change in the route.
This would replace the current mechanism of using compareWith
. We could consider making this optional again as a result.
What's your idea?
This would improve the search experience
Since this is very much related to the stated goal of ngqp, it would make sense to provide some easily accessible information for that even if it isn't directly handled by ngqp.
What's your idea?
When using emptyOn
, the value is not only used as a default if missing in the URL, but also the parameter is removed from the URL if the form control takes on this value. If we want to avoid the latter, we currently need to create a custom deserializer. Perhaps adding a simple keepEmptyOn: boolean
would make this a bit easier to use.
The QueryParamGroup
(and maybe also QueryParamControl
?) should support a patchValue
function which allows programmatic changes to the model (and are then reflected in the URL).
Perhaps we can do this by using two @Input
s for writeValue/onChange. Maybe this can even be done as a separate directive.
What does the bug look like?
The GitHub social button on the landing page works if that's the page you load initially, but once you navigate away and come back it no longer works.
How can this bug be reproduced?
The GitHub button is now gone and just a link is shown.
There should be some configuration surface that allows changing other parameters when the model of a control changes. The use-case would be pagination where changing certain controls needs to reset the current page.
A first idea is to provide a combineWith: (previousValue: T, currentValue: T) => Params
coniguration option on control level.
There should be 2–3 issue templates:
What's your idea?
All the "meat" of the logic is currently handled in QueryParamGroupDirective. As a first step, this should be refactored into a service (which this directive then provides) to decouple the logic from the view directive. A further step would be to have this redirect to some global service which can orchestrate the different groups or whatever together.
We should expose an interface like QueryParamAccessor
(see below) for form controls to implement. Note that this should use an injection token as we might want to provide this on native controls (to be determined).
This would allow using a form control without specifying a (de-)serializer on param control level. If those are specified, they need to take precedence.
A possible interface would look like this:
interface QueryParamAccessor<T> {
serializeValue: (value: T | null) => string | null;
deserializeValue: (value: string | null) => T | null;
}
The ngqp-demo should document all features, be deployed (Github pages?) and linked in the Github header.
What's your idea?
We should consider whether it makes sense to allow dynamically adding and removing QueryParam models to / from a group.
What's your idea?
We should avoid type aliases like RouterAdapterOptions
and instead use proper interfaces.
Probably involves a custom accessor
Perhaps requires a separate mechanism / refactoring since currently emptyOn is evaluated in the serializer, which is invoked per-value.
Currently, `combineWith' is required to return a list of "finished" query params. However, it could also be useful to instead return a list of control names + values. This would require that
Perhaps introducing this as a separate combineWithValue
option would be best since it might make sense to retain both features separately.
This issue serves as a placeholder for future discussion.
Look for everything with TODO Documentation
and do it.
Test it & fix it
We need valueChanges on group and control level and have to make sure they emit.
This issue is meant to coordinate the first release:
We should support controls which can take multiple values (such as a multi-select). On the URL side, this should just use Angular's router functionality for array values.
We need to think about the API for this as it might also affect (de-)serializer signatures. Very likely we at least need some multi: boolean
property to also know whether to call get
or getAll
.
Allowing to pass an array / rest params rather than an object to the group builder would allow removing the potentially unnecessary duplication of control name and parameter name for users who don't care about this:
builder.group(
builder.param({/*…*/}),
builder.param({/*…*/}),
);
This would probably make tests easier and would be good to have for the docs website to show the URL in a local field per example.
We already track navigations, but maybe worth tracking as events:
What's your idea?
The preserveFragment
flag should also be configurable both globally and per QueryParamGroup, similar to replaceUrl
.
What's your idea?
We made using forRoot
optional since it wasn't easy to get schematics to add it correctly. However, we can take a look at how Ionic does it: https://github.com/ionic-team/ionic/blob/master/angular/src/schematics/add/index.ts
Once in the schematics we do it correctly, we can also force using forRoot
to avoid the awkward provider duplication. Perhaps we should also make sure a nice error is thrown if no router adapter is found.
It should be possible to define a debounce: number
property on a QueryParamControl
which debounces the change. It needs to be defined still whether the change should be debounced before or after the URL is updated.
The use-case for this is, e.g., a text input search field where it's very likely that a user would want to debounce this, but not other controls (such as dropdowns), so allowing this gives users an easy way to achieve it.
What's your idea?
Currently, all properties of QueryParam
are "fixed". We should consider for each option whether it makes sense to support changing the configuration dynamically (and implement it).
Wrap them into try-catch calls.
What's your idea?
We could provide a Stackblitz starter template which has a small example preconfigured. This could be linked in the README.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.