@coolon/angular-ui-powerups 0.0.23 → 0.0.25

package/src/lib/place/guards/place-route.guard.ts

@@ -0,0 +1,37 @@
+import { Injectable, Injector } from '@angular/core';
+import {
+  ActivatedRouteSnapshot,
+  CanActivate,
+  CanDeactivate,
+  Router,
+  RouterStateSnapshot,
+  UrlTree
+} from '@angular/router';
+import { Trace } from '@coolon/pectin';
+import { Klass } from '@coolon/typescript-utilities';
+import { Observable } from 'rxjs';
+import { PlaceComponent } from '../place-component';
+import { RouteParameterBindings } from '../route/route-parameter-bindings';
+import { RouteParameterSanitiser } from '../route/route-parameter-sanitiser';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PlaceRouteGuard implements CanActivate {
+
+  constructor(private router: Router, private injector: Injector) {
+  }
+
+  @Trace()
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+    const routeParameters = Klass.get(route.component).getMetadataList(RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY);
+    const sanitiser = new RouteParameterSanitiser(routeParameters, route, this.injector);
+    return sanitiser.sanitise().then(proceed => {
+      if (!proceed) {
+        sanitiser.redirect(this.router);
+      }
+      return proceed;
+    });
+  }
+
+}

package/{lib/place/index.d.ts → src/lib/place/index.ts}

@@ -1,6 +1,7 @@
 /**
  * @file Automatically generated by barrelsby.
  */
+
 export * from "./abstract-place-component";
 export * from "./place-component";
 export * from "./place.decorator";
@@ -8,9 +9,9 @@ export * from "./place.module";
 export * from "./place.service";
 export * from "./components/busy-overlay/busy-overlay.component";
 export * from "./components/empty-state/empty-state.component";
-export * from "./components/nav/nav.component";
 export * from "./components/place-outlet/place-outlet.component";
 export * from "./components/place-outlet/route-animations";
+export * from "./components/tabbed-place-navigation/tabbed-place-navigation.component";
 export * from "./guards/leave-place.guard";
 export * from "./guards/place-route.guard";
 export * from "./route/json-types";

package/src/lib/place/place-component.ts

@@ -0,0 +1,6 @@
+import { ValueModel } from '@coolon/pectin';
+
+export interface PlaceComponent {
+  titleModel:ValueModel<string>;
+  canDeactivate(): boolean | Promise<boolean>;
+}

package/src/lib/place/place.decorator.ts

@@ -0,0 +1,40 @@
+import { assert, Constructable } from '@coolon/pectin';
+import * as _ from 'lodash';
+import 'reflect-metadata';
+import { PlaceComponent } from './place-component';
+
+export function Place(options: Place.Options) {
+  return (target: Function) => {
+    Reflect.defineMetadata('place.options', options, target);
+  };
+}
+
+export namespace Place {
+  export interface Options {
+    path: string,
+    title: string,
+    order: number;
+    authenticate?: boolean // defaults to true
+    // childOf?: Constructable<PlaceComponent>
+  }
+
+  export class Descriptor {
+    readonly path: string;
+    readonly authenticate: boolean;
+    readonly title: string;
+    readonly order: number;
+
+    constructor(placeClass: Constructable<PlaceComponent>, options: Options) {
+      assert.notNil(options);
+      this.path = options.path;
+      this.title = options.title;
+      this.order = options.order;
+      this.authenticate = _.isNil(options.authenticate) || options.authenticate;
+    }
+  }
+
+  export function getDescriptor(klass: Constructable<PlaceComponent>): Descriptor {
+    const placeOptions = Reflect.getMetadata('place.options', klass);
+    return new Descriptor(klass, placeOptions);
+  }
+}

package/src/lib/place/place.module.ts

