region and dynamic pagination & sorting updates

src/app/param/table/param-table.component.ts

@@ -2,7 +2,7 @@ import { Component, inject, Input, ViewChild } from '@angular/core';
 import { AngularMaterialModule } from '../../shared/module/angular-material.module';
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { CommonModule } from '@angular/common';
-import { MatPaginator } from '@angular/material/paginator';
+import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { UserPreferences } from '../../core/models/user-preference';
 import { UserPreferencesService } from '../../core/services/user-preference.service';
@@ -17,12 +17,14 @@ import { NotificationService } from '../../core/services/common/notification.ser
 import { TABLE_MODE } from '../../core/models/param/types';
 import { ProperCasePipe } from '../../shared/pipes/proper-case.pipe';
 import { finalize } from 'rxjs';
+import { CustomPaginator } from '../../shared/custom-paginator';
 
 @Component({
   selector: 'app-param-table',
   imports: [AngularMaterialModule, ReactiveFormsModule, CommonModule, MatSlideToggleModule, ProperCasePipe],
   templateUrl: './param-table.component.html',
-  styleUrl: './param-table.component.scss'
+  styleUrl: './param-table.component.scss',
+  providers: [{ provide: MatPaginatorIntl, useClass: CustomPaginator }],
 })
 export class ParamTableComponent {
   //@ViewChild(MatPaginator) paginator!: MatPaginator;
@@ -54,7 +56,7 @@ export class ParamTableComponent {
   private notificationService = inject(NotificationService);
 
   dataSource = new MatTableDataSource<any>([]);
-  
+
   @ViewChild(MatPaginator, { static: false })
   set paginator(value: MatPaginator) {
     this.dataSource.paginator = value;
@@ -203,9 +205,9 @@ export class ParamTableComponent {
         this.renderParamData();
       },
       error: (error: any) => {
-        let errorMessage = this.errorHandler.handleApiError(error, 'Failed to search preparers');
+        let errorMessage = this.errorHandler.handleApiError(error, 'Failed to load parameters');
         this.notificationService.showError(errorMessage);
-        console.error('Error loading preparers:', error);
+        console.error('Error loading parameters:', error);
       }
     });
   }

src/app/region/region.component.html

@@ -16,7 +16,7 @@
         <table mat-table [dataSource]="dataSource" matSort>
             <!-- Value Column -->
             <ng-container matColumnDef="value">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header>Region Value</th>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header>Region</th>
                 <td mat-cell *matCellDef="let item">{{ item.value }}</td>
             </ng-container>
 

src/app/region/region.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, inject, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, EventEmitter, inject, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
@@ -21,10 +21,17 @@ import { finalize } from 'rxjs';
   styleUrl: './region.component.scss',
   providers: [{ provide: MatPaginatorIntl, useClass: CustomPaginator }],
 })
