feat: paginator

690pmb · Mar 1, 2024 · 4e0b3fc · 4e0b3fc
1 parent 5cd8eac
commit 4e0b3fc
Show file tree

Hide file tree

Showing 12 changed files with 213 additions and 139 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/list-composition/list-composition.component.html b/src/app/list-composition/list-composition.component.html
@@ -63,19 +63,7 @@
     (click)="filters.reset()"
   ></fa-icon>
 </div>
-<div class="paginator mat-elevation-z4">
-  <!-- Paginator -->
-  <mat-paginator
-    #paginator
-    [length]="length"
-    [pageIndex]="0"
-    [pageSize]="50"
-    [pageSizeOptions]="pageSizeOptions"
-    [showFirstLastButtons]="true"
-    (page)="page = $event; onPaginateChange()"
-  >
-  </mat-paginator>
-</div>
+<app-paginator (changed)="onPaginateChange()" />
 
 <!-- Table -->
 <mat-table
@@ -85,7 +73,7 @@
   [dataSource]="displayedData"
   [matSortActive]="'score'"
   [matSortDirection]="'desc'"
-  (matSortChange)="paginator.firstPage(); sort = $any($event); onSort()"
+  (matSortChange)="sort = $any($event); onSort()"
 >
   <!-- ARTIST -->
   <ng-container matColumnDef="artist">
@@ -230,5 +218,6 @@
     }"
   ></mat-row>
 </mat-table>
+<app-paginator class="bottom" (changed)="onPaginateChange()" />
 
 <app-go-to-top></app-go-to-top>
