This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/streampipes.git
The following commit(s) were added to refs/heads/dev by this push:
new 8ed5fb8808 feat(#4045): Remember pagination settings (#4046)
8ed5fb8808 is described below
commit 8ed5fb8808747e898ec42effd620b26446e2bad2
Author: Dominik Riemer <[email protected]>
AuthorDate: Thu Dec 11 08:18:18 2025 +0100
feat(#4045): Remember pagination settings (#4046)
---
.../components/sp-table/sp-table.component.html | 3 +-
.../lib/components/sp-table/sp-table.component.ts | 21 ++++++-
.../lib/services/local-storage-settings.service.ts | 64 ++++++++++++++++++++++
ui/src/app/dataset/dataset.module.ts | 17 ++----
4 files changed, 89 insertions(+), 16 deletions(-)
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.html
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.html
index c5e8faac7e..8d0ecc12f9 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.html
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.html
@@ -81,10 +81,11 @@
<div fxFlex="100" fxLayoutAlign="end end" class="paginator-container">
<mat-paginator
#paginator
- [pageSize]="pageSize"
+ [pageSize]="pageSize()"
[pageSizeOptions]="[5, 10, 20, 50]"
[hidePageSize]="false"
[showFirstLastButtons]="true"
+ (page)="onPage($event)"
>
</mat-paginator>
</div>
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.ts
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.ts
index 4a749d30b9..dd44c47438 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.ts
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.ts
@@ -23,9 +23,11 @@ import {
ContentChild,
ContentChildren,
EventEmitter,
+ inject,
Input,
Output,
QueryList,
+ Signal,
TemplateRef,
ViewChild,
} from '@angular/core';
@@ -37,9 +39,10 @@ import {
MatTable,
MatTableDataSource,
} from '@angular/material/table';
-import { MatPaginator } from '@angular/material/paginator';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { SpTableActionsDirective } from './sp-table-actions.directive';
import { MatMenuTrigger } from '@angular/material/menu';
+import { LocalStorageService } from
'../../services/local-storage-settings.service';
@Component({
selector: 'sp-table',
@@ -67,10 +70,20 @@ export class SpTableComponent<T> implements AfterViewInit,
AfterContentInit {
@ContentChild(SpTableActionsDirective, { read: TemplateRef })
actionsTemplate?: TemplateRef<any>;
- pageSize = 10;
timedOutCloser: any;
trigger: MatMenuTrigger | undefined = undefined;
+ private localStorageService = inject(LocalStorageService);
+
+ readonly pageSize: Signal<number>;
+
+ constructor() {
+ this.pageSize = this.localStorageService.signalFor(
+ 'paginator-page-size',
+ 10,
+ );
+ }
+
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
}
@@ -103,4 +116,8 @@ export class SpTableComponent<T> implements AfterViewInit,
AfterContentInit {
this.trigger = undefined;
}, 50);
}
+
+ onPage(event: PageEvent) {
+ this.localStorageService.set('paginator-page-size', event.pageSize);
+ }
}
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/services/local-storage-settings.service.ts
b/ui/projects/streampipes/shared-ui/src/lib/services/local-storage-settings.service.ts
new file mode 100644
index 0000000000..33dac4aa97
--- /dev/null
+++
b/ui/projects/streampipes/shared-ui/src/lib/services/local-storage-settings.service.ts
@@ -0,0 +1,64 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { Injectable, effect, signal, Signal } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class LocalStorageService {
+ private readonly prefix = 'sp-';
+
+ private buildKey(key: string): string {
+ return `${this.prefix}${key}`;
+ }
+
+ get<T>(key: string, fallback: T): T {
+ try {
+ const raw = localStorage.getItem(this.buildKey(key));
+ if (raw === null) {
+ return fallback;
+ }
+ return JSON.parse(raw) as T;
+ } catch {
+ return fallback;
+ }
+ }
+
+ set<T>(key: string, value: T): void {
+ try {
+ localStorage.setItem(this.buildKey(key), JSON.stringify(value));
+ } catch {
+ // ignore quota / disabled storage errors
+ }
+ }
+
+ /**
+ * Creates a signal bound to a localStorage key.
+ * Whenever the signal changes, the new value is persisted.
+ */
+ signalFor<T>(key: string, fallback: T): Signal<T> {
+ const s = signal<T>(this.get<T>(key, fallback));
+
+ // Persist whenever the signal changes
+ effect(() => {
+ const value = s();
+ this.set<T>(key, value);
+ });
+
+ return s.asReadonly ? s.asReadonly() : (s as Signal<T>);
+ }
+}
diff --git a/ui/src/app/dataset/dataset.module.ts
b/ui/src/app/dataset/dataset.module.ts
index ddaf3970b8..7d64352ef6 100644
--- a/ui/src/app/dataset/dataset.module.ts
+++ b/ui/src/app/dataset/dataset.module.ts
@@ -32,11 +32,8 @@ import { ExportProviderComponent } from
'./dialog/export-provider-dialog/export-
import { SelectRetentionActionComponent } from
'./dialog/data-retention-dialog/components/select-retention/select-retention-action/select-retention-action.component';
import { SelectDataExportComponent } from
'./dialog/data-retention-dialog/components/select-export/select-format.component';
import { DeleteExportProviderComponent } from
'./dialog/delete-export-provider/delete-export-provider-dialog.component';
-import {
- DefaultLayoutDirective,
- FlexLayoutModule,
-} from '@ngbracket/ngx-layout';
-import { MatButtonModule, MatIconButton } from '@angular/material/button';
+import { FlexLayoutModule } from '@ngbracket/ngx-layout';
+import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -47,16 +44,12 @@ import { MatProgressSpinnerModule } from
'@angular/material/progress-spinner';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
-import {
- MatPaginatorIntl,
- MatPaginatorModule,
-} from '@angular/material/paginator';
+import { MatPaginatorModule } from '@angular/material/paginator';
import { MatInputModule } from '@angular/material/input';
import { MatMenuModule } from '@angular/material/menu';
import { DataRetentionNowDialogComponent } from
'./dialog/data-retention-now-dialog/data-retention-now-dialog.component';
import { DataRetentionLogDialogComponent } from
'./dialog/data-retention-log-dialog/data-retention-log-dialog.component';
import { ExportProviderConnectionTestComponent } from
'./dialog/export-provider-connection-test/export-provider-connection-test.component';
-import { PaginatorService } from
'projects/streampipes/shared-ui/src/lib/components/sp-table/sp-paginator/sp-paginator.component';
@NgModule({
imports: [
@@ -107,9 +100,7 @@ import { PaginatorService } from
'projects/streampipes/shared-ui/src/lib/compone
SelectDataExportComponent,
DeleteExportProviderComponent,
],
- providers: [
- { provide: MatPaginatorIntl, useClass: PaginatorService }, // Use
custom paginator service
- ],
+ providers: [],
exports: [],
})