-export class RegionComponent implements OnInit {
-  @ViewChild(MatPaginator) paginator!: MatPaginator;
-  @ViewChild(MatSort) sort!: MatSort;
+export class RegionComponent implements OnInit, AfterViewInit {
+  @ViewChild(MatPaginator, { static: false })
+  set paginator(value: MatPaginator) {
+    this.dataSource.paginator = value;
+  }
 
+  @ViewChild(MatSort, { static: false })
+  set sort(value: MatSort) {
+    this.dataSource.sort = value;
+  }
+  
   displayedColumns: string[] = ['value', 'name', 'actions'];
   dataSource = new MatTableDataSource<any>();
   regionForm: FormGroup;

src/app/service-provider/basic-fee/basic-fee.component.ts

@@ -21,8 +21,15 @@ import { BasicFeeService } from '../../core/services/service-provider/basic-fee.
   providers: [{ provide: MatPaginatorIntl, useClass: CustomPaginator }],
 })
 export class BasicFeeComponent {
-  @ViewChild(MatPaginator) paginator!: MatPaginator;
-  @ViewChild(MatSort) sort!: MatSort;
+  @ViewChild(MatPaginator, { static: false })
+  set paginator(value: MatPaginator) {
+    this.dataSource.paginator = value;
+  }
+
+  @ViewChild(MatSort, { static: false })
+  set sort(value: MatSort) {
+    this.dataSource.sort = value;
+  }
 
   displayedColumns: string[] = ['startCarnetValue', 'endCarnetValue', 'fees', 'effectiveDate', 'actions'];
   dataSource = new MatTableDataSource<BasicFee>();

src/app/service-provider/cargo-rate/cargo-rate.component.ts

@@ -21,8 +21,15 @@ import { CargoRateService } from '../../core/services/service-provider/cargo-rat
   providers: [{ provide: MatPaginatorIntl, useClass: CustomPaginator }],
 })
 export class CargoRateComponent implements OnInit {
-  @ViewChild(MatPaginator) paginator!: MatPaginator;
-  @ViewChild(MatSort) sort!: MatSort;
+  @ViewChild(MatPaginator, { static: false })
+  set paginator(value: MatPaginator) {
+    this.dataSource.paginator = value;
+  }
+
+  @ViewChild(MatSort, { static: false })
+  set sort(value: MatSort) {
+    this.dataSource.sort = value;
+  }
 
   displayedColumns: string[] = ['carnetType', 'startSets', 'endSets', 'rate', 'effectiveDate', 'actions'];
   dataSource = new MatTableDataSource<any>();

src/app/service-provider/carnet-fee/carnet-fee.component.ts

@@ -24,9 +24,15 @@ import { finalize } from 'rxjs';
   providers: [{ provide: MatPaginatorIntl, useClass: CustomPaginator }],
 })
 export class CarnetFeeComponent implements OnInit {
+  @ViewChild(MatPaginator, { static: false })
+  set paginator(value: MatPaginator) {
+    this.dataSource.paginator = value;
+  }
 
-  @ViewChild(MatPaginator) paginator!: MatPaginator;
-  @ViewChild(MatSort) sort!: MatSort;
+  @ViewChild(MatSort, { static: false })
+  set sort(value: MatSort) {
+    this.dataSource.sort = value;
+  }
 
   displayedColumns: string[] = ['feeType', 'commissionRate', 'effectiveDate', 'actions'];
   dataSource = new MatTableDataSource<CarnetFee>();

src/app/service-provider/carnet-sequence/carnet-sequence.component.scss

@@ -99,6 +99,7 @@
             .form-row {
                 display: flex;
                 gap: 16px;
+                align-items: start;
 
                 mat-form-field {
                     flex: 1;

src/app/service-provider/carnet-sequence/carnet-sequence.component.ts

@@ -23,8 +23,15 @@ import { CarnetSequenceService } from '../../core/services/service-provider/carn
   providers: [{ provide: MatPaginatorIntl, useClass: CustomPaginator }],
 })
 export class CarnetSequenceComponent implements OnInit {
-  @ViewChild(MatPaginator) paginator!: MatPaginator;
-  @ViewChild(MatSort) sort!: MatSort;
+  @ViewChild(MatPaginator, { static: false })
+  set paginator(value: MatPaginator) {
+    this.dataSource.paginator = value;
+  }
+
+  @ViewChild(MatSort, { static: false })
+  set sort(value: MatSort) {
+    this.dataSource.sort = value;
+  }
 
   displayedColumns: string[] = ['carnetType', 'region', 'startNumber', 'endNumber', 'lastNumber'];
   dataSource = new MatTableDataSource<CarnetSequence>();

src/app/service-provider/contacts/contacts.component.ts

@@ -25,8 +25,15 @@ import { ContactLogin } from '../../core/models/service-provider/contact-login';
   providers: [{ provide: MatPaginatorIntl, useClass: CustomPaginator }],
 })
 export class ContactsComponent implements OnInit {
-  @ViewChild(MatPaginator) paginator!: MatPaginator;
-  @ViewChild(MatSort) sort!: MatSort;
+  @ViewChild(MatPaginator, { static: false })
+  set paginator(value: MatPaginator) {
+    this.dataSource.paginator = value;
+  }
+
+  @ViewChild(MatSort, { static: false })
+  set sort(value: MatSort) {
+    this.dataSource.sort = value;
+  }
 
   displayedColumns: string[] = ['firstName', 'lastName', 'title', 'phone', 'email', 'defaultContact', 'actions'];
   dataSource = new MatTableDataSource<any>();

src/app/service-provider/continuation-sheet-fee/continuation-sheet-fee.component.ts

@@ -20,8 +20,15 @@ import { ContinuationSheetFeeService } from '../../core/services/service-provide
   providers: [{ provide: MatPaginatorIntl, useClass: CustomPaginator }],
 })
 export class ContinuationSheetFeeComponent implements OnInit {
-  @ViewChild(MatPaginator) paginator!: MatPaginator;
-  @ViewChild(MatSort) sort!: MatSort;
+  @ViewChild(MatPaginator, { static: false })
+  set paginator(value: MatPaginator) {
+    this.dataSource.paginator = value;
+  }
+
+  @ViewChild(MatSort, { static: false })
+  set sort(value: MatSort) {
+    this.dataSource.sort = value;
+  }
 
   displayedColumns: string[] = ['customerType', 'carnetType', 'rate', 'effectiveDate', 'actions'];
   dataSource = new MatTableDataSource<any>();

src/app/service-provider/counterfoil-fee/counterfoil-fee.component.ts

@@ -21,8 +21,15 @@ import { finalize } from 'rxjs';
   providers: [{ provide: MatPaginatorIntl, useClass: CustomPaginator }],
 })
 export class CounterfoilFeeComponent implements OnInit {
-  @ViewChild(MatPaginator) paginator!: MatPaginator;
-  @ViewChild(MatSort) sort!: MatSort;
+  @ViewChild(MatPaginator, { static: false })
+  set paginator(value: MatPaginator) {
+    this.dataSource.paginator = value;
+  }
+
+  @ViewChild(MatSort, { static: false })
+  set sort(value: MatSort) {
+    this.dataSource.sort = value;
+  }
 
   displayedColumns: string[] = ['customerType', 'carnetType', 'startSets', 'endSets', 'rate', 'effectiveDate', 'actions'];
   dataSource = new MatTableDataSource<any>();

src/app/service-provider/expedited-fee/expedited-fee.component.ts

@@ -25,8 +25,15 @@ import { ExpeditedFeeService } from '../../core/services/service-provider/expedi
   providers: [{ provide: MatPaginatorIntl, useClass: CustomPaginator }],
 })
 export class ExpeditedFeeComponent implements OnInit, OnDestroy {
-  @ViewChild(MatPaginator) paginator!: MatPaginator;
-  @ViewChild(MatSort) sort!: MatSort;
+  @ViewChild(MatPaginator, { static: false })
+  set paginator(value: MatPaginator) {
+    this.dataSource.paginator = value;
+  }
+
+  @ViewChild(MatSort, { static: false })
+  set sort(value: MatSort) {
+    this.dataSource.sort = value;
+  }
 
   displayedColumns: string[] = ['customerType', 'deliveryType', 'time', 'fee', 'effectiveDate', 'actions'];
   dataSource = new MatTableDataSource<any>();

src/app/service-provider/security-deposit/security-deposit.component.ts

@@ -24,8 +24,15 @@ import { HolderType } from '../../core/models/holder-type';
   providers: [{ provide: MatPaginatorIntl, useClass: CustomPaginator }],
 })
 export class SecurityDepositComponent implements OnInit {
-  @ViewChild(MatPaginator) paginator!: MatPaginator;
-  @ViewChild(MatSort) sort!: MatSort;
+  @ViewChild(MatPaginator, { static: false })
+  set paginator(value: MatPaginator) {
+    this.dataSource.paginator = value;
+  }
+
+  @ViewChild(MatSort, { static: false })
+  set sort(value: MatSort) {
+    this.dataSource.sort = value;
+  }
 
   displayedColumns: string[] = ['holderType', 'uscibMember', 'specialCommodity', 'specialCountry', 'rate', 'rateInPercentage', 'effectiveDate', 'actions'];
   dataSource = new MatTableDataSource<any>();