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,9 @@ export {
 	ReferenceComponent,
 	ReferenceEditorComponent,
 	ReferenceEditorModule,
+	RequestTotalCountOnceStategy,
 	RestComponent,
 	RestModule,
-	DataProviderComponent,
-	DataProviderModule,
 	RuleComponent,
 	SerializationService,
 	StatusBarComponent,

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

@@ -1,4 +1,4 @@
-<q-grid [caption]="title">
+<q-grid [caption]="title" [model]="gridModel">
 	<q-grid-columns generation="deep">
 	</q-grid-columns>
 

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 { Observable } from 'rxjs';
-import { map, switchMap, tap } from 'rxjs/operators';
+import {
+	CacheAlreadyRequestedPageStrategy, DataProvider, DataProviderServer, DataProviderStrategy, Grid, GridModel, RequestTotalCountOnceStategy
+} from 'ng2-qgrid';
+import { Observable, of } from 'rxjs';
+import { map } from 'rxjs/operators';
 import { Atom, DataService } from '../data.service';
 
 const EXAMPLE_TAGS = [
@@ -21,34 +23,45 @@ export class ExampleDataProviderComponent {
 
   page$: Observable<Atom[]>;
 
+	dataProvider: DataProvider<Atom>;
+	gridModel = this.qgrid.model();
+
   constructor(
 		private dataService: DataService,
-	) { }
-
-  onRequestRows(gridModel: GridModel): void {
+		private qgrid: Grid,
+	) {
 		const server = new FakeServer(this.dataService);
-		const pager = gridModel.pagination();
+
+		this.dataProvider = new DataProvider<Atom>(this.gridModel, [
+			new RequestTotalCountOnceStategy(server),
+			new CacheAlreadyRequestedPageStrategy(server, 2),
+			new ReverseDataStrategy(),
+		]);
+	}
 
-		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();
 	}
 }
 
-class FakeServer {
+class FakeServer implements DataProviderServer<Atom> {
 	constructor(
 		private dataService: DataService,
 	) { }
 
-	getPage(pageNumber: number, pageSize: number): Observable<Atom[]> {
+	getPage(number: number, pageSize: number): Observable<Atom[]> {
 		return this.dataService.getAtoms()
-			.pipe(map(atoms => atoms.splice(pageNumber * pageSize, pageSize)));
+			.pipe(map(atoms => atoms.splice(number * pageSize, pageSize)));
 	}
 
 	getTotal(): Observable<number> {
 		return this.dataService.getAtoms()
 			.pipe(map(atoms => atoms.length));
 	}
+}
+
+class ReverseDataStrategy<T> extends DataProviderStrategy<T> {
+	processData(memo: T[]): Observable<T[]> {
+		return of(memo.slice().reverse());
+	}
 }

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

@@ -0,0 +1,13 @@
+import { GridModel } from '@qgrid/ngx';
+import { Observable } from 'rxjs';
+
+export abstract class DataProviderStrategy<T> {
+	protected gridModel: GridModel;
+
+	abstract processData(memo: T[]): Observable<T[]>;
+
+	setGridModel(model: GridModel): DataProviderStrategy<T> {
+		this.gridModel = model;
+		return this;
+	}
+}

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

@@ -0,0 +1,28 @@
+import { GridModel } from '@qgrid/ngx';
+import { Observable, of } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
+import { DataProviderStrategy } from './data-provider-strategy';
+
+export class DataProvider<T> {
+
+	constructor(
+		private gridModel: GridModel,
+		private strategies: DataProviderStrategy<T>[],
+	) {
+		strategies.forEach(strategy => strategy.setGridModel(this.gridModel));
+	}
+
+	getPage(): Observable<T[]> {
+		return this.applyStrategies();
+	}
+
+	private applyStrategies(memo = [], index = 0): Observable<T[]> {
+		const strategy = this.strategies[index];
+		const hasNext = !!this.strategies[index + 1];
+		if (!strategy) {
+			return of(memo);
+		}
+		return strategy.processData(memo)
+			.pipe(switchMap(x => hasNext ? this.applyStrategies(x, index + 1) : of(x)));
+	}
+}

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,44 @@
+import { Observable, of } from 'rxjs';
+import { filter, tap } from 'rxjs/operators';
+import { DataProviderStrategy } from '../data-provider-strategy';
+import { DataProviderServer } from '../models';
+
+export class CacheAlreadyRequestedPageStrategy<T> extends DataProviderStrategy<T> {
+	private gridRowsCache: Map<number, T[]> = new Map();
+
+	constructor(
+		private server: Pick<DataProviderServer<T>, 'getPage'>,
+		private pagesToLoad: number = 0,
+	) {
+		super();
+	}
+
+	processData(memo: T[]): Observable<T[]> {
+		const { current, size } = this.gridModel.pagination();
+
+		if (this.pagesToLoad) {
+			this.loadInBackground(this.pagesToLoad);
+		}
+
+		if (this.gridRowsCache.has(current)) {
+			return of(this.gridRowsCache.get(current));
+		}
+
+		const shouldRequestData = !memo?.length;
+		return (shouldRequestData ? this.server.getPage(current, size) : of(memo))
+			.pipe(tap(rows => this.gridRowsCache.set(current, rows)));
+	}
+
+	private loadInBackground(pagesToLoad: number): void {
+		const { current, size } = this.gridModel.pagination();
+		const fromPage = current + 1;
+		const toPage = current + pagesToLoad;
+		for (let page = fromPage; page <= toPage; page++) {
+			if (!this.gridRowsCache.has(page)){
+				this.server.getPage(page, size)
+					.pipe(filter(rows => !!rows?.length))
+					.subscribe(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 { RequestTotalCountOnceStategy } from './request-count-once';
+

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

@@ -0,0 +1,34 @@
+import { Observable, of } from 'rxjs';
+import { switchMap, tap } from 'rxjs/operators';
+import { DataProviderStrategy } from '../data-provider-strategy';
+import { DataProviderServer } from '../models';
+
+
+export class RequestTotalCountOnceStategy<T> extends DataProviderStrategy<T> {
+	private totalCount: number = 0;
+
+	constructor(
+		private server: Pick<DataProviderServer<T>, 'getTotal'>,
+	) {
+		super();
+	}
+
+	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 });
+	}
+}