diff --git a/src/app/list-composition/list-composition.component.ts b/src/app/list-composition/list-composition.component.ts
@@ -1,5 +1,5 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
-import {catchError, skipWhile} from 'rxjs/operators';
+import {Component, 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';
 import {
@@ -8,7 +8,6 @@ import {
   FormsModule,
   ReactiveFormsModule,
 } from '@angular/forms';
-import {MatPaginator, MatPaginatorModule} from '@angular/material/paginator';
 
 import {
   Composition,
@@ -40,12 +39,14 @@ import {FilterYearComponent} from '../filter-year/filter-year.component';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 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';
 
 @Component({
   selector: 'app-list-composition',
   templateUrl: './list-composition.component.html',
   styleUrls: ['./list-composition.component.scss'],
-  providers: [{provide: DataService, useClass: DataService}],
+  providers: [DataService, PaginatorService],
   animations: [
     trigger('detailExpand', [
       state(
@@ -64,13 +65,13 @@ import {FilterInputComponent} from '../filter-input/filter-input.component';
     FilterInputComponent,
     FilterSelectComponent,
     MatCheckboxModule,
+    PaginatorComponent,
     FormsModule,
     ReactiveFormsModule,
     FilterYearComponent,
     NgIf,
     FontAwesomeModule,
     MatRippleModule,
-    MatPaginatorModule,
     MatTableModule,
     MatSortModule,
     RowMenuComponent,
@@ -87,9 +88,6 @@ export class ListCompositionComponent
   extends ListDirective<Composition>
   implements OnInit
 {
-  @ViewChild(MatPaginator)
-  paginator!: MatPaginator;
-
   override compositionColumns: Field<Composition>[] = [
     'artist',
     'title',
@@ -149,9 +147,10 @@ export class ListCompositionComponent
     private myCompositionsService: DataService<Composition>,
     private dexieService: DexieService,
     protected serviceUtils: UtilsService,
-    private navigationService: NavigationService
+    private navigationService: NavigationService,
+    protected override paginatorService: PaginatorService
   ) {
-    super(serviceUtils);
+    super(serviceUtils, paginatorService);
   }
 
   override ngOnInit(): void {
@@ -165,10 +164,7 @@ export class ListCompositionComponent
         this.filters.controls.title.setValue(c.title);
       }
     });
-    this.filters.valueChanges.subscribe(() => {
-      this.paginator.firstPage();
-      this.onSearch();
-    });
+    this.filters.valueChanges.subscribe(() => this.onSearch());
     this.sort = {active: 'score', direction: 'desc'};
     this.myCompositionsService
       .loadsList(
@@ -184,25 +180,34 @@ export class ListCompositionComponent
             err,
             'Error when reading compositions table'
           )
+        ),
+        tap(list => (this.dataList = list)),
+        switchMap(() => this.paginatorService.page),
+        tap(
+          p =>
+            (this.displayedData = Utils.paginate(
+              this.sortList(this.filter(this.dataList, true)),
+              p
+            ))
         )
       )
-      .subscribe(list => {
-        this.dataList = list;
-        this.length = list.length;
-        this.displayedData = Utils.paginate(
-          this.sortList(this.filter(this.dataList)),
-          this.page
-        );
-      });
+      .subscribe(() =>
+        this.paginatorService.updatePage({
+          length: this.dataList.length,
+        })
+      );
   }
 
-  filter(list: Composition[]): Composition[] {
+  filter(list: Composition[], firstPage: boolean): Composition[] {
     // Composition filters
     let result = this.filterOnComposition(list);
     // Fichier filters
     result = this.filterOnFichier(result);
-    this.length = result.length;
     this.onSortFichier(this.sortFichier);
+    this.paginatorService.updatePage({
+      length: result.length,
+      pageIndex: firstPage ? 0 : undefined,
+    });
     return result;
   }
 

diff --git a/src/app/list-fichier/list-fichier.component.html b/src/app/list-fichier/list-fichier.component.html
@@ -63,19 +63,7 @@
     (click)="filters.reset()"
   ></fa-icon>
 </div>
-<div class="paginator mat-elevation-z4">
-  <!-- Paginator -->
-  <mat-paginator
-    #paginator
-    [length]="length"
-    [pageIndex]="0"
-    [pageSize]="50"
-    [pageSizeOptions]="pageSizeOptions"
-    [showFirstLastButtons]="true"
-    (page)="page = $event; onPaginateChange()"
-  >
-  </mat-paginator>
-</div>
+<app-paginator (changed)="onPaginateChange()" />
 <!-- Table -->
 <mat-table
   class="mat-elevation-z4"
@@ -84,7 +72,7 @@
   [dataSource]="displayedData"
   [matSortActive]="'size'"
   [matSortDirection]="'desc'"
-  (matSortChange)="paginator.firstPage(); sort = $any($event); onSort()"
+  (matSortChange)="sort = $any($event); onSort()"
 >
   <!-- AUTHOR -->
   <ng-container matColumnDef="author">
@@ -262,5 +250,6 @@
     [ngClass]="{even: i % 2 === 0, odd: i % 2 === 1}"
   ></mat-row>
 </mat-table>
+<app-paginator class="bottom" (changed)="onPaginateChange()" />
 
 <app-go-to-top></app-go-to-top>
diff --git a/src/app/list-fichier/list-fichier.component.scss b/src/app/list-fichier/list-fichier.component.scss
@@ -14,3 +14,7 @@
     max-width: 20px;
   }
 }
+
+::ng-deep.mat-mdc-paginator-container {
+  justify-content: center !important;
+}
diff --git a/src/app/list-fichier/list-fichier.component.ts b/src/app/list-fichier/list-fichier.component.ts
@@ -1,12 +1,8 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {animate, state, style, transition, trigger} from '@angular/animations';
 import {switchMap} from 'rxjs';
-import {catchError, skipWhile} from 'rxjs/operators';
-import {
-  MatPaginator,
-  PageEvent,
-  MatPaginatorModule,
-} from '@angular/material/paginator';
+import {catchError, skipWhile, tap} from 'rxjs/operators';
+import {MatPaginatorModule, PageEvent} from '@angular/material/paginator';
 
 import {ListDirective} from '../list/list.component';
 import {
@@ -52,12 +48,14 @@ import {FilterYearComponent} from '../filter-year/filter-year.component';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 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';
 
 @Component({
   selector: 'app-list-fichier',
   templateUrl: './list-fichier.component.html',
   styleUrls: ['./list-fichier.component.scss'],
-  providers: [{provide: DataService, useClass: DataService}],
+  providers: [DataService, PaginatorService],
   animations: [
     trigger('compositionExpand', [
       state(
@@ -80,12 +78,13 @@ import {FilterSelectComponent} from '../filter-select/filter-select.component';
     ReactiveFormsModule,
     FilterYearComponent,
     NgIf,
+    MatPaginatorModule,
     FontAwesomeModule,
     MatRippleModule,
-    MatPaginatorModule,
     MatTableModule,
     MatSortModule,
     NgFor,
+    PaginatorComponent,
     RowMenuComponent,
     RowActionDirective,
     NgClass,
@@ -99,9 +98,6 @@ export class ListFichierComponent
   extends ListDirective<Fichier>
   implements OnInit
 {
-  @ViewChild(MatPaginator)
-  paginator!: MatPaginator;
-
   displayedColumns: Field<Fichier>[] = [
     'author',
     'name',
@@ -157,18 +153,16 @@ export class ListFichierComponent
     private dexieService: DexieService,
     protected serviceUtils: UtilsService,
     private navigationService: NavigationService,
-    private fb: NonNullableFormBuilder
+    private fb: NonNullableFormBuilder,
+    protected override paginatorService: PaginatorService
   ) {
-    super(serviceUtils);
+    super(serviceUtils, paginatorService);
   }
 
   override ngOnInit(): void {
     super.ngOnInit();
     this.listenNavigation();
-    this.filters.valueChanges.subscribe(() => {
-      this.paginator.firstPage();
-      this.onSearch();
-    });
+    this.filters.valueChanges.subscribe(() => this.onSearch());
     this.sort = {active: 'size', direction: 'desc'};
     this.myFichiersService
       .loadsList(
@@ -184,26 +178,34 @@ export class ListFichierComponent
             err,
             'Error when reading fichiers table'
           )
+        ),
+        tap(list => {
+          this.dataList = list;
+          this.authors = list
+            .map(l => [l.author?.trim() ?? ''])
+            .reduce((acc, curr) => {
+              if (acc.every(a => !curr.includes(a))) {
+                acc.push(...curr);
+              }
+              return acc;
+            })
+            .sort()
+            .map(l => ({label: l, code: l}));
+        }),
+        switchMap(() => this.paginatorService.page),
+        tap(
+          p =>
+            (this.displayedData = Utils.paginate(
+              this.sortList(this.filter(this.dataList, true)),
+              p
+            ))
         )
       )
-      .subscribe(list => {
-        this.dataList = list;
-        this.length = list.length;
-        this.authors = list
-          .map(l => [l.author?.trim() ?? ''])
-          .reduce((acc, curr) => {
-            if (acc.every(a => !curr.includes(a))) {
-              acc.push(...curr);
-            }
-            return acc;
-          })
-          .sort()
-          .map(l => ({label: l, code: l}));
-        this.displayedData = Utils.paginate(
-          this.sortList(this.filter(this.dataList)),
-          this.page
-        );
-      });
+      .subscribe(() =>
+        this.paginatorService.updatePage({
+          length: this.dataList.length,
+        })
+      );
   }
 
   private listenNavigation(): void {
@@ -226,7 +228,7 @@ export class ListFichierComponent
     });
   }
 
-  filter(list: Fichier[]): Fichier[] {
+  filter(list: Fichier[], firstPage: boolean): Fichier[] {
     let result = list;
     const controls = this.filters.controls;
     if (controls.name.value) {
@@ -254,7 +256,10 @@ export class ListFichierComponent
       );
     }
     result = this.filterComposition(result);
-    this.length = result.length;
+    this.paginatorService.updatePage({
+      length: result.length,
+      pageIndex: firstPage ? 0 : undefined,
+    });
     return result;
   }
 
@@ -300,8 +305,8 @@ export class ListFichierComponent
 
   onSortComposition(sort: Sort<Composition>): void {
     if (this.expandedElement) {
-      this.pageComposition = this.initPagination();
       this.sortComposition = sort;
+      this.pageComposition = PaginatorService.initPagination();
       this.expandedElement = this.filterComposition([this.expandedElement])[0];
       this.expandedCompositions =
         this.expandedElement?.displayedCompoList ?? [];