Save configs and wordlists table state in session storage

openbullet · openbullet · commit f2dc94ef906c · 2026-05-09T17:24:29.000+02:00
Closes #1088
diff --git a/openbullet2-web-client/src/app/main/components/configs/configs.component.html b/openbullet2-web-client/src/app/main/components/configs/configs.component.html
@@ -33,7 +33,7 @@ <h5 class="color-bad">
                 <ng-template pTemplate="end">
                     <button class="button button-secondary" *ngIf="displayMode === 'table'"
                         pTooltip="Clear filters" tooltipPosition="bottom"
-                        (click)="configDt.clear()">
+                        (click)="clearTable()">
                         Clear
                         <fa-icon [icon]="faFilterCircleXmark" [fixedWidth]="true"></fa-icon>
                     </button>
@@ -42,7 +42,9 @@ <h5 class="color-bad">
                             spellcheck="false"
                             class="ml-2"
                             [style]="{ height: '33px' }"
-                            (input)="configDt.filterGlobal($any($event.target).value, 'contains')" placeholder="Search keyword" />
+                            [(ngModel)]="searchTerm"
+                            (input)="applyGlobalFilter()"
+                            placeholder="Search keyword" />
                     </span>
                 </ng-template>
             </p-menubar>
@@ -55,15 +57,20 @@ <h5 class="color-bad">
                 [value]="configs"
                 [tableStyle]="{ 'min-width': '50rem', 'max-width': '100%' }"
                 [paginator]="true"
-                [rows]="10"
+                [rows]="tableRows"
+                [first]="tableFirst"
                 [resizableColumns]="true"
                 [scrollable]="true"
                 scrollDirection="horizontal"
                 columnResizeMode="expand"
                 [showCurrentPageReport]="true"
                 [rowsPerPageOptions]="[10, 25, 50]"
+                stateStorage="session"
+                stateKey="configs-table"
                 currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
                 [globalFilterFields]="['name', 'author', 'category', 'isRemote', 'proxies', 'wordlists', 'creationDate', 'lastModified']"
+                (onPage)="onTablePageChange($event)"
+                (onStateRestore)="onTableStateRestore($event)"
                 >
                 <ng-template pTemplate="emptymessage">
                     <div class="m-3">
diff --git a/openbullet2-web-client/src/app/main/components/configs/configs.component.ts b/openbullet2-web-client/src/app/main/components/configs/configs.component.ts
@@ -10,7 +10,8 @@ import {
   faX,
 } from '@fortawesome/free-solid-svg-icons';
 import * as moment from 'moment';
-import { ConfirmationService, MenuItem, MessageService } from 'primeng/api';
+import { ConfirmationService, MenuItem, MessageService, TableState } from 'primeng/api';
+import { Table, TablePageEvent } from 'primeng/table';
 import { saveFile } from 'src/app/shared/utils/files';
 import { ConfigInfoDto, ConfigMode } from '../../dtos/config/config-info.dto';
 import { ConfigDto } from '../../dtos/config/config.dto';
