Feature/data provider strategies

packages/ng2-qgrid/src/public-api.ts

@@ -164,6 +164,7 @@ export {
 	BlurDirective,
 	BoolEditorComponent,
 	BoolEditorModule,
+	CacheAlreadyRequestedPageStrategy,
 	CaptionComponent,
 	CaptionModule,
 	CellEditorComponent,
@@ -189,6 +190,12 @@ export {
 	CurrencyPipe,
 	DataManipulationComponent,
 	DataManipulationModule,
+	DataProvider,
+	DataProviderComponent,
+	DataProviderModule,
+	DataProviderOptions,
+	DataProviderServer,
+	DataProviderStrategy,
 	DateDirective,
 	DateMaskDirective,
 	DateModule,
@@ -247,10 +254,10 @@ export {
 	ReferenceComponent,
 	ReferenceEditorComponent,
 	ReferenceEditorModule,
+	RequestCountOnceStrategy,
 	RestComponent,
 	RestModule,
-	DataProviderComponent,
-	DataProviderModule,
+	ReverseDataStrategy,
 	RuleComponent,
 	SerializationService,
 	StatusBarComponent,

packages/qgrid-ngx-examples/src/examples/data-provider/example-data-provider.component.html

@@ -1,6 +1,5 @@
-<q-grid [caption]="title">
-	<q-grid-columns generation="deep">
-	</q-grid-columns>
+<q-grid [caption]="title" [model]="gridModel">
+	<q-grid-columns generation="deep"></q-grid-columns>
 
 	<q-grid-data-provider [rows]="page$ | async"
                    (requestRows)="onRequestRows($event)">

packages/qgrid-ngx-examples/src/examples/data-provider/example-data-provider.component.ts

@@ -1,7 +1,9 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { GridModel } from 'ng2-qgrid';
+import {
+	CacheAlreadyRequestedPageStrategy, DataProvider, DataProviderServer, Grid, GridModel, RequestCountOnceStrategy, ReverseDataStrategy
+} from 'ng2-qgrid';
 import { Observable } from 'rxjs';
-import { map, switchMap, tap } from 'rxjs/operators';
+import { map } from 'rxjs/operators';
 import { Atom, DataService } from '../data.service';
 
 const EXAMPLE_TAGS = [
@@ -21,23 +23,29 @@ export class ExampleDataProviderComponent {
 
   page$: Observable<Atom[]>;
 
+	dataProvider: DataProvider<Atom>;
+	gridModel: GridModel;
+
   constructor(
 		private dataService: DataService,
-	) { }
-
-  onRequestRows(gridModel: GridModel): void {
+		private qgrid: Grid,
+	) {
 		const server = new FakeServer(this.dataService);
-		const pager = gridModel.pagination();
+		this.gridModel = this.qgrid.model();
+
+		this.dataProvider = new DataProvider<Atom>([
+			RequestCountOnceStrategy,
+			CacheAlreadyRequestedPageStrategy,
+			ReverseDataStrategy,
+		], { server, gridModel: this.gridModel, pageSize: 50 });
+	}
 
-		this.page$ = server.getTotal()
-			.pipe(
-				tap(total => gridModel.pagination({ count: total })),
-				switchMap(() => server.getPage(pager.current, pager.size)),
-			);
+  onRequestRows(gridModel: GridModel): void {
+		this.page$ = this.dataProvider.getPage(gridModel.pagination().current);
 	}
 }
 
-class FakeServer {
+class FakeServer implements DataProviderServer<Atom> {
 	constructor(
 		private dataService: DataService,
 	) { }

packages/qgrid-ngx-plugins/src/lib/data-provider/data-provider-strategy.ts

@@ -0,0 +1,22 @@
+import { GridModel } from '@qgrid/ngx';
+import { Observable, of } from 'rxjs';
+import { DataProviderServer } from './models';
+
+export class DataProviderStrategy<T> {
+	protected server: DataProviderServer<T>;
+	protected gridModel: GridModel;
+
+	processData(memo: T[], page?: number, size?: number): Observable<T[]> {
+		return of(memo);
+	}
+
+	setServer(server: DataProviderServer<T>): DataProviderStrategy<T> {
+		this.server = server;
+		return this;
+	}
+
+	setGridModel(model: GridModel): DataProviderStrategy<T> {
+		this.gridModel = model;
+		return this;
+	}
+}

packages/qgrid-ngx-plugins/src/lib/data-provider/data-provider.ts

@@ -0,0 +1,45 @@
+import { Observable, of } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
+import { DataProviderStrategy } from './data-provider-strategy';
+import { DataProviderOptions } from './models';
+
+export class DataProvider<T> {
+	private strategies: DataProviderStrategy<T>[] = [];
+
+	constructor(
+		private strategiesTypes: typeof DataProviderStrategy[],
+		private options: DataProviderOptions<T>
+	) {
+		this.strategies = this.createStrategies(this.strategiesTypes);
+		this.options = { pageSize: 10, ...this.options };
+	}
+
+	getPage(page: number, size?: number): Observable<T[]> {
+		size = size || this.options.pageSize;
+		return this.applyStrategies(page, size);
+	}
+
+	getTotal(): Observable<number> {
+		return this.options.server.getTotal();
+	}
+
+	private applyStrategies(page: number, size: number, memo = [], index: number = 0): Observable<T[]> {
+		if (!this.strategies[index]) {
+			return of();
+		}
+		return this.strategies[index].processData(memo, page, size)
+			.pipe(switchMap(x =>
+				this.strategies[index + 1] ?
+					this.applyStrategies(page, size, x, index + 1) :
+					of(x)
+			));
+	}
+
+	private createStrategies(types: typeof DataProviderStrategy[]): DataProviderStrategy<T>[] {
+		return types.map(strategy => (
+			new strategy<T>()
+				.setServer(this.options.server)
+				.setGridModel(this.options.gridModel)
+		));
+	}
+}

packages/qgrid-ngx-plugins/src/lib/data-provider/models.ts

@@ -0,0 +1,13 @@
+import { GridModel } from '@qgrid/ngx';
+import { Observable } from 'rxjs';
+
+export interface DataProviderOptions<T> {
+	server: DataProviderServer<T>;
+	gridModel: GridModel,
+	pageSize?: number;
+}
+
+export interface DataProviderServer<T> {
+	getPage(page: number, size: number): Observable<T[]>;
+	getTotal(): Observable<number>;
+}

packages/qgrid-ngx-plugins/src/lib/data-provider/strategies/cache-requested-pages.ts

@@ -0,0 +1,18 @@
+import { Observable, of } from 'rxjs';
+import { tap } from 'rxjs/operators';
+import { DataProviderStrategy } from '../data-provider-strategy';
+
+
+export class CacheAlreadyRequestedPageStrategy<T> extends DataProviderStrategy<T> {
+	private gridRowsCache: Map<number, T[]> = new Map();
+
+	processData(memo: T[], page?: number, size?: number): Observable<T[]> {
+		if (this.gridRowsCache.has(page)) {
+			return of(this.gridRowsCache.get(page));
+		}
+
+		const shouldRequestData = !memo?.length;
+		return (shouldRequestData ? this.server.getPage(page, size) : of(memo))
+			.pipe(tap(rows => this.gridRowsCache.set(page, rows)));
+	}
+}

packages/qgrid-ngx-plugins/src/lib/data-provider/strategies/index.ts

@@ -0,0 +1,3 @@
+export { CacheAlreadyRequestedPageStrategy } from './cache-requested-pages';
+export { RequestCountOnceStrategy } from './request-count-once';
+export { ReverseDataStrategy } from './reverse-data';

packages/qgrid-ngx-plugins/src/lib/data-provider/strategies/request-count-once.ts

@@ -0,0 +1,27 @@
+import { Observable, of } from 'rxjs';
+import { switchMap, tap } from 'rxjs/operators';
+import { DataProviderStrategy } from '../data-provider-strategy';
+
+
+export class RequestCountOnceStrategy<T> extends DataProviderStrategy<T> {
+	private totalCount: number = 0;
+
+	processData(memo: T[]): Observable<T[]> {
+		if (this.totalCount > 0) {
+			this.setPaginationCount(this.totalCount);
+			return of(memo);
+		}
+		return this.server.getTotal()
+			.pipe(
+				tap(count => {
+					this.totalCount = count;
+					this.setPaginationCount(count);
+				}),
+				switchMap(() => of(memo))
+			)
+	}
+
+	private setPaginationCount(count: number): void {
+		this.gridModel.pagination({ count });
+	}
+}

packages/qgrid-ngx-plugins/src/lib/data-provider/strategies/reverse-data.ts

@@ -0,0 +1,9 @@
+import { Observable, of } from 'rxjs';
+import { DataProviderStrategy } from '../data-provider-strategy';
+
+
+export class ReverseDataStrategy<T> extends DataProviderStrategy<T> {
+	processData(data: T[]): Observable<T[]> {
+		return of(data.slice().reverse());
+	}
+}