#234 - Fix to Pagintion Sorting Issue

src/app/adf-api-docs/df-api-docs/df-api-docs-table.component.ts

@@ -90,7 +90,7 @@ export class DfApiDocsTableComponent extends DfManageTableComponent<ApiDocsRowDa
   }
 
   override mapDataToTable(data: Service[]): ApiDocsRowData[] {
-    const sortedData = data.sort((a, b) => a.id - b.id);
+    const sortedData = data.sort((a, b) => a.name.localeCompare(b.name));
     return sortedData.map(val => {
       const type = this.getServiceType(val.type);
       return {
@@ -114,7 +114,7 @@ export class DfApiDocsTableComponent extends DfManageTableComponent<ApiDocsRowDa
   ): void {
     this.servicesService
       .getAll<GenericListResponse<Service>>({
-        limit,
+        limit: 100 || limit,
         offset,
         filter: `(type not like "%swagger%")${filter ? ` and ${filter}` : ''}`,
       })

src/app/adf-services/df-service-details/df-service-details.component.html

@@ -349,7 +349,7 @@ <h4 class="text-center" style="color: black !important">
         <mat-accordion class="full-width">
           <mat-expansion-panel [expanded]="serviceForm.getRawValue().type">
             <mat-expansion-panel-header
-              >{{ 'services.options' | transloco }}s
+              >{{ 'services.options' | transloco }}
             </mat-expansion-panel-header>
             <div class="details-section">
               <ng-container *ngIf="this.isNetworkService">

src/app/routes.ts

@@ -270,7 +270,7 @@ export const routes: Routes = [
                 './adf-api-docs/df-api-docs/df-api-docs-table.component'
               ).then(m => m.DfApiDocsTableComponent),
             resolve: {
-              data: servicesResolver(10, '(type not like "%swagger%")'),
+              data: servicesResolver(100, '(type not like "%swagger%")'),
               serviceTypes: serviceTypesResolver,
             },
           },

src/app/shared/components/df-manage-table/df-manage-table.component.ts

@@ -7,7 +7,11 @@ import {
   OnInit,
   ViewChild,
 } from '@angular/core';
-import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import {
+  MatPaginator,
+  MatPaginatorModule,
+  PageEvent,
+} from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -81,6 +85,7 @@ export abstract class DfManageTableComponent<T>
   abstract columns: Array<Column<T>>;
 
   @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatPaginator) paginator: MatPaginator;
   _activatedRoute = this.activatedRoute;
   _translateService = this.translateService;
 
@@ -123,6 +128,7 @@ export abstract class DfManageTableComponent<T>
         this.schema = this.router.url.includes('schema');
         if (data && data.resource) {
           this.dataSource.data = this.mapDataToTable(data.resource);
+          this.dataSource.paginator = this.paginator;
         }
         if (data && data.meta) {
           this.tableLength = data.meta.count;
@@ -143,6 +149,7 @@ export abstract class DfManageTableComponent<T>
 
   ngAfterViewInit(): void {
     this.dataSource.sort = this.sort;
+    this.dataSource.paginator = this.paginator;
   }
 
   activeIcon(active: boolean): IconProp {
@@ -212,12 +219,14 @@ export abstract class DfManageTableComponent<T>
   }
 
   changePage(event: PageEvent): void {
-    if (event.previousPageIndex !== event.pageIndex) {
-      this.refreshTable(this.currentPageSize, event.pageIndex * event.pageSize);
-    } else {
-      this.currentPageSize = event.pageSize;
-      this.refreshTable(event.pageSize);
-    }
+    // if (event.previousPageIndex !== event.pageIndex) {
+    //   console.log(event);
+    //   this.refreshTable(undefined, event.pageIndex * event.pageSize);
+    // } else {
+    //   console.log(event);
+    //   this.currentPageSize = event.pageSize;
+    //   this.refreshTable(event.pageSize);
+    // }
   }
 
   createRow(): void {

src/app/shared/services/df-base-crud.service.ts

@@ -16,7 +16,7 @@ export class DfBaseCrudService {
     return this.http.get<T>(
       this.url,
       this.getOptions({
-        limit: 10,
+        limit: 100,
         offset: 0,
         includeCount: true,
         ...options,