@@ -0,0 +1,44 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatProgressSpinnerModule } from '@angular/material';
+import { MatListModule } from '@angular/material/list';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterModule } from '@angular/router';
+import { BusyOverlayComponent } from './components/busy-overlay/busy-overlay.component';
+import { EmptyStateComponent } from './components/empty-state/empty-state.component';
+import { PlaceOutletComponent } from './components/place-outlet/place-outlet.component';
+import { TabbedPlaceNavigationComponent } from './components/tabbed-place-navigation/tabbed-place-navigation.component';
+import { PlaceService } from './place.service';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    BrowserAnimationsModule,
+    MatProgressSpinnerModule,
+    RouterModule,
+    MatTabsModule,
+    MatListModule,
+    MatTooltipModule
+  ],
+  declarations: [
+    EmptyStateComponent,
+    BusyOverlayComponent,
+    PlaceOutletComponent,
+    TabbedPlaceNavigationComponent
+  ],
+  entryComponents: [BusyOverlayComponent],
+  exports: [
+    BusyOverlayComponent,
+    PlaceOutletComponent,
+    EmptyStateComponent,
+    TabbedPlaceNavigationComponent
+  ],
+  providers: [
+    PlaceService
+  ]
+})
+export class PlaceModule {
+
+}

package/src/lib/place/place.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { PlaceService } from './place.service';
+
+describe('PlaceService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: PlaceService = TestBed.get(PlaceService);
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/place/place.service.ts

@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { MutableListModel, Trace } from '@coolon/pectin';
+import { PlaceComponent } from './place-component';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PlaceService {
+
+  private _activePlaces = new MutableListModel<PlaceComponent>();
+
+  constructor() {
+  }
+
+  get activePlaces() {
+    return this._activePlaces.readonly;
+  }
+
+  @Trace()
+  onActivate(place: PlaceComponent) {
+    this._activePlaces.push(place);
+  }
+
+  @Trace()
+  onDeactivate(place: PlaceComponent) {
+    this._activePlaces.remove(place);
+  }
+
+}

package/src/lib/place/route/json-types.ts

@@ -0,0 +1,5 @@
+export type JsonPrimitive = boolean | number | string;
+export type AnyJson =  JsonPrimitive | null | JsonArray | JsonMap;
+export interface JsonArray extends Array<AnyJson> {}
+export interface JsonMap {  [key: string]: AnyJson; }
+

package/src/lib/place/route/parameter-decorators.ts

@@ -0,0 +1,99 @@
+import { assert, Constructable, UseDelegate } from '@coolon/pectin';
+import { Klass, Opts } from '@coolon/typescript-utilities';
+import { ParameterDefinition } from './parameter-definition.class';
+import { ParameterSanitiser } from './parameter-sanitiser';
+import { ParameterType } from './parameter-type';
+import { RouteParameterBindings } from './route-parameter-bindings';
+
+export interface ParameterOptions<T> {
+  as?: string;
+  sanitiser?: Constructable<ParameterSanitiser<T>>;
+}
+
+export interface ListParameterOptions<T> {
+  as?: string;
+  listSanitiser?: Constructable<ParameterSanitiser<T[]>>;
+}
+
+export function RouteId<T extends string | number>(type: ParameterType<T>, options?: ParameterOptions<T>): PropertyDecorator {
+  // assert.isTruthy(type.isValid());
+  return (prototype: Object, propertyKey: string | symbol) => {
+    const param = createDefinition(propertyKey, type, options, true);
+    Klass.get(prototype).addToOwnMetadataList(RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY, param);
+    UseDelegate()(prototype, propertyKey);
+  };
+}
+
+/**
+ * @deprecated use RouteParameter instead.
+ * @param type
+ * @param options
+ */
+export function QueryParameter<T>(type: ParameterType<T>, options?: ParameterOptions<T>): PropertyDecorator {
+  return (prototype: Object, propertyKey: string | symbol) => {
+    const param = createDefinition(propertyKey, type, options, false);
+    Klass.get(prototype).addToOwnMetadataList(RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY, param);
+    UseDelegate()(prototype, propertyKey);
+  };
+}
+
+export function RouteParameter<T>(type: ParameterType<T>, options?: ParameterOptions<T>): PropertyDecorator {
+  // assert.isTruthy(type.isValid());
+  return (prototype: Object, propertyKey: string | symbol) => {
+    const param = createDefinition(propertyKey, type, options, false);
+    Klass.get(prototype).addToOwnMetadataList(RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY, param);
+    UseDelegate()(prototype, propertyKey);
+  };
+}
+
+/**
+ * @deprecated use RouteParameterList instead
+ * @param elementType
+ * @param options
+ */
+export function QueryParameterList<E>(elementType: ParameterType<E>, options?: ListParameterOptions<E>): PropertyDecorator {
+  // assert.isTruthy(type.isValid());
+  return (prototype: Object, propertyKey: string | symbol) => {
+    const param = createArrayDefinition(propertyKey, elementType, options);
+    Klass.get(prototype).addToOwnMetadataList(RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY, param);
+    UseDelegate()(prototype, propertyKey);
+  };
+}
+
+export function RouteParameterList<E>(elementType: ParameterType<E>, options?: ListParameterOptions<E>): PropertyDecorator {
+  // assert.isTruthy(type.isValid());
+  return (prototype: Object, propertyKey: string | symbol) => {
+    const param = createArrayDefinition(propertyKey, elementType, options);
+    Klass.get(prototype).addToOwnMetadataList(RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY, param);
+    UseDelegate()(prototype, propertyKey);
+  };
+}
+
+function createDefinition<T>(propertyName: symbol | string, type: ParameterType<T>, options: ParameterOptions<T>, routeId: boolean) {
+  const opts = Opts.get(options);
+  const propertyNameAsString = assert.notNil(propertyName).toString();
+  const def: ParameterDefinition<T> = {
+    name: opts.getOptional('as', propertyNameAsString),
+    propertyName: propertyNameAsString,
+    type: assert.notNil(type),
+    sanitiser: opts.getOptional('sanitiser', null),
+    isRouteId: routeId,
+    isArray: false
+  };
+  return def;
+}
+
+function createArrayDefinition<T>(propertyName: symbol | string, type: ParameterType<T>, options: ListParameterOptions<T>) {
+  const opts = Opts.get(options);
+  const propertyNameAsString = assert.notNil(propertyName).toString();
+
+  const def: ParameterDefinition<T, T[]> = {
+    name: opts.getOptional('as', propertyNameAsString),
+    propertyName: propertyNameAsString,
+    type: assert.notNil(type),
+    sanitiser: opts.getOptional('listSanitiser', null),
+    isRouteId: false,
+    isArray: true
+  };
+  return def;
+}

package/src/lib/place/route/parameter-definition.class.ts

@@ -0,0 +1,12 @@
+import { Constructable } from '@coolon/pectin';
+import { ParameterSanitiser } from './parameter-sanitiser';
+import { ParameterType } from './parameter-type';
+
+export interface ParameterDefinition<E,S=E> {
+  readonly name: string;
+  readonly propertyName: string;
+  readonly type: ParameterType<E>;
+  readonly sanitiser: Constructable<ParameterSanitiser<S>>;
+  readonly isRouteId: boolean;
+  readonly isArray: boolean;
+}

package/{lib/place/route/parameter-sanitiser.d.ts → src/lib/place/route/parameter-sanitiser.ts}

@@ -1,3 +1,3 @@
 export interface ParameterSanitiser<T> {
-    sanitise(value: T): T | Promise<T>;
+   sanitise(value: T): T | Promise<T>;
 }

package/src/lib/place/route/parameter-type.ts

@@ -0,0 +1,31 @@
+export interface ParameterType<T> {
+  format(value: T): string;
+
+  parse(value: string): T;
+}
+
+export namespace ParameterType {
+
+  class StringType implements ParameterType<string> {
+    format(value: string): string {
+      return value;
+    }
+
+    parse(value: string): string {
+      return value;
+    }
+  }
+
+  class NumberType implements ParameterType<number> {
+    format(value: number): string {
+      return `${value}`;
+    }
+
+    parse(value: string): number {
+      return +value;
+    }
+  }
+
+  export const STRING = new StringType();
+  export const NUMBER = new NumberType();
+}

package/src/lib/place/route/route-parameter-bindings.ts

@@ -0,0 +1,140 @@
+import { ActivatedRoute, Router } from '@angular/router';
+import {
+  Binding,
+  Dsl,
+  GarbageCollector, IMutableHasValue,
+  MutableValueModel,
+  Trace,
+  TransactionObserver
+} from '@coolon/pectin';
+import { Klass } from '@coolon/typescript-utilities';
+import { ParameterDefinition } from './parameter-definition.class';
+
+interface ResolvedParameter<T> {
+  parameterDef: ParameterDefinition<T>;
+  resolvedValue: T;
+}
+
+class ResolvedParameters {
+  constructor(readonly parameters: ResolvedParameter<any>[]) {
+  }
+
+  get<T>(parameter: ParameterDefinition<T>): T {
+    const resolved = this.parameters.find(p => p.parameterDef === parameter);
+    return resolved ? resolved.resolvedValue : null;
+  }
+
+  replace<T>(parameter: ParameterDefinition<T>, value: T): ResolvedParameters {
+    return new ResolvedParameters(this.parameters.filter(p => p.parameterDef !== parameter).concat({
+      parameterDef: parameter,
+      resolvedValue: value
+    }));
+  }
+
+  @Trace()
+  protected getFormattedRouteId() {
+    const routeIdParam = this.getRouteIdParam();
+    return routeIdParam ? routeIdParam.parameterDef.type.format(routeIdParam.resolvedValue) : null;
+  }
+
+  private getRouteIdParam() {
+    return this.parameters.find(p => p.parameterDef.isRouteId);
+  }
+
+  @Trace()
+  protected getFormattedParameters() {
+    const params = {};
+    const routeIdParam = this.parameters.filter(p => !p.parameterDef.isRouteId).forEach(p => {
+      params[p.parameterDef.name] = p.parameterDef.type.format(p.resolvedValue);
+    });
+    return params;
+  }
+
+  hasRouteId() {
+    return !!this.getRouteIdParam();
+  }
+
+  @Trace()
+  redirect(previous: ResolvedParameters, router: Router, activatedRoute: ActivatedRoute) {
+    const routeId = this.getFormattedRouteId();
+    const relativePath = !!previous.hasRouteId() ? '..' : '.';
+    const path = routeId ? [relativePath, routeId, this.getFormattedParameters()] : [relativePath, this.getFormattedParameters()];
+    router.navigate(path, {
+      relativeTo: activatedRoute
+    });
+  }
+}
+
+export class RouteParameterBindings extends GarbageCollector {
+
+  public readonly _incomingRouteChange = new MutableValueModel<boolean>(false);
+
+  private txo: TransactionObserver;
+
+  private readonly resolvedParameters = new MutableValueModel<ResolvedParameters>();
+
+  constructor(private readonly component: any, private readonly router: Router, private readonly activatedRoute: ActivatedRoute) {
+    super();
+    const { chain, valueOf, before, when, after, observe } = Dsl.disposeWith(this);
+    this.txo = new TransactionObserver();//.onEvent(e => console.log(e.toString()));
+
+    const routeParameterDefs: ParameterDefinition<any>[] = Klass.get(component).getMetadataList(RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY);
+    routeParameterDefs.forEach(parameter => this.installBinding(parameter));
+
+    const incomingResolvedRouteParameters = observe.valuesFrom(activatedRoute.paramMap)
+      .last()
+      .map(params => {
+        const result: ResolvedParameter<any>[] = [];
+        routeParameterDefs.forEach(parameterDef => {
+          let resolvedValue;
+          if (parameterDef.isArray) {
+            resolvedValue = params.getAll(parameterDef.name).map(v => parameterDef.type.parse(v));
+          } else {
+            resolvedValue = parameterDef.type.parse(params.get(parameterDef.name));
+          }
+          result.push({ parameterDef: parameterDef, resolvedValue: resolvedValue });
+
+        });
+        return new ResolvedParameters(result);
+      });
+
+    incomingResolvedRouteParameters.subscribe(resolvedParameters => {
+      this._incomingRouteChange.value = true;
+      this.resolvedParameters.value = resolvedParameters;
+      this._incomingRouteChange.value = false;
+    });
+
+    when.valueOf(this.resolvedParameters).changes((params, previous) => {
+      params.redirect(previous, router, activatedRoute);
+    }, { unless: this.incomingRouteChange });
+
+    this.txo.observe('incomingResolvedRouteParameters', incomingResolvedRouteParameters);
+    this.txo.observe('this.routeIsChanging', this.incomingRouteChange);
+  }
+
+  get incomingRouteChange() {
+    return this._incomingRouteChange.readonly;
+  }
+
+  protected installBinding<T>(parameter: ParameterDefinition<T>) {
+    const model = this.getModelFor(parameter);
+    // this.txo.observe(parameter.propertyName, model);
+    this.registerDisposable(new Binding(this.resolvedParameters, model, {
+      toRight(parameters: ResolvedParameters): T {
+        return parameters.get(parameter);
+      },
+      toLeft(value: T, currentParameters?: ResolvedParameters): ResolvedParameters {
+        return currentParameters.replace(parameter, value);
+      }
+    }));
+  }
+
+
+  private getModelFor<T>(parameter: ParameterDefinition<T>): IMutableHasValue<T> {
+    return this.component[parameter.propertyName];
+  }
+}
+
+export namespace RouteParameterBindings {
+  export const ROUTE_PARAMETER_LIST_KEY = Symbol('place:route:parameters');
+}

package/src/lib/place/route/route-parameter-sanitiser.ts

@@ -0,0 +1,135 @@
+import { Injector } from '@angular/core';
+import { ActivatedRouteSnapshot, Router } from '@angular/router';
+import { assert } from '@coolon/pectin';
+import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
+import { ParameterDefinition } from './parameter-definition.class';
+import { ParameterSanitiser } from './parameter-sanitiser';
+import * as _ from 'lodash';
+
+export abstract class Sanitiser<T, S> {
+
+  private initialValue: S;
+  private _sanitisedValue: S;
+
+  constructor(readonly parameterDef: ParameterDefinition<T>, readonly snapshot:ActivatedRouteSnapshot, readonly sanitiser: ParameterSanitiser<S>) {
+  }
+
+  isRouteId(): boolean {
+    return this.parameterDef.isRouteId;
+  }
+
+  get valueChanged():boolean {
+    return !_.isNil(this.initialValue) && this.hasChanged(this.initialValue, this.sanitisedValue);
+  }
+
+  get sanitisedValue():S {
+    return this._sanitisedValue;
+  }
+
+  protected abstract readFrom(snapshot: ActivatedRouteSnapshot): S;
+  protected abstract hasChanged(initialValue:S, sanitisedValue:S): boolean;
+
+  abstract injectRouteParam(dest: {});
+
+  async sanitize(): Promise<boolean> {
+    if (this.sanitiser) {
+      this.initialValue = this.readFrom(this.snapshot);
+      this._sanitisedValue = await this.sanitiser.sanitise(this.initialValue);
+      if (this.initialValue !== this._sanitisedValue) {
+        return false;
+      }
+    }
+    return true;
+  }
+}
+
+
+export class RouteParameterSanitiser {
+
+  private readonly routeIdSanitiser: Sanitiser<any, any>;
+  private readonly parameterSanitisers: Sanitiser<any, any>[] = [];
+
+  constructor(readonly parameterDefs: ParameterDefinition<any>[], readonly snapshot: ActivatedRouteSnapshot, readonly injector: Injector) {
+    const sanitisers = parameterDefs.map(def => {
+      return def.isArray ?
+        new Sanitiser.Array(def, snapshot, this.getSanitiser(def)) :
+        new Sanitiser.Value(def, snapshot, this.getSanitiser(def));
+    });
+    this.routeIdSanitiser = sanitisers.find(p => p.isRouteId());
+    this.parameterSanitisers = sanitisers.filter(p => !p.isRouteId());
+  }
+
+  async sanitise(): Promise<boolean> {
+    if (this.routeIdSanitiser) {
+      await this.routeIdSanitiser.sanitize();
+      if (this.routeIdSanitiser.valueChanged) {
+        // if the route id isn't ok we redirect immediately as the query params may need to be sanitised in the
+        // context of the route id.
+        return false;
+      }
+    }
+    for (const sanitiser of this.parameterSanitisers) {
+        await sanitiser.sanitize();
+    }
+    return !this.parameterSanitisers.find(s => s.valueChanged);
+  }
+
+  redirect(router: Router) {
+    assert.isTruthy(this.parameterSanitisers.length !== 0);
+    if (this.routeIdSanitiser.valueChanged) {
+      return router.navigate(['..', this.routeIdSanitiser.sanitisedValue]);
+    } else {
+      const routeParams = {};
+      this.parameterSanitisers.forEach(s => s.injectRouteParam(routeParams));
+      return router.navigate(['.', routeParams]);
+    }
+  }
+
+  @Memoize()
+  private getSanitiser<T, S>(def: ParameterDefinition<T, S>): ParameterSanitiser<S> {
+    return def.sanitiser ? this.injector.get<ParameterSanitiser<S>>(def.sanitiser, new def.sanitiser()) : null;
+  }
+}
+
+export namespace Sanitiser {
+
+  export class Value<T> extends Sanitiser<T, T> {
+
+    readFrom(snapshot: ActivatedRouteSnapshot): T {
+      const rawValue = this.parameterDef.isRouteId ?
+        snapshot.paramMap.get(this.parameterDef.name) :
+        snapshot.queryParamMap.get(this.parameterDef.name);
+
+      return this.parameterDef.type.parse(rawValue);
+    }
+
+    protected hasChanged(initialValue: T, sanitisedValue: T): boolean {
+      return initialValue !== sanitisedValue;
+    }
+
+    injectRouteParam(dest: {}) {
+      dest[this.parameterDef.name] = this.parameterDef.type.format(this.sanitisedValue);
+    }
+
+  }
+
+  export class Array<T> extends Sanitiser<T, T[]> {
+
+    readFrom(snapshot: ActivatedRouteSnapshot): T[] {
+      const rawValues = snapshot.queryParamMap.getAll(this.parameterDef.name);
+      return rawValues.map(value => this.parameterDef.type.parse(value));
+    }
+
+    protected hasChanged(initialValue: T[], sanitisedValue: T[]): boolean {
+      return initialValue !== sanitisedValue;
+    }
+
+
+    injectRouteParam(dest: {}) {
+      dest[this.parameterDef.name] = this.sanitisedValue.map(v => this.parameterDef.type.format(v));
+    }
+
+
+  }
+
+}

package/src/test-setup.ts

@@ -0,0 +1 @@
+import 'jest-preset-angular';

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "types": ["node", "jest"]
+  },
+  "include": ["**/*.ts"]
+}

package/tsconfig.lib.json

@@ -0,0 +1,20 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": ["dom", "es2018"]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": ["src/test.ts", "**/*.spec.ts"]
+}