feat(paginator): add paginator config

Adds the ability to configure the pager during initialization.

* Adds alias on shared folder.

Co-Authored-by: Bertrand Zuchuat <bertrand.zuchuat@rero.ch>

Author: Garfield-fr

src/app/app.config.mock.ts

@@ -3,13 +3,13 @@ import { ApplicationConfig, inject, provideBrowserGlobalErrorListeners, provideE
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { provideRouter, TitleStrategy } from '@angular/router';
 import Lara from '@primeuix/themes/lara';
+import { AppStateStore } from '@shared/appSate/app-state-store';
+import { PageTitleStrategy } from '@shared/page-title-strategy';
 import { MessageService } from 'primeng/api';
 import { providePrimeNG } from 'primeng/config';
 import { routes } from './app.routes';
 import { OpenLibraryBase } from './features/books/service/open-library-base';
 import { OpenLibraryMock } from './features/books/service/open-library-mock';
-import { AppStateStore } from './shared/appSate/app-state-store';
-import { PageTitleStrategy } from './shared/page-title-strategy';
 
 export const appConfig: ApplicationConfig = {
   providers: [

src/app/app.config.ts

@@ -3,14 +3,14 @@ import { ApplicationConfig, inject, provideBrowserGlobalErrorListeners, provideE
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { provideRouter, TitleStrategy } from '@angular/router';
 import Aura from '@primeuix/themes/Aura';
+import { AppStateStore } from '@shared/appSate/app-state-store';
+import { httpResponseErrorInterceptor } from '@shared/interceptor/http-response-error-interceptor';
+import { PageTitleStrategy } from '@shared/page-title-strategy';
 import { MessageService } from 'primeng/api';
 import { providePrimeNG } from 'primeng/config';
 import { routes } from './app.routes';
 import { OpenLibraryApi } from './features/books/service/open-library-api';
 import { OpenLibraryBase } from './features/books/service/open-library-base';
-import { AppStateStore } from './shared/appSate/app-state-store';
-import { httpResponseErrorInterceptor } from './shared/interceptor/http-response-error-interceptor';
-import { PageTitleStrategy } from './shared/page-title-strategy';
 
 export const appConfig: ApplicationConfig = {
   providers: [

src/app/app.ts

@@ -1,9 +1,9 @@
 import { Component, inject } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { AppStateStore } from '@shared/appSate/app-state-store';
+import { LayoutService } from '@shared/layout/layout.service';
 import { Toast } from 'primeng/toast';
 import { Sidebar } from './features/sidebar/sidebar';
-import { AppStateStore } from './shared/appSate/app-state-store';
-import { LayoutService } from './shared/layout/layout.service';
 
 @Component({
   selector: 'app-root',

src/app/features/books/books.html

@@ -30,7 +30,7 @@ <h1 class="text-3xl font-bold text-gray-800 mb-2">Bibliothèque</h1>
 
   <!-- Pagination -->
   <div class="flex justify-center">
-    <shared-paginator [paginatorState]="paginatorConfig()" (pageChange)="store.setPaginator($event)" />
+    <shared-paginator [pager]="store.pager()" [total]="store.total()" (pageChange)="store.changePage($event)" />
   </div>
   } @else {
   <!-- Empty State -->

src/app/features/books/books.ts

@@ -1,9 +1,8 @@
-import { Component, inject, Signal } from '@angular/core';
-import { deepComputed } from '@ngrx/signals';
-import { PaginatorComponent, PaginatorConfig } from '../../shared/component/paginator';
+import { Component, inject } from '@angular/core';
 import { Book } from './book';
 import { Search } from './search';
 import { OpenLibraryStore } from './store/open-library.store';
+import { PaginatorComponent } from '@shared/component/paginator';
 
 @Component({
   selector: 'app-books',
@@ -13,10 +12,4 @@ import { OpenLibraryStore } from './store/open-library.store';
 })
 export default class Books {
   protected store = inject(OpenLibraryStore);
-
-  protected paginatorConfig: Signal<PaginatorConfig> = deepComputed(() => ({
-    first: this.store.pager.firstRecord(),
-    rows: this.store.pager.rows(),
-    total: this.store.total()
-  }));
 }

src/app/features/books/store/open-library.store.ts

@@ -2,10 +2,9 @@ import { inject } from "@angular/core";
 import { toObservable } from "@angular/core/rxjs-interop";
 import { patchState, signalStore, withHooks, withMethods, withState } from "@ngrx/signals";
 import { rxMethod } from "@ngrx/signals/rxjs-interop";
-import { PaginatorState } from "primeng/paginator";
+import { Pager, withPaginator } from "@shared/store/paginator-feature";
+import { setFulfilled, setPending, withRequestStatus } from "@shared/store/request-status-feature";
 import { debounceTime, pipe, skip, switchMap, tap } from "rxjs";
-import { withPaginator } from "../../../shared/store/paginator-feature";
-import { setFulfilled, setPending, withRequestStatus } from "../../../shared/store/request-status-feature";
 import { OpenLibraryApiResult, OpenLibraryRecord } from "../model/open-library.model";
 import { OpenLibraryBase } from "../service/open-library-base";
 
@@ -21,16 +20,23 @@ const initialOpenLibraryState = {
   documents: []
 };
 
+const initialPagerConfig: Pager = {
+  page: 1,
+  first: 1,
+  rows: 9,
+  rowsPerPageOptions: [9, 18, 36]
+}
+
 export const OpenLibraryStore = signalStore(
   withState<OpenLibraryState>(initialOpenLibraryState),
   withRequestStatus(),
-  withPaginator(),
+  withPaginator(initialPagerConfig),
   withMethods((store, api = inject(OpenLibraryBase)) => ({
     search: rxMethod<string>(
       pipe(
         debounceTime(500),
         tap(() => patchState(store, setPending())),
-        switchMap((query: string) => api.search(query, store.pager.currentPage(), store.pager.rows())),
+        switchMap((query: string) => api.search(query, store.pager.page(), store.pager.rows())),
         tap((result?: OpenLibraryApiResult) => {
           if (result) {
             patchState(
@@ -45,9 +51,6 @@ export const OpenLibraryStore = signalStore(
     reset(): void {
       patchState(store, { total: 0, filter: '', documents: []});
     },
-    setPaginator(paginator: PaginatorState) {
-      store.changePage(paginator);
-    }
   })),
   withHooks((store) => ({
     onInit: () => {

src/app/features/login/login.ts

@@ -1,10 +1,10 @@
 import { Component, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { Router, RouterLink } from '@angular/router';
+import { AppStateApi } from '@shared/appSate/app-state-api';
+import { AppStateStore } from '@shared/appSate/app-state-store';
 import { Button, ButtonDirective } from "primeng/button";
 import { InputText } from 'primeng/inputtext';
-import { AppStateApi } from '../../shared/appSate/app-state-api';
-import { AppStateStore } from '../../shared/appSate/app-state-store';
 
 @Component({
   selector: 'app-login',

src/app/features/sidebar/sidebar.ts

@@ -1,8 +1,8 @@
 import { Component, computed, inject, signal } from '@angular/core';
 import { Router, RouterLink, RouterLinkActive } from '@angular/router';
+import { AppStateStore } from '@shared/appSate/app-state-store';
+import { LayoutService } from '@shared/layout/layout.service';
 import { Avatar } from 'primeng/avatar';
-import { AppStateStore } from '../../shared/appSate/app-state-store';
-import { LayoutService } from '../../shared/layout/layout.service';
 
 @Component({
   selector: 'app-sidebar',

src/app/shared/component/paginator.ts

@@ -1,28 +1,25 @@
 import { Component, input, output } from '@angular/core';
 import { Paginator, PaginatorState } from 'primeng/paginator';
-
-export type PaginatorConfig = {
-  first: number;
-  rows: number;
-  total: number;
-}
+import { Pager } from '../store/paginator-feature';
 
 @Component({
   selector: 'shared-paginator',
   imports: [Paginator],
   template: `
     <p-paginator
       alwaysShow="false"
-      [first]="paginatorState().first"
-      [rows]="paginatorState().rows"
-      [totalRecords]="paginatorState().total"
-      [rowsPerPageOptions]="[10, 20, 50]"
+      [first]="pager().first"
+      [rows]="pager().rows"
+      [totalRecords]="total()"
+      [rowsPerPageOptions]="pager().rowsPerPageOptions"
       (onPageChange)="pageChange.emit($event)" />
   `
 })
 export class PaginatorComponent {
 
-  paginatorState = input.required<PaginatorConfig>();
+  pager = input.required<Pager>();
+
+  total = input.required<number>();
 
   pageChange = output<PaginatorState>();
 }

src/app/shared/store/paginator-feature.ts

@@ -1,25 +1,22 @@
 import { patchState, signalMethod, signalStoreFeature, withMethods, withState } from "@ngrx/signals";
 import { PaginatorState } from "primeng/paginator";
 
+export type Pager = {
+  page: number;
+  first: number;
+  rows: number;
+  rowsPerPageOptions: number[];
+};
+
 export type Paginator = {
-  pager: {
-    currentPage: number;
-    firstRecord: number;
-    rows: number;
-  }
+  pager: Pager;
 }
 
-const paginatorInitialState: Paginator = {
-  pager: {
-    currentPage: 1,
-    firstRecord: 1,
-    rows: 10
-  }
-};
-
-export function withPaginator() {
+export function withPaginator(pager: Pager) {
   return signalStoreFeature(
-    withState<Paginator>(paginatorInitialState),
+    withState<Paginator>({
+      pager: pager
+    }),
     withMethods((store) => ({
       changePage: signalMethod<PaginatorState>(event => {
         if (event.rows !== store.pager.rows()) {
@@ -28,9 +25,10 @@ export function withPaginator() {
         }
         patchState(store, {
           pager: {
-            currentPage: (event.page || 0) + 1,
-            firstRecord: (event.page || 0) * (event.rows || 10) + 1,
-            rows: (event.rows || 10)
+            page: (event.page || 0) + 1,
+            first: (event.page || 0) * (event.rows || pager.rows) + 1,
+            rows: (event.rows || pager.rows),
+            rowsPerPageOptions: store.pager().rowsPerPageOptions
           }
         });
       }),