feat(pagination): update editor to jump back to first page after a ne…

…w search was triggered (#3233) * Update editor to jump back to first page after a new search was triggered * Remove debug line of code
azerothcore · Jan 11, 2025 · a5bd887 · a5bd887
1 parent bc6eee8
commit a5bd887
Show file tree

Hide file tree

Showing 12 changed files with 38 additions and 2 deletions.
diff --git a/libs/features/conditions/src/select-conditions/select-conditions.component.html b/libs/features/conditions/src/select-conditions/select-conditions.component.html
@@ -79,6 +79,8 @@
           [limit]="DTCFG.limit"
           [selectionType]="DTCFG.selectionType"
           (select)="onSelect($event)"
+          [offset]="selectService.pageOffset"
+          (page)="onPage($event)"
         >
           <ngx-datatable-column name="Type" prop="SourceTypeOrReferenceId" [minWidth]="60"></ngx-datatable-column>
           <ngx-datatable-column name="Group" prop="SourceGroup"></ngx-datatable-column>

diff --git a/libs/features/creature/src/select-creature/select-creature.component.html b/libs/features/creature/src/select-creature/select-creature.component.html
@@ -52,6 +52,8 @@
           [rowHeight]="DTCFG.rowHeight"
           [limit]="DTCFG.limit"
           [selectionType]="DTCFG.selectionType"
+          [offset]="selectService.pageOffset"
+          (page)="onPage($event)"
           (select)="selectService.onSelect($event)"
         >
           <ngx-datatable-column name="entry" prop="entry" [minWidth]="100">

diff --git a/libs/features/gameobject/src/select-gameobject/select-gameobject.component.html b/libs/features/gameobject/src/select-gameobject/select-gameobject.component.html
@@ -59,6 +59,8 @@
           [limit]="DTCFG.limit"
           [selectionType]="DTCFG.selectionType"
           (select)="selectService.onSelect($event)"
+          [offset]="selectService.pageOffset"
+          (page)="onPage($event)"
         >
           <ngx-datatable-column name="Entry" prop="entry" [minWidth]="100">
             <ng-template let-row="row" ngx-datatable-cell-template>

diff --git a/libs/features/gossip/src/select-gossip/select-gossip.component.html b/libs/features/gossip/src/select-gossip/select-gossip.component.html
@@ -47,6 +47,8 @@
           [limit]="DTCFG.limit"
           [selectionType]="DTCFG.selectionType"
           (select)="selectService.onSelect($event)"
+          [offset]="selectService.pageOffset"
+          (page)="onPage($event)"
         >
           <ngx-datatable-column name="MenuID" prop="MenuID" [minWidth]="80">
             <ng-template let-row="row" ngx-datatable-cell-template>

diff --git a/libs/features/item/src/select-item/select-item.component.html b/libs/features/item/src/select-item/select-item.component.html
@@ -47,6 +47,8 @@
           [limit]="DTCFG.limit"
           [selectionType]="DTCFG.selectionType"
           (select)="selectService.onSelect($event)"
+          [offset]="selectService.pageOffset"
+          (page)="onPage($event)"
         >
           <ngx-datatable-column [minWidth]="42" [maxWidth]="42" [sortable]="false">
             <ng-template let-row="row" ngx-datatable-cell-template>

diff --git a/libs/features/other-loots/src/select-loot.component.html b/libs/features/other-loots/src/select-loot.component.html
@@ -45,6 +45,8 @@
           [limit]="DTCFG.limit"
           [selectionType]="DTCFG.selectionType"
           (select)="selectService.onSelect($event)"
+          [offset]="selectService.pageOffset"
+          (page)="onPage($event)"
         >
           <ngx-datatable-column name="Entry" prop="Entry" [minWidth]="500">
             <ng-template let-row="row" ngx-datatable-cell-template>

diff --git a/libs/features/quest/src/select-quest/select-quest.component.html b/libs/features/quest/src/select-quest/select-quest.component.html
@@ -47,6 +47,8 @@
           [limit]="DTCFG.limit"
           [selectionType]="DTCFG.selectionType"
           (select)="selectService.onSelect($event)"
+          [offset]="selectService.pageOffset"
+          (page)="onPage($event)"
         >
           <ngx-datatable-column name="ID" prop="ID" [minWidth]="100">
             <ng-template let-row="row" ngx-datatable-cell-template>

diff --git a/libs/features/spell/src/select-spell/select-spell.component.html b/libs/features/spell/src/select-spell/select-spell.component.html
@@ -68,6 +68,8 @@
           [limit]="DTCFG.limit"
           [selectionType]="DTCFG.selectionType"
           (select)="selectService.onSelect($event)"
+          [offset]="selectService.pageOffset"
+          (page)="onPage($event)"
         >
           <ngx-datatable-column [name]="SPELL_DBC_ID" [prop]="SPELL_DBC_ID" [minWidth]="150">
             <ng-template let-row="row" ngx-datatable-cell-template>

diff --git a/libs/shared/base-abstract-classes/src/components/editors/select-complex-key.component.ts b/libs/shared/base-abstract-classes/src/components/editors/select-complex-key.component.ts
@@ -1,5 +1,5 @@
 import { ComplexKeyHandlerService } from '../../service/handlers/complex-key.handler.service';
-import { TableRow, WIKI_BASE_URL } from '@keira/shared/constants';
+import { DataTablePageEvent, TableRow, WIKI_BASE_URL } from '@keira/shared/constants';
 import { DTCFG } from '@keira/shared/config';
 import { ChangeDetectorRef, inject } from '@angular/core';
 import { SearchService } from '../../service/select/search.service';
@@ -25,4 +25,8 @@ export abstract class SelectComplexKeyComponent<T extends TableRow> {
   onSearch(): void {
     this.selectService.onSearch(this.changeDetectorRef);
   }
+
+  onPage(event: DataTablePageEvent): void {
+    this.selectService.pageOffset = event.offset;
+  }
 }
diff --git a/libs/shared/base-abstract-classes/src/components/editors/select.component.ts b/libs/shared/base-abstract-classes/src/components/editors/select.component.ts
@@ -1,6 +1,6 @@
 /* istanbul ignore file */ // TODO: fix coverage
 import { ChangeDetectorRef, inject } from '@angular/core';
-import { TableRow } from '@keira/shared/constants';
+import { DataTablePageEvent, TableRow } from '@keira/shared/constants';
 import { SelectService } from '../../service/select/select.service';
 import { MysqlQueryService } from '@keira/shared/db-layer';
 import { HandlerService } from '../../service/handlers/handler.service';
@@ -21,4 +21,8 @@ export abstract class SelectComponent<T extends TableRow> {
   onSearch(): void {
     this.selectService.onSearch(this.changeDetectorRef);
   }
+
+  onPage(event: DataTablePageEvent): void {
+    this.selectService.pageOffset = event.offset;
+  }
 }
diff --git a/libs/shared/base-abstract-classes/src/service/select/search.service.ts b/libs/shared/base-abstract-classes/src/service/select/search.service.ts
@@ -7,6 +7,7 @@ import { ModelForm, ModelNestedForm, SubscriptionHandler } from '@keira/shared/u
 export abstract class SearchService<T extends TableRow> extends SubscriptionHandler {
   query: string;
   rows: T[] | undefined;
+  pageOffset = 0; // Initialize to the first page
   fields: FormGroup<ModelForm<T>> = new FormGroup({} as any);
   queryForm = new FormGroup<ModelNestedForm<QueryForm<T>>>({
     limit: new FormControl<number>(50) as any, // TODO: fix typing
@@ -43,6 +44,9 @@ export abstract class SearchService<T extends TableRow> extends SubscriptionHand
   }
 
   onSearch(changeDetectorRef: ChangeDetectorRef): void {
+    // Reset to the first page
+    this.pageOffset = 0;
+
     this.subscriptions.push(
       this.queryService.query<T>(this.query).subscribe((data) => {
         this.rows = data as T[];

diff --git a/libs/shared/constants/src/types/general.ts b/libs/shared/constants/src/types/general.ts
@@ -48,3 +48,11 @@ export interface FieldDefinition {
   name: string;
   tooltip: string;
 }
+
+// Defines a type for the ngx datatable page event
+export interface DataTablePageEvent {
+  count: number; // Total number of rows in the table
+  pageSize: number; // Number of rows per page (same as the 'limit' property)
+  limit: number; // Maximum rows displayed per page (also same as 'pageSize')
+  offset: number; // Current page index (0-based)
+}