Merge pull request #51 from sourcefuse/saas-ui-13

fix(arc-saas): pagination of components

Author: yeshamavani

projects/saas-ui/src/app/main/commands/get-total-billing-plan.command.ts

@@ -0,0 +1,22 @@
+import {
+  ApiService,
+  Count,
+  GetAPICommand,
+  IAdapter,
+} from '@project-lib/core/api';
+
+import {IAnyObject} from '@project-lib/core/i-any-object';
+
+export class GetTotalBillingPlanCommand<T> extends GetAPICommand<Count> {
+  constructor(
+    apiService: ApiService,
+    adapter: IAdapter<Count>,
+    appConfig: IAnyObject,
+  ) {
+    super(
+      apiService,
+      adapter,
+      `${appConfig.baseApiUrl}${appConfig.subscriptionServiceUrl}/subscriptions/count`,
+    );
+  }
+}

projects/saas-ui/src/app/main/commands/get-total-lead.command.ts

@@ -0,0 +1,24 @@
+import {
+  ApiService,
+  Count,
+  GetAPICommand,
+  GetListAPICommand,
+  IAdapter,
+} from '@project-lib/core/api';
+import {Lead} from '../../shared/models';
+
+import {IAnyObject} from '@project-lib/core/i-any-object';
+
+export class GetTotalLeadCommand<T> extends GetAPICommand<Count> {
+  constructor(
+    apiService: ApiService,
+    adapter: IAdapter<Count>,
+    appConfig: IAnyObject,
+  ) {
+    super(
+      apiService,
+      adapter,
+      `${appConfig.baseApiUrl}${appConfig.tenantmgmtServiceUrl}/leads/count`,
+    );
+  }
+}

projects/saas-ui/src/app/main/commands/get-total-plan.command.ts

@@ -0,0 +1,25 @@
+import {
+  IApiService,
+  IAdapter,
+  GetAPICommand,
+  Count,
+} from '@project-lib/core/api';
+import {Observable} from 'rxjs';
+import {Inject} from '@angular/core';
+import {APP_CONFIG} from '@project-lib/app-config';
+import {IAnyObject} from '@project-lib/core/i-any-object';
+import {Plan} from '../../shared/models';
+
+export class GetTotalPlanCommand<T> extends GetAPICommand<Count> {
+  constructor(
+    apiService: IApiService,
+    adapter: IAdapter<Count>,
+    appConfig: IAnyObject,
+  ) {
+    super(
+      apiService,
+      adapter,
+      `${appConfig.baseApiUrl}${appConfig.subscriptionServiceUrl}/plans/count`,
+    );
+  }
+}

projects/saas-ui/src/app/main/commands/get-total-tenant.command.ts

@@ -0,0 +1,23 @@
+import {
+  ApiService,
+  Count,
+  GetAPICommand,
+  GetListAPICommand,
+  IAdapter,
+} from '@project-lib/core/api';
+
+import {IAnyObject} from '@project-lib/core/i-any-object';
+
+export class GetTotalTenantCommand<T> extends GetAPICommand<Count> {
+  constructor(
+    apiService: ApiService,
+    adapter: IAdapter<Count>,
+    appConfig: IAnyObject,
+  ) {
+    super(
+      apiService,
+      adapter,
+      `${appConfig.baseApiUrl}${appConfig.tenantmgmtServiceUrl}/tenants/count`,
+    );
+  }
+}

projects/saas-ui/src/app/main/commands/index.ts

@@ -11,3 +11,7 @@ export * from './get-billing.command';
 export * from './get-currency-command';
 export * from './get-plan-by-id.command';
 export * from './get-plan.command';
+export * from './get-total-lead.command';
+export * from './get-total-tenant.command';
+export * from './get-total-plan.command';
+export * from './get-total-billing-plan.command';

projects/saas-ui/src/app/main/components/button-renderer/button-renderer.component.ts

@@ -7,15 +7,16 @@ import {BillingPlanService} from '../../../shared/services/billing-plan-service'
 import {AddPlanComponent} from '../add-plan/add-plan.component';
 import {FormBuilder, Validators} from '@angular/forms';
 import {Location} from '@angular/common';
