mirror of https://github.com/Squidex/squidex.git
Sebastian Stehle
6 years ago
committed by
GitHub
GitHub
59 changed files with 1059 additions and 390 deletions
@ -0,0 +1,337 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import { NavigationExtras, Params, Router } from '@angular/router'; |
|||
import { LocalStoreService, MathHelper, Pager } from '@app/shared'; |
|||
import { BehaviorSubject } from 'rxjs'; |
|||
import { IMock, It, Mock, Times } from 'typemoq'; |
|||
import { State } from './../../state'; |
|||
import { PagerSynchronizer, Router2State, StringKeysSynchronizer, StringSynchronizer } from './router-2-state'; |
|||
|
|||
describe('Router2State', () => { |
|||
describe('Strings', () => { |
|||
const synchronizer = new StringSynchronizer('key'); |
|||
|
|||
it('should write string to route', () => { |
|||
const params: Params = {}; |
|||
|
|||
const value = 'my-string'; |
|||
|
|||
synchronizer.writeValue(value, params); |
|||
|
|||
expect(params['key']).toEqual('my-string'); |
|||
}); |
|||
|
|||
it('should not write value to route when not a string', () => { |
|||
const params: Params = {}; |
|||
|
|||
const value = 123; |
|||
|
|||
synchronizer.writeValue(value, params); |
|||
|
|||
expect(params).toEqual({}); |
|||
}); |
|||
|
|||
it('should get string from route', () => { |
|||
const params: Params = { |
|||
key: 'my-string' |
|||
}; |
|||
|
|||
const value = synchronizer.getValue(params); |
|||
|
|||
expect(value).toEqual('my-string'); |
|||
}); |
|||
}); |
|||
|
|||
describe('StringKeys', () => { |
|||
const synchronizer = new StringKeysSynchronizer('key'); |
|||
|
|||
it('should write object keys to route', () => { |
|||
const params: Params = {}; |
|||
|
|||
const value = { |
|||
flag1: true, |
|||
flag2: false |
|||
}; |
|||
|
|||
synchronizer.writeValue(value, params); |
|||
|
|||
expect(params['key']).toEqual('flag1,flag2'); |
|||
}); |
|||
|
|||
it('should write empty object to route', () => { |
|||
const params: Params = {}; |
|||
|
|||
const value = {}; |
|||
|
|||
synchronizer.writeValue(value, params); |
|||
|
|||
expect(params['key']).toEqual(''); |
|||
}); |
|||
|
|||
it('should not write value to route when not an object', () => { |
|||
const params: Params = {}; |
|||
|
|||
const value = 123; |
|||
|
|||
synchronizer.writeValue(value, params); |
|||
|
|||
expect(params).toEqual({}); |
|||
}); |
|||
|
|||
it('should get object from route', () => { |
|||
const params: Params = { key: 'flag1,flag2' }; |
|||
|
|||
const value = synchronizer.getValue(params); |
|||
|
|||
expect(value).toEqual({ flag1: true, flag2: true }); |
|||
}); |
|||
|
|||
it('should get object with empty keys from route', () => { |
|||
const params: Params = { key: 'flag1,,,flag2' }; |
|||
|
|||
const value = synchronizer.getValue(params); |
|||
|
|||
expect(value).toEqual({ flag1: true, flag2: true }); |
|||
}); |
|||
}); |
|||
|
|||
describe('Pager', () => { |
|||
let synchronizer: PagerSynchronizer; |
|||
let localStore: IMock<LocalStoreService>; |
|||
|
|||
beforeEach(() => { |
|||
localStore = Mock.ofType<LocalStoreService>(); |
|||
|
|||
synchronizer = new PagerSynchronizer(localStore.object, 'contents', 30); |
|||
}); |
|||
|
|||
it('should write pager to route and local store', () => { |
|||
const params: Params = {}; |
|||
|
|||
const value = new Pager(0, 10, 20, true); |
|||
|
|||
synchronizer.writeValue(value, params); |
|||
|
|||
expect(params['page']).toEqual('10'); |
|||
expect(params['take']).toEqual('20'); |
|||
|
|||
localStore.verify(x => x.setInt('contents.pageSize', 20), Times.once()); |
|||
}); |
|||
|
|||
it('should not write page if zero', () => { |
|||
const params: Params = {}; |
|||
|
|||
const value = new Pager(0, 0, 20, true); |
|||
|
|||
synchronizer.writeValue(value, params); |
|||
|
|||
expect(params['page']).toBeUndefined(); |
|||
expect(params['take']).toEqual('20'); |
|||
|
|||
localStore.verify(x => x.setInt('contents.pageSize', 20), Times.once()); |
|||
}); |
|||
|
|||
it('should not write value to route when not pager', () => { |
|||
const params: Params = {}; |
|||
|
|||
const value = 123; |
|||
|
|||
synchronizer.writeValue(value, params); |
|||
|
|||
expect(params).toEqual({}); |
|||
|
|||
localStore.verify(x => x.setInt('contents.pageSize', 20), Times.never()); |
|||
}); |
|||
|
|||
it('should not write value to route when null', () => { |
|||
const params: Params = {}; |
|||
|
|||
const value = null; |
|||
|
|||
synchronizer.writeValue(value, params); |
|||
|
|||
expect(params).toEqual({}); |
|||
localStore.verify(x => x.setInt('contents.pageSize', 20), Times.never()); |
|||
}); |
|||
|
|||
it('should get page and size from route', () => { |
|||
const params: Params = { page: '10', take: '40' }; |
|||
|
|||
const value = synchronizer.getValue(params); |
|||
|
|||
expect(value).toEqual(new Pager(0, 10, 40, true)); |
|||
}); |
|||
|
|||
it('should get page size from local store as fallback', () => { |
|||
localStore.setup(x => x.getInt('contents.pageSize', It.isAny())) |
|||
.returns(() => 40); |
|||
|
|||
const params: Params = { page: '10' }; |
|||
|
|||
const value = synchronizer.getValue(params); |
|||
|
|||
expect(value).toEqual(new Pager(0, 10, 40, true)); |
|||
}); |
|||
|
|||
it('should get page size from default if local store is invalid', () => { |
|||
localStore.setup(x => x.getInt('contents.pageSize', It.isAny())) |
|||
.returns(() => -5); |
|||
|
|||
const params: Params = { page: '10' }; |
|||
|
|||
const value = synchronizer.getValue(params); |
|||
|
|||
expect(value).toEqual(new Pager(0, 10, 30, true)); |
|||
}); |
|||
|
|||
it('should get page size from default as last fallback', () => { |
|||
const params: Params = { page: '10' }; |
|||
|
|||
const value = synchronizer.getValue(params); |
|||
|
|||
expect(value).toEqual(new Pager(0, 10, 30, true)); |
|||
}); |
|||
|
|||
it('should fix page number if invalid', () => { |
|||
const params: Params = { page: '-10' }; |
|||
|
|||
const value = synchronizer.getValue(params); |
|||
|
|||
expect(value).toEqual(new Pager(0, 0, 30, true)); |
|||
}); |
|||
}); |
|||
|
|||
describe('Implementation', () => { |
|||
let localStore: IMock<LocalStoreService>; |
|||
let routerQueryParams: BehaviorSubject<Params>; |
|||
let routeActivated: any; |
|||
let router: IMock<Router>; |
|||
let router2State: Router2State; |
|||
let state: State<any>; |
|||
let invoked = 0; |
|||
|
|||
beforeEach(() => { |
|||
localStore = Mock.ofType<LocalStoreService>(); |
|||
|
|||
router = Mock.ofType<Router>(); |
|||
|
|||
state = new State<any>({}); |
|||
|
|||
routerQueryParams = new BehaviorSubject<Params>({}); |
|||
routeActivated = { queryParams: routerQueryParams, id: MathHelper.guid() }; |
|||
router2State = new Router2State(routeActivated, router.object, localStore.object); |
|||
|
|||
router2State.mapTo(state) |
|||
.keep('keep') |
|||
.withString('state1', 'key1') |
|||
.withString('state2', 'key2') |
|||
.whenSynced(() => { invoked++; }) |
|||
.build(); |
|||
|
|||
invoked = 0; |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
router2State.ngOnDestroy(); |
|||
}); |
|||
|
|||
it('should unsubscribe from route and state', () => { |
|||
router2State.ngOnDestroy(); |
|||
|
|||
expect(state.changes['observers'].length).toBe(0); |
|||
expect(routeActivated.queryParams.observers.length).toBe(0); |
|||
}); |
|||
|
|||
it('Should sync from route', () => { |
|||
routerQueryParams.next({ |
|||
key1: 'hello', |
|||
key2: 'squidex' |
|||
}); |
|||
|
|||
expect(state.snapshot.state1).toEqual('hello'); |
|||
expect(state.snapshot.state2).toEqual('squidex'); |
|||
}); |
|||
|
|||
it('Should invoke callback after sync from route', () => { |
|||
routerQueryParams.next({ |
|||
key1: 'hello', |
|||
key2: 'squidex' |
|||
}); |
|||
|
|||
expect(invoked).toEqual(1); |
|||
}); |
|||
|
|||
it('Should not sync again when nothing changed', () => { |
|||
routerQueryParams.next({ |
|||
key1: 'hello', |
|||
key2: 'squidex' |
|||
}); |
|||
|
|||
routerQueryParams.next({ |
|||
key1: 'hello', |
|||
key2: 'squidex' |
|||
}); |
|||
|
|||
expect(invoked).toEqual(1); |
|||
}); |
|||
|
|||
it('Should sync again when new query changed', () => { |
|||
routerQueryParams.next({ |
|||
key1: 'hello', |
|||
key2: 'squidex' |
|||
}); |
|||
|
|||
routerQueryParams.next({ |
|||
key1: 'hello', |
|||
key2: 'squidex', |
|||
key3: '!' |
|||
}); |
|||
|
|||
expect(invoked).toEqual(2); |
|||
}); |
|||
|
|||
it('Should reset other values when synced from route', () => { |
|||
state.next({ other: 123 }); |
|||
|
|||
routerQueryParams.next({ |
|||
key1: 'hello', |
|||
key2: 'squidex' |
|||
}); |
|||
|
|||
expect(state.snapshot.other).toBeUndefined(); |
|||
}); |
|||
|
|||
it('Should keep configued values when synced from route', () => { |
|||
state.next({ keep: 123 }); |
|||
|
|||
routerQueryParams.next({ |
|||
key1: 'hello', |
|||
key2: 'squidex' |
|||
}); |
|||
|
|||
expect(state.snapshot.keep).toBe(123); |
|||
}); |
|||
|
|||
it('Should sync from state', () => { |
|||
let routeExtras: NavigationExtras; |
|||
|
|||
router.setup(x => x.navigate([], It.isAny())) |
|||
.callback((_, extras) => { routeExtras = extras; }); |
|||
|
|||
state.next({ |
|||
state1: 'hello', |
|||
state2: 'squidex' |
|||
}); |
|||
|
|||
expect(routeExtras!.relativeTo).toBeDefined(); |
|||
expect(routeExtras!.replaceUrl).toBeTrue(); |
|||
expect(routeExtras!.queryParamsHandling).toBe('merge'); |
|||
expect(routeExtras!.queryParams).toEqual({ key1: 'hello', key2: 'squidex' }); |
|||
}); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,299 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
// tslint:disable: readonly-array
|
|||
|
|||
import { Injectable, OnDestroy } from '@angular/core'; |
|||
import { ActivatedRoute, Params, Router } from '@angular/router'; |
|||
import { LocalStoreService, Pager, Types } from '@app/framework/internal'; |
|||
import { State } from '@app/framework/state'; |
|||
import { Subscription } from 'rxjs'; |
|||
|
|||
export interface RouteSynchronizer { |
|||
getValue(params: Params): any; |
|||
|
|||
writeValue(state: any, params: Params): void; |
|||
} |
|||
|
|||
export class PagerSynchronizer implements RouteSynchronizer { |
|||
constructor( |
|||
private readonly localStore: LocalStoreService, |
|||
private readonly storeName: string, |
|||
private readonly defaultSize: number |
|||
) { |
|||
} |
|||
|
|||
public getValue(params: Params) { |
|||
let pageSize = 0; |
|||
|
|||
const pageSizeValue = params['take']; |
|||
|
|||
if (Types.isString(pageSizeValue)) { |
|||
pageSize = parseInt(pageSizeValue, 10); |
|||
} |
|||
|
|||
if (pageSize <= 0 || pageSize > 100 || isNaN(pageSize)) { |
|||
pageSize = this.localStore.getInt(`${this.storeName}.pageSize`, this.defaultSize); |
|||
} |
|||
|
|||
if (pageSize <= 0 || pageSize > 100 || isNaN(pageSize)) { |
|||
pageSize = this.defaultSize; |
|||
} |
|||
|
|||
let page = parseInt(params['page'], 10); |
|||
|
|||
if (page <= 0 || isNaN(page)) { |
|||
page = 0; |
|||
} |
|||
|
|||
return new Pager(0, page, pageSize, true); |
|||
} |
|||
|
|||
public writeValue(state: any, params: Params) { |
|||
if (Types.is(state, Pager)) { |
|||
if (state.page > 0) { |
|||
params['page'] = state.page.toString(); |
|||
} |
|||
|
|||
if (state.pageSize > 0) { |
|||
params['take'] = state.pageSize.toString(); |
|||
|
|||
this.localStore.setInt(`${this.storeName}.pageSize`, state.pageSize); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
export class StringSynchronizer implements RouteSynchronizer { |
|||
constructor( |
|||
private readonly name: string |
|||
) { |
|||
} |
|||
|
|||
public getValue(params: Params) { |
|||
const value = params[this.name]; |
|||
|
|||
return value; |
|||
} |
|||
|
|||
public writeValue(state: any, params: Params) { |
|||
if (Types.isString(state)) { |
|||
params[this.name] = state; |
|||
} |
|||
} |
|||
} |
|||
|
|||
export class StringKeysSynchronizer implements RouteSynchronizer { |
|||
constructor( |
|||
private readonly name: string |
|||
) { |
|||
} |
|||
|
|||
public getValue(params: Params) { |
|||
const value = params[this.name]; |
|||
|
|||
const result: { [key: string]: boolean } = {}; |
|||
|
|||
if (Types.isString(value)) { |
|||
for (const item of value.split(',')) { |
|||
if (item.length > 0) { |
|||
result[item] = true; |
|||
} |
|||
} |
|||
} |
|||
|
|||
return result; |
|||
} |
|||
|
|||
public writeValue(state: any, params: Params) { |
|||
if (Types.isObject(state)) { |
|||
const value = Object.keys(state).join(','); |
|||
|
|||
params[this.name] = value; |
|||
} |
|||
} |
|||
} |
|||
|
|||
export interface StateSynchronizer { |
|||
mapTo<T extends object>(state: State<T>): StateSynchronizerMap<T>; |
|||
} |
|||
|
|||
export interface StateSynchronizerMap<T> { |
|||
keep(key: keyof T & string): this; |
|||
|
|||
withString(key: keyof T & string, urlName: string): this; |
|||
|
|||
withStrings(key: keyof T & string, urlName: string): this; |
|||
|
|||
withPager(key: keyof T & string, storeName: string, defaultSize: number): this; |
|||
|
|||
whenSynced(action: () => void): this; |
|||
|
|||
withSynchronizer(key: keyof T & string, synchronizer: RouteSynchronizer): this; |
|||
|
|||
build(): void; |
|||
} |
|||
|
|||
@Injectable() |
|||
export class Router2State implements OnDestroy, StateSynchronizer { |
|||
private mapper: Router2StateMap<any>; |
|||
|
|||
constructor( |
|||
private readonly route: ActivatedRoute, |
|||
private readonly router: Router, |
|||
private readonly localStore: LocalStoreService |
|||
) { |
|||
} |
|||
|
|||
public ngOnDestroy() { |
|||
this.mapper?.ngOnDestroy(); |
|||
} |
|||
|
|||
public mapTo<T extends object>(state: State<T>): Router2StateMap<T> { |
|||
this.mapper?.ngOnDestroy(); |
|||
this.mapper = this.mapper || new Router2StateMap<T>(state, this.route, this.router, this.localStore); |
|||
|
|||
return this.mapper; |
|||
} |
|||
} |
|||
|
|||
export class Router2StateMap<T extends object> implements OnDestroy, StateSynchronizerMap<T> { |
|||
private readonly syncs: { [field: string]: { synchronizer: RouteSynchronizer, value: any } } = {}; |
|||
private readonly keysToKeep: string[] = []; |
|||
private syncDone: (() => void)[] = []; |
|||
private lastSyncedParams: Params | undefined; |
|||
private subscriptionChanges: Subscription; |
|||
private subscriptionQueryParams: Subscription; |
|||
|
|||
constructor( |
|||
private readonly state: State<T>, |
|||
private readonly route: ActivatedRoute, |
|||
private readonly router: Router, |
|||
private readonly localStore: LocalStoreService |
|||
) { |
|||
} |
|||
|
|||
public build() { |
|||
this.subscriptionQueryParams = |
|||
this.route.queryParams |
|||
.subscribe(q => this.syncFromRoute(q)); |
|||
|
|||
this.subscriptionChanges = |
|||
this.state.changes |
|||
.subscribe(s => this.syncToRoute(s)); |
|||
} |
|||
|
|||
public ngOnDestroy() { |
|||
this.syncDone = []; |
|||
|
|||
this.subscriptionQueryParams?.unsubscribe(); |
|||
this.subscriptionChanges?.unsubscribe(); |
|||
} |
|||
|
|||
private syncToRoute(state: T) { |
|||
let isChanged = false; |
|||
|
|||
for (const key in this.syncs) { |
|||
if (this.syncs.hasOwnProperty(key)) { |
|||
const target = this.syncs[key]; |
|||
|
|||
const value = state[key]; |
|||
|
|||
if (value !== target.value) { |
|||
target.value = value; |
|||
|
|||
isChanged = true; |
|||
} |
|||
} |
|||
} |
|||
|
|||
if (!isChanged) { |
|||
return; |
|||
} |
|||
|
|||
const queryParams: Params = {}; |
|||
|
|||
for (const key in this.syncs) { |
|||
if (this.syncs.hasOwnProperty(key)) { |
|||
const { synchronizer, value } = this.syncs[key]; |
|||
|
|||
synchronizer.writeValue(value, queryParams); |
|||
} |
|||
} |
|||
|
|||
this.lastSyncedParams = queryParams; |
|||
|
|||
this.router.navigate([], { |
|||
relativeTo: this.route, |
|||
queryParams, |
|||
queryParamsHandling: 'merge', |
|||
replaceUrl: true |
|||
}); |
|||
} |
|||
|
|||
private syncFromRoute(query: Params) { |
|||
if (Types.equals(this.lastSyncedParams, query)) { |
|||
return; |
|||
} |
|||
|
|||
const update: Partial<T> = {}; |
|||
|
|||
for (const key in this.syncs) { |
|||
if (this.syncs.hasOwnProperty(key)) { |
|||
const target = this.syncs[key]; |
|||
|
|||
const value = target.synchronizer.getValue(query); |
|||
|
|||
if (value) { |
|||
update[key] = value; |
|||
} |
|||
} |
|||
} |
|||
|
|||
for (const key of this.keysToKeep) { |
|||
update[key] = this.state.snapshot[key]; |
|||
} |
|||
|
|||
this.state.resetState(update); |
|||
|
|||
for (const action of this.syncDone) { |
|||
action(); |
|||
} |
|||
} |
|||
|
|||
public keep(key: keyof T & string) { |
|||
this.keysToKeep.push(key); |
|||
|
|||
return this; |
|||
} |
|||
|
|||
public withString(key: keyof T & string, urlName: string) { |
|||
return this.withSynchronizer(key, new StringSynchronizer(urlName)); |
|||
} |
|||
|
|||
public withStrings(key: keyof T & string, urlName: string) { |
|||
return this.withSynchronizer(key, new StringKeysSynchronizer(urlName)); |
|||
} |
|||
|
|||
public withPager(key: keyof T & string, storeName: string, defaultSize = 10) { |
|||
return this.withSynchronizer(key, new PagerSynchronizer(this.localStore, storeName, defaultSize)); |
|||
} |
|||
|
|||
public whenSynced(action: () => void) { |
|||
this.syncDone.push(action); |
|||
|
|||
return this; |
|||
} |
|||
|
|||
public withSynchronizer(key: keyof T & string, synchronizer: RouteSynchronizer) { |
|||
const previous = this.syncs[key]; |
|||
|
|||
this.syncs[key] = { synchronizer, value: previous?.value }; |
|||
|
|||
return this; |
|||
} |
|||
} |
|||
Loading…
Reference in new issue