fix(HGrid Remote Paging): refactored sample with the new customers endpoint

MarielaTihova · MarielaTihova · commit bed9f73aad43 · 2024-11-14T19:54:08.000+02:00
diff --git a/samples/grids/grid/remote-paging-grid/src/index.ts b/samples/grids/grid/remote-paging-grid/src/index.ts
@@ -9,13 +9,13 @@ import { CustomersWithPageResponseModel } from './CustomersWithPageResponseModel
 export class Sample {
 
   public data: any[] = [];
-  public dataLength: number = 0;
   public page: number = 0;
   private grid: IgcGridComponent;
   private _bind: () => void;
   private _perPage: number = 15;
   private pager: IgcPaginatorComponent;
   private _totalRecordsCount: number;
+
   public get perPage(): number {
       return this.pager.perPage || this._perPage;
   }
@@ -31,11 +31,10 @@ export class Sample {
   }
 
   constructor() {
-      this.pager = document.getElementById('paginator') as IgcPaginatorComponent;
       this.grid = document.getElementById('grid') as IgcGridComponent;
+      this.pager = document.getElementById('paginator') as IgcPaginatorComponent;
       
       this._bind = () => {
-
         window.addEventListener("load", () => {
           this.loadData(this.page,this.perPage);
         });
@@ -75,7 +74,6 @@ export class Sample {
     })
     .catch((error) => {
       console.error(error.message);
-      this.grid.data = [];
       // Stop loading even if error occurs. Prevents endless loading
       this.grid.isLoading = false;
       this.updateUI();
diff --git a/samples/grids/hierarchical-grid/remote-paging-sample/index.html b/samples/grids/hierarchical-grid/remote-paging-sample/index.html
@@ -19,7 +19,12 @@
     <div class="container sample">
       <div class="container fill">
 
-        <igc-hierarchical-grid id="hGrid" primary-key="customerId" height="600px">
+        <igc-hierarchical-grid 
+          id="hGrid" 
+          primary-key="customerId" 
+          height="600px" 
+          paging-mode="Remote"
+        >
           <igc-paginator id="paginator">
           </igc-paginator>
           <igc-column field="customerId" hidden="true"></igc-column>
diff --git a/samples/grids/hierarchical-grid/remote-paging-sample/src/CustomersWithPageResponseModel.ts b/samples/grids/hierarchical-grid/remote-paging-sample/src/CustomersWithPageResponseModel.ts
@@ -0,0 +1,7 @@
+export interface CustomersWithPageResponseModel {
+    items: any[];
+    totalRecordsCount: number;
+    pageSize: number;
+    pageNumber: number;
+    totalPages: number;
+}
diff --git a/samples/grids/hierarchical-grid/remote-paging-sample/src/RemoteService.ts b/samples/grids/hierarchical-grid/remote-paging-sample/src/RemoteService.ts
@@ -25,42 +25,38 @@ function buildUrl(dataState: any, index?: number, perPage?: number): string {
 }
 
 export class RemotePagingService {
-    public remoteData: BehaviorSubject<any[]> = new BehaviorSubject([]);
-    public dataLength: BehaviorSubject<number> = new BehaviorSubject(0);
-    public url = 'https://www.igniteui.com/api/products';
+    public static BASE_URL = 'https://data-northwind.indigo.design/';
+    public static CUSTOMERS_URL = `${RemotePagingService.BASE_URL}Customers/GetCustomersWithPage`;
   
     constructor() {}
 
-    public async getData(dataState?: any, index?: number, perPage?: number): Promise<any> {
-        try {
-            const response = await fetch(buildUrl(dataState, index, perPage));
-            if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
-            }
-            const data = await response.json();
-            return data;
-        } catch (error) {
-            console.error('Error fetching data:', error);
-            throw error; 
-        }
+    public static getDataWithPaging(pageIndex?: number, pageSize?: number) {
+        return fetch(RemotePagingService.buildUrl(RemotePagingService.CUSTOMERS_URL, pageIndex, pageSize))
+        .then((result) => result.json())
+        .catch((error) => console.error(error.message));
+    }
+    
+    public static getHierarchyDataById(parentEntityName: string, parentId: string, childEntityName: string) {
+        return fetch(`${RemotePagingService.BASE_URL}${parentEntityName}/${parentId}/${childEntityName}`)
+        .then((result) => result.json());
     }
 
-    public async getDataLength(dataState: any): Promise<number> {
-        try {
-            const response = await fetch(buildUrl(dataState));
-            if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
-            }
-            const data = await response.json();
-            if (Array.isArray(data)) {
-                return data.length;
-            } else {
-                console.error('Data is not an array:', data);
-                return 0;
+    private static buildUrl(baseUrl: string, pageIndex?: number, pageSize?: number) {
+        let qS = "";
+        if (baseUrl) {
+                qS += `${baseUrl}`;
+        }
+
+        // Add pageIndex and size to the query string if they are defined
+        if (pageIndex !== undefined) {
+            qS += `?pageIndex=${pageIndex}`;
+            if (pageSize !== undefined) {
+                qS += `&size=${pageSize}`;
             }
-        } catch (error) {
-            console.error('Error fetching data length:', error);
-            return 0; 
+        } else if (pageSize !== undefined) {
+            qS += `?perPage=${pageSize}`;
         }
+
+        return `${qS}`;
     }
 }
diff --git a/samples/grids/hierarchical-grid/remote-paging-sample/src/index.ts b/samples/grids/hierarchical-grid/remote-paging-sample/src/index.ts
@@ -4,37 +4,33 @@ import 'igniteui-webcomponents-grids/grids/combined';
 import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';
 import { html } from 'lit-html';
 import { RemotePagingService } from './RemoteService';
+import { CustomersWithPageResponseModel } from './CustomersWithPageResponseModel';
 
 export class Sample {
 
     public data: any[] = [];
-    public page = 0;
-    private _perPage = 10;
-    public pager: IgcPaginatorComponent;
+    public page: number = 0;
     public hierarchicalGrid: IgcHierarchicalGridComponent;
-    private remoteService: RemotePagingService = new RemotePagingService();
+    private _bind: () => void;
+    private _perPage = 15;
+    public pager: IgcPaginatorComponent;
+    private _totalRecordsCount: number;
     
     public get perPage(): number {
-        return this.pager?.perPage || 10;
+        return this.pager?.perPage || this._perPage;
     }
     public set perPage(val: number) {
         this._perPage = val;
-        this.paginate(val);
     }
-
-    private _totalRecordsCount: number;
-
     public get totalRecordsCount(): number {
-    return this._totalRecordsCount;
+        return this._totalRecordsCount;
     }
-
     public set totalRecordsCount(value: number) {
-    this._totalRecordsCount = value;
-    this.hierarchicalGrid.totalRecords = value;
+        this._totalRecordsCount = value;
+        this.hierarchicalGrid.totalRecords = value;
     }
 
     constructor() {
-
         this.hierarchicalGrid = document.getElementById("hGrid") as IgcHierarchicalGridComponent;
         this.pager = document.getElementById('paginator') as IgcPaginatorComponent;
         const ordersRowIsland = document.getElementById("ordersRowIsland") as IgcRowIslandComponent;
@@ -43,81 +39,89 @@ export class Sample {
         ordersRowIsland.paginatorTemplate = this.webHierarchicalGridPaginatorTemplate;
         orderDetailsRowIsland.paginatorTemplate = this.webHierarchicalGridPaginatorTemplate;
 
-        this.pager.addEventListener("perPageChange", ()=> {
-            this.paginate(0);
-        });
-        this.pager.addEventListener("pageChange", ((args: CustomEvent<any>) => {
-            this.paginate(args.detail);}) as EventListener);
-        
-
-        ordersRowIsland.addEventListener("gridCreated", (event: any) => {
-            this.gridCreated(event, "Customers");
-        });
-
-        orderDetailsRowIsland.addEventListener("gridCreated", (event: any) => {
-            this.gridCreated(event, "Orders");
-        });
-
-        window.addEventListener("load", () => {
-            this.pager.totalRecords = this.totalRecordsCount;
-            this.paginate(0);
-         });
-
-        this.hierarchicalGrid.data = this.data;
-
-        this.hierarchicalGrid.isLoading = true;
-        this.remoteService.getData({ parentID: null, rootLevel: true, key: "Customers" }, this.page, this._perPage).then((data: any) => {
-            this.hierarchicalGrid.isLoading = false;
-            this.hierarchicalGrid.data = data;
-            this.hierarchicalGrid.markForCheck();
-        });
-        this.remoteService.getDataLength({ parentID: null, rootLevel: true, key: "Customers" }).then((length: number) => {
-            if(length !== undefined) {
-                this.totalRecordsCount = length;
-                this.pager.totalRecords = this.totalRecordsCount;
-            }
-        });
+        this._bind = () => {
+            window.addEventListener("load", () => {
+                this.pager.perPage = this._perPage;
+                this.loadCustomersData(this.page,this.perPage);
+            });
+
+            this.pager.addEventListener("perPageChange", ((args: CustomEvent<any>) => {
+              this.perPage = args.detail;
+              this.loadCustomersData(this.page, this.perPage);
+            }) as EventListener);
+
+            this.pager.addEventListener("pageChange", ((args: CustomEvent<any>) => {
+              this.page = args.detail;
+              this.loadCustomersData(this.page, this.perPage);
+            }) as EventListener);
+
+            ordersRowIsland.addEventListener("gridCreated", (event: any) => {
+                this.gridCreated(event, "Customers");
+            });
+    
+            orderDetailsRowIsland.addEventListener("gridCreated", (event: any) => {
+                this.gridCreated(event, "Orders");
+            });
+        }
+    
+        this._bind();
     }
 
-    public gridCreated(event: CustomEvent<IgcGridCreatedEventArgs>, _parentKey: string) {
+    public gridCreated(event: CustomEvent<IgcGridCreatedEventArgs>, parentKey: string) {
         const context = event.detail;
-
-        const dataState = {
-            key: context.owner.childDataKey,
-            parentID: context.parentID,
-            parentKey: _parentKey,
-            rootLevel: false
-        };
+        const parentId: string = context.parentID;
+        const childDataKey: string = context.owner.childDataKey;
 
         context.grid.isLoading = true;
-        this.remoteService.getDataLength(dataState).then((length: number) => {
-            if(length !== undefined) {
-                this.pager.totalRecords = length;
-            }
-        
-        this.remoteService.getData(dataState, this.page, this.perPage).then((data: any[]) => {
-            context.grid.isLoading = false;
-            context.grid.data = data;
-            context.grid.markForCheck();
-        });});
-    }
-
-    public paginate(page: number) {
-        this.page = page;
-        const skip = this.page * this.perPage;
-        const top = this.perPage;
-    
-        this.remoteService.getData({ parentID: null, rootLevel: true, key: 'Customers' }, skip, top).then((data:any)=> {
-          this.data = data; // Assign received data to this.data
-          this.hierarchicalGrid.isLoading = false;
-          this.hierarchicalGrid.markForCheck();// Update the UI after receiving data
+        RemotePagingService.getHierarchyDataById(parentKey, parentId, childDataKey)
+        .then((data: any) => {
+          context.grid.data = data;
+          context.grid.isLoading = false;
+          context.grid.markForCheck();
+        })
+        .catch((error) => {
+          console.error(error.message);
+          context.grid.data = [];
+          context.grid.isLoading = false;
+          context.grid.markForCheck();
         });
     }
 
     public webHierarchicalGridPaginatorTemplate = () => {
-        return html`<igc-paginator id="islandPaginator" @perPage="{this.perPage}" @perPageChanged="{this.paginate(0)}" per-page="5">
+        // Child level grids have LOCAL paging
+        // They can be set to REMOTE if there are endpoints with paging for each hierarchy level data.
+        return html `
+        <igc-paginator 
+            id="islandPaginator">
         </igc-paginator>`
     }
+
+    private updateUI(): void {
+        if (this.hierarchicalGrid && this.data) { // Check if grid and data are available
+            this.hierarchicalGrid.data = this.data;
+        }
+    }
+
+    private loadCustomersData(pageIndex?: number, pageSize?: number): void {
+        this.hierarchicalGrid.isLoading = true;
+        
+        RemotePagingService.getDataWithPaging(pageIndex,pageSize)
+        .then((response: CustomersWithPageResponseModel) => {
+          this.totalRecordsCount = response.totalRecordsCount;
+          this.pager.perPage = pageSize;
+          this.pager.totalRecords = this.totalRecordsCount;
+          this.page = response.pageNumber;
+          this.data = response.items;
+          this.hierarchicalGrid.isLoading = false;
+          this.updateUI(); // Update the UI after receiving data
+        })
+        .catch((error) => {
+          console.error(error.message);
+          this.hierarchicalGrid.data = [];
+          this.hierarchicalGrid.isLoading = false;
+          this.updateUI();
+        })
+      }
 }
 
 new Sample();