+import {AnyObject} from '@project-lib/core/api';
 @Component({
   selector: 'app-button-renderer',
   templateUrl: './button-renderer.component.html',
   styleUrls: ['./button-renderer.component.scss'],
 })
 export class ButtonRendererComponent implements ICellRendererAngularComp {
-  params: any;
+  params: AnyObject;
   gridApi: GridApi;
-  addPlanForm: any;
+  addPlanForm: AnyObject;
   constructor(
     private readonly router: Router,
     private toastrService: ToasterService,

projects/saas-ui/src/app/main/components/lead-list/lead-list.component.html

@@ -6,8 +6,8 @@ <h2 class="heading">Lead List</h2>
         <!-- ag-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/lead-list/lead-list.component.ts

@@ -1,22 +1,26 @@
 import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 import {RouteComponentBaseDirective} from '@project-lib/core/route-component-base';
-import {ColDef} from 'ag-grid-community';
+import {
+  ColDef,
+  GridApi,
+  GridOptions,
+  IDatasource,
+  IGetRowsParams,
+} from 'ag-grid-community';
 import {Location} from '@angular/common';
-import {takeUntil} from 'rxjs';
+import {Observable, combineLatest, map, of, takeUntil} from 'rxjs';
 import {OnBoardingService} from '../../../shared/services/on-boarding-service';
 import {Lead} from '../../../shared/models';
-import {AnyObject, BackendFilter} from '@project-lib/core/index';
+import {AnyObject, BackendFilter, Count} from '@project-lib/core/index';
+import {HttpClient} from '@angular/common/http';
 
 @Component({
   selector: 'app-lead',
   templateUrl: './lead-list.component.html',
   styleUrls: ['./lead-list.component.scss'],
 })
-export class LeadListComponent
-  extends RouteComponentBaseDirective
-  implements OnInit
-{
+export class LeadListComponent extends RouteComponentBaseDirective {
   // defining column names here
   colDefs: ColDef[] = [
     {field: 'firstName', width: 250, minWidth: 20},
@@ -31,32 +35,71 @@ export class LeadListComponent
   filter: BackendFilter<Lead> = {
     include: [{relation: 'address'}],
   };
+  gridApi: GridApi;
+  gridOptions: GridOptions;
+  limit = 5;
 
   constructor(
     protected override readonly location: Location,
     protected override readonly route: ActivatedRoute,
     private readonly onboardingService: OnBoardingService,
+    private http: HttpClient,
   ) {
     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.getTenants();
+  onGridReady(params: AnyObject) {
+    this.gridApi = params.api;
+    const dataSource: IDatasource = {
+      getRows: (params: IGetRowsParams) => {
+        const page = params.endRow / this.limit;
+        const paginatedLeads = this.getPaginatedLeads(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);
   }
 
-  getTenants() {
-    this.onboardingService
-      .getLeadList(null, null, this.filter)
-      .pipe(takeUntil(this._destroy$))
-      .subscribe(res => {
-        const data = res;
-        this.rowData = data.map(item => ({
+  getPaginatedLeads(page: number, limit: number): Observable<AnyObject[]> {
+    const filter: BackendFilter<Lead> = {
+      offset: limit * (page - 1),
+      limit: limit,
+      include: [{relation: 'address'}],
+    };
+    return this.onboardingService.getLeadList(filter).pipe(
+      map(res => {
+        const rows = res.map(item => ({
           firstName: item.firstName,
           lastName: item.lastName,
           companyName: item.companyName,
           email: item.email,
           country: item.address.country,
         }));
-      });
+        return rows;
+      }),
+    );
+  }
+
+  getTotal(): Observable<Count> {
+    return this.onboardingService.getTotalLead();
   }
 }

projects/saas-ui/src/app/main/components/manage-plans/manage-plans.component.html

@@ -6,10 +6,10 @@ <h2 class="heading">Manage Plan</h2>
       <div class="grid">
         <ag-grid-angular
           class="ag-theme-quartz"
-          [rowData]="rowData"
           [columnDefs]="colDefs"
           [editType]="'fullRow'"
           [rowSelection]="rowSelection"
+          [gridOptions]="gridOptions"
           (gridReady)="onGridReady($event)"
           (rowEditingStopped)="(onRowEditingStopped)"
         >

projects/saas-ui/src/app/main/components/manage-plans/manage-plans.component.ts

@@ -1,14 +1,20 @@
 import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
-import {ColDef, GridApi} from 'ag-grid-community';
+import {
+  ColDef,
+  GridApi,
+  GridOptions,
+  IDatasource,
+  IGetRowsParams,
+} from 'ag-grid-community';
 import {OnBoardingService} from '../../../shared/services/on-boarding-service';
 import {NbToastrService} from '@nebular/theme';
 import {Location} from '@angular/common';
-import {takeUntil} from 'rxjs';
+import {Observable, combineLatest, map, takeUntil} from 'rxjs';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 import {Plan} from '../../../shared/models';
 import {RouteComponentBaseDirective} from '@project-lib/core/route-component-base';
-import {AnyObject, BackendFilter} from '@project-lib/core/api';
+import {AnyObject, BackendFilter, Count} from '@project-lib/core/api';
 import {BillingPlanService} from '../../../shared/services/billing-plan-service';
 import {ToasterService} from '@project-lib/theme/toaster';
 import {ButtonRendererComponent} from '../button-renderer/button-renderer.component';
@@ -17,11 +23,11 @@ import {ButtonRendererComponent} from '../button-renderer/button-renderer.compon
   templateUrl: './manage-plans.component.html',
   styleUrls: ['./manage-plans.component.scss'],
 })
-export class ManagePlansComponent
-  extends RouteComponentBaseDirective
-  implements OnInit
-{
+export class ManagePlansComponent extends RouteComponentBaseDirective {
   [x: string]: any;
+  gridApi: GridApi;
+  gridOptions: GridOptions;
+  limit = 5;
   colDefs: ColDef[] = [
     {field: 'name', headerName: 'Plan Name', width: 200, minWidth: 20},
     {field: 'description', width: 200, minWidth: 20},
@@ -35,8 +41,6 @@ export class ManagePlansComponent
       width: 200,
     },
   ];
-
-  gridApi: GridApi;
   rowData = [];
   public rowSelection: 'single' | 'multiple' = 'single';
   tenants: AnyObject[];
@@ -53,18 +57,48 @@ export class ManagePlansComponent
     private fb: FormBuilder,
   ) {
     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.getPlans();
+  onGridReady(params: AnyObject) {
+    this.gridApi = params.api;
+    const dataSource: IDatasource = {
+      getRows: (params: IGetRowsParams) => {
+        const page = params.endRow / this.limit;
+        const paginatedLeads = this.getPaginatedPlans(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);
   }
 
-  getPlans() {
-    this.billingPlanService
-      .getPlanOptions(null, null, this.filter)
-      .pipe(takeUntil(this._destroy$))
-      .subscribe(res => {
-        this.rowData = res.map(item => {
+  getPaginatedPlans(page: number, limit: number): Observable<AnyObject[]> {
+    const filter: BackendFilter<Plan> = {
+      offset: limit * (page - 1),
+      limit: limit,
+      include: [{relation: 'currency'}, {relation: 'billingCycle'}],
+    };
+    return this.billingPlanService.getPlanOptions(filter).pipe(
+      map(res => {
+        const rows = res.map(item => {
           return {
             id: item.id,
             name: item.name,
@@ -74,12 +108,15 @@ export class ManagePlansComponent
             price: item.price,
           };
         });
-      });
+        return rows;
+      }),
+    );
   }
 
-  onGridReady(params) {
-    this.gridApi = params.api;
+  getTotal(): Observable<Count> {
+    return this.billingPlanService.getTotalPlan();
   }
+
   showManagePlan() {
     this.router.navigate(['/main/add-plan']);
   }