feat: sub paginator

src/app/list-composition/list-composition.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, Inject, OnInit} from '@angular/core';
 import {catchError, skipWhile, tap} from 'rxjs/operators';
 import {animate, state, style, transition, trigger} from '@angular/animations';
 import {BehaviorSubject, switchMap} from 'rxjs';
@@ -41,12 +41,19 @@ import {FilterSelectComponent} from '../filter-select/filter-select.component';
 import {FilterInputComponent} from '../filter-input/filter-input.component';
 import {PaginatorService} from '@services/paginator.service';
 import {PaginatorComponent} from '../paginator/paginator.component';
+import {PAGINATOR} from '@utils/paginator.token';
 
 @Component({
   selector: 'app-list-composition',
   templateUrl: './list-composition.component.html',
   styleUrls: ['./list-composition.component.scss'],
-  providers: [DataService, PaginatorService],
+  providers: [
+    DataService,
+    {
+      provide: PAGINATOR,
+      useFactory: () => new PaginatorService('list'),
+    },
+  ],
   animations: [
     trigger('detailExpand', [
       state(
@@ -148,7 +155,7 @@ export class ListCompositionComponent
     private dexieService: DexieService,
     protected serviceUtils: UtilsService,
     private navigationService: NavigationService,
-    protected override paginatorService: PaginatorService
+    @Inject(PAGINATOR) paginatorService: PaginatorService
   ) {
     super(serviceUtils, paginatorService);
   }

src/app/list-fichier/list-fichier.component.html

@@ -63,7 +63,7 @@
     (click)="filters.reset()"
   ></fa-icon>
 </div>
-<app-paginator (changed)="onPaginateChange()" />
+<app-paginator id="fichier" (changed)="onPaginateChange()" />
 <!-- Table -->
 <mat-table
   class="mat-elevation-z4"
@@ -170,24 +170,17 @@
     >
       <div class="example-element-detail">
         <ng-container *ngIf="fichier === expandedElement">
-          <mat-paginator
-            #paginatorComposition
-            [length]="expandedCompositions.length"
-            [pageIndex]="0"
-            [pageSize]="50"
-            [showFirstLastButtons]="true"
-            (page)="pageComposition = $event; onPaginateCompositionChange()"
-          >
-          </mat-paginator>
+          <app-paginator
+            id="composition"
+            (changed)="onPaginateCompositionChange()"
+          />
           <!-- eslint-disable @angular-eslint/template/no-any -->
           <mat-table
             matSort
             [dataSource]="displayedCompositions"
             [matSortActive]="fichier.sorted ? 'rank' : 'score'"
             [matSortDirection]="fichier.sorted ? 'asc' : 'desc'"
-            (matSortChange)="
-              paginatorComposition.firstPage(); onSortComposition($any($event))
-            "
+            (matSortChange)="onSortComposition($any($event))"
           >
             <!-- eslint-enable @angular-eslint/template/no-any -->
             <div
@@ -230,6 +223,10 @@
             >
             </mat-row>
           </mat-table>
+          <app-paginator
+            id="composition"
+            (changed)="onPaginateCompositionChange()"
+          />
         </ng-container>
       </div>
     </td>
@@ -250,6 +247,6 @@
     [ngClass]="{even: i % 2 === 0, odd: i % 2 === 1}"
   ></mat-row>
 </mat-table>
-<app-paginator class="bottom" (changed)="onPaginateChange()" />
+<app-paginator id="fichier" class="bottom" (changed)="onPaginateChange()" />
 
 <app-go-to-top></app-go-to-top>

src/app/list-fichier/list-fichier.component.ts

@@ -1,6 +1,6 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, Inject, OnInit} from '@angular/core';
 import {animate, state, style, transition, trigger} from '@angular/animations';
-import {switchMap} from 'rxjs';
+import {of, switchMap} from 'rxjs';
 import {catchError, skipWhile, tap} from 'rxjs/operators';
 import {MatPaginatorModule, PageEvent} from '@angular/material/paginator';
 
@@ -50,12 +50,25 @@ import {FilterInputComponent} from '../filter-input/filter-input.component';
 import {FilterSelectComponent} from '../filter-select/filter-select.component';
 import {PaginatorComponent} from '../paginator/paginator.component';
 import {PaginatorService} from '@services/paginator.service';
+import {PAGINATOR} from '@utils/paginator.token';
 
 @Component({
   selector: 'app-list-fichier',
   templateUrl: './list-fichier.component.html',
   styleUrls: ['./list-fichier.component.scss'],
-  providers: [DataService, PaginatorService],
+  providers: [
+    DataService,
+    {
+      provide: PAGINATOR,
+      useFactory: () => new PaginatorService('fichier'),
+      multi: true,
+    },
+    {
+      provide: PAGINATOR,
+      useFactory: () => new PaginatorService('composition'),
+      multi: true,
+    },
+  ],
   animations: [
     trigger('compositionExpand', [
       state(
@@ -119,7 +132,6 @@ export class ListFichierComponent
   override displayedColumnsComposition = [...this.compositionColumns];
   expandedCompositions: Composition[] = [];
   displayedCompositions: Composition[] = [];
-  pageComposition!: PageEvent;
   sortComposition?: Sort<Composition>;
   faCheck = faCheck;
   expandedColumn = 'compositions';
@@ -148,15 +160,25 @@ export class ListFichierComponent
     {validators: yearsValidator}
   );
 
+  fichierPaginator?: PaginatorService;
+  compositionPaginator?: PaginatorService;
+
   constructor(
     private myFichiersService: DataService<Fichier>,
     private dexieService: DexieService,
     protected serviceUtils: UtilsService,
     private navigationService: NavigationService,
     private fb: NonNullableFormBuilder,
-    protected override paginatorService: PaginatorService
+    @Inject(PAGINATOR) paginatorService: PaginatorService[]
   ) {
-    super(serviceUtils, paginatorService);
+    super(
+      serviceUtils,
+      paginatorService.find(p => p.id === 'fichier') ?? new PaginatorService('')
+    );
+    this.fichierPaginator = paginatorService.find(p => p.id === 'fichier');
+    this.compositionPaginator = paginatorService.find(
+      p => p.id === 'composition'
+    );
   }
 
   override ngOnInit(): void {
@@ -192,7 +214,7 @@ export class ListFichierComponent
             .sort()
             .map(l => ({label: l, code: l}));
         }),
-        switchMap(() => this.paginatorService.page),
+        switchMap(() => this.fichierPaginator?.page ?? of(new PageEvent())),
         tap(
           p =>
             (this.displayedData = Utils.paginate(
@@ -201,10 +223,11 @@ export class ListFichierComponent
             ))
         )
       )
-      .subscribe(() =>
-        this.paginatorService.updatePage({
-          length: this.dataList.length,
-        })
+      .subscribe(
+        () =>
+          this.fichierPaginator?.updatePage({
+            length: this.dataList.length,
+          })
       );
   }
 
@@ -256,7 +279,7 @@ export class ListFichierComponent
       );
     }
     result = this.filterComposition(result);
-    this.paginatorService.updatePage({
+    this.fichierPaginator?.updatePage({
       length: result.length,
       pageIndex: firstPage ? 0 : undefined,
     });
@@ -306,21 +329,30 @@ export class ListFichierComponent
   onSortComposition(sort: Sort<Composition>): void {
     if (this.expandedElement) {
       this.sortComposition = sort;
-      this.pageComposition = PaginatorService.initPagination();
       this.expandedElement = this.filterComposition([this.expandedElement])[0];
       this.expandedCompositions =
         this.expandedElement?.displayedCompoList ?? [];
-      this.displayedCompositions = Utils.paginate(
-        Utils.sort(this.expandedCompositions, sort.active, sort.direction),
-        this.pageComposition
+      this.compositionPaginator?.updatePage({
+        length: this.expandedCompositions.length,
+        pageIndex: 0,
+      });
+      this.compositionPaginator?.page.subscribe(
+        p =>
+          (this.displayedCompositions = Utils.paginate(
+            Utils.sort(this.expandedCompositions, sort.active, sort.direction),
+            p
+          ))
       );
     }
   }
 
   onPaginateCompositionChange(): void {
-    this.displayedCompositions = Utils.paginate(
-      this.expandedCompositions,
-      this.pageComposition
+    this.compositionPaginator?.page.subscribe(
+      p =>
+        (this.displayedCompositions = Utils.paginate(
+          this.expandedCompositions,
+          p
+        ))
     );
   }
 

src/app/paginator/paginator.component.html

@@ -8,7 +8,7 @@
     [pageSize]="page.pageSize"
     [pageSizeOptions]="pageSizeOptions"
     [showFirstLastButtons]="true"
-    (page)="paginatorService.page$.set($event); changed.emit()"
+    (page)="onPage($event)"
   >
   </mat-paginator>
 </div>

src/app/paginator/paginator.component.ts

@@ -1,7 +1,17 @@
 import {AsyncPipe, NgIf} from '@angular/common';
-import {Component, EventEmitter, Output, inject} from '@angular/core';
-import {MatPaginatorModule} from '@angular/material/paginator';
+import {
+  Component,
+  EventEmitter,
+  Inject,
+  Input,
+  OnInit,
+  Output,
+  SkipSelf,
+} from '@angular/core';
+import {MatPaginatorModule, PageEvent} from '@angular/material/paginator';
 import {PaginatorService} from '@services/paginator.service';
+import {PAGINATOR} from '@utils/paginator.token';
+import {map} from 'rxjs';
 
 @Component({
   selector: 'app-paginator',
@@ -10,11 +20,42 @@ import {PaginatorService} from '@services/paginator.service';
   standalone: true,
   imports: [MatPaginatorModule, NgIf, AsyncPipe],
 })
-export class PaginatorComponent {
+export class PaginatorComponent implements OnInit {
+  @Input()
+  id?: string;
+
   @Output()
   changed = new EventEmitter<void>();
 
-  paginatorService = inject(PaginatorService);
-
+  protected paginatorService!: PaginatorService;
   protected pageSizeOptions = [25, 50, 100, 200];
+
+  constructor(
+    @SkipSelf()
+    @Inject(PAGINATOR)
+    private ps: PaginatorService | PaginatorService[]
+  ) {}
+
+  ngOnInit(): void {
+    if (Array.isArray(this.ps)) {
+      this.paginatorService =
+        this.ps.find(p => p.id === this.id) ?? new PaginatorService('');
+    } else {
+      this.paginatorService = this.ps;
+    }
+  }
+
+  onPage(page: PageEvent): void {
+    this.paginatorService.page
+      .pipe(
+        map(p => ({
+          ...page,
+          ...{
+            pageIndex: page.pageSize !== p.pageSize ? 0 : page.pageIndex,
+          },
+        }))
+      )
+      .subscribe(p => this.paginatorService.page$.set(p));
+    this.changed.emit();
+  }
 }

src/app/services/paginator.service.ts

@@ -1,16 +1,13 @@
-import {Injectable} from '@angular/core';
 import {PageEvent} from '@angular/material/paginator';
 import {Reactive} from '../utils/reactive';
 import {take, Observable, map} from 'rxjs';
-import {Field} from '@utils/model';
 
-@Injectable({
-  providedIn: 'root',
-})
 export class PaginatorService {
+  id!: string;
   page$ = new Reactive<PageEvent>();
 
-  constructor() {
+  constructor(id: string) {
+    this.id = id;
     this.page$.set(PaginatorService.initPagination());
   }
 
@@ -25,17 +22,15 @@ export class PaginatorService {
   public updatePage(update: Partial<PageEvent>): void {
     this.page
       .pipe(
-        map(p => {
-          if (update.pageSize !== p.pageSize) {
-            update.pageIndex = 0;
-          }
-          (Object.keys(update) as Field<PageEvent>[]).forEach(k => {
-            if (update[k] !== undefined) {
-              p[k] = update[k]!;
-            }
-          });
-          return p;
-        })
+        map(
+          p =>
+            ({
+              length: update.length ?? 0,
+              pageIndex: update.pageIndex ?? p.pageIndex,
+              pageSize: update.pageSize ?? p.pageSize,
+              previousPageIndex: p.previousPageIndex,
+            }) satisfies PageEvent
+        )
       )
       .subscribe(p => this.page$.set(p));
   }

src/app/utils/paginator.token.ts

@@ -0,0 +1,4 @@
+import {InjectionToken} from '@angular/core';
+import {PaginatorService} from '@services/paginator.service';
+
+export const PAGINATOR = new InjectionToken<PaginatorService>('paginator');