Skip to content
This repository was archived by the owner on Jun 1, 2025. It is now read-only.

Commit 75466e1

Browse files
Ghislain BeaulacGhislain Beaulac
Ghislain Beaulac
authored and
Ghislain Beaulac
committed
renamed onBackendEventChanged to onBackendEventApi, add a new onInit property into it and fixed onSort and onPagination issues with Observable
1 parent d1dbc8c commit 75466e1

13 files changed

+127
-77
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-slickgrid",
3-
"version": "0.4.1",
3+
"version": "0.4.2",
44
"description": "Slickgrid components made available in Angular",
55
"keywords": [
66
"angular",

‎src/app/examples/grid-graphql.component.ts‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,8 @@ export class GridGraphqlComponent implements OnInit {
6565
pageSize: defaultPageSize,
6666
totalItems: 0
6767
},
68-
onBackendEventChanged: {
68+
onBackendEventApi: {
69+
onInit: (query) => this.getCustomerApiCall(query),
6970
preProcess: () => this.displaySpinner(true),
7071
process: (query) => this.getCustomerApiCall(query),
7172
postProcess: (response) => {
@@ -79,10 +80,6 @@ export class GridGraphqlComponent implements OnInit {
7980

8081
const paginationOption = this.getPaginationOption(this.isWithCursor);
8182
this.graphqlService.initOptions(paginationOption);
82-
83-
// get the data from backend on page load
84-
this.displaySpinner(true);
85-
this.getCustomerApiCall(this.graphqlService.buildQuery()).then((data) => this.getCustomerCallback(data));
8683
}
8784

8885
displaySpinner(isProcessing) {

‎src/app/examples/grid-odata.component.ts‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,8 @@ export class GridOdataComponent implements OnInit {
6969
pageSize: defaultPageSize,
7070
totalItems: 0
7171
},
72-
onBackendEventChanged: {
72+
onBackendEventApi: {
73+
onInit: (query) => this.getCustomerApiCall(query),
7374
preProcess: () => this.displaySpinner(true),
7475
process: (query) => this.getCustomerApiCall(query),
7576
postProcess: (response) => {
@@ -81,10 +82,6 @@ export class GridOdataComponent implements OnInit {
8182
service: this.odataService
8283
}
8384
};
84-
85-
// get the data from backend on page load
86-
this.displaySpinner(true);
87-
this.getCustomerApiCall(this.odataService.buildQuery()).then((data) => this.getCustomerCallback(data));
8885
}
8986

9087
displaySpinner(isProcessing) {

‎src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { castToPromise } from './../services/utilities';
12
import { Column, ColumnFilters, FormElementType, GridOption } from './../models';
23
import { AfterViewInit, Component, Injectable, Input, OnInit } from '@angular/core';
34
import { FilterService, MouseService, SortService, ResizerService } from './../services';
@@ -83,13 +84,31 @@ export class AngularSlickgridComponent implements AfterViewInit, OnInit {
8384
attachDifferentHooks(grid: any, options: GridOption, dataView: any) {
8485
// attach external sorting (backend) when available or default onSort (dataView)
8586
if (options.enableSorting) {
86-
(options.onBackendEventChanged) ? this.sortService.attachBackendOnSort(grid, options) : this.sortService.attachLocalOnSort(grid, options, this._dataView);
87+
(options.onBackendEventApi) ? this.sortService.attachBackendOnSort(grid, options) : this.sortService.attachLocalOnSort(grid, options, this._dataView);
8788
}
8889

89-
// attach external filter (backend) when available or default onSort (dataView)
90+
// attach external filter (backend) when available or default onFilter (dataView)
9091
if (options.enableFiltering) {
9192
this.filterService.init(grid, options, this.columnDefinitions, this._columnFilters);
92-
(options.onBackendEventChanged) ? this.filterService.attachBackendOnFilter(grid, options) : this.filterService.attachLocalOnFilter(this._dataView);
93+
(options.onBackendEventApi) ? this.filterService.attachBackendOnFilter(grid, options) : this.filterService.attachLocalOnFilter(this._dataView);
94+
}
95+
96+
if (options.onBackendEventApi && options.onBackendEventApi.onInit) {
97+
const backendApi = options.onBackendEventApi;
98+
const query = backendApi.service.buildQuery();
99+
100+
// wrap this inside a setTimeout to avoid timing issue since the gridOptions needs to be ready before running this onInit
101+
setTimeout(async () => {
102+
// the process could be an Observable (like HttpClient) or a Promise
103+
// in any case, we need to have a Promise so that we can await on it (if an Observable, convert it to Promise)
104+
const observableOrPromise = options.onBackendEventApi.onInit(query);
105+
const responseProcess = await castToPromise(observableOrPromise);
106+
107+
// send the response process to the postProcess callback
108+
if (backendApi.postProcess) {
109+
backendApi.postProcess(responseProcess);
110+
}
111+
});
93112
}
94113

95114
// if enable, change background color on mouse over

‎src/app/modules/angular-slickgrid/components/slick-pagination.component.ts‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { castToPromise } from './../services/utilities';
12
import { Component, OnInit, Input, AfterViewInit } from '@angular/core';
23
import { Column, GridOption } from './../models';
34

@@ -100,22 +101,28 @@ export class SlickPaginationComponent implements AfterViewInit, OnInit {
100101
if (this.dataTo > this.totalItems) {
101102
this.dataTo = this.totalItems;
102103
}
103-
if (this._gridPaginationOptions.onBackendEventChanged) {
104+
if (this._gridPaginationOptions.onBackendEventApi) {
104105
const itemsPerPage = this.itemsPerPage;
105106

106-
if (!this._gridPaginationOptions.onBackendEventChanged.process || !this._gridPaginationOptions.onBackendEventChanged.service) {
107-
throw new Error(`onBackendEventChanged requires at least a "process" function and a "service" defined`);
107+
if (!this._gridPaginationOptions.onBackendEventApi.process || !this._gridPaginationOptions.onBackendEventApi.service) {
108+
throw new Error(`onBackendEventApi requires at least a "process" function and a "service" defined`);
108109
}
109-
if (this._gridPaginationOptions.onBackendEventChanged.preProcess) {
110-
this._gridPaginationOptions.onBackendEventChanged.preProcess();
110+
if (this._gridPaginationOptions.onBackendEventApi.preProcess) {
111+
this._gridPaginationOptions.onBackendEventApi.preProcess();
111112
}
112-
const query = this._gridPaginationOptions.onBackendEventChanged.service.onPaginationChanged(event, { newPage: pageNumber, pageSize: itemsPerPage });
113-
const responseProcess = await (this._gridPaginationOptions.onBackendEventChanged.process(query));
114-
if (this._gridPaginationOptions.onBackendEventChanged.postProcess) {
115-
this._gridPaginationOptions.onBackendEventChanged.postProcess(responseProcess);
113+
const query = this._gridPaginationOptions.onBackendEventApi.service.onPaginationChanged(event, { newPage: pageNumber, pageSize: itemsPerPage });
114+
115+
// the process could be an Observable (like HttpClient) or a Promise
116+
// in any case, we need to have a Promise so that we can await on it (if an Observable, convert it to Promise)
117+
const observableOrPromise = this._gridPaginationOptions.onBackendEventApi.process(query);
118+
const responseProcess = await castToPromise(observableOrPromise);
119+
120+
// send the response process to the postProcess callback
121+
if (this._gridPaginationOptions.onBackendEventApi.postProcess) {
122+
this._gridPaginationOptions.onBackendEventApi.postProcess(responseProcess);
116123
}
117124
} else {
118-
throw new Error('Pagination with a backend service requires "onBackendEventChanged" to be defined in your grid options');
125+
throw new Error('Pagination with a backend service requires "onBackendEventApi" to be defined in your grid options');
119126
}
120127
}
121128

‎src/app/modules/angular-slickgrid/models/backendEventChanged.interface.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1+
import { BackendService } from './index';
12
import { Observable } from 'rxjs/Observable';
23
import 'rxjs/add/operator/toPromise';
34

45
export interface BackendEventChanged {
6+
onInit?: (query: string) => Promise<any> | Observable<any>;
57
preProcess?: () => void;
68
process: (query: string) => Promise<any> | Observable<any>;
79
postProcess: (response: any) => void;
8-
service: any;
10+
service: BackendService;
911
filterTypingDebounce?: number;
1012
}

‎src/app/modules/angular-slickgrid/models/backendServiceOption.interface.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,5 @@ export interface BackendServiceOption {
55
paginationOptions?: any;
66
filteringOptions?: any[];
77
sortingOptions?: any[];
8-
onBackendEventChanged?: BackendEventChanged;
8+
onBackendEventApi?: BackendEventChanged;
99
}

‎src/app/modules/angular-slickgrid/models/gridOption.interface.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,5 +29,5 @@ export interface GridOption {
2929
rowHeight?: number;
3030
showHeaderRow?: boolean;
3131
topPanelHeight?: number;
32-
onBackendEventChanged?: BackendEventChanged;
32+
onBackendEventApi?: BackendEventChanged;
3333
}

‎src/app/modules/angular-slickgrid/services/filter.service.ts‎

Lines changed: 17 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
1+
import { castToPromise } from './utilities';
12
import { FilterConditions } from '../filter-conditions';
23
import { BackendServiceOption, Column, ColumnFilters, FieldType, FilterChangedArgs, FormElementType, GridOption } from '../models';
34
import { FilterTemplates } from './../filter-templates';
4-
import { Observable } from 'rxjs/Observable';
5-
import 'rxjs/add/operator/first';
6-
import 'rxjs/add/operator/take';
7-
import 'rxjs/add/operator/toPromise';
8-
import 'rxjs/add/operator/map';
95
import $ from 'jquery';
106

117
// using external js modules in Angular
@@ -43,34 +39,27 @@ export class FilterService {
4339
}
4440
const serviceOptions: BackendServiceOption = args.grid.getOptions();
4541

46-
if (!serviceOptions || !serviceOptions.onBackendEventChanged.process || !serviceOptions.onBackendEventChanged.service) {
47-
throw new Error(`onBackendEventChanged requires at least a "process" function and a "service" defined`);
42+
if (!serviceOptions || !serviceOptions.onBackendEventApi.process || !serviceOptions.onBackendEventApi.service) {
43+
throw new Error(`onBackendEventApi requires at least a "process" function and a "service" defined`);
4844
}
49-
if (serviceOptions.onBackendEventChanged.preProcess) {
50-
serviceOptions.onBackendEventChanged.preProcess();
45+
const backendApi = serviceOptions.onBackendEventApi;
46+
47+
// run a preProcess callback if defined
48+
if (backendApi.preProcess) {
49+
backendApi.preProcess();
5150
}
52-
const query = await serviceOptions.onBackendEventChanged.service.onFilterChanged(event, args);
51+
52+
// call the service to get a query back
53+
const query = await backendApi.service.onFilterChanged(event, args);
5354

5455
// the process could be an Observable (like HttpClient) or a Promise
5556
// in any case, we need to have a Promise so that we can await on it (if an Observable, convert it to Promise)
56-
const observableOrPromise = (serviceOptions.onBackendEventChanged.process(query));
57-
let processPromise = observableOrPromise;
58-
if (observableOrPromise instanceof Observable) {
59-
processPromise = observableOrPromise.first().toPromise();
60-
if (!(processPromise instanceof Promise)) {
61-
processPromise = observableOrPromise.take(1).toPromise();
62-
}
63-
if (!(processPromise instanceof Promise)) {
64-
throw new Error(
65-
`Something went wrong, Angular-Slickgrid filter.service is not able to convert the Observable into a Promise.
66-
If you are using Angular HttpClient, you could try converting your http call to a Promise with ".toPromise()"
67-
for example:: this.http.post('graphql', { query: graphqlQuery }).toPromise()
68-
`);
69-
}
70-
}
71-
const responseProcess = await processPromise;
72-
if (serviceOptions.onBackendEventChanged.postProcess) {
73-
serviceOptions.onBackendEventChanged.postProcess(responseProcess);
57+
const observableOrPromise = backendApi.process(query);
58+
const responseProcess = await castToPromise(observableOrPromise);
59+
60+
// send the response process to the postProcess callback
61+
if (backendApi.postProcess) {
62+
backendApi.postProcess(responseProcess);
7463
}
7564
}
7665

‎src/app/modules/angular-slickgrid/services/graphql.service.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ export class GraphqlService implements BackendService {
124124
const serviceOptions: BackendServiceOption = args.grid.getOptions();
125125
let debounceTypingDelay = 0;
126126
if (event.type === 'keyup' || event.type === 'keydown') {
127-
debounceTypingDelay = serviceOptions.onBackendEventChanged.filterTypingDebounce || 700;
127+
debounceTypingDelay = serviceOptions.onBackendEventApi.filterTypingDebounce || 700;
128128
}
129129

130130
const promise = new Promise<string>((resolve, reject) => {

0 commit comments

Comments
 (0)