feat(core): Added QueryParamDirective for standalone parameters

alexey-anufriev · AlexeyAnufriev · commit 05b48ca46e4b · 2019-02-21T16:29:46.000+01:00
This allows binding a QueryParam directly to a component without a
QueryParamGroup. It works by creating an ad-hoc QueryParamGroup
invisible to the user.

Signed-off-by: AlexeyAnufriev &lt;ice.sumy@gmail.com&gt;
diff --git a/projects/ngqp/core/src/lib/accessors/checkbox-control-value-accessor.directive.ts b/projects/ngqp/core/src/lib/accessors/checkbox-control-value-accessor.directive.ts
@@ -10,7 +10,7 @@ export const NGQP_CHECKBOX_VALUE_ACCESSOR: any = {
 
 /** @ignore */
 @Directive({
-    selector: 'input[type=checkbox][queryParamName]',
+    selector: 'input[type=checkbox][queryParamName],input[type=checkbox][queryParam]',
     providers: [NGQP_CHECKBOX_VALUE_ACCESSOR],
 })
 export class CheckboxControlValueAccessorDirective implements ControlValueAccessor {
diff --git a/projects/ngqp/core/src/lib/accessors/default-control-value-accessor.directive.ts b/projects/ngqp/core/src/lib/accessors/default-control-value-accessor.directive.ts
@@ -16,7 +16,8 @@ function isAndroid(navigator: Navigator): boolean {
 
 /** @ignore */
 @Directive({
-    selector: 'input:not([type=checkbox]):not([type=radio])[queryParamName],textarea[queryParamName]',
+    selector: 'input:not([type=checkbox]):not([type=radio])[queryParamName],textarea[queryParamName],' +
+              'input:not([type=checkbox]):not([type=radio])[queryParam],textarea[queryParam]',
     providers: [NGQP_DEFAULT_VALUE_ACCESSOR],
 })
 export class DefaultControlValueAccessorDirective implements ControlValueAccessor {
diff --git a/projects/ngqp/core/src/lib/accessors/multi-select-control-value-accessor.directive.ts b/projects/ngqp/core/src/lib/accessors/multi-select-control-value-accessor.directive.ts
@@ -11,7 +11,7 @@ export const NGQP_MULTI_SELECT_VALUE_ACCESSOR: StaticProvider = {
 
 /** @ignore */
 @Directive({
-    selector: 'select[multiple][queryParamName]',
+    selector: 'select[multiple][queryParamName],select[multiple][queryParam]',
     providers: [NGQP_MULTI_SELECT_VALUE_ACCESSOR],
 })
 export class MultiSelectControlValueAccessorDirective<T> implements ControlValueAccessor {
diff --git a/projects/ngqp/core/src/lib/accessors/number-control-value-accessor.directive.ts b/projects/ngqp/core/src/lib/accessors/number-control-value-accessor.directive.ts
@@ -10,7 +10,7 @@ export const NGQP_NUMBER_VALUE_ACCESSOR: any = {
 
 /** @ignore */
 @Directive({
-    selector: 'input[type=number][queryParamName]',
+    selector: 'input[type=number][queryParamName],input[type=number][queryParam]',
     providers: [NGQP_NUMBER_VALUE_ACCESSOR],
 })
 export class NumberControlValueAccessorDirective implements ControlValueAccessor {
diff --git a/projects/ngqp/core/src/lib/accessors/range-control-value-accessor.directive.ts b/projects/ngqp/core/src/lib/accessors/range-control-value-accessor.directive.ts
@@ -10,7 +10,7 @@ export const NGQP_RANGE_VALUE_ACCESSOR: any = {
 
 /** @ignore */
 @Directive({
-    selector: 'input[type=range][queryParamName]',
+    selector: 'input[type=range][queryParamName],input[type=range][queryParam]',
     providers: [NGQP_RANGE_VALUE_ACCESSOR],
 })
 export class RangeControlValueAccessorDirective implements ControlValueAccessor {
diff --git a/projects/ngqp/core/src/lib/accessors/select-control-value-accessor.directive.ts b/projects/ngqp/core/src/lib/accessors/select-control-value-accessor.directive.ts
@@ -10,7 +10,7 @@ export const NGQP_SELECT_VALUE_ACCESSOR: StaticProvider = {
 
 /** @ignore */
 @Directive({
-    selector: 'select:not([multiple])[queryParamName]',
+    selector: 'select:not([multiple])[queryParamName],select:not([multiple])[queryParam]',
     providers: [NGQP_SELECT_VALUE_ACCESSOR],
 })
 export class SelectControlValueAccessorDirective<T> implements ControlValueAccessor {
diff --git a/projects/ngqp/core/src/lib/accessors/util.ts b/projects/ngqp/core/src/lib/accessors/util.ts
@@ -0,0 +1,53 @@
+import { ControlValueAccessor } from '@angular/forms';
+import { DefaultControlValueAccessorDirective } from './default-control-value-accessor.directive';
+import { NGQP_BUILT_IN_ACCESSORS } from './ngqp-accessors';
+
+/**
+ * This resembles the selectControlValueAccessor function from
+ *   https://github.com/angular/angular/blob/7.1.2/packages/forms/src/directives/shared.ts#L186
+ * We can't use it directly since it isn't exported in the public API, but let's hope choosing
+ * any accessor is good enough for our purposes.
+ *
+ * @internal
+ */
+export function selectValueAccessor(valueAccessors: ControlValueAccessor[]): ControlValueAccessor | null {
+    if (!valueAccessors || !Array.isArray(valueAccessors)) {
+        return null;
+    }
+
+    let defaultAccessor: ControlValueAccessor | null = null;
+    let builtInAccessor: ControlValueAccessor | null = null;
+    let customAccessor: ControlValueAccessor | null = null;
+
+    valueAccessors.forEach(valueAccessor => {
+        if (valueAccessor.constructor === DefaultControlValueAccessorDirective) {
+            defaultAccessor = valueAccessor;
+        } else if (NGQP_BUILT_IN_ACCESSORS.some(current => valueAccessor.constructor === current)) {
+            if (builtInAccessor !== null) {
+                throw new Error(`More than one built-in ControlValueAccessor matches`);
+            }
+
+            builtInAccessor = valueAccessor;
+        } else {
+            if (customAccessor !== null) {
+                throw new Error(`More than one custom ControlValueAccessor has been found on the form control`);
+            }
+
+            customAccessor = valueAccessor;
+        }
+    });
+
+    if (customAccessor !== null) {
+        return customAccessor;
+    }
+
+    if (builtInAccessor !== null) {
+        return builtInAccessor;
+    }
+
+    if (defaultAccessor !== null) {
+        return defaultAccessor;
+    }
+
+    throw new Error(`No matching ControlValueAccessor has been found for this form control`);
+}
diff --git a/projects/ngqp/core/src/lib/directives/directives.ts b/projects/ngqp/core/src/lib/directives/directives.ts
@@ -1,3 +1,4 @@
+export { QueryParamDirective } from './query-param.directive';
 export { QueryParamNameDirective } from './query-param-name.directive';
 export { QueryParamGroupDirective }  from './query-param-group.directive';
 export { ControlValueAccessorDirective } from './control-value-accessor.directive';
diff --git a/projects/ngqp/core/src/lib/directives/query-param-controller.interface.ts b/projects/ngqp/core/src/lib/directives/query-param-controller.interface.ts
@@ -0,0 +1,12 @@
+import { ControlValueAccessor } from '@angular/forms';
+
+/**
+ * Unified abstraction for {@link QueryParamNameDirective} and {@link QueryParamDirective}.
+ * Allows to process query params bound to the group as well as standalone query params.
+ *
+ * @internal
+ */
+export interface QueryParamController {
+    name: string;
+    valueAccessor: ControlValueAccessor;
+}
diff --git a/projects/ngqp/core/src/lib/directives/query-param-group.service.ts b/projects/ngqp/core/src/lib/directives/query-param-group.service.ts
@@ -18,7 +18,7 @@ import { Unpack } from '../types';
 import { QueryParamGroup } from '../model/query-param-group';
 import { QueryParam } from '../model/query-param';
 import { NGQP_ROUTER_ADAPTER, NGQP_ROUTER_OPTIONS, RouterAdapter, RouterOptions } from '../router-adapter/router-adapter.interface';
-import { QueryParamNameDirective } from './query-param-name.directive';
+import { QueryParamController } from './query-param-controller.interface';
 
 /** @internal */
 function isMultiQueryParam<T>(queryParam: QueryParam<T> | QueryParam<T[]>): queryParam is QueryParam<T[]> {
@@ -55,8 +55,8 @@ export class QueryParamGroupService implements OnDestroy {
     /** The {@link QueryParamGroup} to bind. */
     private queryParamGroup: QueryParamGroup;
 
-    /** List of {@link QueryParamNameDirective} directives registered to this service. */
-    private directives = new Map<string, QueryParamNameDirective[]>();
+    /** List of {@link QueryParamController} registered to this service. */
+    private directives = new Map<string, QueryParamController[]>();
 
     /**
      * Queue of navigation parameters
@@ -106,9 +106,9 @@ export class QueryParamGroupService implements OnDestroy {
     }
 
     /**
-     * Registers a {@link QueryParamNameDirective} directive.
+     * Registers a {@link QueryParamController}.
      */
-    public registerQueryParamDirective(directive: QueryParamNameDirective): void {
+    public registerQueryParamDirective(directive: QueryParamController): void {
         // Capture the name here, particularly for the queue below to avoid re-evaluating
         // it as it might change over time.
         const queryParamName = directive.name;
@@ -142,7 +142,7 @@ export class QueryParamGroupService implements OnDestroy {
     }
 
     /**
-     * Deregisters a {@link QueryParamNameDirective} directive by referencing its name.
+     * Deregisters a {@link QueryParamController} by referencing its name.
      */
     public deregisterQueryParamDirective(queryParamName: string): void {
         if (!queryParamName) {
diff --git a/projects/ngqp/core/src/lib/directives/query-param-name.directive.ts b/projects/ngqp/core/src/lib/directives/query-param-name.directive.ts
@@ -1,20 +1,20 @@
 import { Directive, Inject, Input, OnChanges, OnDestroy, Optional, Self, SimpleChanges } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { Subject } from 'rxjs';
-import { DefaultControlValueAccessorDirective, NGQP_BUILT_IN_ACCESSORS } from '../accessors/accessors';
 import { QueryParamGroupService } from './query-param-group.service';
+import { QueryParamController } from './query-param-controller.interface';
+import { selectValueAccessor } from '../accessors/util';
 
 /**
  * Binds a {@link QueryParam} to a DOM element.
  *
- * This directive accepts the name of a {@link QueryParam} inside its parent
- * {@link QueryParamGroup}. It binds this parameter to the host element,
- * which is required to have a [ControlValueAccessor]{@link https://angular.io/api/forms/ControlValueAccessor}.
+ * This directive accepts the name of a {@link QueryParam} inside its parent {@link QueryParamGroup}.
+ * It binds this parameter to the host element, which is required to have a [ControlValueAccessor]
+ * {@link https://angular.io/api/forms/ControlValueAccessor}.
  */
 @Directive({
     selector: '[queryParamName]',
 })
-export class QueryParamNameDirective implements OnChanges, OnDestroy {
+export class QueryParamNameDirective implements QueryParamController, OnChanges, OnDestroy {
 
     /**
      * The name of the {@link QueryParam} inside its parent {@link QueryParamGroup}.
@@ -34,7 +34,7 @@ export class QueryParamNameDirective implements OnChanges, OnDestroy {
             throw new Error(`No parent configuration found. Did you forget to add [queryParamGroup]?`);
         }
 
-        this.valueAccessor = this.selectValueAccessor(valueAccessors);
+        this.valueAccessor = selectValueAccessor(valueAccessors);
     }
 
     /** @ignore */
@@ -58,51 +58,4 @@ export class QueryParamNameDirective implements OnChanges, OnDestroy {
         }
     }
 
-    /**
-     * This resembles the selectControlValueAccessor function from
-     *   https://github.com/angular/angular/blob/7.1.2/packages/forms/src/directives/shared.ts#L186
-     * We can't use it directly since it isn't exported in the public API, but let's hope choosing
-     * any accessor is good enough for our purposes.
-     */
-    private selectValueAccessor(valueAccessors: ControlValueAccessor[]): ControlValueAccessor | null {
-        if (!valueAccessors || !Array.isArray(valueAccessors)) {
-            return null;
-        }
-
-        let defaultAccessor: ControlValueAccessor | null = null;
-        let builtInAccessor: ControlValueAccessor | null = null;
-        let customAccessor: ControlValueAccessor | null = null;
-        valueAccessors.forEach(valueAccessor => {
-            if (valueAccessor.constructor === DefaultControlValueAccessorDirective) {
-                defaultAccessor = valueAccessor;
-            } else if (NGQP_BUILT_IN_ACCESSORS.some(current => valueAccessor.constructor === current)) {
-                if (builtInAccessor !== null) {
-                    throw new Error(`More than one built-in ControlValueAccessor matches`);
-                }
-
-                builtInAccessor = valueAccessor;
-            } else {
-                if (customAccessor !== null) {
-                    throw new Error(`More than one custom ControlValueAccessor has been found on the form control`);
-                }
-
-                customAccessor = valueAccessor;
-            }
-        });
-
-        if (customAccessor !== null) {
-            return customAccessor;
-        }
-
-        if (builtInAccessor !== null) {
-            return builtInAccessor;
-        }
-
-        if (defaultAccessor !== null) {
-            return defaultAccessor;
-        }
-
-        throw new Error(`No matching ControlValueAccessor has been found for this form control`);
-    }
-
 }
diff --git a/projects/ngqp/core/src/lib/directives/query-param.directive.ts b/projects/ngqp/core/src/lib/directives/query-param.directive.ts
@@ -0,0 +1,65 @@
+import { Directive, Inject, Input, OnChanges, OnDestroy, Optional, Self, SimpleChanges } from '@angular/core';
+import { QueryParamGroupService } from './query-param-group.service';
+import { QueryParamController } from './query-param-controller.interface';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { selectValueAccessor } from '../accessors/util';
+import { QueryParam } from '../model/query-param';
+import { QueryParamGroup } from '../model/query-param-group';
+
+/**
+ * Binds a standalone {@link QueryParam} to a DOM element.
+ *
+ * This directive accepts a {@link QueryParam} without having outer {@link QueryParamGroup}.
+ * It binds this parameter to the host element, which is required to have a [ControlValueAccessor]
+ * {@link https://angular.io/api/forms/ControlValueAccessor}.
+ */
+@Directive({
+    selector: '[queryParam]',
+    providers: [QueryParamGroupService],
+})
+export class QueryParamDirective implements QueryParamController, OnChanges, OnDestroy  {
+
+    /**
+     * Reference to standalone {@link QueryParam} instance.
+     * Note that this does not refer to the [parameter name]{@link QueryParam#urlParam}.
+     */
+    @Input('queryParam')
+    public queryParam: QueryParam<any>;
+
+    /** @internal */
+    public readonly name = 'param';
+
+    /** @internal */
+    public valueAccessor: ControlValueAccessor | null = null;
+
+    constructor(
+        @Optional() private groupService: QueryParamGroupService,
+        @Optional() @Self() @Inject(NG_VALUE_ACCESSOR) valueAccessors: ControlValueAccessor[],
+    ) {
+        this.valueAccessor = selectValueAccessor(valueAccessors);
+    }
+
+    /** @ignore */
+    public ngOnChanges(changes: SimpleChanges): void {
+        const nameChange = changes['queryParam'];
+
+        if (nameChange) {
+            if (!nameChange.firstChange) {
+                throw new Error('Changing the QueryParam bound in standalone mode is currently not supported.');
+            }
+
+            if (nameChange.currentValue) {
+                this.groupService.setQueryParamGroup(new QueryParamGroup({[this.name]: nameChange.currentValue}));
+                this.groupService.registerQueryParamDirective(this);
+            }
+        }
+    }
+
+    /** @ignore */
+    public ngOnDestroy(): void {
+        if (this.groupService) {
+            this.groupService.deregisterQueryParamDirective(this.name);
+        }
+    }
+
+}
diff --git a/projects/ngqp/core/src/lib/query-param.module.ts b/projects/ngqp/core/src/lib/query-param.module.ts
@@ -1,5 +1,10 @@
 import { ModuleWithProviders, NgModule, Type } from '@angular/core';
-import { ControlValueAccessorDirective, QueryParamGroupDirective, QueryParamNameDirective } from './directives/directives';
+import {
+    ControlValueAccessorDirective,
+    QueryParamDirective,
+    QueryParamNameDirective,
+    QueryParamGroupDirective
+} from './directives/directives';
 import {
     CheckboxControlValueAccessorDirective,
     DefaultControlValueAccessorDirective,
@@ -20,6 +25,7 @@ import {
 
 /** @ignore */
 const DIRECTIVES: Type<any>[] = [
+    QueryParamDirective,
     QueryParamNameDirective,
     QueryParamGroupDirective,
     ControlValueAccessorDirective,
diff --git a/projects/ngqp/core/src/test/standalone-input-text.spec.ts b/projects/ngqp/core/src/test/standalone-input-text.spec.ts
