Paginated entities updates

src/assets/styles/_common-variables.scss

@@ -62,6 +62,7 @@ body {
     --iqser-font-family: Inter, sans-serif;
     --iqser-app-name-font-family: Inter, sans-serif;
     --iqser-circle-button-radius: 50%;
+    --iqser-side-nav-item-radius: 20px;
 }
 
 $required-variables: 'iqser-primary';

src/assets/styles/common-side-nav.scss

@@ -19,7 +19,7 @@ iqser-side-nav {
 
     .item {
         margin-bottom: 4px;
-        border-radius: 20px;
+        border-radius: var(--iqser-side-nav-item-radius);
         padding: 9px 16px;
         cursor: pointer;
         transition: background-color 0.2s;

src/lib/listing/services/paginated-entities.service.ts

@@ -5,6 +5,20 @@ import { Observable } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 import { mapEach } from '../../utils';
 
+interface PaginatedResponse<Interface> {
+    data: Interface[];
+    page: number;
+    pageSize: number;
+    totalHits: number;
+}
+
+interface PaginatedConfig<Options> {
+    readonly options: Options;
+    readonly page: number;
+    readonly pageSize: number;
+    readonly totalHits: number;
+}
+
 @Injectable()
 /**
  * By default, if no implementation (class) is provided, Class = Interface & IListable
@@ -15,11 +29,34 @@ export class PaginatedEntitiesService<
     Options,
     PrimaryKey extends Id = Class['id'],
 > extends EntitiesService<Interface, Class, PrimaryKey> {
+    protected _currentConfig: PaginatedConfig<Options> = { options: {} as Options, page: 0, pageSize: 0, totalHits: 0 };
+
+    get config(): PaginatedConfig<Options> {
+        return this._currentConfig;
+    }
+
     loadPage(options: Options, page = 0, size = 100): Observable<Class[]> {
-        return super._post<{ data: Interface[] }>({ page, size, options }).pipe(
+        return super._post<PaginatedResponse<Interface>>({ page, size, options }).pipe(
+            tap(
+                response =>
+                    (this._currentConfig = {
+                        options,
+                        page: response.page,
+                        pageSize: response.pageSize,
+                        totalHits: response.totalHits,
+                    }),
+            ),
             map(response => response.data),
             mapEach(entity => (this._entityClass ? new this._entityClass(entity) : (entity as unknown as Class))),
             tap((entities: Class[]) => this.setEntities(entities)),
         );
     }
+
+    loadNextPage(): Observable<Class[]> {
+        return this.loadPage(this._currentConfig.options, this._currentConfig.page + 1, this._currentConfig.pageSize);
+    }
+
+    loadPreviousPage(): Observable<Class[]> {
+        return this.loadPage(this._currentConfig.options, this._currentConfig.page - 1, this._currentConfig.pageSize);
+    }
 }