Skip to content

Commit a384668

Browse files
MarielaTihovaMarielaTihova
committed
fix(Remote Paging Grid): refactored sample with the new customers endpoint
1 parent 6c447af commit a384668

File tree

4 files changed

+114
-132
lines changed

4 files changed

+114
-132
lines changed

‎samples/grids/grid/remote-paging-grid/index.html‎

Lines changed: 25 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -26,56 +26,43 @@
2626
moving="true"
2727
paging-mode="Remote">
2828
<igc-paginator
29-
id="paginator">
29+
id="paginator">
3030
</igc-paginator>
3131
<igc-column
32-
name="CategoryName"
33-
id="CategoryName"
34-
field="CategoryName"
35-
header="Category Name">
32+
name="customerId"
33+
id="customerId"
34+
field="customerId"
35+
hidden="true">
3636
</igc-column>
3737
<igc-column
38-
name="ImageID"
39-
id="ImageID"
40-
field="CategoryImageUrl"
41-
data-type="image"
42-
header="Category Image">
38+
name="companyName"
39+
id="companyName"
40+
field="companyName"
41+
header="Company Name">
4342
</igc-column>
4443
<igc-column
45-
name="ProductName"
46-
id="ProductName"
47-
field="ProductName"
48-
header="Product Name">
44+
name="contactName"
45+
id="contactName"
46+
field="contactName"
47+
header="Contact Name">
4948
</igc-column>
5049
<igc-column
51-
name="QuantityPerUnit"
52-
id="QuantityPerUnit"
53-
field="QuantityPerUnit"
54-
header="Quantity Per Unit">
50+
name="contactTitle"
51+
id="contactTitle"
52+
field="contactTitle"
53+
header="Contact Title">
5554
</igc-column>
5655
<igc-column
57-
name="UnitPrice"
58-
id="UnitPrice"
59-
field="UnitPrice"
60-
header="Unit Price">
56+
name="address?.country"
57+
id="address.country"
58+
field="address.country"
59+
header="Country">
6160
</igc-column>
6261
<igc-column
63-
name="SupplierName"
64-
id="SupplierName"
65-
field="SupplierName"
66-
header="Supplier Name">
67-
</igc-column>
68-
<igc-column
69-
name="UnitsInStock"
70-
id="UnitsInStock"
71-
field="UnitsInStock"
72-
header="Units In Stock">
73-
</igc-column>
74-
<igc-column
75-
name="UnitsOnOrder"
76-
id="UnitsOnOrder"
77-
field="UnitsOnOrder"
78-
header="Units On Order">
62+
name="address.phone"
63+
id="address.phone"
64+
field="address.phone"
65+
header="Phone">
7966
</igc-column>
8067
</igc-grid>
8168
</div>

‎samples/grids/grid/remote-paging-grid/src/CustomersWithPageResponseModel.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export interface CustomersWithPageResponseModel {
2+
items: any[];
3+
totalRecordsCount: number;
4+
pageSize: number;
5+
pageNumber: number;
6+
totalPages: number;
7+
}

‎samples/grids/grid/remote-paging-grid/src/RemotePagingService.ts‎

