fix(arc-saas): page test

page test

GH-34

Author: Deepika516

projects/saas-ui/src/app/main/components/billing-plan/billing-plan.component.html

@@ -6,8 +6,8 @@ <h2 class="heading">Billing Details</h2>
       <div class="grid">
         <ag-grid-angular
           class="ag-theme-quartz"
-          [rowData]="rowData"
           [columnDefs]="colDefs"
+          [gridOptions]="gridOptions"
         >
         </ag-grid-angular>
       </div>

projects/saas-ui/src/app/main/components/billing-plan/billing-plan.component.ts

@@ -1,13 +1,20 @@
 import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
-import {AnyObject} from '@project-lib/core/api';
+import {AnyObject, BackendFilter, Count} from '@project-lib/core/api';
 import {RouteComponentBaseDirective} from '@project-lib/core/route-component-base';
-import {ColDef} from 'ag-grid-community';
-import {takeUntil} from 'rxjs';
+import {
+  ColDef,
+  GridApi,
+  GridOptions,
+  IDatasource,
+  IGetRowsParams,
+} from 'ag-grid-community';
+import {Observable, combineLatest, map, takeUntil} from 'rxjs';
 import {Location} from '@angular/common';
 
 import {BillingPlanService} from '../../../shared/services/billing-plan-service';
 import {SubscriptionStatus} from '../../../shared/enum/subscription-status.enum';
+import {Plan} from '../../../shared/models';
 
 @Component({
   selector: 'app-billing-plan',
@@ -18,6 +25,9 @@ export class BillingPlanComponent
   extends RouteComponentBaseDirective
   implements OnInit
 {
+  gridApi: GridApi;
+  gridOptions: GridOptions;
+  limit = 5;
   colDefs: ColDef[] = [
     {field: 'companyName', width: 200, minWidth: 20},
     {field: 'userName', width: 200, minWidth: 20},
@@ -37,12 +47,65 @@ export class BillingPlanComponent
     private readonly billingplanService: BillingPlanService,
   ) {
     super(route, location);
+    this.gridOptions = {
+      pagination: true,
+      rowModelType: 'infinite',
+      paginationPageSize: this.limit,
+      paginationPageSizeSelector: [this.limit, 10, 20, 50, 100],
+      cacheBlockSize: this.limit,
+      onGridReady: this.onGridReady.bind(this),
+      rowHeight: 60,
+      defaultColDef: {flex: 1},
+    };
   }
 
   ngOnInit(): void {
     this.getBillingPlan();
+    // this.getTotal();
   }
 
+  onGridReady(params: any) {
+    this.gridApi = params.api;
+    const dataSource: IDatasource = {
+      getRows: (params: IGetRowsParams) => {
+        const page = params.endRow / this.limit;
+        const paginatedLeads = this.getPaginatedBillPlans(page, this.limit);
+        const totalLead = this.getTotal();
+        combineLatest([paginatedLeads, totalLead]).subscribe(
+          ([data, count]) => {
+            params.successCallback(data, count.count);
+          },
+
+          err => {
+            params.failCallback();
+          },
+        );
+      },
+    };
+    params.api.setDatasource(dataSource);
+  }
+
+  getPaginatedBillPlans(page: number, limit: number): Observable<any[]> {
+    const filter: BackendFilter<Plan> = {
+      offset: limit * (page - 1),
+      limit: limit,
+    };
+    return this.billingplanService.getBillingDetails(filter).pipe(
+      map(res => {
+        const rows = res.map(item => {
+          return {
+            companyName: item.companyName,
+            userName: item.userName,
+            planName: item.planName,
+            startDate: item.startDate,
+            endDate: item.endDate,
+            status: SubscriptionStatus[item.status],
+          };
+        });
+        return rows;
+      }),
+    );
+  }
   getBillingPlan() {
     this.billingplanService
       .getBillingDetails()
@@ -60,4 +123,14 @@ export class BillingPlanComponent
         });
       });
   }
+  filter(filter: any) {
+    throw new Error('Method not implemented.');
+  }
+
+  getTotal(): Observable<Count> {
+    return this.billingplanService.getTotalBillingPlan();
+    // .subscribe(resp => {
+    //   console.log(resp);
+    // });
+  }
 }

projects/saas-ui/src/app/shared/services/billing-plan-service.ts

@@ -66,12 +66,22 @@ export class BillingPlanService {
     };
     return command.execute();
   }
-  getBillingDetails() {
+
+  getBillingDetails(filter?: BackendFilter<AnyObject>) {
     const command: GetBillingDetails<AnyObject> = new GetBillingDetails(
       this.apiService,
       this.anyAdapter,
       this.appConfig,
     );
+    const backendFilter: BackendFilter<AnyObject> = filter
+      ? {
+          where: filter.where,
+          offset: filter.offset,
+          limit: filter.limit,
+          order: filter.order,
+          include: filter.include || [], // Adding include from filter parameter
+        }
+      : {};
     return command.execute();
   }
   getCurrencyDetails() {