feat(core): Added debounceTime option for params

fixes #4

Author: Airblader

projects/ngqp-demo/src/app/playground/playground.component.ts

@@ -11,7 +11,8 @@ export class PlaygroundComponent {
     constructor(private queryParamBuilder: QueryParamBuilder) {
         this.paramGroup = queryParamBuilder.group({
             searchText: queryParamBuilder.param({
-                name: 'q'
+                name: 'q',
+                debounceTime: 1000,
             }),
         });
     }

projects/ngqp/core/src/lib/model.ts

@@ -1,6 +1,21 @@
-import { Observable, Subject } from 'rxjs';
 import { isOptionalFunction, wrapTryCatch } from './util';
 
+/** TODO Documentation */
+export type ParamSerializer<T> = (model: T | null) => string | null;
+
+/** TODO Documentation */
+export type ParamDeserializer<T> = (value: string | null) => T | null;
+
+/**
+ * TODO Documentation
+ */
+export interface QueryParamControlOpts<T> {
+    name: string;
+    serialize?: ParamSerializer<T>;
+    deserialize?: ParamDeserializer<T>;
+    debounceTime?: number;
+}
+
 /**
  * TODO Documentation
  */
@@ -24,25 +39,19 @@ export class QueryParamControl<T> {
     public name: string | null = null;
 
     /** TODO Documentation */
-    public serialize: (model: T) => string;
+    public serialize: ParamSerializer<T>;
 
     /** TODO Documentation */
-    public deserialize: (value: string) => T;
+    public deserialize: ParamDeserializer<T>;
 
-    // TODO Who completes this?
-    private _valueChanges$ = new Subject<T>();
     /** TODO Documentation */
-    public readonly valueChanges$ = this._valueChanges$.asObservable();
+    public debounceTime: number | null = null;
 
     /** TODO Documentation */
     public value: T = null;
 
     constructor(config: QueryParamControlOpts<T>) {
-        const {
-            name = null,
-            serialize = (model: any) => '' + model,
-            deserialize = (value: string) => value as any,
-        } = config;
+        const { name, serialize, deserialize, debounceTime } = config;
 
         if (!isOptionalFunction(serialize)) {
             throw new Error(`serialize must be a function, but received ${serialize}`);
@@ -53,18 +62,9 @@ export class QueryParamControl<T> {
         }
 
         this.name = name;
-
         this.serialize = wrapTryCatch(serialize, `Error while serializing value for ${name || 'control'}`);
         this.deserialize = wrapTryCatch(deserialize, `Error while deserializing value for ${name || 'control'}`);
+        this.debounceTime = debounceTime;
     }
 
-}
-
-/**
- * TODO Documentation
- */
-export interface QueryParamControlOpts<T> {
-    name?: string;
-    serialize?: (model: T) => string | null;
-    deserialize?: (value: string | null) => T;
 }

projects/ngqp/core/src/lib/query-param-builder.service.ts

@@ -1,5 +1,11 @@
 import { Injectable } from '@angular/core';
 import { QueryParamControl, QueryParamControlOpts, QueryParamGroup } from './model';
+import {
+    DEFAULT_NUMBER_DESERIALIZER,
+    DEFAULT_NUMBER_SERIALIZER,
+    DEFAULT_STRING_DESERIALIZER,
+    DEFAULT_STRING_SERIALIZER
+} from './serializers';
 
 /**
  * TODO Documentation
@@ -15,7 +21,7 @@ export class QueryParamBuilder {
     public group(config: { [ name: string ]: QueryParamControl<any> | string }): QueryParamGroup {
         const controls: { [ controlName: string ]: QueryParamControl<any> } = {};
         Object.keys(config).forEach(controlName => {
-            controls[ controlName ] = this.createControl(config[ controlName ]);
+            controls[ controlName ] = this.createControl(controlName, config[ controlName ]);
         });
 
         return new QueryParamGroup(controls);
@@ -24,16 +30,24 @@ export class QueryParamBuilder {
     /**
      * TODO Documentation
      */
-    public param<T>(config: QueryParamControlOpts<T> = {}): QueryParamControl<T> {
-        return new QueryParamControl(config);
+    public param(config: QueryParamControlOpts<string>): QueryParamControl<string> {
+        return new QueryParamControl({
+            serialize: DEFAULT_STRING_SERIALIZER,
+            deserialize: DEFAULT_STRING_DESERIALIZER,
+            ...config,
+        });
     }
 
-    private createControl<T>(controlConfig: QueryParamControl<T> | string): QueryParamControl<T> {
+    private createControl<T>(controlName: string, controlConfig: QueryParamControl<T> | string): QueryParamControl<T | string> {
         if (controlConfig instanceof QueryParamControl) {
             return controlConfig;
         }
 
-        return this.param();
+        return this.param({
+            name: controlName,
+            serialize: DEFAULT_STRING_SERIALIZER,
+            deserialize: DEFAULT_STRING_DESERIALIZER,
+        });
     }
 
 }

projects/ngqp/core/src/lib/query-param-group.directive.ts

@@ -1,9 +1,10 @@
 import { Directive, Input, OnDestroy } from '@angular/core';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { Subject } from 'rxjs';
-import { concatMap, distinctUntilChanged, map, takeUntil } from 'rxjs/operators';
-import { QueryParamControl, QueryParamGroup } from './model';
+import { concatMap, debounceTime, distinctUntilChanged, map, takeUntil, tap } from 'rxjs/operators';
 import { QueryParamNameDirective } from './query-param-name.directive';
+import { QueryParamControl, QueryParamGroup } from './model';
+import { isMissing } from './util';
 
 /**
  * TODO Documentation
@@ -49,9 +50,17 @@ export class QueryParamGroupDirective implements OnDestroy {
         // to the control itself otherwise.
         const paramName = control.name || directive.name;
 
+        const paramQueue$ = new Subject<Params>();
+        paramQueue$
+            .pipe(
+                !isMissing(control.debounceTime) ? debounceTime(control.debounceTime) : tap(),
+                takeUntil(this.destroy$),
+            )
+            .subscribe(params => this.enqueueNavigation(params));
+
         // View -> Model
         directive.valueAccessor.registerOnChange((newModel: any) => {
-            this.enqueueNavigation({
+            paramQueue$.next({
                 [paramName]: control.serialize(newModel)
             });
         });

projects/ngqp/core/src/lib/serializers.ts

@@ -0,0 +1,42 @@
+import { ParamDeserializer, ParamSerializer } from './model';
+import { isMissing } from './util';
+
+/**
+ * TODO Documentation
+ */
+export function createStringSerializer(defaultValue: string | null = null): ParamSerializer<string> {
+    return (model: string | null) => isMissing(model) ? defaultValue : model;
+}
+
+/**
+ * TODO Documentation
+ */
+export function createStringDeserializer(defaultValue: string | null = null): ParamDeserializer<string> {
+    return (value: string | null) => isMissing(value) ? defaultValue : value;
+}
+
+/**
+ * TODO Documentation
+ */
+export function createNumberSerializer(defaultValue: string | null = null): ParamSerializer<number> {
+    return (model: number | null) => isMissing(model) ? defaultValue : `${model}`;
+}
+
+/**
+ * TODO Documentation
+ */
+export function createNumberDeserializer(defaultValue: number | null = null): ParamDeserializer<number> {
+    return (value: string | null) => isMissing(value) ? defaultValue : parseFloat(value);
+}
+
+/** TODO Documentation */
+export const DEFAULT_STRING_SERIALIZER = createStringSerializer();
+
+/** TODO Documentation */
+export const DEFAULT_STRING_DESERIALIZER = createStringDeserializer();
+
+/** TODO Documentation */
+export const DEFAULT_NUMBER_SERIALIZER = createNumberSerializer();
+
+/** TODO Documentation */
+export const DEFAULT_NUMBER_DESERIALIZER = createNumberDeserializer();

projects/ngqp/core/src/lib/util.ts

@@ -1,15 +1,15 @@
 /**
  * TODO Documentation
  */
-export function isDefined(obj: any): boolean {
-    return obj !== undefined && obj !== null;
+export function isMissing(obj: any): obj is null | undefined {
+    return obj === undefined || obj === null;
 }
 
 /**
  * TODO Documentation
  */
 export function isOptionalFunction(obj: any): boolean {
-    return !isDefined(obj) || typeof obj === 'function';
+    return isMissing(obj) || typeof obj === 'function';
 }
 
 /**