Lines changed: 21 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,31 @@
1-
import { BehaviorSubject, Observable, from } from 'rxjs';
2-
import { map, catchError } from 'rxjs/operators';
3-
4-
51
export class RemotePagingService {
6-
public remoteData: BehaviorSubject<any[]> = new BehaviorSubject([]);
7-
public dataLength: BehaviorSubject<number> = new BehaviorSubject(0);
8-
public url = 'https://www.igniteui.com/api/products';
9-
10-
constructor() {}
2+
public static CUSTOMERS_URL = `https://data-northwind.indigo.design/Customers/GetCustomersWithPage`;
3+
constructor() {}
114

12-
public async getData(index?: number, perPage?: number): Promise<any> {
13-
let qS = '';
14-
15-
if (index !== undefined && perPage !== undefined) {
16-
qS = `?$skip=${index}&$top=${perPage}&$count=true`;
5+
public static getDataWithPaging(pageIndex?: number, pageSize?: number) {
6+
return fetch(RemotePagingService.buildUrl(RemotePagingService.CUSTOMERS_URL, pageIndex, pageSize))
7+
.then((result) => result.json())
8+
.catch((error) => console.error(error.message));
179
}
18-
19-
try {
20-
const response = await fetch(`${this.url + qS}`);
21-
if (!response.ok) {
22-
throw new Error('Network response was not ok');
10+
11+
private static buildUrl(baseUrl: string, pageIndex?: number, pageSize?: number) {
12+
let qS = "";
13+
if (baseUrl) {
14+
qS += `${baseUrl}`;
2315
}
24-
const data = await response.json();
25-
return data;
26-
} catch (error) {
27-
console.error('Error fetching data:', error);
28-
throw error; // Propagate the error further
29-
}
30-
}
3116

32-
public async getDataLength(): Promise<number> {
33-
try {
34-
const response = await fetch(this.url);
35-
if (!response.ok) {
36-
throw new Error('Network response was not ok');
17+
// Add pageIndex and size to the query string if they are defined
18+
if (pageIndex !== undefined) {
19+
qS += `?pageIndex=${pageIndex}`;
20+
if (pageSize !== undefined) {
21+
qS += `&size=${pageSize}`;
22+
}
23+
} else if (pageSize !== undefined) {
24+
qS += `?perPage=${pageSize}`;
3725
}
38-
const data = await response.json();
39-
return data.length; // Assuming the length is directly accessible in the JSON response
40-
} catch (error) {
41-
console.error('Error fetching data length:', error);
42-
throw error; // Propagate the error further
43-
}
44-
}
45-
4626

27+
return `${qS}`;
28+
}
4729
}
4830

4931

‎samples/grids/grid/remote-paging-grid/src/index.ts‎

Lines changed: 61 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -3,77 +3,83 @@ import { IgcGridComponent, IgcPaginatorComponent } from 'igniteui-webcomponents-
33
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
44
import "./index.css";
55
import { RemotePagingService } from './RemotePagingService';
6+
import { CustomersWithPageResponseModel } from './CustomersWithPageResponseModel';
67

78

89
export class Sample {
910

10-
public data: any[] = [];
11-
public dataLength: number = 0;
12-
private grid: IgcGridComponent;
13-
private _bind: () => void;
14-
private remotePagingService: RemotePagingService = new RemotePagingService();
15-
public page = 0;
16-
private _perPage = 10;
17-
private pager: IgcPaginatorComponent;
18-
19-
public get perPage(): number {
20-
return this.pager.perPage || 10;
21-
}
22-
23-
private _totalRecordsCount: number;
24-
25-
public get totalRecordsCount(): number {
11+
public data: any[] = [];
12+
public dataLength: number = 0;
13+
public page: number = 0;
14+
private grid: IgcGridComponent;
15+
private _bind: () => void;
16+
private _perPage: number = 15;
17+
private pager: IgcPaginatorComponent;
18+
private _totalRecordsCount: number;
19+
public get perPage(): number {
20+
return this.pager.perPage || this._perPage;
21+
}
22+
public set perPage(val: number) {
23+
this._perPage = val;
24+
}
25+
public get totalRecordsCount(): number {
2626
return this._totalRecordsCount;
27-
}
28-
29-
public set totalRecordsCount(value: number) {
27+
}
28+
public set totalRecordsCount(value: number) {
3029
this._totalRecordsCount = value;
3130
this.grid.totalRecords = value;
32-
}
33-
34-
constructor() {
31+
}
32+
33+
constructor() {
3534
this.pager = document.getElementById('paginator') as IgcPaginatorComponent;
3635
this.grid = document.getElementById('grid') as IgcGridComponent;
3736

3837
this._bind = () => {
39-
this.remotePagingService.getDataLength().then((length) => {
40-
this.totalRecordsCount = length;
41-
this.pager.totalRecords = this.totalRecordsCount;
42-
});
43-
window.addEventListener("load", () => {
44-
this.pager.totalRecords = this.totalRecordsCount;
45-
this.paginate(0);
46-
});
47-
this.pager.addEventListener("perPageChange", ()=> {
48-
this.paginate(0);
49-
})
50-
this.pager.addEventListener("pageChange", ((args: CustomEvent<any>) => {
51-
this.paginate(args.detail);}) as EventListener);
52-
}
53-
this._bind();
54-
}
5538

56-
public paginate(page: number) {
57-
this.page = page;
58-
const skip = this.page * this.perPage;
59-
const top = this.perPage;
60-
61-
this.remotePagingService.getData(skip, top).then((data)=> {
62-
this.data = data; // Assign received data to this.data
63-
this.grid.isLoading = false;
64-
this.updateUI(); // Update the UI after receiving data
39+
window.addEventListener("load", () => {
40+
this.loadData(this.page,this.perPage);
6541
});
66-
}
6742

68-
public set perPage(val: number) {
69-
this._perPage = val;
70-
this.paginate(val);
71-
}
43+
this.pager.addEventListener("perPageChange", ((args: CustomEvent<any>) => {
44+
this.perPage = args.detail;
45+
this.loadData(this.page, this.perPage);
46+
}) as EventListener);
7247

73-
private updateUI() {
74-
if (this.grid && this.data) { // Check if grid and data are available
75-
this.grid.data = this.data;
48+
this.pager.addEventListener("pageChange", ((args: CustomEvent<any>) => {
49+
this.page = args.detail;
50+
this.loadData(this.page, this.perPage);
51+
}) as EventListener);
7652
}
53+
54+
this._bind();
55+
}
56+
57+
private updateUI(): void {
58+
if (this.grid && this.data) { // Check if grid and data are available
59+
this.grid.data = this.data;
60+
}
61+
}
62+
63+
private loadData(pageIndex?: number, pageSize?: number): void {
64+
this.grid.isLoading = true;
65+
66+
RemotePagingService.getDataWithPaging(pageIndex,pageSize)
67+
.then((response: CustomersWithPageResponseModel) => {
68+
this.totalRecordsCount = response.totalRecordsCount;
69+
this.pager.perPage = pageSize;
70+
this.pager.totalRecords = this.totalRecordsCount;
71+
this.page = response.pageNumber;
72+
this.data = response.items;
73+
this.grid.isLoading = false;
74+
this.updateUI(); // Update the UI after receiving data
75+
})
76+
.catch((error) => {
77+
console.error(error.message);
78+
this.grid.data = [];
79+
// Stop loading even if error occurs. Prevents endless loading
80+
this.grid.isLoading = false;
81+
this.updateUI();
82+
})
7783
}
7884

7985
}

0 commit comments

Comments
 (0)