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,
+	DataProviderContext,
+	DataProviderModule,
+	DataProviderPageServer,
+	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, DataProviderPageServer, 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 = [
@@ -12,6 +14,7 @@ const EXAMPLE_TAGS = [
 @Component({
   selector: 'example-data-provider',
   templateUrl: 'example-data-provider.component.html',
+	styleUrls: ['example-data-provider.component.scss'],
   providers: [DataService],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
@@ -21,34 +24,43 @@ export class ExampleDataProviderComponent {
 
   page$: Observable<Atom[]>;
 
+	gridModel = this.qgrid.model();
+
+	private server = new FakeServer(this.dataService);
+	private dataProvider: DataProvider<Atom> = new DataProvider<Atom>(this.gridModel, [
+		new RequestTotalCountOnceStategy(this.server),
+		new CacheAlreadyRequestedPageStrategy(this.server, { pagesToLoad: 1 }),
+		new ExampleReverseDataStrategy(),
+	]);
+
   constructor(
 		private dataService: DataService,
+		private qgrid: Grid,
 	) { }
 
   onRequestRows(gridModel: GridModel): void {
-		const server = new FakeServer(this.dataService);
-		const pager = gridModel.pagination();
-
-		this.page$ = server.getTotal()
-			.pipe(
-				tap(total => gridModel.pagination({ count: total })),
-				switchMap(() => server.getPage(pager.current, pager.size)),
-			);
+		this.page$ = this.dataProvider.getPage();
 	}
 }
 
-class FakeServer {
+class FakeServer implements DataProviderPageServer<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 ExampleReverseDataStrategy<T> implements DataProviderStrategy<T> {
+	process(memo: T[]): Observable<T[]> {
+		return of(memo.slice().reverse());
+	}
 }

packages/qgrid-ngx-plugins/src/lib/data-provider/cache-already-requested-page-strategy.ts

@@ -0,0 +1,51 @@
+import { GridModel } from '@qgrid/ngx';
+import { Observable, of } from 'rxjs';
+import { filter, tap } from 'rxjs/operators';
+import { DataProviderContext } from './data-provider';
+import { DataProviderPageServer } from './data-provider-page-server';
+import { DataProviderStrategy } from './data-provider-strategy';
+
+export class CacheAlreadyRequestedPageStrategy<T> implements DataProviderStrategy<T> {
+	private pageCache: Map<number, T[]>;
+	private paginationSize: number;
+
+	constructor(
+		private server: Pick<DataProviderPageServer<T>, 'getPage'>,
+		private options: { pagesToLoad: number } = { pagesToLoad: 0 },
+	) { }
+
+	process(data: T[], { model }: DataProviderContext): Observable<T[]> {
+		const { current, size } = model.pagination();
+
+		if (this.paginationSize !== size) {
+			this.pageCache = new Map();
+			this.paginationSize = size;
+		}
+
+		if (this.options.pagesToLoad) {
+			this.loadInBackground(this.options.pagesToLoad, model);
+		}
+
+		if (this.pageCache.has(current)) {
+			return of(this.pageCache.get(current));
+		}
+
+		const shouldRequestData = !data.length;
+		return (shouldRequestData ? this.server.getPage(current, size) : of(data))
+			.pipe(tap(rows => this.pageCache.set(current, rows)));
+	}
+
+	private loadInBackground(pagesToLoad: number, model: GridModel): void {
+		const { count, current, size } = model.pagination();
+		const fromPage = current + 1;
+		const toPage = current + pagesToLoad;
+		const maxPage = Math.floor(count / size); 
+		for (let page = fromPage; page <= toPage; page++) {
+			if (page <= maxPage && !this.pageCache.has(page)){
+				this.server.getPage(page, size)
+					.pipe(filter(rows => !!rows?.length))
+					.subscribe(rows => this.pageCache.set(page, rows));
+			}
+		}		
+	}
+}

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

@@ -0,0 +1,6 @@
+import { Observable } from 'rxjs';
+
+export interface DataProviderPageServer<T> {
+	getPage(page: number, size: number): Observable<T[]>;
+	getTotal(): Observable<number>;
+}

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

@@ -0,0 +1,6 @@
+import { Observable } from 'rxjs';
+import { DataProviderContext } from './data-provider';
+
+export interface DataProviderStrategy<T> {
+	process(data: T[], context: DataProviderContext): Observable<T[]>;
+}

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

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

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

@@ -0,0 +1,29 @@
+import { Observable, of } from 'rxjs';
+import { switchMap, tap } from 'rxjs/operators';
+import { DataProviderContext } from './data-provider';
+import { DataProviderPageServer } from './data-provider-page-server';
+import { DataProviderStrategy } from './data-provider-strategy';
+
+export class RequestTotalCountOnceStategy<T> implements DataProviderStrategy<T> {
+	private totalCount: number = 0;
+
+	constructor(
+		private server: Pick<DataProviderPageServer<T>, 'getTotal'>,
+	) { }
+
+	process(data: T[], { model }: DataProviderContext): Observable<T[]> {
+		if (this.totalCount > 0) {
+			model.pagination({ count: this.totalCount });
+			return of(data);
+		}
+
+		return this.server.getTotal()
+			.pipe(
+				tap(count => {
+					this.totalCount = count;
+					model.pagination({ count });
+				}),
+				switchMap(() => of(data))
+			)
+	}
+}