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.ts

@@ -50,12 +50,23 @@ 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'),
+    },
+    {
+      provide: PAGINATOR,
+      useFactory: () => new PaginatorService('composition'),
+    },
+  ],
   animations: [
     trigger('compositionExpand', [
       state(
@@ -154,7 +165,7 @@ export class ListFichierComponent
     protected serviceUtils: UtilsService,
     private navigationService: NavigationService,
     private fb: NonNullableFormBuilder,
-    protected override paginatorService: PaginatorService
+    @Inject(PAGINATOR) paginatorService: PaginatorService
   ) {
     super(serviceUtils, paginatorService);
   }

src/app/paginator/paginator.component.ts

@@ -1,7 +1,7 @@
 import {AsyncPipe, NgIf} from '@angular/common';
 import {Component, EventEmitter, Output, inject} from '@angular/core';
 import {MatPaginatorModule} from '@angular/material/paginator';
-import {PaginatorService} from '@services/paginator.service';
+import {PAGINATOR} from '@utils/paginator.token';
 
 @Component({
   selector: 'app-paginator',
@@ -14,7 +14,7 @@ export class PaginatorComponent {
   @Output()
   changed = new EventEmitter<void>();
 
-  paginatorService = inject(PaginatorService);
+  paginatorService = inject(PAGINATOR, {skipSelf: true});
 
   protected pageSizeOptions = [25, 50, 100, 200];
 }

src/app/services/paginator.service.ts

@@ -1,16 +1,14 @@
-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());
   }
 

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');