@@ -29,6 +30,9 @@ export class ConfigsComponent implements OnInit {
   configs: ConfigInfoDto[] | null = null;
   obSettings: OBSettingsDto | null = null;
 
+  @ViewChild('configDt')
+  configDt: Table | undefined = undefined;
+
   @ViewChild('uploadConfigsComponent')
   uploadConfigsComponent: UploadConfigsComponent | undefined = undefined;
 
@@ -45,6 +49,9 @@ export class ConfigsComponent implements OnInit {
 
   displayMode = 'grid';
   uploadConfigsModalVisible = false;
+  tableFirst = 0;
+  tableRows = 10;
+  searchTerm = '';
 
   configMenuItems: MenuItem[] = [
     {
@@ -120,6 +127,7 @@ export class ConfigsComponent implements OnInit {
   refreshConfigs(reload: boolean) {
     this.configService.getAllConfigs(reload).subscribe((configs) => {
       this.configs = configs;
+      this.reapplyTableState();
 
       if (reload) {
         this.messageService.add({
@@ -136,6 +144,32 @@ export class ConfigsComponent implements OnInit {
     this.volatileSettings.configsDisplayMode = mode;
   }
 
+  onTablePageChange(event: TablePageEvent) {
+    this.tableFirst = event.first;
+    this.tableRows = event.rows;
+  }
+
+  onTableStateRestore(state: TableState) {
+    this.tableFirst = state.first ?? 0;
+    this.tableRows = state.rows ?? 10;
+
+    const globalFilter = state.filters?.['global'];
+    if (globalFilter && !Array.isArray(globalFilter) && globalFilter.value) {
+      this.searchTerm = String(globalFilter.value);
+    }
+  }
+
+  applyGlobalFilter() {
+    this.tableFirst = 0;
+    this.configDt?.filterGlobal(this.searchTerm, 'contains');
+  }
+
+  clearTable() {
+    this.searchTerm = '';
+    this.tableFirst = 0;
+    this.configDt?.clear();
+  }
+
   openUploadConfigsModal() {
     this.uploadConfigsComponent?.reset();
     this.uploadConfigsModalVisible = true;
@@ -345,7 +379,34 @@ export class ConfigsComponent implements OnInit {
         summary: 'Deleted',
         detail: `Config ${config.name} was deleted`,
       });
-      this.refreshConfigs(false);
+
+      if (this.configs !== null) {
+        this.configs = this.configs.filter((c) => c.id !== config.id);
+      }
+
+      this.reapplyTableState();
+    });
+  }
+
+  private reapplyTableState() {
+    setTimeout(() => {
+      if (!this.configDt) {
+        return;
+      }
+
+      if (this.searchTerm) {
+        this.configDt.filterGlobal(this.searchTerm, 'contains');
+      }
+
+      const filteredCount = this.configDt.filteredValue?.length ?? this.configs?.length ?? 0;
+
+      if (filteredCount === 0) {
+        this.tableFirst = 0;
+        return;
+      }
+
+      const maxFirst = Math.floor((filteredCount - 1) / this.tableRows) * this.tableRows;
+      this.tableFirst = Math.min(this.tableFirst, maxFirst);
     });
   }
 }
diff --git a/openbullet2-web-client/src/app/main/components/wordlists/wordlists.component.html b/openbullet2-web-client/src/app/main/components/wordlists/wordlists.component.html
@@ -19,7 +19,7 @@ <h6 class="color-inactive">
                 <ng-template pTemplate="end">
                     <button class="button button-secondary"
                         pTooltip="Clear filters" tooltipPosition="bottom"
-                        (click)="wordlistsDt.clear()">
+                        (click)="clearTable()">
                         Clear
                         <fa-icon [icon]="faFilterCircleXmark" [fixedWidth]="true"></fa-icon>
                     </button>
@@ -28,7 +28,9 @@ <h6 class="color-inactive">
                             spellcheck="false"
                             class="ml-2"
                             [style]="{ height: '33px' }"
-                            (input)="wordlistsDt.filterGlobal($any($event.target).value, 'contains')" placeholder="Search keyword" />
+                            [(ngModel)]="searchTerm"
+                            (input)="applyGlobalFilter()"
+                            placeholder="Search keyword" />
                     </span>
                 </ng-template>
             </p-menubar>
@@ -41,15 +43,20 @@ <h6 class="color-inactive">
                 [value]="wordlists"
                 [tableStyle]="{ 'min-width': '50rem', 'max-width': '100%' }"
                 [paginator]="true"
-                [rows]="10"
+                [rows]="tableRows"
+                [first]="tableFirst"
                 [resizableColumns]="true"
                 [scrollable]="true"
                 scrollDirection="horizontal"
                 columnResizeMode="expand"
                 [showCurrentPageReport]="true"
                 [rowsPerPageOptions]="[10, 25, 50]"
+                stateStorage="session"
+                stateKey="wordlists-table"
                 currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
                 [globalFilterFields]="['name', 'filePath', 'purpose', 'lineCount', 'wordlistType']"
+                (onPage)="onTablePageChange($event)"
+                (onStateRestore)="onTableStateRestore($event)"
                 >
                 <ng-template pTemplate="emptymessage">
                     <div class="m-3">
diff --git a/openbullet2-web-client/src/app/main/components/wordlists/wordlists.component.ts b/openbullet2-web-client/src/app/main/components/wordlists/wordlists.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { faFileLines, faFilterCircleXmark, faPen, faX } from '@fortawesome/free-solid-svg-icons';
-import { ConfirmationService, MenuItem, MessageService } from 'primeng/api';
+import { ConfirmationService, MenuItem, MessageService, TableState } from 'primeng/api';
+import { Table, TablePageEvent } from 'primeng/table';
 import { EnvironmentSettingsDto } from '../../dtos/settings/environment-settings.dto';
 import { CreateWordlistDto } from '../../dtos/wordlist/create-wordlist.dto';
 import { UpdateWordlistInfoDto } from '../../dtos/wordlist/update-wordlist-info.dto';
@@ -19,6 +20,9 @@ export class WordlistsComponent implements OnInit {
   envSettings: EnvironmentSettingsDto | null = null;
   wordlists: WordlistDto[] | null = null;
 
+  @ViewChild('wordlistsDt')
+  wordlistsDt: Table | undefined = undefined;
+
   @ViewChild('addWordlistComponent')
   addWordlistComponent: AddWordlistComponent | undefined = undefined;
 
@@ -34,6 +38,9 @@ export class WordlistsComponent implements OnInit {
   addWordlistModalVisible = false;
   uploadWordlistModalVisible = false;
   updateWordlistInfoModalVisible = false;
+  tableFirst = 0;
+  tableRows = 10;
+  searchTerm = '';
 
   wordlistTypes: string[] = [];
 
@@ -92,9 +99,36 @@ export class WordlistsComponent implements OnInit {
 
     this.wordlistService.getAllWordlists().subscribe((wordlists) => {
       this.wordlists = wordlists;
+      this.reapplyTableState();
     });
   }
 
+  onTablePageChange(event: TablePageEvent) {
+    this.tableFirst = event.first;
+    this.tableRows = event.rows;
+  }
+
+  onTableStateRestore(state: TableState) {
+    this.tableFirst = state.first ?? 0;
+    this.tableRows = state.rows ?? 10;
+
+    const globalFilter = state.filters?.['global'];
+    if (globalFilter && !Array.isArray(globalFilter) && globalFilter.value) {
+      this.searchTerm = String(globalFilter.value);
+    }
+  }
+
+  applyGlobalFilter() {
+    this.tableFirst = 0;
+    this.wordlistsDt?.filterGlobal(this.searchTerm, 'contains');
+  }
+
+  clearTable() {
+    this.searchTerm = '';
+    this.tableFirst = 0;
+    this.wordlistsDt?.clear();
+  }
+
   openAddWordlistModal() {
     this.addWordlistComponent?.reset();
     this.addWordlistModalVisible = true;
@@ -156,7 +190,12 @@ export class WordlistsComponent implements OnInit {
         summary: 'Deleted',
         detail: `Wordlist ${wordlist.name} was deleted${alsoDeleteFile ? ', along with its file' : ''}`,
       });
-      this.refreshWordlists();
+
+      if (this.wordlists !== null) {
+        this.wordlists = this.wordlists.filter((w) => w.id !== wordlist.id);
+      }
+
+      this.reapplyTableState();
     });
   }
 
@@ -181,4 +220,26 @@ export class WordlistsComponent implements OnInit {
       this.refreshWordlists();
     });
   }
+
+  private reapplyTableState() {
+    setTimeout(() => {
+      if (!this.wordlistsDt) {
+        return;
+      }
+
+      if (this.searchTerm) {
+        this.wordlistsDt.filterGlobal(this.searchTerm, 'contains');
+      }
+
+      const filteredCount = this.wordlistsDt.filteredValue?.length ?? this.wordlists?.length ?? 0;
+
+      if (filteredCount === 0) {
+        this.tableFirst = 0;
+        return;
+      }
+
+      const maxFirst = Math.floor((filteredCount - 1) / this.tableRows) * this.tableRows;
+      this.tableFirst = Math.min(this.tableFirst, maxFirst);
+    });
+  }
 }
